// JavaScript Document

$(document).ready(function(){
	
	function positionPrePage() {
		var currentPosTop = (document.URL);
		var mySplitResult = currentPosTop.split("#");
		currentPosTop = "#"+mySplitResult[1];
		
		if(currentPosTop != "#undefined"){
			var offsetItem = $(currentPosTop).offset();
			var posItem = offsetItem.top;
			$('html,body').animate({
				scrollTop: posItem - 30
			}, 1000);
		}		
	}
	
	function linkPositionAdd(){
		$('#footer .sub li a').click(function(e) {
			e.preventDefault();
			var orgURL = $(this).attr('href');
			var orgClass = $(this).attr('class');
			window.location.href = orgURL+"#"+orgClass;
		});
	}
	
	positionPrePage();
	linkPositionAdd();
	
	var windowHeight = window.innerHeight;

	var contentHeight = $("#mainframe").height() + 120 + $("#footer").height();

	if(contentHeight < windowHeight){
		
		$('#mainframe').css('height', function() {
  			var naam = (window.innerHeight - 120 - $("#footer").height()) + 'px';
			return naam;
		});		
	}
	
	$('#hoofdmenu li.notActive .backgrDonker').css('display','block');
	$('#hoofdmenu li.notActive .backgrDonker').animate({ opacity: 0 },0);
	
	$('#hoofdmenu li.notActive').hover(function(){
			$("> .backgrDonker", this).stop().animate({"opacity": "1"}, "medium");
	},function(){
			$("> .backgrDonker", this).stop().animate({"opacity": "0"}, "medium");
	});
	
	$('#hoofdmenu li').click(function(){
		window.location.href = $('a',this).attr('href');
	});
	
	$('#submenu li.Active').hover(function(){
			$("> .backgrDonker", this).fadeIn();
	},function(){
		
	});
	
	$('span.darkLeft').each(function(){
    	$(this).width($(this).parent("li").width() + 9);
	});
	$('span.left').each(function(){
    	$(this).width($(this).parent("li").width() + 9);
	});
	
	if($('#home').length){
		$('#recentPortfolio li .foto .kleur').css('display','block');
		$('#recentPortfolio li .foto .kleur').animate({ opacity: 0 },0);
		$('#recentPortfolio li .link .kleur').css('display','block');
		$('#recentPortfolio li .link .kleur').animate({ opacity: 0 },0);
	
		$('#recentPortfolio li').hover(
			function(){
				$("> .foto .kleur", this).stop().animate({"opacity": "1"}, "medium");
				$("> .link .kleur", this).stop().animate({"opacity": "1"}, "slow");
			},
			function(){
				$("> .foto .kleur", this).stop().animate({"opacity": "0"}, "medium");
				$("> .link .kleur", this).stop().animate({"opacity": "0"}, "slow");
			}
		);
		
		$('#recentPortfolio li').click(function(e){
			if(e.target.tagName != 'A') {
				window.location.href = $('a.link',this).attr('href');
			}
		});
		
		$('#home .subItem .backgrFoto ul.homeFotos li').click(function(e){
			if(e.target.tagName != 'A') {
				window.location.href = $('.link a',this).attr('href');
			}
		});	

		$('#home .subItem .backgrFoto ul.homeFotos li .kleur').css('display','block');
		$('#home .subItem .backgrFoto ul.homeFotos li .kleur').animate({ opacity: 0 },0);
		
		$('#home .subItem .backgrFoto').hover(
			function(){
				$('#home .subItem .backgrFoto ul.homeFotos li .kleur').stop().animate({"opacity": "1"}, "slow");
			},
			function(){
				$('#home .subItem .backgrFoto ul.homeFotos li .kleur').stop().animate({"opacity": "0"}, "slow");
			}
		);
		
		var activeFoto = 0;
		var totalFotos = $("ul.homeFotos li").length;
		var galleryPlay = true;
		$("ul.homeFotos li").eq(0).css({'display':'block'});
		$(".fotoMenu li a").eq(0).toggleClass("active");
	
		function fotoRotate(){
			if(galleryPlay){	
				$.doTimeout( 4000, function(){
					if(galleryPlay){	
						$("ul.homeFotos li").eq(activeFoto).fadeOut('slow');
						$(".fotoMenu li a").eq(activeFoto).toggleClass("active");
						activeFoto = activeFoto + 1;
						if(activeFoto == totalFotos){ activeFoto = 0; }
						$(".fotoMenu li a").eq(activeFoto).toggleClass("active");
						$("ul.homeFotos li").eq(activeFoto).fadeIn('slow');
						fotoRotate();
					}
				});
			}
		}
		fotoRotate();
		
		$('.fotoMenu li a').each(function(index) {
			$(this).click(function(e){
				e.preventDefault;
				clickAction(index);
			});
		});
	  
		function clickAction(newActive){
				$(".fotoMenu li a").eq(activeFoto).toggleClass("active");
				galleryPlay = false;		
				$("ul.homeFotos li").eq(activeFoto).fadeOut('slow');
				$("ul.homeFotos li").eq(newActive).fadeIn('slow');
				$(".fotoMenu li a").eq(newActive).toggleClass("active");
				activeFoto = newActive;
		}
	}
	
	if($('#over_ons').length){
		
		var animatieBezig = false;
		
		$('#over_ons .subItem .backgrFoto .kleur').css('display','block');
		$('#over_ons .subItem .backgrFoto .kleur').animate({ opacity: 0 },0);
		
		$('#over_ons .subItem .backgrFoto a').hover(
			function(){
				$("> .blauw", this).stop().animate({"opacity": "0"}, "fast");
				$("> .kleur", this).stop().animate({"opacity": "1"}, "fast");
			},
			function(){
				$("> .blauw", this).stop().animate({"opacity": "1"}, "fast");
				$("> .kleur", this).stop().animate({"opacity": "0"}, "fast");
			}
		);
		
		$('#over_ons .subItem .backgrFoto').hover(
			function(){
				$("> .kleur", this).stop().animate({"opacity": "1"}, "slow");
			},
			function(){
				$("> .kleur", this).stop().animate({"opacity": "0"}, "slow");
			}
		);
		$('#submenu li a.overKomma').parent().click(function(e){
			e.preventDefault();
			animatieBezig = true;
			var offsetOverKomma= $("#overKomma").offset();
			var posOverKomma = offsetOverKomma.top;
			$('html,body').animate({
				scrollTop: posOverKomma - 30
			}, 1000, function() { animatieBezig = false; });
			$("#submenu li").removeClass("active");
			$("#submenu li").addClass("notActive");
			$(this).addClass("active");
			$(this).removeClass("notActive");
		});
		$('#submenu li a.onzeWerkwijze').parent().click(function(e){
			e.preventDefault();
			animatieBezig = true;
			var offsetOnzeWerkwijze = $("#onzeWerkwijze").offset();
			var posOnzeWerkwijze = offsetOnzeWerkwijze.top;
			$('html,body').animate({
				scrollTop: posOnzeWerkwijze - 30
			}, 1000, function() { animatieBezig = false; });
			$("#submenu li").removeClass("active");
			$("#submenu li").addClass("notActive");
			$(this).addClass("active");
			$(this).removeClass("notActive");
		});
		$('#submenu li a.partners').parent().click(function(e){
			e.preventDefault();
			animatieBezig = true;
			var offsetPartners = $("#partners").offset();
			var posPartners = offsetPartners.top;
			$('html,body').animate({
				scrollTop: posPartners - 30
			}, 1000, function() { animatieBezig = false; });
			$("#submenu li").removeClass("active");
			$("#submenu li").addClass("notActive");
			$(this).addClass("active");
			$(this).removeClass("notActive");
		});
		
		$('.terugTop a').parent().click(function(){
			animatieBezig = true;
			$('html,body').animate({
				scrollTop: 0
			}, 1000, function() { animatieBezig = false; });
			$("#submenu li").removeClass("active");
			$("#submenu li").addClass("notActive");
			$("#submenu a.overKomma").parent("li").addClass("active");
		});
	
		$(window).scroll(function() {
			var scrollPos = $(window).scrollTop();
			
			var heightFoto1 = $("#overKomma").height();
			var heightFoto2 = $("#onzeWerkwijze").height();
			var heightFoto3 = $("#partners").height();
			
			var offsetFoto1 = $("#overKomma").offset();
			var posFoto1 = offsetFoto1.top;
			var offsetFoto2 = $("#onzeWerkwijze").offset();
			var posFoto2 = offsetFoto2.top;
			var offsetFoto3 = $("#partners").offset();
			var posFoto3 = offsetFoto3.top;
					
			if(scrollPos > 280){
				$("#submenu").css('margin-top','-235px');
				$("#submenu").css('position','fixed');
				$("#submenu").addClass("fixed");
			}else{
				$("#submenu").css('margin-top','14px');
				$("#submenu").css('position','absolute');
				$("#submenu").removeClass("fixed");
			}
		
			if(scrollPos < posFoto1 + 0.3 * heightFoto1){
				$("#foto1 .kleur").fadeIn('slow');
				$("#project .tekst").stop(true);
				$("#project .tekst").animate({
					marginTop: "0"
				  },200);
				$("#foto2 .kleur").fadeOut('slow');
				if(animatieBezig == false){
					$("#submenu li").removeClass("active");
					$("#submenu li").addClass("notActive");
					$("#submenu li a.overKomma").parent("li").addClass("active");
				}
			}else if(scrollPos > posFoto1 + 0.3 * heightFoto1 && scrollPos < posFoto2 + 0.3 * heightFoto2){
				$("#foto1 .kleur").fadeOut('slow');
				$("#foto2 .kleur").fadeIn('slow');
				$("#project .tekst").stop(true);
				$("#project .tekst").animate({	
					marginTop: posFoto2 - posFoto1
				  },200);
				$("#foto3 .kleur").fadeOut('slow');
				$('.terugTop').css('display','block');
				
				if(animatieBezig == false){
					$("#submenu li").removeClass("active");
					$("#submenu li").addClass("notActive");
					$("#submenu li a.onzeWerkwijze").parent("li").addClass("active");
				}					
			}else if(scrollPos > posFoto2 + 0.3 * heightFoto2 && scrollPos < posFoto3 + 0.3 * heightFoto3){
				$("#foto2 .kleur").fadeOut('slow');
				$("#foto3 .kleur").fadeIn('slow');
				$("#project .tekst").stop(true);
				$("#project .tekst").animate({
					marginTop: (posFoto3 - posFoto1)
				  },200);
				if(animatieBezig == false){
					$("#submenu li").removeClass("active");
					$("#submenu li").addClass("notActive");
					$("#submenu li a.partners").parent("li").addClass("active");
				}
			}else if(scrollPos > posFoto3 + 0.3 * heightFoto3){
				$("#foto3 .kleur").fadeOut('slow');
				$("#project .tekst").stop(true);
			}
		});
	}


	if($('#diensten').length){
		
		$("#submenu").fadeOut(0);
		
		var animatieBezig = false;
		
		$('#diensten .subItem .backgrFoto .kleur').css('display','block');
		$('#diensten .subItem .backgrFoto .kleur').animate({ opacity: 0 },0);
				
		$('#diensten .subItem .backgrFoto').hover(
			function(){
				$("> .blauw", this).stop().animate({"opacity": "0"}, "slow");
				$("> .kleur", this).stop().animate({"opacity": "1"}, "slow");
			},
			
			function(){
				$("> .blauw", this).stop().animate({"opacity": "1"}, "slow");
				$("> .kleur", this).stop().animate({"opacity": "0"}, "slow");
			}
		);
		
		$('#dienstenAlgemeen ul.zuilen li .foto .kleur').css('display','block');
		$('#dienstenAlgemeen ul.zuilen li .foto .kleur').animate({ opacity: 0 },0);
		
		$('#dienstenAlgemeen ul.zuilen li').hover(
			function(){
				$("> .foto .kleur", this).stop().animate({"opacity": "1"}, "medium");
			},
			
			function(){
				$("> .foto .kleur", this).stop().animate({"opacity": "0"}, "medium");
			}
		);
		
		$('#dienstenAlgemeen ul.zuilen li.huisstijl_zuil').click(function(){
			animatieBezig = true;
			var offsetOverKomma= $("#huisstijl").offset();
			var posOverKomma = offsetOverKomma.top;
			$('html,body').animate({
				scrollTop: posOverKomma - 30
			}, 1000, function() { animatieBezig = false; });
			
			$("#submenu li").removeClass("active");
			$("#submenu li").addClass("notActive");
			
			$("#submenu li a.huisstijl").parent("li").addClass("active");
			$("#submenu li a.huisstijl").removeClass("notActive");
		});
		$('#dienstenAlgemeen ul.zuilen li.webdesign_zuil').click(function(){
			animatieBezig = true;
			var offsetOverKomma= $("#webdesign").offset();
			var posOverKomma = offsetOverKomma.top;
			$('html,body').animate({
				scrollTop: posOverKomma - 30
			}, 1000, function() { animatieBezig = false; });
			
			$("#submenu li").removeClass("active");
			$("#submenu li").addClass("notActive");
			
			$("#submenu li a.webdesign").parent("li").addClass("active");
			$("#submenu li a.webdesign").removeClass("notActive");
		});
		$('#dienstenAlgemeen ul.zuilen li.socialmedia_zuil').click(function(){
			animatieBezig = true;
			var offsetOverKomma= $("#socialmedia").offset();
			var posOverKomma = offsetOverKomma.top;
			$('html,body').animate({
				scrollTop: posOverKomma - 30
			}, 1000, function() { animatieBezig = false; });
			
			$("#submenu li").removeClass("active");
			$("#submenu li").addClass("notActive");
			
			$("#submenu li a.socialmedia").parent("li").addClass("active");
			$("#submenu li a.socialmedia").removeClass("notActive");
		});
		$('#dienstenAlgemeen ul.zuilen li.fotografie_zuil').click(function(){
			animatieBezig = true;
			var offsetOverKomma= $("#fotografie").offset();
			var posOverKomma = offsetOverKomma.top;
			$('html,body').animate({
				scrollTop: posOverKomma - 30
			}, 1000, function() { animatieBezig = false; });
			
			$("#submenu li").removeClass("active");
			$("#submenu li").addClass("notActive");
			
			$("#submenu li a.fotografie").parent("li").addClass("active");
			$("#submenu li a.fotografie").removeClass("notActive");
		});
		
		
		$('#submenu li a.onzeDiensten').parent().click(function(e){
			e.preventDefault();
			animatieBezig = true;
			var offsetOverKomma= $("#dienstenAlgemeen").offset();
			var posOverKomma = offsetOverKomma.top;
			$('html,body').animate({
				scrollTop: posOverKomma - 30
			}, 1000, function() { animatieBezig = false; });
			$("#submenu li").removeClass("active");
			$("#submenu li").addClass("notActive");
			$(this).addClass("active");
			$(this).removeClass("notActive");
		});
		$('#submenu li a.huisstijl').parent().click(function(e){
			e.preventDefault();
			animatieBezig = true;
			var offsetFasering = $("#huisstijl").offset();
			var posFasering = offsetFasering.top;
			$('html,body').animate({
				scrollTop: posFasering - 30
			}, 1000, function() { animatieBezig = false; });
			$("#submenu li").removeClass("active");
			$("#submenu li").addClass("notActive");
			$(this).addClass("active");
			$(this).removeClass("notActive");
		});
		$('#submenu li a.webdesign').parent().click(function(e){
			e.preventDefault();
			animatieBezig = true;
			var offsetPartners = $("#webdesign").offset();
			var posPartners = offsetPartners.top;
			$('html,body').animate({
				scrollTop: posPartners - 30
			}, 1000, function() { animatieBezig = false; });
			$("#submenu li").removeClass("active");
			$("#submenu li").addClass("notActive");
			$(this).addClass("active");
			$(this).removeClass("notActive");
		});
		$('#submenu li a.socialmedia').parent().click(function(e){
			e.preventDefault();
			animatieBezig = true;
			var offsetFasering = $("#socialmedia").offset();
			var posFasering = offsetFasering.top;
			$('html,body').animate({
				scrollTop: posFasering - 30
			}, 1000, function() { animatieBezig = false; });
			$("#submenu li").removeClass("active");
			$("#submenu li").addClass("notActive");
			$(this).addClass("active");
			$(this).removeClass("notActive");
		});
		$('#submenu li a.fotografie').parent().click(function(e){
			e.preventDefault();
			animatieBezig = true;
			var offsetPartners = $("#fotografie").offset();
			var posPartners = offsetPartners.top;
			$('html,body').animate({
				scrollTop: posPartners - 30
			}, 1000, function() { animatieBezig = false; });
			$("#submenu li").removeClass("active");
			$("#submenu li").addClass("notActive");
			$(this).addClass("active");
			$(this).removeClass("notActive");
		});
		$('.terugTop a').parent().click(function(){
			animatieBezig = true;
			$('html,body').animate({
				scrollTop: 0
			}, 1000, function() { animatieBezig = false; });
			$("#submenu li").removeClass("active");
			$("#submenu li").addClass("notActive");
			$("#submenu a.overKomma").parent("li").addClass("active");
			$("#submenu.diensten").css("opacity", "0");
		});
	
		$(window).scroll(function() {
			var scrollPos = $(window).scrollTop();
					
			var heightFoto1 = $("#dienstenAlgemeen").height();
			var heightFoto2 = $("#huisstijl").height();
			var heightFoto3 = $("#webdesign").height();
			var heightFoto4 = $("#socialmedia").height();
			var heightFoto5 = $("#fotografie").height();
			
			var offsetFoto1 = $("#dienstenAlgemeen").offset();
			var posFoto1 = offsetFoto1.top;
			var offsetFoto2 = $("#huisstijl").offset();
			var posFoto2 = offsetFoto2.top;
			var offsetFoto3 = $("#webdesign").offset();
			var posFoto3 = offsetFoto3.top;
			var offsetFoto4 = $("#socialmedia").offset();
			var posFoto4 = offsetFoto4.top;
			var offsetFoto5 = $("#fotografie").offset();
			var posFoto5 = offsetFoto5.top;
			
			if(scrollPos > 760){
				$("#submenu").css('margin-top','-235px');
				$("#submenu").css('position','fixed');
				$("#submenu").addClass("fixed");
				$("#submenu").fadeIn();
			}else{
				$("#submenu").removeClass("fixed");
				$("#submenu").fadeOut();
			}
		
			if(scrollPos < posFoto1 + 0.3 * heightFoto1){
				$("#foto1 .kleur").fadeIn('slow');
				$("#project .tekst").stop(true);
				$("#project .tekst").animate({
					marginTop: "0"
				  },200);
				$("#foto2 .kleur").fadeOut('slow');
				if(animatieBezig == false){
					$("#submenu li").removeClass("active");
					$("#submenu li").addClass("notActive");
					$("#submenu a.onzeDiensten").parent("li").addClass("active");
				}
			}else if(scrollPos > posFoto1 + 0.3 * heightFoto1 && scrollPos < posFoto2 + 0.3 * heightFoto2){
				$("#foto1 .kleur").fadeOut('slow');
				$("#foto2 .kleur").fadeIn('slow');
				$("#project .tekst").stop(true);
				$("#project .tekst").animate({	
					marginTop: posFoto2 - posFoto1
				  },200);
				$("#foto3 .kleur").fadeOut('slow');
				$('.terugTop').css('display','block');
				
				if(animatieBezig == false){
					$("#submenu li").removeClass("active");
					$("#submenu li").addClass("notActive");
					$("#submenu a.huisstijl").parent("li").addClass("active");
				}					
			}else if(scrollPos > posFoto2 + 0.3 * heightFoto2 && scrollPos < posFoto3 + 0.3 * heightFoto3){
				$("#foto2 .kleur").fadeOut('slow');
				$("#foto3 .kleur").fadeIn('slow');
				$("#project .tekst").stop(true);
				$("#project .tekst").animate({
					marginTop: (posFoto3 - posFoto1)
				  },200);
				$("#foto4 .kleur").fadeOut('slow');
				if(animatieBezig == false){
					$("#submenu li").removeClass("active");
					$("#submenu li").addClass("notActive");
					$("#submenu a.webdesign").parent("li").addClass("active");
				}
			}else if(scrollPos > posFoto3 + 0.3 * heightFoto3 && scrollPos < posFoto4 + 0.3 * heightFoto4){
				$("#foto2 .kleur").fadeOut('slow');
				$("#foto3 .kleur").fadeIn('slow');
				$("#project .tekst").stop(true);
				$("#project .tekst").animate({
					marginTop: (posFoto4 - posFoto1)
				  },200);
				$("#foto4 .kleur").fadeOut('slow');
				if(animatieBezig == false){
					$("#submenu li").removeClass("active");
					$("#submenu li").addClass("notActive");
					$("#submenu a.socialmedia").parent("li").addClass("active");
				}
			}else if(scrollPos > posFoto4 + 0.3 * heightFoto4 && scrollPos < posFoto5 + 0.3 * heightFoto5){
				$("#foto2 .kleur").fadeOut('slow');
				$("#foto3 .kleur").fadeIn('slow');
				$("#project .tekst").stop(true);
				$("#project .tekst").animate({
					marginTop: (posFoto5 - posFoto1)
				  },200);
				$("#foto4 .kleur").fadeOut('slow');
				if(animatieBezig == false){
					$("#submenu li").removeClass("active");
					$("#submenu li").addClass("notActive");
					$("#submenu a.fotografie").parent("li").addClass("active");
				}
			}
		});
	}

	if($('#portfolio.pagina').length){
		
		$('#portfolioMenu li').click(function(){
			$(this).children("a").trigger("click");
		});
		
		$('.element').hover(function(){
			$("> .nameTag", this).fadeIn();
		},
		function(){
			$("> .nameTag", this).fadeOut();
		});
		
		
		$(document).find(".generalBtn").each(function(){
			if($(this).children("a").hasClass("selected")){
				$(this).addClass("selected");
			}else{
				$(this).removeClass("selected");
				$(this).children("span.darkRight").css('display','none');
			}
		});
		
		$('#filters .generalBtn a').click(function() {
			$('#filters li').each(function(){
				$("> span.darkLeft", this).css('display','none');
				$("> span.darkRight", this).css('display','none');
			});
			$(this).parent("li").children("span.darkLeft").css('display','block');
			$(this).parent("li").children("span.darkRight").css('display','block');
		});
		
		$('#sort-direction .generalBtn a').click(function() {
			$('#sort-direction li').each(function(){
				$("> span.darkLeft", this).css('display','none');
				$("> span.darkRight", this).css('display','none');
			});
			$(this).parent("li").children("span.darkLeft").css('display','block');
			$(this).parent("li").children("span.darkRight").css('display','block');
		});
		
		$('#sort-by .generalBtn a').click(function() {
			$('#sort-by li').each(function(){
				$("> span.darkLeft", this).css('display','none');
				$("> span.darkRight", this).css('display','none');
			});
			$(this).parent("li").children("span.darkLeft").css('display','block');
			$(this).parent("li").children("span.darkRight").css('display','block');
		});
		
		$('.generalBtn').hover(function(){
				$("> span.darkLeft", this).css('display','block');
				$("> span.darkRight", this).css('display','block');
		},function(){
			if($("> a", this).hasClass("selected")){
				
			}else{
				$("> span.darkLeft", this).css('display','none');
				$("> span.darkRight", this).css('display','none');
			}
		});

		$('.project_btn').hover(function(){
			$("> .up", this).stop().animate({"opacity": "0"}, "medium");
			$("> .hover", this).stop().animate({"opacity": "1"}, "medium");
		},
		function(){
			$("> .up", this).stop().animate({"opacity": "1"}, "medium");
			$("> .hover", this).stop().animate({"opacity": "0"}, "medium");
		});
		
		$('.element').hover(function(){
			$("> .project_btn .up", this).stop().animate({"opacity": "0"}, "medium");
			$("> .project_btn .hover", this).stop().animate({"opacity": "1"}, "medium");
		},
		function(){
			$("> .project_btn .up", this).stop().animate({"opacity": "1"}, "medium");
			$("> .project_btn .hover", this).stop().animate({"opacity": "0"}, "medium");
		});
		
		$('.element').click(function(e){
			if(e.target.tagName != 'A') {
				window.location.href = $('a.project_btn',this).attr('href');
			}
		});

	}
	
	if($('#portfolio.klanten').length){
		$('#portfolio.klanten .element .fade .kleur').css('display','block');
		$('#portfolio.klanten .element .fade .kleur').animate({ opacity: 0 },0);
				
		$('.project_btn').hover(function(){
			$("> .fade .kleur", this).stop().animate({"opacity": "1"}, "medium");
		},
		function(){
			$("> .fade .kleur", this).stop().animate({"opacity": "0"}, "medium");
		});
	}

	if($('#project').length){
		
		$('span.darkLeft2').each(function(){
			$(this).width($(this).parent(".generalBtn").width() + 10);
		});
		$('span.left2').each(function(){
			$(this).width($(this).parent(".generalBtn").width() + 10);
		});
	
		$('#project .generalBtn span.darkLeft2').css('display','block');
		$('#project .generalBtn span.darkLeft2').animate({ opacity: 0 },0);
		
		$('#project .generalBtn span.darkRight2').css('display','block');
		$('#project .generalBtn span.darkRight2').animate({ opacity: 0 },0);
		
		$('.generalBtn').hover(
			function(){
				$("> span.darkLeft2", this).stop().animate({"opacity": "1"}, "medium");
				$("> span.darkRight2", this).stop().animate({"opacity": "1"}, "medium");
			},
			
			function(){
				$("> span.darkLeft2", this).stop().animate({"opacity": "0"}, "medium");
				$("> span.darkRight2", this).stop().animate({"opacity": "0"}, "medium");
			}
		);
		
		$('.terugTop a').click(function(){
			$('html,body').animate({
				scrollTop: 0
			}, 1000);
		});
	
		$("#foto1 .kleur", this).css('display','block');
	
		$(window).scroll(function() {
			var scrollPos = $(window).scrollTop();
			
			var heightFoto1 = $("#foto1").height();
			var heightFoto2 = $("#foto2").height();
			var heightFoto3 = $("#foto3").height();
			var heightFoto4 = $("#foto4").height();
			var heightTekst = $("#project .tekst").height();
			
			var offsetFoto1 = $("#foto1").offset();
			var posFoto1 = offsetFoto1.top;
			var offsetFoto2 = $("#foto2").offset();
			var posFoto2 = offsetFoto2.top;
			var offsetFoto3 = $("#foto3").offset();
			var posFoto3 = offsetFoto3.top;
			var offsetFoto4 = $("#foto4").offset();
			var posFoto4 = offsetFoto4.top;
			
			var marginBottomFoto4 = heightTekst - heightFoto4;
			if(marginBottomFoto4 > 0){
				marginBottomFoto4Px = marginBottomFoto4 +'px';
				$("#foto4").css('margin-bottom',marginBottomFoto4Px);
			}
			if(scrollPos < posFoto1 + 0.3 * heightFoto1){
				$("#foto1 .kleur").fadeIn('slow');
				$("#project .tekst").stop(true);
				$("#project .tekst").animate({
					marginTop: "0"
				  },200);
				$("#foto2 .kleur").fadeOut('slow');
				$('.terugTop').css('display','none');
	
			}else if(scrollPos > posFoto1 + 0.3 * heightFoto1 && scrollPos < posFoto2 + 0.3 * heightFoto2){
				$("#foto1 .kleur").fadeOut('slow');
				$("#foto2 .kleur").fadeIn('slow');
				$("#project .tekst").stop(true);
				$("#project .tekst").animate({
					marginTop: posFoto2 - posFoto1
				  },200);
				$("#foto3 .kleur").fadeOut('slow');
				$('.terugTop').css('display','block');
		
			}else if(scrollPos > posFoto2 + 0.3 * heightFoto2 && scrollPos < posFoto3 + 0.3 * heightFoto3){
				$("#foto2 .kleur").fadeOut('slow');
				$("#foto3 .kleur").fadeIn('slow');
				$("#project .tekst").stop(true);
				$("#project .tekst").animate({
					marginTop: (posFoto3 - posFoto1)
				  },200);
				$("#foto4 .kleur").fadeOut('slow');
			}else if(scrollPos > posFoto3 + 0.3 * heightFoto3	 && scrollPos < posFoto4 + 0.3 * heightFoto4){
				$("#foto3 .kleur").fadeOut('slow');
				$("#foto4 .kleur").fadeIn('slow');
				$("#project .tekst").stop(true);
				$("#project .tekst").animate({
					marginTop: (posFoto4 - posFoto1)
				  },200);
			}else if(scrollPos > posFoto4 + 0.3 * heightFoto4){
				$("#foto4 .kleur").fadeOut('slow');
			}
			
		});
	}
});


$(window).resize(function() {

	var windowHeight = window.innerHeight;

	var contentHeight = $("#mainframe").height() + 120 + $("#footer").height();

	if(contentHeight < windowHeight){
		
		$('#mainframe').css('height', function() {
  			var naam = (window.innerHeight - 120 - $("#footer").height()) + 'px';
			return naam;
		});		
	}
});

$(window).load(function() {
	$(".loader").fadeOut();
	$(".fade").each(function(i) {
		$(this).delay(200*i).fadeIn();
	});
	$(".element").css('background', 'none');
});