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

jQuery(document).ready(function() { //when the document is ready...

	//pages
	var jQuerywindow = jQuery(window);
	var jQueryfirstBG = jQuery('#home');
	var jQuerysecondBG = jQuery('#shotstrip');
	var jQuerythirdBG = jQuery('#tastemakerx');
	var jQueryfourthBG = jQuery('#puppyandkittytime');
	var jQueryfifthBG = jQuery('#clientvoice');
	var jQuerysixthBG = jQuery('#blog');
	var jQuerysevenBG = jQuery('#about');
	var jQueryeightBG = jQuery('#contact');

	//elements in page
	var jQueryfirst2 = jQuery('#home-3');
	var jQuerytwo0 = jQuery('#ss-0');
	var jQuerytwo1 = jQuery('#ss-1');
	var jQuerytwo2 = jQuery('#ss-2');
	var jQuerytwo3 = jQuery('#ss-3');
	var jQuerytwo4 = jQuery('#ss-4');
	var jQuerytwo5 = jQuery('#ss-5');
	var jQuerytwo6 = jQuery('#ss-6');
	var jQuerytwo7 = jQuery('#ss-7');
	var jQuerythr1 = jQuery('#tmx-1');
	var jQuerythr2 = jQuery('#tmx-2');
	var jQuerythr3 = jQuery('#tmx-3');
	var jQueryfour1 = jQuery('#ptkt-1');
	var jQueryfour2 = jQuery('#ptkt-2');
	var jQueryfour3 = jQuery('#ptkt-3');
	var jQueryfifth1 = jQuery('#cv-1');
	var jQueryfifth2 = jQuery('#cv-2');
	var jQueryfifth3 = jQuery('#cv-3');
	var jQueryfifth4 = jQuery('#cv-4');
	var jQueryfifth5 = jQuery('#cv-5');
	var jQuerysix1 = jQuery('#b-1');
	var jQueryseven1 = jQuery('#agavelab-andy');
	var jQueryseven2 = jQuery('#agavelab-jesse');
	var jQueryseven3 = jQuery('#agavelab-ferny');
	var jQueryseven4 = jQuery('#agavelab-tara');
	var jQueryseven5 = jQuery('#agavelab-magaly');
	
	var windowHeight = jQuerywindow.height(); //get the height of the window
	var windowWidth = jQuerywindow.width();
	
	//apply the class "inview" to a section that is in the viewport
	jQuery('#home, #shotstrip, #clientvoice, #tastemakerx, #puppyandkittytime, #allworks, #about, #blog').bind('inview', function (event, visible) {
			if (visible == true) {
			jQuery(this).addClass("inview");
			} else {
			jQuery(this).removeClass("inview");
			}
		});
	
	jQueryfirstBG.css({'backgroundPosition': newPos(200, windowHeight, 0, 800, 0.3) +','+ newPos(0, windowHeight, 0, 0, 0.9)});
	jQueryfirst2.css({'backgroundPosition': staticHeightPos(0, windowHeight, 0, 1300, 0.5)});
	
	
	//function that places the navigation in the center of the window
	function RepositionNav(){
		var windowWidth = jQuerywindow.width();
		var windowHeight = jQuerywindow.height(); //get the height of the window
		var navHeight = jQuery('#nav').height() / 2;
		var windowCenter = (windowHeight / 2); 
		var newtop = windowCenter - navHeight;
		jQuery('#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 staticHeightPos(x, windowHeight, pos, adjuster, inertia){
		var y =  (-((500 + pos) - adjuster) * inertia);
		return x + "% " + y  + "px";
	}
	function newPos(x, windowHeight, pos, adjuster, inertia){
		//return x + "% " + (-((windowHeight + pos) - adjuster) * inertia)  + "px";
		return (x + ((windowWidth-960)/2) ) + "px " + (-((windowHeight/3 + pos) - adjuster) * inertia)  + "px";
	}
	function reverseNewPos(x, windowHeight, pos, adjuster, inertia){
		return (x + ((windowWidth-960)/2) ) + "px " + (-(adjuster - ((windowHeight/3) + pos)) * inertia)  + "px";
	}
	
	
	//function to be called whenever the window is scrolled or resized
	function Move(){ 
		var pos = jQuerywindow.scrollTop(); //position of the scrollbar

		//home
		if(jQueryfirstBG.hasClass("inview")){
			jQueryfirstBG.css({'backgroundPosition': newPos(200, windowHeight, pos, 800, 0.3) +','+ newPos(0, windowHeight, pos, 0, 0.9)});
			jQueryfirst2.css({'backgroundPosition': staticHeightPos(0, windowHeight, pos, 1300, 0.5)});
		}
		
		//shotstrip
		if(jQuerysecondBG.hasClass("inview")){
			jQuerysecondBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 1800, 0.2)});
			jQuerytwo0.css({'backgroundPosition': staticHeightPos(60, windowHeight, pos, 1400, 0.9)});
			jQuerytwo1.css({'backgroundPosition': staticHeightPos(0, windowHeight, pos, 1330, 0.7)});
			jQuerytwo2.css({'backgroundPosition': newPos(680, windowHeight, pos, 1500, 1.5)});
			jQuerytwo3.css({'backgroundPosition': newPos(480, windowHeight, pos, 1550, 0.9)});
			jQuerytwo4.css({'backgroundPosition': newPos(420, windowHeight, pos, 2550, 0.5)});
			jQuerytwo5.css({'backgroundPosition': newPos(585, windowHeight, pos, 1880, 1.2)});
			//jQuerytwo6.css({'backgroundPosition': staticHeightPos(0, windowHeight, pos, 2780, 0.7)});
			//jQuerytwo7.css({'backgroundPosition': newPos(500, windowHeight, pos, 4900, 0.3)});
		}
		
		//tastemaker
		if(jQuerythirdBG.hasClass("inview")){
			jQuerythirdBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 4500, 0.3) +','+ newPos(0, windowHeight, pos, 5400, 0.2) +','+ newPos(0, windowHeight, pos, 500, 0.2)});
			jQuerythr1.css({'backgroundPosition': newPos(-50, windowHeight, pos, 3100, 0.3)});
			jQuerythr2.css({'backgroundPosition': newPos(140, windowHeight, pos, 2700, 0.5)});
			jQuerythr3.css({'backgroundPosition': newPos(230, windowHeight, pos, 3500, 0.2)});
		}
		
		//puppytime
		if(jQueryfourthBG.hasClass("inview")){
			jQueryfourthBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 2270, 0.2) +','+ newPos(0, windowHeight, pos, 6000, 0.4)});
			jQueryfour1.css({'backgroundPosition': newPos(670, windowHeight, pos, 4400, 0.5)});
			jQueryfour2.css({'backgroundPosition': newPos(450, windowHeight, pos, 3900, 0.8)});
			jQueryfour3.css({'backgroundPosition': newPos(200, windowHeight, pos, 4130, 1.2)});
		}
		
		//clientvoice
		if(jQueryfifthBG.hasClass("inview")){
			jQueryfifthBG.css({'backgroundPosition': newPos(0, windowHeight, pos, 5200, 2.0) });
			jQueryfifth1.css({'backgroundPosition': newPos(-50, windowHeight, pos, 5700, 0.5)});
			jQueryfifth2.css({'backgroundPosition': newPos(150, windowHeight, pos, 5500, 0.6)});
			jQueryfifth3.css({'backgroundPosition': newPos(390, windowHeight, pos, 5250, 1.2)});
			jQueryfifth4.css({'backgroundPosition': newPos(580, windowHeight, pos, 5250, 1.2)});
			jQueryfifth5.css({'backgroundPosition': newPos(770, windowHeight, pos, 5250, 1.2)});
		}
		
		//blog
		if(jQuerysixthBG.hasClass("inview")){
			jQuerysixthBG.css({'backgroundPosition': newPos(770, windowHeight, pos, 6000, 0.6)});
			jQuerysix1.css({'backgroundPosition': newPos(0, windowHeight, pos, 4750, 0.3)});
		}
		
		//about
		if(jQuerysevenBG.hasClass("inview")){
			jQuerysevenBG.css({'backgroundPosition': newPos(-150, windowHeight, pos, 5350, 0.5)});
			jQueryseven1.css({'backgroundPosition': newPos(310, windowHeight, pos, 6950, 0.7)});//andy
			jQueryseven2.css({'backgroundPosition': newPos(180, windowHeight, pos, 6700, 1.5)});//jesse
			jQueryseven3.css({'backgroundPosition': newPos(535, windowHeight, pos, 6870, 0.9)});//ferny
			jQueryseven4.css({'backgroundPosition': newPos(410, windowHeight, pos, 6850, 1.2)});//tara
			jQueryseven5.css({'backgroundPosition': newPos(520, windowHeight, pos, 6770, 1.0)});//magaly
		}
		
		jQuery('#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
	
	jQuerywindow.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
	});		
	
	jQuerywindow.bind('scroll', function(){ //when the user is scrolling...
		Move(); //move the background images in relation to the movement of the scrollbar
	});
	
});