/*
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 = $('#work-branding');
	var $secondBG = $('#work-marketing');
	var $thirdBG = $('#work-advertising');
	var $fourthBG = $('#work-publicrelations');
	var $fifthBG = $('#work-interactive');
	var $sixthBG = $('#work-mediaplanning');
	var $seventhBG = $('#work-socialmedia');
	var $eighthBG = $('#work-graphic');
	var $ninthBG = $('#work-event');
	var $tenthBG = $('#work-cultural');
	var brandingIcon = $("#work-branding .icon");
	var brandingGraphic = $("#work-branding .thumb");
	var marketingIcon = $("#work-marketing .icon");
	var marketingGraphic = $("#work-marketing .thumb");
	var advertisingIcon = $("#work-advertising .icon");
	var advertisingGraphic = $("#work-advertising .thumb");
	var prIcon = $("#work-publicrelations .icon");
	var prGraphic = $("#work-publicrelations .thumb");
	var interactiveIcon = $("#work-interactive .icon");
	var interactiveGraphic = $("#work-interactive .thumb");
	var mpIcon = $("#work-mediaplanning .icon");
	var mpGraphic = $("#work-mediaplanning .thumb");
	var smIcon = $("#work-socialmedia .icon");
	var smGraphic = $("#work-socialmedia .thumb");
	var graphicIcon = $("#work-graphic .icon");
	var graphicGraphic = $("#work-graphic .thumb");
	var epGraphic = $("#work-event .thumb");
	var epIcon = $("#work-event .icon");
	var cmGraphic = $("#work-cultural .thumb");
	var cmIcon = $("#work-cultural .icon");
	
	//var windowHeight = $window.height(); //get the height of the window
	var windowHeight = 900;
	
	//apply the class "inview" to a section that is in the viewport
	$('#work-marketing, #work-branding, #work-advertising, #work-mediaplanning, #work-publicrelations, #work-socialmedia, #work-interactive, #work-graphic, #work-cultural, #work-event').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-scrolling').height() / 2;
		var windowCenter = (windowHeight / 2); 
		var newtop = windowCenter - navHeight;
		$('#nav-scrolling').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($firstBG.hasClass("inview")){
			//call the newPos function and change the background position
			//$firstBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 900, 0.3)});
		//brandingIcon.css({'backgroundPosition': newPos(50, windowHeight, pos, 1400, 0.7)});
		//brandingGraphic.css({'backgroundPosition': newPos(50, windowHeight, pos, 1400, 0.1)});
		}
		
		//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, 1250, 0.3)});
			//call the newPos function and change the secnond background position
		marketingIcon.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.7)});
		marketingGraphic.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
		}
		
		//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)});
		advertisingGraphic.css({'backgroundPosition': newPos(50, windowHeight, pos, 2200, 0.3)});
		advertisingIcon.css({'backgroundPosition': newPos(50, windowHeight, pos, 2350, 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(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)});
		prGraphic.css({'backgroundPosition': newPos(50, windowHeight, pos, 2750, 0.3)});
		prIcon.css({'backgroundPosition': newPos(50, windowHeight, pos, 2700, 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
		interactiveGraphic.css({'backgroundPosition': newPos(50, windowHeight, pos, 3200, 0.3)});
		interactiveIcon.css({'backgroundPosition': newPos(50, windowHeight, pos, 3350, 0.6)});
		}

		//if the sixth section is in view...
		if($sixthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
		mpIcon.css({'backgroundPosition': newPos(50, windowHeight, pos, 3800, 0.6)});
		mpGraphic.css({'backgroundPosition': newPos(50, windowHeight, pos, 3700, 0.3)});
		}
		
		//if the seventh section is in view...
		if($seventhBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
		smGraphic.css({'backgroundPosition': newPost(50, windowHeight, pos, 4400, 0.3)});
		smIcon.css({'backgroundPosition': newPos(50, windowHeight, pos, 4400, 0.3)});
		}

		//if the eighth section is in view...
		if($eighthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
		graphicGraphic.css({'backgroundPosition': newPos(50, windowHeight, pos, 4700, 0.3)});
		graphicIcon.css({'backgroundPosition': newPos(50, windowHeight, pos, 4700, 0.7)});
		}

		//if the ninth section is in view...
		if($ninthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
		epGraphic.css({'backgroundPosition': newPos(50, windowHeight, pos, 5200, 0.3)});
		epIcon.css({'backgroundPosition': newPos(50, windowHeight, pos, 5300, 0.6)});
		}
		
		//if the tenth section is in view...
		if($tenthBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
		//cmGraphic.css({'backgroundPosition': newPos(50, windowHeight, pos, 6200, 0.3)});
		//cmIcon.css({'backgroundPosition': newPos(50, windowHeight, pos, 6400, 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
	});
	
});