$(document).ready(function() {
    targetDiv = $('#portfolio');

    $('#next').live("click",function () {
        $("#loading").show();
        var get = $('#next a').attr('href');
        var what = get.replace(siteUrl, '');
        getPortfolio(what);
		
        return false;
    });
    $('#prev').live("click",function () {
        $("#loading").show();
        var get = $('#prev a').attr('href');
        var what = get.replace(siteUrl, '');
        getPortfolio(what);
        return false;
    });


    // Home link
    $('.navtl').live("click",function() {
        clearActive();
        $('#extranav .navtl').addClass('active');
        stopAnimation();
        resizeback();
        return false;
    });

    // about link
    $('.navtr').live("click",function() {
        clearActive();
        $('#extranav .navtr').addClass('active');
        stopAnimation();
        $("#content").animate({
            marginLeft: "-960px",
            marginTop: "0px",
            marginRight: "0px"
        });
        resize();
        return false;
    });

    // portfolio link
    $('.navbl').live("click",function() {
        clearActive();
        $('#extranav .navbl').addClass('active');
        stopAnimation();
        $("#content").animate({
            marginLeft: "0px",
            marginTop: "-444px",
            marginRight: "0px"
        });
        resize();
        return false;
    });

    // contact link
    $('.navbr').live("click",function() {
        clearActive();
        $('#extranav .navbr').addClass('active');
		stopAnimation();
        $("#content").animate ( {
                marginLeft: "-960px",
                marginTop: "-444px",
                marginRight: "0px"
        })
        resize();
        return false;
    });

    // logo
    $('#titel').live("click",function() {
        clearActive();
        $('#extranav .navtl').addClass('active');
		stopAnimation();
        resizeback();
        return false;
    });



    $('label').hide();
    $('#naam').autofill({
        value: 'Naam',
        defaultTextColor: '#000',
        activeTextColor: '#000'
    });
    $('#postadres').autofill({
        value: 'E-mail',
        defaultTextColor: '#000',
        activeTextColor: '#000'
    });
    $('#vraag').autofill({
        value: 'Vraag / opmerking',
        defaultTextColor: '#000',
        activeTextColor: '#000'
    });




     $('#inpagehome').hover(function(){
         $('#extranav').css('backgroundPosition', '-78px 0px');
         },function(){
             $('#extranav').css('backgroundPosition', '0px 0px');
         }
     )


     $('#inpageover').hover(function(){
         $('#extranav').css('backgroundPosition', '-156px 0px');
         },function(){
             $('#extranav').css('backgroundPosition', '0px 0px');
         }
     )
     $('#inpageportfolio').hover(function(){
         $('#extranav').css('backgroundPosition', '-234px 0px');
         },function(){
             $('#extranav').css('backgroundPosition', '0px 0px');
         }
     )
     $('#inpagecontact').hover(function(){
         $('#extranav').css('backgroundPosition', '-312px 0px');
         },function(){
             $('#extranav').css('backgroundPosition', '0px 0px');
         }
     )


 
});

function clearActive() {
    $('#extranav li a').each(function(index) {
        $(this).removeClass('active');
      });

}

function stopAnimation() {
	$('#home').stop();
	$('#about').stop();
	$('#portfolio').stop();
	$('#contact').stop();
	$('#content').stop();
	$('.block').stop();	
	$('#vraag').stop();	
	$('.visual').stop();	
	$('.ajaxvisual').stop();	
}

function resize() {
     $("#home").animate ({
        top: "0px",
        left: "0px",
        height: "444px",
        width: "960px"
    }).removeClass('navtl')
    $("#about").animate ({
        top: "0px",
        left: "960px",
        height: "444px",
        width: "960px"
    }) .removeClass('navtr')
    $("#portfolio").animate ({
        top: "444px",
        left: "0px",
        height: "444px",
        width: "960px"
    }).removeClass('navbl')
    $("#contact").animate ({
        top: "444px",
        left: "960px",
        height: "444px",
        width: "960px"
    }) .removeClass('navbr')
    $('#vraag').animate({
        height: "250px"
    })
    $('.visual').animate({
        width: "658px"
    })
    $('.ajaxvisual').animate({
        width: "658px"
    })
    $('.block').animate ({
        height: "444px",
        width: "960px"
    })
}
function resizeback() {
    $("#content").animate ( {
                marginLeft: "-480px",
                marginTop: "-222px",
                marginRight: "0px"
        })
     $("#home").animate ({
        top: "222px",
        left: "480px",
        height: "222px",
        width: "480px"
    }).addClass('navtl')
    $("#about").animate ({
        top: "222px",
        left: "960px",
        height: "222px",
        width: "480px"
    }) .addClass('navtr')
    $("#portfolio").animate ({
        top: "444px",
        left: "480px",
        height: "222px",
        width: "480px"
    }).addClass('navbl')
    $("#contact").animate ({
        top: "444px",
        left: "960px",
        height: "222px",
        width: "480px"
    }) .addClass('navbr')

    $('#vraag').animate({
        height: "55px"
    })
    $('.ajaxvisual').animate({
        width: "65%"
    })
    $('.visual').animate({
        width: "65%"
    })
    $('.block').animate ({
        height: "222px",
        width: "480px"
    })
}

function getPortfolio(what) {
    targetDiv = $('#portfolio');
    $.get(siteUrl+"portfolio.php",{
              item: what
        }, function(result) {
            targetDiv.hide();
            targetDiv[0].innerHTML = result;
            targetDiv.fadeIn('fast');
            $("#loading").hide();
    });
}

$(function(){
    $('#content a').not('#pfnav a').live("click",function(){
        window.open(this.href);
        return false;
    });
});

// Auto-Fill Plugin
// Written by Joe Sak http://www.joesak.com/2388/11/19/a-jquery-function-to-auto-fill-input-fields-and-clear-them-on-click/
(function($){$.fn.autofill=function(options){var defaults={value:'First Name',defaultTextColor:"#000000",activeTextColor:"#333"};var options=$.extend(defaults,options);return this.each(function(){var obj=$(this);obj.css({color:options.defaultTextColor}).val(options.value).focus(function(){if(obj.val()==options.value){obj.val("").css({color:options.activeTextColor});}}).blur(function(){if(obj.val()==""){obj.css({color:options.defaultTextColor}).val(options.value);}});});};})(jQuery);