$(document).ready(function(){
	var root = $("#wHold").attr("class");
	//--------Navigation
	var widthNav = 0;
	var widthPlanes = 0;
	var incPanel = 0;
	var transTime = 2000;
	var portNextBg = 1;
	var actPressedWidth = 1500;
	var intAfter ;
	
	function init () {
	 widthNav = 0;
	 widthPlanes = 0;
	 incPanel = 0;

		$("body, html").css({overflow: 'hidden'});
		createBtns ();
		$("ul#nav li a").each(function (){
			$(this).append('<img src="'+root+'images/btns/left-curv-nav.png" class="leftCurv"/>');
			$(this).append('<img src="'+root+'images/btns/right-curv-nav.png" class="rightCurv"/>');
			if ($(this).parent().is('.current')) {
				$(this).find('.leftCurv').attr('src', ''+root+'images/btns/left-curv-nav-black.png');
				$(this).find('.rightCurv').attr('src', ''+root+'images/btns/right-curv-hover-black.png');
			}
			
				
			widthPlanes += $(window).width();
			
			widthNav += $(this).width() + 45;
			$(this).hover(
				function () {
					$(this).find('.leftCurv').attr('src', root+'images/btns/left-curv-nav-black.png');
					$(this).find('.rightCurv').attr('src', root+'images/btns/right-curv-hover-black.png');
				},
				function () {
					if ($(this).parent().is('.current')) {
						$(this).find('.leftCurv').attr('src', root+'images/btns/left-curv-nav-black.png');
						$(this).find('.rightCurv').attr('src', root+'images/btns/right-curv-hover-black.png');
					}else{
						$(this).find('.leftCurv').attr('src', root+'images/btns/left-curv-nav.png');
						$(this).find('.rightCurv').attr('src', root+'images/btns/right-curv-nav.png');
					}
				}
			)
		});
		$("#nav").css({'width' : (widthNav + 200) + 'px', 'margin-left' : -((widthNav / 2) + 50) + 'px'});
	}
	$("ul#nav li a, #contLink, .contPort a").click(function () {
				$("ul#nav li a").each(function (){
					$(this).parent().removeClass('current');
					$(this).find('.leftCurv').attr('src', ''+root+'images/btns/left-curv-nav.png');
					$(this).find('.rightCurv').attr('src', ''+root+'images/btns/right-curv-nav.png');
				});
				$(this).parent().addClass('current');
				$(this).find('.leftCurv').attr('src', ''+root+'images/btns/left-curv-nav-black.png');
				$(this).find('.rightCurv').attr('src', ''+root+'images/btns/right-curv-hover-black.png');
				
				if ($(this).parent().attr('id').length > 0) {
					if ($(this).parent().attr('id') != "contactLink") {
					var idP = $(this).attr('title').replace('nav-','');
					openProj (idP);
					}
				}
				actPressedWidth = Number($(this).attr('rel')) * $(window).width();
				//
				$('#pagItems').stop().animate({left : -(actPressedWidth ) + 'px'},{duration: transTime, easing: 'easeInOutQuint'});
				$('#blackGolvenLight').stop().animate({left : -((actPressedWidth) -300)  + 'px'},{duration: transTime, easing: 'easeInOutQuint'});
				$('#blackGolven').stop().animate({left : -(actPressedWidth / 7)  + 'px'},{duration: transTime, easing: 'easeInOutQuint'});
				$('#moon').stop().animate({left : ((Number(actPressedWidth) /  70) ) + 'px'},{duration: transTime, easing: 'easeInOutQuint'});
				return false;
	});
	
	
	
	function createBtns () {
		$("a.btn").each(function (){
				$(this).append('<img src="'+root+'images/btns/left-curv.png" class="leftCurvSm"/>');
				$(this).append('<img src="'+root+'images/btns/right-curv.png" class="rightCurvSm"/>');
		});
	}
	
	function evalHeight () {
		if($(window).height() < 700) {
			$("#nav").css({'top':'20px', 'bottom': 'auto'});
		}else{
			$("#nav").css({'bottom':'20px', 'top':'auto'});
		}
	}
	
	//----create elements
	$("body").prepend('<div id="portItems"><a class="sluitenPort" href="#close">sluiten</a><img id="smRobot" src="'+root+'images/layout/small-robot.gif" alt="small-robot" width="59" height="239" /><div id="portImgDisp"><div id="hPort"></div><a class="nextPortItem" href="#volgende">volgende</a></div></div>');
	$("#wHold").prepend('<div id="sky"></div>');
	$("#wHold").prepend('<div id="moon"></div>');
	$("#pagItems").prepend('<div id="octo"></div>');
	$("#pagItems").prepend('<div id="blackGolvenLight"><img src="'+root+'images/layout/end-golven-light.png" width="222" height="165"/></div>');
	$("#pagItems").prepend('<div id="blackGolvenLightBack"><img src="'+root+'images/layout/end-golven-light.png" width="222" height="165"/></div>');
	$("#pagItems").prepend('<div id="robotMain"></div>');
	$("#robotMain").prepend('<div id="dropRobot"></div>');
	$("#pagItems").prepend('<div id="whosgeo"></div>');
	$("#pagItems").prepend('<div id="gimic"></div>');
	$("#pagItems").prepend('<div id="contPag"></div>');
	$("#pagItems").prepend('<div id="smoke"></div>');
	$("#pagItems").prepend('<div id="blackGolven"><img src="'+root+'images/layout/endGolven.png" width="798" height="442"/></div>');
	
	

	//----Align elements
	
	
	function positionElem () {
		$("#pagItems").width($("#nav li").length * $(window).width());
		$("#pagItems").height($(window).height());
		$("div#wHold").height($(window).height());
		$("div#wHold").width($(window).width());
		$(".holder").each(function () {
			$(this).width($(window).width());
			$(this).height($(window).height());
			$(this).css({'left': incPanel + 'px'});
			incPanel += $(window).width();
		});
		$("#robotMain").css({'left':$(window).width() + 'px'});
		$("#portItems").width($(window).width());
		$("#portItems").height($(window).height());
		$("#sky").width($(window).width());
		$("#contPag").css({'left':(($("#nav li").length - 1) * $(window).width() - 300) + 'px'});
			var contactWidthContent = $("div#contactP div.cont").width() + $("div#contactP div.cont blockquote").width();
			var geoWidthContent = $("div#geo div.cont").width();
			
		if ($(window).width() > 1200 && $(window).height() > 700) {
			$("#whosgeo").css({'left':(2 * $(window).width() + 350) + 'px'});
			$("#smoke").css({'left':(2 * $(window).width() + 250) + 'px'});
			$("#gimic").show();
			$("#contactLink").show();
			$("#gimic").css({'left':(($(window).width()  * 2) - 300) + 'px'});
			$("#contPag").show();
			if ($(window).height() > 900) {
				$("#gimic").css({'bottom':0 + 'px'});
			}
		}else{
			$("#contPag").hide();
			$("#gimic").hide();
			$("#contactLink").hide();
			$("#smoke").css({'left':(2 * $(window).width() -50) + 'px'});
			$("#whosgeo").css({'left':(2 * $(window).width() + 10) + 'px'});
		};	
		$("ul#port").css({'left':'50%', 'top': '50%', 'margin-top':-($("ul#port").height() / 2)+'px', 'margin-left': -($("ul#port").width() / 2) + 'px'});
		$("div#contactP div.cont").css({'left':'50%', 'top': '50%', 'margin-top':-($("div#contactP div.cont").height() / 2)+'px', 'margin-left': -(contactWidthContent / 2) + 'px'});
		$("div#geo div.cont").css({'left':'50%', 'top': '50%', 'margin-top':-($("div#geo div.cont").height() / 2)+'px', 'margin-left': -(geoWidthContent / 2) + 'px'});
		
		$("#blackGolven").width($("#nav li").length * $(window).width() );
		$("#blackGolvenLight").width($("#nav li").length * $(window).width()  - 1000);
		$("#blackGolvenLightBack").width($("#nav li").length * $(window).width() - 1000);
		return false;
		
	}	
	
	$(".linkProj a").click(function () {
		var id = $(this).parent().attr('id').replace('portbtn_','');
		$("#portItems").css({position:'absolute', top:-($(window).height())+'px', left: '0px', width: $(window).width()+ 'px', height: + $(window).height() + 'px'});
		
		$('a.sluitenPort').hide();
		$('#portImgDisp').hide();
		$("#portItems").show();
		$("#sky").css({position:'absolute', left: '0px', width: $(window).width() + 'px', top: '0px'});
		$("#nav").css({position:'absolute'});
		$("#portItems").animate({top: 0+'px'},1000,  function () {$('a.sluitenPort').slideDown('slow'); $("#sky").hide(); $('#portImgDisp').slideDown('slow')});
		$("#wHold").animate({top: $(window).height()+'px'},{duration: 1000});
		$("#hPort").load('http://www.geolivero.com/port-files #portItem-'+id, function () {createBtns ();});
		return false;
	});
	

	$('a.sluitenPort').click(function () {
		$(this).slideUp('slow');
		$('#portImgDisp').slideUp('slow')
		$("#sky").css({position:'static'});
		$("#sky").show();
		$("#portItems").animate({top: -($(window).height())+'px'}, 1000, function () {$("#portItems").hide();});
		$("#wHold").animate({top: 0+'px'},{duration: 1000});
		return false;
	});
	/*Portfolio experiences----------------------*/
	var iPr = 1;
	var nPort = 0;
	$("#port").append('<li id="navPort"><ol id="navPortf"></ol></li>');
	
	$("#navItems a ").click(function (){
		iPr++;
		if (iPr > $("#portfolio li.projHold").length) {
			iPr = 1;
			$("#port_" + $("#portfolio li.projHold").length).stop().animate({top: -(424) + 'px'},{duration: 1000, easing: 'easeInOutQuint', complete: function () {$("#port_" + $("#portfolio li.projHold").length).css({'top': '424px'}) }});
			$("#port_" + iPr).stop().animate({top: 50 + 'px'},{duration: 1000, easing: 'easeInOutQuint'}); 
			
		}else{
			$("#port_" + (iPr - 1)).stop().animate({top: -(424) + 'px'},{duration: 1000, easing: 'easeInOutQuint', complete: function () {$("#port_" + (iPr - 1)).css({'top': '424px'}) }});
			$("#port_" + iPr).stop().animate({top: 50 + 'px'},{duration: 1000, easing: 'easeInOutQuint'}); 
			
		}
		$("#navPort ol li").removeClass("cur");
		
		$("#navPort ol li#n"+iPr).addClass("cur");
		return false;
	});
	
	
	$("#portfolio li.projHold").each(function(){
			nPort++;
			if (nPort == 1) {
			$("#navPort ol").append('<li class="cur" id="n'+nPort+'">'+nPort+'<div></div></li>');
			}else{
			$("#navPort ol").append('<li id="n'+nPort+'">'+nPort+'<div></div></li>');
			}
			
	});
	$("ol#navPortf li").click(function () {
		var id = $(this).attr('id').replace('n', '');
		openProj (id)
				
	});
	
	function openProj (id) {
		$("#port_" + id).stop().animate({top: 50 + 'px'},{duration: 1000, easing: 'easeInOutQuint'}); 
		$("#navPort ol li").removeClass("cur");
		$("ol#navPortf li#n"+id).addClass("cur");
		$("#portfolio li.projHold").css({'top': '424px'});
		iPr = id;
	}
	
	
	/*Portfolio loading spices----------------------*/
	
	
	$(".nextPortItem").click(function (){
		portNextBg++;
		if (portNextBg > $('.imgP').length) {
			portNextBg = 1;
			$('#p-' + $('.imgP').length).fadeOut('slow');
			$('#p-' + portNextBg).fadeIn('slow');
		}else{
			$("#p-" + (portNextBg - 1)).fadeOut('slow');
			$("#p-" + portNextBg).fadeIn('slow');
		}
		return false;
	});
	
	/*-Home portfolio--------*/
	var imgC = 0;
	var nEtaIncr = 1;
	var intScroll;
	var actEta = true;
	$("#homeEta").append('<ol id="navPortfHome"></ol>');
	$("#homeEta").append('<div id="botPort"><img src="'+root+'images/layout/start-panel-bottom.png" alt="start-panel-bottom" width="445" height="33" /></div>');
	$("#homeEta").prepend('<div id="topPort"><img src="'+root+'images/layout/start-panel-top.png" alt="start-panel-top" width="445" height="59" /></div>');
	$("#homeEta").prepend('<div id="logoStart"><img src="'+root+'images/layout/logo.png" width="266" height="120" id="logo"/></div>');
	$("#mask").append('<div id="maskFront"></div>');
	
	$(".imgPort").each(function () {
		$(this).css({'left' : (imgC * 413) + 'px'});
		$("#navPortfHome").append('<li id=eta-'+(imgC + 1)+' class="etaBtn">'+(imgC + 1)+'<div></div></li>');
		imgC++;
	});
	$("#scroller").width(imgC * 413);
	
	$("#navItemsEta a").click(function () {
			clearInterval(intScroll);
			actEta = false;
			clearInterval(intScroll);
			goNextEta ();
	});
	$(".etaBtn").click(function (){
		var id = $(this).attr('id').replace('eta-', '');
		nEtaIncr = id - 1;
		actEta = false;
		clearInterval(intScroll);
		goNextEta();
	});
	
	function showEtaCur (n) {
		$(".etaBtn").removeClass('cur');
		$("#eta-" + (n + 1)).addClass('cur');
	}
	
	function initEta  () {
		clearInterval(intScroll);
		intScroll = setInterval(goNextEta, 4000);
	}
	function goNextEta () {
			if (nEtaIncr > $(".imgPort").length - 1) {
				nEtaIncr = 0;
			}
			showEtaCur (nEtaIncr);
			$(".contPort").hide();
			$("#cont-" +  (nEtaIncr + 1)).fadeIn("slow");
			if (actEta) initEta  ();
			$("#scroller").stop().animate({left: -(nEtaIncr * 413 ) +'px'},{duration: 1000, easing: 'easeInOutQuint'}); 
			nEtaIncr++;
	}
	initEta  ();
	showEtaCur (0);
	/*-END Home portfolio--------*/
	$("#contF").validateform({
		btn:'#btnForm',
		onComplete: function () {
			$.post("http://www.geolivero.com/mail-form",
				{
					naam:$("#naam").val(),
					email:$("#email").val(),
					telefoon:$("#telefoon").val(),
					name_x:$("#name_x").val(),
					bericht:$("#bericht").val()
					}
					, function (){
						$("#contF").after('<div id="bedanktForm">Bedankt! Je reactie is verstuurd</div>').hide();
						$("#contF").fadeOut('slow');
						$("#btnForm").hide();
						$("#bedanktForm").fadeIn("slow")
						.animate({opacity: 1.0}, 4000)
						.fadeOut('slow', function() {
							$(this).remove();
							$("#contF").fadeIn('slow');
							$("#btnForm").fadeIn('slow');
							$("#contF input, #contF textarea").val('');
						});
					});
		}
	});


	
	$(window).bind('resize', function() { 
		init();
		evalHeight();
		positionElem ();
	});
	
	function addHighLightsText (str) {
		var rTotal  = str.split(" ");
		var refStr = "";
		
		for (var i = 0; i < rTotal.length; i++) {
			refStr += " <span> "+rTotal[i]+" </span>  ";
		}
		return refStr;
	}
	$("div.cont p").each(function () {
		$(this).html(addHighLightsText  ($(this).html()));
	});
	
	$("#twitter").getTwitter({
					userName: "geolivero",
					numTweets: 1,
					loaderText: "Loading tweets...",
					slideIn: false
				});
		
	init ();
	positionElem ();
	evalHeight();
	
});