$().ready(function() {

	// truckje met de thumbnails enzo
	$.preload( '.viewport img', {
	    find: '-87x44.',
	    replace: '.',
	    placeholder:true,
	});

		// Oranje portfolio balk die met je mee scrolled	
		var $scrollingDiv = $(".home > #portfolio_scrollbalk, .tag > #portfolio_scrollbalk");
 		
 		// de balk op 160px stoppen zodat ie niet over de header heengaat
		$(window).scroll(function(){	
				if($(window).scrollTop() > 160)
				{
					// als de bovenkant van de browser 160px wordt weggescrolled, dan balk meescrollen
					$scrollingDiv
						.stop()
						.animate({"marginTop": ($(window).scrollTop())-160 + "px"}, "slow" );
				}	
				else
				{
					// als je weer omhoog scrolled de balk op zijn oude plek zetten
					$scrollingDiv
						.stop()
						.animate({"marginTop": "0px"}, "slow" );
				};
		});
			

		// bij het aanklikken van portfolio item, scroll dan met scrollTo plugin naar de juiste div
	  $("#portfolio_scrollbalk_950 #porfolio_inner > ul > li > a").click(function() {
	    var an = "#view" + $(this).attr("id");
		var pos = $(an).offset(); 
		$.scrollTo(pos.top-100, {duration: 800, axis:"y", });
	  });
	  
		$("#portfolio_scrollbalk_950 > img#pijlrechts").click(function(){
			stop();
			 $("#porfolio_inner").scrollTo("+=100px",{duration:300, axis:'x'});
		});
		
		$("#portfolio_scrollbalk_950 > img#pijllinks").click(function(){
			stop();
			 $("#porfolio_inner").scrollTo("-=100px",{duration:300, axis:'x'});
		});
	  // als je op de top knop drukt, browser weer naar boven scrollen
	  $(".top").click(function(){
	  	$.scrollTo(0,{duration:800});
	  });
	  
	  // naar volgende item scrollen, locatie wordt berekend dmv de huidige aangeklikte div
	   $(".next").click(function(){
	    var pos = $(this).offset();  
	  	var toppos = pos.top+350;
	  	$.scrollTo(toppos + 'px',{duration:800});
	  });
	  
	   // naar vorige item scrollen, locatie wordt berekend dmv de huidige aangeklikte div
	    $(".prev").click(function(){
	    var pos = $(this).offset();  
	  	var toppos = pos.top-910;
	  	$.scrollTo(toppos + 'px',{duration:800});
	  });
	   
	// set twitter blokje margin-top afhankelijk van de text   
  	element_height = $("#header > #header_950 > #twitter > p").height();
  	top_margin = (55 - element_height)/2;
  	$("#header > #header_950 > #twitter > p").css("margin-top",top_margin + "px");

	// twittervogeltje laten wiebelen
	$("#header > #header_950 > #twitter").mouseover(function(){
		$("#header > #header_950 > #twitter img").attr("src","/wp-content/themes/developr/images/tweeter2.png");
	});
	
	// twittervogeltje weer terug
	$("#header > #header_950 > #twitter").mouseout(function(){
		$("#header > #header_950 > #twitter img").attr("src","/wp-content/themes/developr/images/tweeter.png");
	});
	
	//portfolio titel click
	 $(".storytitle, .viewport").click(function(){
	 	var sel_element = $(this).attr('class');
	 	if(sel_element == "viewport")
	 	{
	 		var dest = "#click" + $(this).attr("title");
		 	var info = "#info"  + $(this).attr("title");
	 	}
	 	else
	 	{
		 	// element selecteren aan de hand van geklikte titel
		 	var dest = "#click" + $(this).attr("id");
		 	var info = "#info"  + $(this).attr("id");
	 	}
	 	// kijken in welke state de titelbalk is
		if($(info).css("margin-top")=='-66px')
		{
			// balk staat nog op de begin state, dus omhoog animaten
			$(info).animate({
				marginTop:'-166',	
			}, 500);
  		}
  		else
  		{
  			// balk weer terug naar oude plek
  			$(info).animate({
				marginTop:'-66',
			}, 500);
  		}

  		// content met omschrijving meeschuiven.
  		$(dest).animate({
			height: 'toggle',
			
		}, 500);
  		
	});
	
	// wit pijltje naast de titel animeren afhankelijk van of de viewport is uitgeklapt
  	$(".storytitle").mouseover(function(){
  		var dest = "#afb" + $(this).attr("id");
  		var info = "#info"  + $(this).attr("id");
  		if($(info).css("margin-top")=='-166px')
		{
			$(dest).attr("src","/wp-content/themes/developr/images/titel_pijl_hoverdown.png");
		}
		else
		{  		
  			$(dest).attr("src","/wp-content/themes/developr/images/titel_pijl_hover.png");
  		}
  	}); 
  	
  	$(".storytitle").mouseout(function(){
  		var dest = "#afb" + $(this).attr("id");
  		$(dest).attr("src","/wp-content/themes/developr/images/titel_pijl.png");
  	}); 	
	
});