/*
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 browserWidth = $(window).width();
	var $window = $(window);
	var $firstBG = $('#area1');
	var $firstInteractive = $('#area1 .interactive1');
	var $firstInteractive2 = $('#area1 .interactive2');
	var $secondBG = $('#area2');
	var $secondInteractive = $('#area2 .interactive1');
	var $secondInteractive2 = $('#area2 .interactive2');
	var $thirdBG = $('#area3');
	var $thirdInteractive = $('#area3 #interactive-holder');
	var $fourthBG = $('#area4');
	var $fifthBG = $('#area5');

	
	var windowHeight = $window.height(); //get the height of the window
	
	
	//apply the class "inview" to a section that is in the viewport
	$('#area1, #area1-second-bg, #area2, #area2-second-bg, #area3, #area4, #area5').bind('inview', function (event, visible) {
			if (visible == true) {
				$(this).addClass("inview");
			} else {
				//$(this).removeClass("inview");
			}
		});
	
	//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 newPosInteractive(pos,inertia,initial){
		return (-((pos+initial)) * 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($firstBG.hasClass("inview")){
			//call the newPos function and change the background position
			$firstBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 900, 0.3)}); 
			if(browserWidth >1150) {
				$firstInteractive.css({'top': newPosInteractive(pos,0.5,0)}); 
			}
			else {
				$firstInteractive.css({'top': newPosInteractive(pos,0.2,0)}); 
			}
		}
		
		//if the second section is in view...
		if($secondBG.hasClass("inview")){
			//call the newPos function and change the background position
			$secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 900, 0.3)}); 
			if(browserWidth >1150) {
				$secondInteractive.css({'top': newPosInteractive(pos,0.7,-1200)}); 
			}
			else {
				$secondInteractive.css({'top': newPosInteractive(pos,0.5,-1100)}); 
			}
		}
		
		//if the third section is in view...
		if($thirdBG.hasClass("inview")){
			//call the newPos function and change the background position
			$thirdBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 900, 0.3)});
			$thirdInteractive.css({'top': newPosInteractive(pos,0.8,-2200)});
		}
		
		//if the fourth section is in view...
		if($fourthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$fourthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 900, 0.3)}); 
		}
		if($fifthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$fifthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 900, 0.3)}); 
		}
		
	}
		
	
	$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
	});
	
});