/*
JavaScript for the demo: Recreating the Nikebetterworld.com Parallax Demo
Demo: Recreating the Nikebetterworld.com Parallax Demo
Author: Ian Lunn
Author URL: http://www.ianlunn.co.uk/
Demo URL: http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/
Tutorial URL: http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/

License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike). Please attribute work to Ian Lunn simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.ianlunn.co.uk/.

Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/

$(document).ready(function() { //when the document is ready...

	$(this).removeClass("inview");
	//save selectors as variables to increase performance
	var $window = $(window);
	var $firstBG = $('#first');
	var $secondBG = $('#second');
	var trainers2 = $("#second .bg");
	var $thirdBG = $('#third');
	var $fourthBG = $('#fourth');
	var trainers4_1 = $("#fourth .bg1");
	var trainers4_2 = $("#fourth .bg2");
	var $fifthBG = $('#fifth');
	var trainers5 = $("#fifth .bg");
	var $sixthBG = $('#sixth');
	
	var windowHeight = $window.height(); //get the height of the window
	

	//apply the class "inview" to a section that is in the viewport
	$('#first, #second, #third, #fourth, #fifth, #sixth').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(){

		/*$('#nav').css({
			"top": 278
		}); //set the new top position of the navigation list
		$('#header').css({
			"top": 17
		});*/
		
		var scroll_position = $(window).scrollTop();
		if (scroll_position >= 4100) {
			$("#nav").stop().animate({ top: 50 + 'px'},100);
			$("#header").stop().animate({ top: -250 + 'px'},100);
		}else{
			$("#nav").stop().animate({ top: 278 + 'px'}, 100);
			$("#header").stop().animate({ top: 17 + 'px'},100);
		} 
		
	}
	
	//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 + "px " + (-((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
		
		$('#nav li a img:visible').hide();
		if(pos<650){
			$('#nav li.first a img').show();	
		}else if(pos>=650 && pos<1450){
			$('#nav li.second a img').show();
		}else if(pos>=1450 && pos<2180){
			$('#nav li.third a img').show();
		}else if(pos>=2180 && pos<2950){
			$('#nav li.fourth a img').show();
		}else if(pos>=2950 && pos<3730){
			$('#nav li.fifth a img').show();
		}else if(pos>=3730){
			$('#nav li.sixth a img').show();
		}

		
				
		//if the first section is in view...
		if($firstBG.hasClass("inview")){
			//call the newPos function and change the background position
			$firstBG.css({'backgroundPosition': newPos(0, windowHeight, pos, -100, 0.2)}); 
		}
		
		//if the second section is in view...
		if($secondBG.hasClass("inview")){
			//call the newPos function and change the background position
			$secondBG.css({'backgroundPosition': newPos(35, windowHeight, pos, 1350, 0.3)});
			trainers2.css({'backgroundPosition': newPos(350, windowHeight, pos, 3250, 0.1)});
		}
		
		//if the third section is in view...
		if($thirdBG.hasClass("inview")){
			//call the newPos function and change the background position
			$thirdBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 600, 0.15)});
		}
		
		//if the fourth section is in view...
		if($fourthBG.hasClass("inview")){
			$fourthBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 2450, 0.1)});
			trainers4_1.css({'backgroundPosition': newPos(-35, windowHeight, pos, 2750, 0.3)});
			trainers4_2.css({'backgroundPosition': newPos(-35, windowHeight, pos, 3375, 0.2)});
		}
		
		if($fifthBG.hasClass("inview")){
			$fifthBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 2450, 0.1)});
			trainers5.css({'backgroundPosition': newPos(790, windowHeight, pos, 4250, 0.3)});
		}
		
		if($sixthBG.hasClass("inview")){
			$sixthBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 3750, 0.2)});
		}
		
	}
		
	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
		RepositionNav();
	});
	
});