$(document).ready(function(){
    $( '#WEAbInfo div:not(:first)' ).hide();
  
	$('#WEAbLinks li').click(function(e) {
		$('#WEAbInfo div').hide();
		$('#WEAbLinks .current').removeClass("current");
		$(this).addClass('current');
	
		var clicked = $(this).find('a:first').attr('href');
		$('#WEAbInfo ' + clicked).fadeIn('800');
	    e.preventDefault();
	 }).eq(0).addClass('current');	
	$('#WEAbInfo').jScrollPane({
	    scrollbarWidth: 10,
	    scrollbarMargin: 10,
	    showArrows: false
	  });
		
	$('#slideshow').coinslider({ width:674, height:251, links:false});
	
	//save selectors as variables to increase performance
	var $window = $(window);
	var $psd2hBG = $('#psd2html');
	var $orderBG = $('#order');
	var $workflowBG = $('#workflow');
	var $mainBg = $('#mainbg');
	var ws = $("#psd2html .ws");
	var wl = $("#psd2html .wl");
	var dl = $("#psd2html .dl");
	var ds = $("#psd2html .ds");
	var ms = $("#psd2html .ms");
	var jl = $("#psd2html .jl");
	var js = $("#psd2html .js");
	var hl = $("#psd2html .hl");

	

	
	var windowHeight = $window.height(); //get the height of the window
	var windowWidth = $window.width(); //get the width of the window
	var leftPos = ((windowWidth / 2 ) - 430) ;
	var $leftPos = leftPos + 'px';
	$('section.left').css ('margin-left', $leftPos)
	$psd2hBG.css({'backgroundPosition': $leftPos + ' 0px'}); 
	$orderBG.css({'backgroundPosition': $leftPos}); 
	$workflowBG.css({'backgroundPosition': $leftPos}); 

	//apply the class "inview" to a section that is in the viewport
	$('#psd2html, #order, #workflow').bind('inview', function (event, visible) {
			if (visible == true) {
			$(this).addClass("inview");
			} else {
			$(this).removeClass("inview");
			}
		});
	
			
	//function that places the navigation in the center of the window
	function RepositionNav(){
		var windowHeight = $window.height(); //get the height of the window
		var navHeight = $('#nav').height() / 2;
		var windowCenter = (windowHeight / 2); 
		var newtop = windowCenter - navHeight;
		$('#nav').css({"top": newtop}); //set the new top position of the navigation list
	}
	
	//function that is called for every pixel the user scrolls. Determines the position of the background
	/*arguments: 
		x = horizontal position of background
		windowHeight = height of the viewport
		pos = position of the scrollbar
		adjuster = adjust the position of the background
		inertia = how fast the background moves in relation to scrolling
	*/
	function newPos(x, windowHeight, pos, adjuster, inertia){
		return x + "% " + (-((windowHeight + pos) - adjuster) * inertia)  + "px";
	}
	
	//function to be called whenever the window is scrolled or resized
	function Move(){ 
		var pos = $window.scrollTop(); //position of the scrollbar

		//if the first section is in view...
		if($psd2hBG.hasClass("inview")){
			//call the newPos function and change the background position
			$psd2hBG.css({'backgroundPosition': newPos(leftPos + 'px', windowHeight, pos, 1211, 0.2)}); 
			ws.css({'backgroundPosition': newPos(0, windowHeight, pos, 1211, 0.3)});
			wl.css({'backgroundPosition': newPos(0, windowHeight, pos, 1211, 0.4)});
			dl.css({'backgroundPosition': newPos(0, windowHeight, pos, 1211, 0.5)});
			jl.css({'backgroundPosition': newPos(0, windowHeight, pos, 1211, 0.6)});
			ds.css({'backgroundPosition': newPos(0, windowHeight, pos, 1211, 0.2)});
			ms.css({'backgroundPosition': newPos(0, windowHeight, pos, 1211, 0.3)});
			js.css({'backgroundPosition': newPos(0, windowHeight, pos, 1211, 0.4)});
			hl.css({'backgroundPosition': newPos(0, windowHeight, pos, 1211, 0.7)});


		}
		
		//if the second section is in view...
		if($orderBG.hasClass("inview")){
			//call the newPos function and change the background position
			$orderBG.css({'backgroundPosition': newPos($leftPos, windowHeight, pos, 2000, 0.2)});

		}
		
		//if the third section is in view...
		if($workflowBG.hasClass("inview")){
			//call the newPos function and change the background position
			$workflowBG.css({'backgroundPosition': newPos($leftPos , windowHeight, pos, 2500, 0.3)});
		}
		
		
	}
		
	RepositionNav(); //Reposition the Navigation to center it in the window when the script loads
	
	$window.resize(function(){ //if the user resizes the window...
	
	Move(); //move the background images in relation to the movement of the scrollbar
	RepositionNav(); //reposition the navigation list so it remains vertically central


	});		
	
	$window.bind('scroll', function(){ //when the user is scrolling...
		Move(); //move the background images in relation to the movement of the scrollbar
	});
	
		$mainBg.css({'backgroundPosition': $leftPos}); 

});