/*
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 trainers = $("#second .bg");
	var pescee1sx = $("#second .pesce1sx");
	var pescee2sx = $("#second .pesce2sx");
	var pescee3sx = $("#second .pesce3sx");
	var pescee4sx = $("#second .pesce4sx");
	var pescee5sx = $("#second .pesce5sx");
	var pescee8sx = $("#second .pesce8sx");
	var pescee1dx = $("#second .pesce1dx");
	var pescee2dx = $("#second .pesce2dx");
	var pescee3dx = $("#second .pesce3dx");
	var pescee4dx = $("#second .pesce4dx");
	var pescee5dx = $("#second .pesce5dx");
	var pescee6dx = $("#second .pesce6dx");
	var pescee7dx = $("#second .pesce7dx");
	var pescee8dx = $("#second .pesce8dx");
	var pescee1 = $("#second .pesce1");
	var pescee2 = $("#second .pesce2");
	var bollee1 = $("#second .bolle1");
	var bollee2 = $("#second .bolle2");
	
	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').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                          definisce la posizione orizzontale: più il numero è alto e più l'immagine si avvicina al lato sinistro dello schermo, allontanandosi quindi dal lato destro
		windowHeight = height of the viewport
		pos = position of the scrollbar
		adjuster = adjust the position of the background                          da dove inizia a vedersi (verticalmente) l'IMMAGINE di sfondo, non influisce sugli elementi contenuti
		inertia = how fast the background moves in relation to scrolling           se   1 > x   allora sono più lenti, se 1=x allora stessa velocità dllo scroll, se 1<x allora è più veloce
	*/
	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($firstBG.hasClass("inview")){
			//call the newPos function and change the background position
			$firstBG.css({'backgroundPosition': newPos(200, windowHeight, pos, 900, 3)});
			// così + più veloce! ... ma essendo anche il contenitore,spariscono prima anche gli elementi contenuti,infatti ciò che esce dai limiti di questo div diventa non visibile (height: 600px; overflow: hidden;) 
			
			//$firstBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 900, 0.3)});    
			//è più lento dello scrollbar
		}
		
		//if the second section is in view...
		if($secondBG.hasClass("inview")){
			//call the newPos function and change the background position
			$secondBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 1900, 0.4)});
			//$secondBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			trainers.css({'backgroundPosition': newPos(50, windowHeight, pos, 1900, 0.6)});
			pescee1sx.css({'backgroundPosition': newPos(-6, windowHeight, pos, 900, 1)});
			pescee2sx.css({'backgroundPosition': newPos(-26, windowHeight, pos, 1440, 1)});
			pescee3sx.css({'backgroundPosition': newPos(-8, windowHeight, pos, 1800, 1.9)});
			pescee4sx.css({'backgroundPosition': newPos(1, windowHeight, pos, 2140, 0.8)});
			pescee5sx.css({'backgroundPosition': newPos(-6, windowHeight, pos, 2440, 1)});
			pescee8sx.css({'backgroundPosition': newPos(-6, windowHeight, pos, 3440, 0.6)});
			pescee1dx.css({'backgroundPosition': newPos(100, windowHeight, pos, 900, 1)});
			pescee2dx.css({'backgroundPosition': newPos(170, windowHeight, pos, 1160, 1.5)});
			pescee3dx.css({'backgroundPosition': newPos(99, windowHeight, pos, 1850, 0.8)});
			pescee4dx.css({'backgroundPosition': newPos(101, windowHeight, pos, 2000, 1)});
			pescee5dx.css({'backgroundPosition': newPos(92, windowHeight, pos, 2150, 1.6)});
			pescee6dx.css({'backgroundPosition': newPos(121, windowHeight, pos, 2350, 1.5)});
			pescee7dx.css({'backgroundPosition': newPos(97, windowHeight, pos, 2750, 1.2)});
			pescee8dx.css({'backgroundPosition': newPos(221, windowHeight, pos, 3150, 0.7)});
			pescee1.css({'backgroundPosition': newPos(10, windowHeight, pos, 1900, 0.8)});
			bollee1.css({'backgroundPosition': newPos(15, windowHeight, pos, 1900, 2.8)});
			bollee2.css({'backgroundPosition': newPos(33, windowHeight, pos, 2450, 0.5)}); 
			//la posizione verticale si gioca tutta con le ultime due cifre... più omeno se la velocità diminuisce di 0.1 allora l'altezza deve aumentare di 300 circa!!!
			pescee2.css({'backgroundPosition': newPos(30, windowHeight, pos, 3500, 0.4)});
		}
		
		//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, 2850, 0.3)});
		}
		
		//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(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)});
		}
		
		$('#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
	});
	
});