$(document).ready(function() {	
		
		
		
		window.setTimeout(function() {
		
			$("#sitewordtopnieuw").fadeIn(300, function(){
				tid = 0;
				t = setInterval(function(){
					if(tid < 15){
						tid++;
						$(".titel#"+tid).show();
						$(".titel#"+tid).fadeTo(2000, 0.6);
					} else {
						clearInterval(t);
					}
				}, 20 );
			});
		
		}, 1000);
		
		$(".overlaysluiten, #overlay").click(function(){
			$(".lightbox").hide();
			$(".lightbox_content").hide();
			$("#overlay").fadeOut(100);
			$('.lightbox_img').cycle('pause');
		});
		
		$(".titel").hover(function(){
			$(".titel").css({"opacity":"0.6"});
			$(this).css({"opacity":"1"});
		});
		
		// scherm
		screenwidth = $(window).width();
		screenheight = $(window).height();
		setImages(screenwidth,screenheight);
		
		
		$(window).resize(function(){
			screenwidth = $(window).width();
			screenheight = $(window).height();
			setImages(screenwidth,screenheight);
		});
		// tekst niet selecteerbaar
		$(".titel").disableTextSelect();
		// klik op titel project
		$(".titel a").each(function() {
			$(this).bind("mousedown",function(){
				titelid=$(this).parent().attr('id');
				showOverlay(titelid);
			});
		});	
		
		$(".kleurblok").each(function() {
			$(this).css("margin-top",Math.floor(Math.random()*(screenheight-50))+"px");
			$(this).css("height",Math.floor(Math.random()*(100))+50+"px");
			blokOmlaag(this);
		});	
		
		$(".kleurblok").hover(function() {
			$(this).stop();
			$(this).css("height","200px");
			blokOmlaag(this);
		});
		
		$('.lightbox_img').cycle({ 
			fx:     'fade', 
			speed:  600, 
			timeout: 0,
			after:   onAfter,
			prev:   '.prev',
			next:   '.next'
		});
	});
	
	
	
	function blokOmlaag(item){
		$(item).animate({ 
			marginTop: Math.floor(Math.random()*(screenheight))-100,
			height: Math.floor(Math.random()*(100))+40
		}, Math.floor(Math.random()*6000)+3000, "easeInOutSine", function(){
			
				blokOmlaag(item);
			
		});
	}
	
	
	

	function showOverlay(blok){
		// overlay
		$("#overlay").fadeIn(200, function(){
			$(".lightbox#blok_"+blok).fadeIn(400, function(){
				$(".lightbox#blok_"+blok+" .lightbox_content").fadeIn(400);
			});
		});
		$('.lightbox_img').cycle('resume');
	};
	
	function onAfter(curr, next, opts) {
		var index = opts.currSlide;
		$('.prev')[index == 0 ? 'hide' : 'show']();
		$('.next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
	}


	function setImages(w, h){
		if(h < 700){
			boven = 0;
		} else if(h > 700 && h < 800){
			boven = 50;
		} else if(h > 800 && h < 900){
			boven = 100;
		} else if(h > 900 && h < 1000){
			boven = 150;
		} else if(h > 1000 && h < 1100){
			boven = 200;
		} else if(h > 1100 && h < 1200){
			boven = 250;
		} else if(h > 1200 && h < 1300){
			boven = 300;
		} else {
			boven = 350;
		}
		
		$("#info").css("top",(boven+200)+"px");
		$("#sitewordtopnieuw").css("top",(boven+200)+"px");
		$("#ondertussen").css("top",(boven+30)+"px");
		$("#1").css("top",(boven+70)+"px");
		$("#2").css("top",(boven+130)+"px");
		$("#3").css("top",(boven+78)+"px");
		$("#4").css("top",(boven+165)+"px");
		$("#5").css("top",(boven+212)+"px");
		$("#6").css("top",(boven+167)+"px");
		$("#7").css("top",(boven+264)+"px");
		$("#8").css("top",(boven+322)+"px");
		$("#9").css("top",(boven+291)+"px");
		$("#10").css("top",(boven+376)+"px");
		$("#11").css("top",(boven+446)+"px");
		$("#12").css("top",(boven+408)+"px");
		$("#13").css("top",(boven+451)+"px");
		$("#14").css("top",(boven+535)+"px");
		$("#15").css("top",(boven+507)+"px");
		
		if(w < 1200){
			links = 0;
		} else if(w > 1200 && w < 1300){
			links = 100;
		} else if(w > 1300 && w < 1400){
			links = 150;
		} else if(w > 1400 && w < 1500){
			links = 200;
		} else if(w > 1500 && w < 1600){
			links = 250;
		} else if(w > 1600 && w < 1700){
			links = 300;
		} else if(w > 1700 && w < 1800){
			links = 350;
		} else {
			links = 400;
		}
		
		$("#info").css("left",(links)+"px");
		$("#sitewordtopnieuw").css("left",(links+260)+"px");
		$("#ondertussen").css("left",(links+320)+"px");
		$("body").css("background-position",(links+240)+"px 0px ");
		$(".kleurblok").css("left",(links+246)+"px");
		$("#1").css("left",(links+345)+"px");
		$("#2").css("left",(links+576)+"px");
		$("#3").css("left",(links+802)+"px");
		$("#4").css("left",(links+325)+"px");
		$("#5").css("left",(links+600)+"px");
		$("#6").css("left",(links+765)+"px");
		$("#7").css("left",(links+413)+"px");
		$("#8").css("left",(links+550)+"px");
		$("#9").css("left",(links+761)+"px");
		$("#10").css("left",(links+350)+"px");
		$("#11").css("left",(links+600)+"px");
		$("#12").css("left",(links+835)+"px");
		$("#13").css("left",(links+318)+"px");
		$("#14").css("left",(links+406)+"px");
		$("#15").css("left",(links+792)+"px");
		
		$("#1 span").css("font-size","18px");
		$("#2 span").css("font-size","22px");
		$("#3 span").css("font-size","27px");
		$("#4 span").css("font-size","20px");
		$("#5 span").css("font-size","25px");
		$("#6 span").css("font-size","24px");
		$("#7 span").css("font-size","25px");
		$("#8 span").css("font-size","33px");
		$("#9 span").css("font-size","23px");
		$("#10 span").css("font-size","20px");
		$("#11 span").css("font-size","21px");
		$("#12 span").css("font-size","22px");
		$("#13 span").css("font-size","25px");
		$("#14 span").css("font-size","24px");
		$("#15 span").css("font-size","21px");
	}