// JavaScript Document
$(document).ready(function() {
	// slideshow
	var totalSlides = 0;
	var currentSlide = 1;
	var contentSlides = "";
	
	$("#slideshow-previous").click(showPreviousSlide);
	$("#slideshow-next").click(showNextSlide);
 
	var totalWidth = 0;
	contentSlides = $(".slideshow-content");
	contentSlides.each(function(i){
		totalWidth += this.clientWidth;
		totalSlides++;
	});
	$("#slideshow-holder").width(totalWidth);
	$("#slideshow-scroller").attr({scrollLeft: 0});
	updateButtons();
	
	function showPreviousSlide() {
		currentSlide--;
		updateContentHolder();
		updateButtons();
	}
	
	function showNextSlide() {
		currentSlide++;
		updateContentHolder();
		updateButtons();
	}
	
	function updateContentHolder() {
		var scrollAmount = 0;
		contentSlides.each(function(i){
			if(currentSlide - 1 > i) {
				scrollAmount += this.clientWidth;
			}
		});
		$("#slideshow-scroller").animate({scrollLeft: scrollAmount}, 1000);
	}
	
	function updateButtons() {
		if(currentSlide < totalSlides) {
			$("#slideshow-next").show();
		} else {
			$("#slideshow-next").hide();
		}
		if(currentSlide > 1) {
			$("#slideshow-previous").show();
		} else {
			$("#slideshow-previous").hide();
		}
	}
	
	
	// show/hide	
	function showWerk() {
		$('#portfolio').animate({left:'0'}, 500);
		$('#werk_knop').css({'color' : '#690'});
	};	
	
	function hideWerk() {
		$("#portfolio").animate({left:'1000px'}, 500);
		$('#werk_knop').css({'color' : '#666'});
	};
	
	function showDiensten() {
		$("#office").animate({top:'0'}, 500);
		$("#diensten").animate({left:'125px'}, 500);
		$("#functies").animate({left:'125px'}, 500);	
		$('#diensten_knop').css({'color' : '#690'});
	};	
	
	function hideDiensten() {
		$("#office").animate({top:'300px'}, 500);
		$("#diensten").animate({left:'-300px'}, 500);
		$("#functies").animate({left:'1000px'}, 500);	
		$('#diensten_knop').css({'color' : '#666'});
	};
	
	function showKlanten() {
		$("#network").animate({top:'0'}, 500);
		$("#klanten").animate({top:'0'}, 500);
		$("#foto").animate({left:'80px'}, 500);		
		$('#klanten_knop').css({'color' : '#690'});	
		$("#bijschrift_klanten").animate({bottom:'10px'}, 500);	
	};
	
	function hideKlanten() {		
		$("#network").animate({top:'-300px'}, 500);
		$('#klanten_knop').css({'color' : '#666'});
		$("#foto").animate({left:'-300px'}, 500);
		$("#klanten").animate({top:'300px'}, 500);
		$("#bijschrift_klanten").animate({bottom:'-20px'}, 500);	
	};
	
	function showOver() {
		$('#america').animate({top:'0'}, 500);	
		$('#over_knop').css({'color' : '#690'});
		$("#yoshuatree").animate({top:'50px'}, 500);						
		$("#over").animate({top:'0'}, 500);											
		$("#bijschrift_over").animate({bottom:'10px'}, 500);	
	};	
	
	function hideOver() {	
		$('#america').animate({top:'-300px'}, 500);					
		$('#over_knop').css({'color' : '#666'});
		$("#bijschrift_over").animate({bottom:'-20px'}, 500);	
		$("#over").animate({top:'300px'}, 500);										
		$("#yoshuatree").animate({top:'-300px'},500);
	};
	
	// show klanten	
	$('#klanten_knop').click(function() {
		hideDiensten();		
		hideOver();		
		hideWerk();
		showKlanten();
	});	
	
	// show diensten				
	$('#diensten_knop').click(function() {																			
		hideOver();		
		hideWerk();
		hideKlanten();			
		showDiensten();		
	});
	
	// show over				
	$('#over_knop').click(function() {																		
		hideWerk();
		hideKlanten();			
		hideDiensten();	
		showOver();		
	});
	
	// show werk
	$("#werk_knop").click(function() {																			
		hideOver();		
		hideKlanten();			
		hideDiensten();
		showWerk();					
	});
	
	
	
	// hide all
	$("#mikey").click(function() {																			
		hideOver();		
		hideKlanten();			
		hideDiensten();
		hideWerk();					
	});
});