$(document).ready(function()
{
	init();
	
	Shadowbox.init(
	{
		displayCounter: false,
		displayNav: true,
		fadeDuration: 0.25,
	    overlayColor: "#181818",
		overlayOpacity: 1,
		resizeDuration: 0.25,
		showOverlay: true
	});
	
});


	// speed of animations
	var s = 0.7;
	
	// preload check projects (if pCount equals img.length, execute function)
	var pCount = 0;	
	
	// counter project nvigation
	var counter = 0;
	
	// total projects
	var elem = 0;
		

	/*
	 *   init site, check page
	 */
	var init = function()
	{
		
		// intro animations
		
		
		var v = $('#wrap_nav h1').width() + 35;
		$('#wrap_nav h2').css({left:v});
		
		if(!ie7)
		{
			$('.f1').animate({ opacity: 1 }, { duration: 1000*s, easing: 'linear'});
			$('.f2').delay( 1000*s ).animate({ opacity: 1 }, { duration: 600*s, easing: 'linear'});
			$('.f3').delay( 1250*s ).animate({ opacity: 1 }, { duration: 600*s, easing: 'linear'});
			$('.f4').delay( 1500*s ).animate({ opacity: 1 }, { duration: 1000*s, easing: 'linear'});
			$('.f5').delay( 2000*s ).animate({ opacity: 1 }, { duration: 1000*s, easing: 'linear'});

			$('#wrap_logo').animate( { left: 0}, { queue:false, duration: 2000*s, easing: 'easeOutCirc', complete:function(){
				$('#wrap_logo').css({'z-index':10});
			}});
			$('#wrap_nav').animate( { top: 0}, { queue:false, duration: 1500*s, easing: 'easeOutCirc'});
			
		}
		
			
		if( $('.desc p').length > 0 )
		{
			
			var txt = $('.desc p:last'); 
			var tempTxt = txt.html();
				txt.empty();
			var startTxt = tempTxt.length - 20;
		        	
			jQuery({count:startTxt}).delay(2000*s).animate({count:tempTxt.length},{
		        duration: 600 * s,
		        easing:'easeOutCirc',
		        step: function()
				{
					txt.html( tempTxt.substring( 0, Math.round(this.count) ) );
		        }
			});
			
		}
		
		
		// menu
		
		$('#wrap_nav h2 a').mouseenter(function(){
			
			var s = $('#wrap_nav h1').width();
			var e = s + 40;
						
			$('#wrap_nav h2').hide();
			$('#wrap_nav h1 span').animate( { opacity: 0}, { duration: 500, easing: 'linear'});
			$('#wrap_nav nav').show(0).css({left:s}).animate( { left: e}, { duration: 500, easing: 'easeOutCirc'});

		});
		
		$('#wrap_nav nav').mouseleave(function(){
			
			var s = $('#wrap_nav h1').width() + 95;
			var e = s - 60;
			
			$('#wrap_nav nav').hide();
			$('#wrap_nav h1 span').animate( { opacity: 1}, { duration: 500, easing: 'linear'});
			$('#wrap_nav h2').show(0).css({left:s}).animate( { left: e}, { duration: 500, easing: 'easeOutCirc'});
			
		});
		
	
		
		//home
		
		if($('#wrap_home_placeholder').length > 0)
		{
			
			imageLoad('#wrap_home_placeholder .holder', 1);
			
			showMenu();
			
		}
		
				
		// projects
		
		if($('#wrap_project').length > 0)
		{
			
			$('#wrap_nav h2 a').width(240);
			
			$('#wrap_project_placeholder .holder').hide();

			$('#wrap_project_up .holder').hide();

			$('#wrap_project_down .holder').hide();
			
			imageLoad('#wrap_project_placeholder .holder', 2);
			
			imageLoad('#wrap_project_up .holder', 2);
			
			imageLoad('#wrap_project_down .holder', 2);
					
		}
		
		
		//activity
		
		if($('#wrap_activity').length>0)
		{
			
			// events
			
			$('#activity h2 a').hover
			(
				function(e)
				{
					$(this).animate( { 'backgroundColor': '#999', color:'#333', paddingLeft:40}, { queue:false, duration: 300, easing: 'linear'});
				},
				
				function(e)
				{
					$(this).animate( { 'backgroundColor': '#555', color:'#999', paddingLeft:30}, { queue:false, duration: 300, easing: 'linear'});
				}
			);
			
			$('#activity div.tab').click(function(e){
				
				e.preventDefault();
				
				var i = $('#activity div.tab').index($(this));
				
				doAccordeon(i);
				
			});
			
			$('#activity h2 a').click(function(e){
				
				e.preventDefault();
				
				var i = $('#activity h2 a').index($(this));
				
				doAccordeon(i);
				
			});
			

			// image load
			
			imageLoad('#img1 .holder', 3);
			
			imageLoad('#img2 .holder', 3);
			
			showMenu();
				
		}
		
		
		// about
		
		if($('#wrap_about').length>0)
		{
			
			imageLoad('#img1 .holder', 4);
			
			imageLoad('#img2 .holder', 4);
			
			showMenu();
			
		}
		
		
		// press
		
		if($('#wrap_press').length>0)
		{
			
			// events
			
			$('#articles h1').hover
			(
				function(e)
				{
					$(this).animate( { 'backgroundColor': '#000', 'color': '#ccc'}, { queue:false, duration: 300, easing: 'linear'});
				},
				
				function(e)
				{
					$(this).animate( { 'backgroundColor': '#222', 'color': '#888'}, { queue:false, duration: 300, easing: 'linear'});
				}
			);
			
			// $('#articles div.article').click(function(e){
			// 				
			// 				e.preventDefault();
			// 				
			// 				var i = $('#articles div.article').index($(this));
			// 				
			// 				toggleNews(i);
			// 				
			// 			});
			
			$('#articles h1').click(function(e){
				
				e.preventDefault();
				
				var i = $('#articles h1').index($(this));
								
				toggleNews(i);
				
			});
			
			toggleNews(0);
			
			
			
			imageLoad('#img1 .holder', 5);
			
			imageLoad('#img2 .holder', 5);
			
			imageLoad('#img3 .holder', 5);
			
			showMenu();
			
		}
		
		
		// contact
		
		if($('#wrap_contact').length > 0)
		{
			
			$('textarea').css({width:300}).animate( { width:400}, {  duration:1000*s, easing: 'easeOutCirc'});
		
			$('input').not($(".btn")).each(function(i)
			{
				
				if($(this).hasClass('m'))
				{
					$(this).css({width:200}).delay(i*20).animate( { width:290}, {  duration:500*s, easing: 'easeOutCirc'});
				}
				else if($(this).hasClass('s'))
				{}
				else
				{
					$(this).css({width:300}).delay(i*20).animate( { width:400}, {  duration:500*s, easing: 'easeOutCirc'});
					
				}
			});
			
			initContact();
			
			showMenu();
			
		}
		
		
		
		// ref
		
		$("#ref a").attr("target","_blank");
		
		$('#ref').hover(
			
			function(e){
				$(this).animate( {  color:'#ff0', width:65}, { queue:false, duration: 300, easing: 'easeOutCirc'});
			},
			
			function(e){
				$(this).animate( {  color:'#333', width:20}, { queue:false, duration: 300, easing: 'easeOutCirc'});
			}
		);
		
	}
	
	
	/*
	 *   home slideshow
	 */
	var initHome = function()
	{
		
		var slideshowCounter = 0;
		
		var val;
		
		var total = $('#wrap_home_placeholder .holder img').length;
		
		
		setInterval(function() 
		{
			
			slideshowCounter++;
	
			val = -427 * slideshowCounter;

			if(slideshowCounter == total)
			{
				
				slideshowCounter = 0;
				
				$('#wrap_home_placeholder .holder').animate( { top:0}, { duration: 4000, easing: 'easeOutCirc'});
				
			}
			else
			{
				
				$('#wrap_home_placeholder .holder').animate( { top: val}, { duration: 3000, easing: 'easeInOutQuint'});
				
			}

		},
		6000);
		
	}
	
	
	/*
	 *   add project navigation
	 */
	var initProject = function()
	{
				
		// check all image loaded?
		
		var doCheck = function()
		{			
			
			pCount++; 
						
			if(pCount !== 3)
			{
				return;
			}
			else
			{
				elem = $('#wrap_project_placeholder .holder img').length - 1;
				
				counter = 0;
				
				init();
			}	
		}
		
		
		//vars
		
		var v1 = 60; 
		var v2 = 426; 
		var v3 = 213;
					
		var iv1, iv2, iv3, imgElements, imgCounter, widthImgHolder, xhr;
		
		var init = function()
		{			
			
			// preset
			
			iv1 = -v1 * (elem - 1);
			iv2 = -v2 * elem;
			iv3 = -v3 * (elem + 1);
			
			$('#wrap_project_placeholder .holder').css( { top: iv2+'px'}).show();

			$('#wrap_project_up .holder').css( { top: iv1+'px'}).show();

			$('#wrap_project_down .holder').css( { top: iv3+'px'}).show();


			// events

			$('#wrap_project_up').hover(function(){
				$('.next_project').toggleClass("hover");	
			});

			$('#wrap_project_down').hover(function(){
				$('.prev_project').toggleClass("hover");	
			});

			$('#wrap_project_placeholder').hover(function(){
				$('#show_info').toggleClass("hover");	
			});

			$('#wrap_project_content a.c').hover(function(){
				$('#show_info').toggleClass("hover");	
			});

			$('.next_project, #wrap_project_up').click(function(e){

				e.preventDefault();

				if(counter>0){
					counter--;
				}

				checkArr();

			});

			$('.prev_project, #wrap_project_down').click(function(e){

				e.preventDefault();

				if(counter<elem){
					counter++;
				}

				checkArr();

			});

			$('#wrap_project_content a.l').click(function(e){

				e.preventDefault();

				if(imgCounter>0){
					imgCounter--;
				}

				setImageProject();
				checkArrImg();
			});

			$('#wrap_project_content a.r').click(function(e){

				e.preventDefault();

				if(imgCounter<imgElements){
					imgCounter++;
				}

				setImageProject();
				checkArrImg();
			});

			$('#show_info, #wrap_project_placeholder, #wrap_project_content a.c').click(function(e)
			{
				e.preventDefault();

				toggleProjectDetail();

			});
			
			
			// set

			showMenu();
						
			checkArr();
			
			setTimeout( toggleProjectDetail, 1500 );
			
		}
		
		
		// functions
		
		var toggleProjectDetail = function()
		{
			
			if($('#wrap_project_content').css('display') == 'block')
			{
				
				$('#wrap_project_content').slideUp(200);
				
				$('#wrap_project_placeholder .holder_hor').fadeOut();
				
				//$('#wrap_project_placeholder .holder').stop(true, true).css({opacity:0}).delay(250).animate({ opacity:1 }, { duration:500, easing: 'linear'});
				
				//$('#show_info').stop(true, true).fadeIn();
				
				if($('#show_info').hasClass('fr')){
					$('#show_info').text('Détails');
				}
				else{
					$('#show_info').text('Details');
				}
				
				checkArr();
				
			}
			else
			{
				
				$('#wrap_project_content').slideDown(400);
				
				$('#wrap_project_content a.l').hide();
				
				$('#wrap_project_placeholder .holder_hor').css({left:0}).show();
				
				if(ie7){
					$('#wrap_project_content .project').find('div.table').css({'display':'block'});
				}
				
				//$('.next_project, #wrap_project_up').fadeOut();
				
				//$('.prev_project, #wrap_project_down').fadeOut();
				
				// if($('#show_info').hasClass('fr')){
				// 	$('#show_info').text('');	
				// }
				// else{
				// 	$('#show_info').text('');
				
				//$('#show_info').stop(true, true).fadeOut();
				
				$('#show_info').text('');
				
				
				
			}
		}
		
		var checkArr = function ()
		{
			
			if(counter==(elem)){
				$('.prev_project').fadeOut(200);
				$('#wrap_project_down').fadeOut(200);
			}else{
				$('.prev_project').fadeIn(200);
				$('#wrap_project_down').fadeIn(200);
			}
			
			if(counter==0){
				$('.next_project').fadeOut(200);
				$('#wrap_project_up').fadeOut(200);
			}else{
				$('.next_project').fadeIn(200);
				$('#wrap_project_up').fadeIn(200);
			}
			
			
			
			// set number
			
			var numb = counter+1;
			
			var txt = numb +'<span>/'+(elem+1)+'</span>';
			
			$('#wrap_project_r h3').html(txt);
			
			
			
			// set small info
			
			$('#wrap_project_r #infoHolder div').hide();
			
			$($('#wrap_project_r #infoHolder div').get(counter)).fadeIn();
		
		
			// set big info
			
			$('#wrap_project_content .project').hide();
			
			$($('#wrap_project_content .project').get(counter)).show();
			
			
			if(!ie7)
			{
				$($('#wrap_project_content .project').get(counter)).find('div.table').css({opacity:0});

				$($('#wrap_project_content .project').get(counter)).find('div.table').each(function(i){
					$(this).delay( 100*i ).animate({ opacity: 1 }, { duration: 1000, easing: 'linear'});
				});
			}


			
			
			
			// reset: reposition + hide holder image holder
			
			$('#wrap_project_placeholder .holder_hor').css({left:0, display:'none'});
			
			
			//set active id
			
			var id = $($('#wrap_project_r #infoHolder div').get(counter)).attr( 'data-id' );
						
			// ajax call -> get project images
			
			url = '/sys/control/ajax.php';
			
			var params = 
			{
				'id': id,
				  
				'control':'getProjectImages'
			};
			

			$.ajax({type: 'POST', url: url, data: params, success: function(data)
			{
				// add images to the DOM
				$('#wrap_project_placeholder .holder_hor').html(data);
								
				// reset image counter
				imgCounter = 0;
				
				// check total images
				imgElements = $('#wrap_project_placeholder .holder_hor img').length - 1;
				
				// set width image holder
				widthImgHolder = (imgElements+1) * 640;
				
				$('#wrap_project_placeholder .holder_hor').css({width:widthImgHolder});
			
				
				// after project loaded, do animation
				setProject()
				
				// set navigation arrows
				checkArrImg();
				

			}});
			
			
			// remove key events 
			removeKeyHandlers();
			
			// add key events
			addKeyHandlers();
			

		}
		
		var setProject = function ()
		{				
			var ev1 = -v1 * (counter-1);
			var ev2 = -v2 * counter;
			var ev3 = -v3 * (counter+1);
			
			$('#wrap_project_placeholder .holder').stop().animate( { top: ev2+'px'}, { duration: 1000, easing: 'easeOutCirc', complete:function()
			{
				if($('#wrap_project_content').css('display') == 'block'){
					$('#wrap_project_placeholder .holder_hor').css({display:'block'});
				}
			}});
			$('#wrap_project_up .holder').stop().animate( { top: ev1+'px'}, { duration: 1000, easing: 'easeOutCirc'});
			$('#wrap_project_down .holder').stop().animate( { top: ev3+'px'}, { duration: 1000, easing: 'easeOutCirc'});
		}
		
		var checkArrImg = function ()
		{
			
			if(imgCounter==(imgElements)){
				$('#wrap_project_content a.r').stop(true, true).fadeOut();
			}else{
				$('#wrap_project_content a.r').stop(true, true).fadeIn();
			}

			if(imgCounter==0){
				$('#wrap_project_content a.l').stop(true, true).fadeOut();
			}else{
				$('#wrap_project_content a.l').stop(true, true).fadeIn();
			}
			
		}
		
		var setImageProject = function ()
		{
			var val = -640*imgCounter;
			$('#wrap_project_placeholder .holder_hor').stop(true, true).animate( { left: val+'px'}, { duration: 1000, easing: 'easeOutCirc'});
		}
		

		/* 
		 *  define PUBLIC
		 */
		
		return {
			doCheck:doCheck,
			toggleProjectDetail:toggleProjectDetail
		};
					
	}();
	
	
	/*
	 *   contact page
	 */
	var initContact = function ()
	{
		
		/* START no placeholder support */
		
		
		// focus/blur : compare value with attribute 
		
		$('[placeholder]').focus(function() 
		{
			var input = $(this);

			if (input.val() == input.attr('placeholder')) 
			{
				input.val('');
				input.removeClass('placeholder');
			}
			
		}).blur(function() 
		{
			var input = $(this);
			
			if (input.val() == '' || input.val() == input.attr('placeholder')) 
			{
				input.addClass('placeholder');
				input.val(input.attr('placeholder'));
			}
			
		}).blur();
		
		
		/* END no placeholder support */
		
		
		$('#wrap_contact form').submit(function()
		{
			
			var error = false;
			
			$(this).find('[placeholder]').each(function() 
			{
				var input = $(this);
								
				if (input.val() == input.attr('placeholder'))
				{
					error = true;
					input.focus();
					return false;
				}
			});
					
			
			if($("#wrap_contact form").valid() && error == false)
			{				
				url = '/sys/control/ajax.php';

				var params = 
				{
					'company': $('#company').val(), 
					'surname':$('#surname').val(), 
					'name':$('#name').val(), 
					'adress':$('#adress').val(), 
					'zip':$('#zip').val(), 
					'city':$('#city').val(), 
					'email':$('#email').val(),
					'message':$('#message').val(), 
					'control':'sendForm'
				};

				$.ajax({type: 'POST', url: url, data: params, success: function(data)
				{
					
					$('div.desc').hide().fadeIn();
					
					if(data == 1)
					{
						validator.resetForm();
						
						$('#company').val('');
						$('#surname').val('');
						$('#name').val('');
						$('#adress').val('');
						$('#zip').val('');
						$('#city').val('');
						$('#email').val('');
						$('#message').val('');
						
						$('[placeholder]').blur();
						
						if($('div.desc').hasClass('fr')){
							$('div.desc').html('<p>Merci pour votre message.<br/> Nous vous répondrons dès que possible.</p>');
						}else{
							$('div.desc').html('<p>Bedankt voor uw bericht.<br/> Wij zullen u zo spoedig mogelijk antwoorden.</p>');
						}
					}
					else
					{
						if($('div.desc').hasClass('fr')){
							$('div.desc').html('<p>Il y avait une erreur, s\'il vous plaît essayer à nouveau.</p>');
						}else{
							$('div.desc').html('<p>Er heeft zich een fout voorgedaan, probeer opnieuw aub.</p>');
						}
					}
				}});
			}

		  	return false;
		
		});
		
		
		validator = $("#wrap_contact form").validate(
		{ 
			rules: 
			{ 
				company:{ required: true },
				surname:{ required: true }, 
				name: 	{ required: true }, 
				adress: { required: true },
				zip: 	{ required: true },
				city: 	{ required: true },
				email: 	{ required: true, email: true }, 
				message:{ required: true }
			}, 
			messages: 
			{
				company: " ", 
				surname: " ",
				name: " ", 
				adress: " " ,
				zip: " ", 
				city: " ", 
				email: " ",
				message: " "
			} 
		});

		//check valid boolean -> $("form#contactform").valid()
		//reset -> validator.resetForm();
		
		

	}
	
	
	/*
	 *   image preload
	 */
	var imageLoad = function (section, page)
	{
		
		$(section).hide();

		$(section).parent().addClass('preloader');

		var i = 0;

		var imgs = $(section+' img').length;
		
		$(section + ' img').load(function(){
			i++;
							
			if(i >= imgs) 
			{
				$(section).show();

				$(section).parent().removeClass('preloader');

				switch(page)
				{
					case 1: //home
							initHome();
							break;

					case 2: //projects	
							initProject.doCheck();
							break;
				}
			}
		}).each(function()
		{
			// cached images don't fire load sometimes, so we reset src.
			if (this.complete || this.complete === undefined)
			{
				var src = this.src;
				// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
				// data uri bypasses webkit log warning (thx doug jones)
				this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
				this.src = src;
			}	
		});

	}
	
	
	/*
	 *   show menu
	 */
	var showMenu = function ()
	{
		
		//alert('hit');
		
		var v = $('#wrap_nav h1').width() + 35;
		
		$('#wrap_nav h2').delay( 1500*s ).hide();
		
		$('#wrap_nav h1 span').delay( 1500*s ).animate( { opacity: 0}, { duration: 500, easing: 'linear'});
		
		$('#wrap_nav nav').delay( 1500*s ).show(0).css({left:v-35}).animate( { left: v}, { duration: 500, easing: 'easeOutCirc'});
	}
	
	
	/*
	 *  accordeon
	 */
	var doAccordeon = function (i)
	{
		
		$('#activity div.tab').each(function(j)
		{
			if(i !== j)
			{
				$(this).slideUp();
				
				$($('#activity h2 a').get(j)).bind(
				{
					mouseleave:function(e){
						$(this).animate( { 'backgroundColor': '#555', color:'#999', paddingLeft:30 }, { queue:false, duration: 300, easing: 'linear'});
					}
				});
				
				$($('#activity h2 a').get(j)).animate( { 'backgroundColor': '#555', color:'#999', paddingLeft:30 }, { queue:false, duration: 300, easing: 'linear'});
				
			}
			else
			{
										
				if($(this).css('display') == 'block')
				{
					$(this).slideUp();
					$($('#activity h2 a').get(j)).bind({
						mouseleave:function(e){
							$(this).animate( { 'backgroundColor': '#555', color:'#999', paddingLeft:30 }, { queue:false, duration: 300, easing: 'linear'});
						}
					});
					
					$($('#activity h2 a').get(j)).animate( { 'backgroundColor': '#555', color:'#999', paddingLeft:30}, { queue:false, duration: 300, easing: 'linear'});
					
				}
				else{
					$(this).slideDown();
					$($('#activity h2 a').get(j)).unbind("mouseleave");
				}	
			}
		});
	}
	
	
	/*
	 *
	 */
	var toggleNews = function (i)
	{

		$('#articles div.article').each(function(j)
		{
			//console.log(j);
			
			if(i !== j)
			{
				$(this).slideUp();

				$($('#articles h1').get(j)).bind(
				{
					mouseleave:function(e){
						$(this).animate( { 'backgroundColor': '#222', 'color': '#888' }, { queue:false, duration: 300, easing: 'linear'});
					}
				});

				$($('#articles h1').get(j)).animate( { 'backgroundColor': '#222', 'color': '#888'  }, { queue:false, duration: 300, easing: 'linear'});

			}
			else
			{
				
				//console.log($(this).css('display'));
				
				if($(this).css('display') == 'block')
				{
					$(this).slideUp();
					$($('#articles h1').get(j)).bind({
						mouseleave:function(e){
							$(this).animate( { 'backgroundColor': '#222', 'color': '#888' }, { queue:false, duration: 300, easing: 'linear'});
						}
					});

					$($('#articles h1').get(j)).animate( { 'backgroundColor': '#222', 'color': '#888' }, { queue:false, duration: 300, easing: 'linear'});

				}
				else{
					$(this).slideDown();
					$($('#articles h1').get(j)).css( { 'backgroundColor': '#000', 'color': '#ccc'});
					$($('#articles h1').get(j)).unbind("mouseleave");
					
				}	
			}
		});
	}
	
	
	/*
	 *   add key events (left/right arrows)
	 */
	var addKeyHandlers = function ()
	{	
		$(document).keydown(function(e)
		{
			e.preventDefault();
			
			var keyCode = e.keyCode || e.which,
			arrow = {left: 37, up: 38, right: 39, down: 40, enter: 13, esc: 27};
			
			
			if($('#wrap_project_content').css('display') == 'block')
			{
				switch (keyCode) 
				{
					case arrow.left:
					
									$('#wrap_project_content a.l').trigger('click');
									break;

					case arrow.right:
									$('#wrap_project_content a.r').trigger('click');
	  								break;

					case arrow.up:
									if(counter>0) $('.next_project').trigger('click');
									break;

					case arrow.down:
									if(counter<elem) $('.prev_project').trigger('click');
									break;
									
					case arrow.esc:
									initProject.toggleProjectDetail();
									break;
				}
			}
			else
			{
				switch (keyCode) 
				{

					case arrow.up:
									if(counter>0) $('.next_project').trigger('click');
									break;

					case arrow.down:
									if(counter<elem) $('.prev_project').trigger('click');
									break;
					
					case arrow.enter:
									initProject.toggleProjectDetail();
									break;
				}
			}	
		});
	};


	/*
	 *   remove key events (left/right arrows)
	 */
	var removeKeyHandlers = function ()
	{
		$(document).unbind('keydown');
	};