/*
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
	//left
	var $window = $(window);
	var $first1BGleft = $('.intro-left-1');
	var $first2BGleft = $('.intro-left-2');
	var $first3BGleft = $('.intro-left-3');
	var $first4BGleft = $('.intro-left-4');
	var $first5BGleft = $('.intro-left-5');
	var $second1BGleft = $('.bg2-left-1');
	var $second2BGleft = $('.bg2-left-2');
	var $second3BGleft = $('.bg2-left-3');
	var $second4BGleft = $('.bg2-left-4');
	var $second5BGleft = $('.bg2-left-5');
	var $third1BGleft = $('.bg3-left-1');
	var $third2BGleft = $('.bg3-left-2');
	var $third3BGleft = $('.bg3-left-3');
	var $third4BGleft = $('.bg3-left-4');
	var $third5BGleft = $('.bg3-left-5');
	var $fourth1BGleft = $('.bg4-left-1');
	var $fourth2BGleft = $('.bg4-left-2');
	var $fourth3BGleft = $('.bg4-left-3');
	var $fourth4BGleft = $('.bg4-left-4');
	var $fourth5BGleft = $('.bg4-left-5');
	//right
	var $window = $(window);
	var $first1BGright = $('.intro-right-1');
	var $first2BGright = $('.intro-right-2');
	var $first3BGright = $('.intro-right-3');
	var $first4BGright = $('.intro-right-4');
	var $first5BGright = $('.intro-right-5');
	var $second1BGright = $('.bg2-right-1');
	var $second2BGright = $('.bg2-right-2');
	var $second3BGright = $('.bg2-right-3');
	var $second4BGright = $('.bg2-right-4');
	var $second5BGright = $('.bg2-right-5');
	var $third1BGright = $('.bg3-right-1');
	var $third2BGright = $('.bg3-right-2');
	var $third3BGright = $('.bg3-right-3');
	var $third4BGright = $('.bg3-right-4');
	var $third5BGright = $('.bg3-right-5');
	var $fourth1BGright = $('.bg4-right-1');
	var $fourth2BGright = $('.bg4-right-2');
	var $fourth3BGright= $('.bg4-right-3');
	var $fourth4BGright = $('.bg4-right-4');
	var $fourth5BGright = $('.bg4-right-5');
	
	var windowHeight = $window.height(); //get the height of the window
	
	
	//apply the class "inview" to a section that is in the viewport
	$('.intro-left-1,.intro-left-2,.intro-left-3,.intro-left-4,.intro-left-5,.intro-right-1,.intro-right-2,.intro-right-3,.intro-right-4,.intro-right-5').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($first1BGleft.hasClass("inview")){
			//call the newPos function and change the background position
			$first1BGleft.css({'backgroundPosition': newPos(50, windowHeight, pos, 0, 0.1)});
			//call the newPos function and change the secnond background position
			$second1BGleft.css({'backgroundPosition': newPos(90, windowHeight, pos, 1300, 0.7)});
			//call the newPos function and change the third background position
			$third1BGleft.css({'backgroundPosition': newPos(90, windowHeight, pos, 1300, 0.4)});
			//call the newPos function and change the third background position
			$fourth1BGleft.css({'backgroundPosition': newPos(50, windowHeight, pos, 1400, 0.9)});
		}
		//if the first section is in view...
		if($first2BGleft.hasClass("inview")){
			//call the newPos function and change the background position
			$first2BGleft.css({'backgroundPosition': newPos(50, windowHeight, pos, 800, 0.1)});
			//call the newPos function and change the secnond background position
			$second2BGleft.css({'backgroundPosition': newPos(90, windowHeight, pos, 2100, 0.7)});
			//call the newPos function and change the third background position
			$third2BGleft.css({'backgroundPosition': newPos(90, windowHeight, pos, 2100, 0.4)});
			//call the newPos function and change the third background position
			$fourth2BGleft.css({'backgroundPosition': newPos(50, windowHeight, pos, 2200, 0.9)});
		}
				//if the first section is in view...
		if($first3BGleft.hasClass("inview")){
			//call the newPos function and change the background position
			$first3BGleft.css({'backgroundPosition': newPos(50, windowHeight, pos, 1600, 0.1)});
			//call the newPos function and change the secnond background position
			$second3BGleft.css({'backgroundPosition': newPos(90, windowHeight, pos, 2900, 0.7)});
			//call the newPos function and change the third background position
			$third3BGleft.css({'backgroundPosition': newPos(90, windowHeight, pos, 2900, 0.4)});
			//call the newPos function and change the third background position
			$fourth3BGleft.css({'backgroundPosition': newPos(50, windowHeight, pos, 3000, 0.9)});
		}
				//if the first section is in view...
		if($first4BGleft.hasClass("inview")){
			//call the newPos function and change the background position
			$first4BGleft.css({'backgroundPosition': newPos(50, windowHeight, pos, 2400, 0.1)});
			//call the newPos function and change the secnond background position
			$second4BGleft.css({'backgroundPosition': newPos(90, windowHeight, pos, 3700, 0.7)});
			//call the newPos function and change the third background position
			$third4BGleft.css({'backgroundPosition': newPos(90, windowHeight, pos, 3700, 0.4)});
			//call the newPos function and change the third background position
			$fourth4BGleft.css({'backgroundPosition': newPos(50, windowHeight, pos, 3800, 0.9)});
		}
				//if the first section is in view...
		if($first5BGleft.hasClass("inview")){
			//call the newPos function and change the background position
			$first5BGleft.css({'backgroundPosition': newPos(50, windowHeight, pos, 3200, 0.1)});
			//call the newPos function and change the secnond background position
			$second5BGleft.css({'backgroundPosition': newPos(90, windowHeight, pos, 4500, 0.7)});
			//call the newPos function and change the third background position
			$third5BGleft.css({'backgroundPosition': newPos(90, windowHeight, pos, 4500, 0.4)});
			//call the newPos function and change the third background position
			$fourth5BGleft.css({'backgroundPosition': newPos(50, windowHeight, pos, 4600, 0.9)});
		}


		//if the first section is in view...
		if($first1BGright.hasClass("inview")){
			//call the newPos function and change the background position
			$first1BGright.css({'backgroundPosition': newPos(50, windowHeight, pos, 0, 0.1)});
			//call the newPos function and change the secnond background position
			$second1BGright.css({'backgroundPosition': newPos(90, windowHeight, pos, 1300, 0.7)});
			//call the newPos function and change the third background position
			$third1BGright.css({'backgroundPosition': newPos(90, windowHeight, pos, 1300, 0.4)});
			//call the newPos function and change the third background position
			$fourth1BGright.css({'backgroundPosition': newPos(50, windowHeight, pos, 1400, 0.9)});
		}
		//if the first section is in view...
		if($first2BGright.hasClass("inview")){
			//call the newPos function and change the background position
			$first2BGright.css({'backgroundPosition': newPos(50, windowHeight, pos, 800, 0.1)});
			//call the newPos function and change the secnond background position
			$second2BGright.css({'backgroundPosition': newPos(90, windowHeight, pos, 2100, 0.7)});
			//call the newPos function and change the third background position
			$third2BGright.css({'backgroundPosition': newPos(90, windowHeight, pos, 2100, 0.4)});
			//call the newPos function and change the third background position
			$fourth2BGright.css({'backgroundPosition': newPos(50, windowHeight, pos, 2200, 0.9)});
		}
				//if the first section is in view...
		if($first3BGright.hasClass("inview")){
			//call the newPos function and change the background position
			$first3BGright.css({'backgroundPosition': newPos(50, windowHeight, pos, 1600, 0.1)});
			//call the newPos function and change the secnond background position
			$second3BGright.css({'backgroundPosition': newPos(90, windowHeight, pos, 2900, 0.7)});
			//call the newPos function and change the third background position
			$third3BGright.css({'backgroundPosition': newPos(90, windowHeight, pos, 2900, 0.4)});
			//call the newPos function and change the third background position
			$fourth3BGright.css({'backgroundPosition': newPos(50, windowHeight, pos, 3000, 0.9)});
		}
				//if the first section is in view...
		if($first4BGright.hasClass("inview")){
			//call the newPos function and change the background position
			$first4BGright.css({'backgroundPosition': newPos(50, windowHeight, pos, 2400, 0.1)});
			//call the newPos function and change the secnond background position
			$second4BGright.css({'backgroundPosition': newPos(90, windowHeight, pos, 3700, 0.7)});
			//call the newPos function and change the third background position
			$third4BGright.css({'backgroundPosition': newPos(90, windowHeight, pos, 3700, 0.4)});
			//call the newPos function and change the third background position
			$fourth4BGright.css({'backgroundPosition': newPos(50, windowHeight, pos, 3800, 0.9)});
		}
				//if the first section is in view...
		if($first5BGright.hasClass("inview")){
			//call the newPos function and change the background position
			$first5BGright.css({'backgroundPosition': newPos(50, windowHeight, pos, 3200, 0.1)});
			//call the newPos function and change the secnond background position
			$second5BGright.css({'backgroundPosition': newPos(90, windowHeight, pos, 4500, 0.7)});
			//call the newPos function and change the third background position
			$third5BGright.css({'backgroundPosition': newPos(90, windowHeight, pos, 4500, 0.4)});
			//call the newPos function and change the third background position
			$fourth5BGright.css({'backgroundPosition': newPos(50, windowHeight, pos, 4600, 0.9)});
		}
		
		$('#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
	});
	
});