/*
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...


	//save selectors as variables to increase performance
	var $window = $(window);
	/*var $firstBG = $('#intro');
	var $secondBG = $('#second');
	var $thirdBG = $('#third');
	var $fourthBG = $('#fourth');
	var $fifthBG = $('#fifth');
	var $sixthBG = $('#sixth');
	var $seventhBG = $('#seventh');
	var $eighthBG = $('#eighth');*/
	
	/*var $firstBGgrain = $('#intro-grain');
	var $secondBGgrain = $('#second-grain');
	var $thirdBGgrain = $('#third-grain');
	var $fourthBGgrain = $('#fourth-grain');
	var $fifthBGgrain = $('#fifth-grain');
	var $sixthBGgrain = $('#sixth-grain');
	var $seventhBGgrain = $('#seventh-grain');
	var $eighthBGgrain = $('#eighth-grain');*/
	
	
	var $firstBGgrain = $('#intro-container');
	var $secondBGgrain = $('#second-container');
	var $thirdBGgrain = $('#third-container');
	var $fourthBGgrain = $('#fourth-container');
	var $fifthBGgrain = $('#fifth-container');
	var $sixthBGgrain = $('#sixth-container');
	var $seventhBGgrain = $('#seventh-container');
	var $eighthBGgrain = $('#eighth-container');
	
	
	var $content = $('#home-wrapper');
	
	var $calendar = $("#eighth #calendar");
	
	var windowHeight = $window.height(); //get the height of the window
	
	
	//apply the class "inview" to a section that is in the viewport
	//$('#intro, #second, #third, #fourth, #fifth, #sixth, #seventh, #eighth').bind('inview', function (event, visible) {
	$('.float-container').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 + "px " + (-((windowHeight + pos) - adjuster) * inertia)  + "px";
		//return x + "% " + (-((windowHeight + pos) * inertia) - adjuster)  + "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($firstBGgrain.hasClass("inview")){
			//call the newPos function and change the background position
			//$firstBGgrain.css({'backgroundPosition': newPos(0, windowHeight, pos, 1175, 1.0)}); 
			
			$content.css({'backgroundPosition': newPos(-99999, windowHeight, pos, 175, 1.0)});
		}
		
		//if the second section is in view...
		if($secondBGgrain.hasClass("inview")){
			//call the newPos function and change the background position
			
			
			//call the newPos function and change the secnond background position
			//$calendar.css({'backgroundPosition': newPos(0, windowHeight, pos, 2250, 0.6)});
			
			// $secondBGgrain.css({'backgroundPosition': newPos(-181, windowHeight, pos, 2175, 1.0)});
			//$content.css({'backgroundPosition': newPos(-181, windowHeight, pos, 3900, 1.0)}); 
			$content.css({'backgroundPosition': newPos(-181, windowHeight, pos, 2700, 1.0)}); 
		}
		
		//if the third section is in view...
		if($thirdBGgrain.hasClass("inview")){
			//call the newPos function and change the background position
			
			//$thirdBGgrain.css({'backgroundPosition': newPos(160, windowHeight, pos, 3250, 1.0)});
			
			//$content.css({'backgroundPosition': newPos(160, windowHeight, pos, 6200, 1.0)});
			$content.css({'backgroundPosition': newPos(160, windowHeight, pos, 4900, 1.0)}); 
		}
		
		//if the fourth section is in view...
		if($fourthBGgrain.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			//$fourthBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 200, 0.9) + ", " + newPos(50, windowHeight, pos, 0, 0.7) + ", " + newPos(50, windowHeight, pos, 0, 0.5) + ", " + newPos(50, windowHeight, pos, 700, 0.3)});
			//$fourthBGgrain.css({'backgroundPosition': newPos(-181, windowHeight, pos, 4450, 1.0)});
			//$content.css({'backgroundPosition': newPos(-181, windowHeight, pos, 8725, 1.0)});
			$content.css({'backgroundPosition': newPos(-181, windowHeight, pos, 7375, 1.0)});
		}
		
		if($fifthBGgrain.hasClass("inview")){
			//call the newPos function and change the background position
			
			//$fifthBGgrain.css({'backgroundPosition': newPos(160, windowHeight, pos, 5700, 1.0)});
			//$content.css({'backgroundPosition': newPos(160, windowHeight, pos, 10850, 1.0)});
			$content.css({'backgroundPosition': newPos(160, windowHeight, pos, 9575, 1.0)});
		}
		
		if($sixthBGgrain.hasClass("inview")){
			//call the newPos function and change the background position
			//$sixthBGgrain.css({'backgroundPosition': newPos(-181, windowHeight, pos, 6975, 1.0)}); 
			//$content.css({'backgroundPosition': newPos(-181, windowHeight, pos, 13250, 1.0)});
			$content.css({'backgroundPosition': newPos(-181, windowHeight, pos, 12050, 1.0)});
		}
		
		
		if($seventhBGgrain.hasClass("inview")){
			//call the newPos function and change the background position
			//$seventhBGgrain.css({'backgroundPosition': newPos(160, windowHeight, pos, 8200, 1.0)}); 
			//$content.css({'backgroundPosition': newPos(160, windowHeight, pos, 15600, 1.0)});
			$content.css({'backgroundPosition': newPos(160, windowHeight, pos, 14475, 1.0)});
		}
		
		
		if($eighthBGgrain.hasClass("inview")){
			//call the newPos function and change the background position
			//$eighthBGgrain.css({'backgroundPosition': newPos(-181, windowHeight, pos, 9425, 1.0)}); 
			//$content.css({'backgroundPosition': newPos(-181, windowHeight, pos, 17825, 1.0)});
			$content.css({'backgroundPosition': newPos(-181, windowHeight, pos, 16800, 1.0)});
		}
		
		
		
		$('#pixels').html(pos); //display the number of pixels scrolled at the bottom of the page
	}
		
	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
	});
	
});