/*
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 = $('#block1');
	var $secondBG = $('#block2');
	var $thirdBG = $('#block3');
	var $fourthBG = $('#block4');
	var $fifthBG = $('#block5');
	var $sixthBG = $('#block6');
	var $seventhBG = $('#block7');
	var $eighthBG = $('#block8');
	var $ninthBG = $('#block9');
	var $tenthBG = $('#block10');
	var trainers = $("#block1 .bg");
	var trainerstoo = $("#block2 .bg");
	var trainersthree = $("#block3 .bg");
	var trainersfour = $("#block4 .bg");
	var trainersfive = $("#block5 .bg");
	var trainerssix = $("#block6 .bg");
	var trainersseven = $("#block7 .bg");
	var trainerseight = $("#block8 .bg");
	var trainersnine = $("#block9 .bg");
	var trainersten = $("#block10 .bg");
	//For support for up to 20 posts, uncomment the variable and additional code below
	var $eleventhBG = $('#block11');
	var $twelfthBG = $('#block12');
	var $thirteenthBG = $('#block13');
	var $fourteenthBG = $('#block14');
	var $fifteenthBG = $('#block15');
	var $sixteenthBG = $('#block16');
	var $seventeenthBG = $('#block17');
	var $eightteenthBG = $('#block18');
	var $nineteenthBG = $('#block19');
	var $twentythBG = $('#block20');
	var trainerseleven = $("#block11 .bg");
	var trainerstwelve = $("#block12 .bg");
	var trainersthirteen = $("#block13 .bg");
	var trainersfourteen = $("#block14 .bg");
	var trainersfifteen = $("#block15 .bg");
	var trainerssixteen = $("#block16 .bg");
	var trainersseventeen = $("#block17 .bg");
	var trainerseightteen = $("#block18 .bg");
	var trainersnineteen = $("#block19 .bg");
	var trainerstwenty = $("#block20 .bg");
	
	var windowHeight = $window.height(); //get the height of the window
	
	
	//apply the class "inview" to a section that is in the viewport
	$('#block1, #block2, #block3, #block4, #block5, #block6, #block7, #block6, #block7, #block8, #block9, #block10, #block11, #block12, #block13, #block14, #block15, #block16, #block17, #block18, #block19, #block20').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 + "% " + (-((700 + 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($firstBG.hasClass("inview")){
			//call the newPos function and change the background position
			$firstBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 700, 0.3)});
			trainers.css({'backgroundPosition': newPos(50, windowHeight, pos, 800, 0.6)});
		}
		
		//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, 1400, 0.3)});
			//call the newPos function and change the secnond background position
			trainerstoo.css({'backgroundPosition': newPos(50, windowHeight, pos, 1500, 0.6)});
		}
		
		//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, 2100, 0.3)});
			trainersthree.css({'backgroundPosition': newPos(50, windowHeight, pos, 2200, 0.6)});
		}
		
		//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, 2800, 0.3)});
			trainersfour.css({'backgroundPosition': newPos(50, windowHeight, pos, 2900, 0.6)});
		}
		
		//if the fifth section is in view...
		if($fifthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$fifthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 3500, 0.3)});
			trainersfive.css({'backgroundPosition': newPos(50, windowHeight, pos, 3400, 0.6)});
		}
		
		if($sixthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$sixthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 4200, 0.3)});
			trainerssix.css({'backgroundPosition': newPos(50, windowHeight, pos, 4100, 0.6)});
		}
		
		if($seventhBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$seventhBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 4900, 0.3)});
			trainersseven.css({'backgroundPosition': newPos(50, windowHeight, pos, 4800, 0.6)});
		}
		
		if($eighthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$eighthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 5600, 0.3)});
			trainerseight.css({'backgroundPosition': newPos(50, windowHeight, pos, 5500, 0.6)});
		}
		
		if($ninthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$ninthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 6300, 0.3)});
			trainersnine.css({'backgroundPosition': newPos(50, windowHeight, pos, 6200, 0.6)});
		}
		
		if($tenthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$tenthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 7000, 0.3)});
			trainersten.css({'backgroundPosition': newPos(50, windowHeight, pos, 6900, 0.6)});
		}
		
		if($eleventhBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$eleventhBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 7700, 0.3)});
			trainerseleven.css({'backgroundPosition': newPos(50, windowHeight, pos, 7600, 0.6)});
		}
		
		if($twelfthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$twelfthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 8400, 0.3)});
			trainerstwelve.css({'backgroundPosition': newPos(50, windowHeight, pos, 7300, 0.6)});
		}
		
		if($thirteenthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$thirteenthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 9100, 0.3)});
			trainersthirteen.css({'backgroundPosition': newPos(50, windowHeight, pos, 8000, 0.6)});
		}
		
		if($fourteenthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$fourteenthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 9800, 0.3)});
			trainersfourteen.css({'backgroundPosition': newPos(50, windowHeight, pos, 8700, 0.6)});
		}
		
		if($fifteenthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$fifteenthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 10500, 0.3)});
			trainersfifteen.css({'backgroundPosition': newPos(50, windowHeight, pos, 9400, 0.6)});
		}
		
		if($sixteenthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$sixteenthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 11200, 0.3)});
			trainerssixteen.css({'backgroundPosition': newPos(50, windowHeight, pos, 10100, 0.6)});
		}
		
		if($seventeenthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$seventeenthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 11900, 0.3)});
			trainersseventeen.css({'backgroundPosition': newPos(50, windowHeight, pos, 10800, 0.6)});
		}
		
		if($eightteenthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$eightteenthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 12600, 0.3)});
			trainerseightteen.css({'backgroundPosition': newPos(50, windowHeight, pos, 11500, 0.6)});
		}
		
		if($nineteenthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$nineteenthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 13300, 0.3)});
			trainersnineteen.css({'backgroundPosition': newPos(50, windowHeight, pos, 12200, 0.6)});
		}
		
		if($twentythBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$twentythBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 14000, 0.3)});
			trainerstwenty.css({'backgroundPosition': newPos(50, windowHeight, pos, 12900, 0.6)});
		}
		
		$('#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
	});
	
});