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

	function fadeAll(time){ 
		$(".menu div").fadeOut(time);
	}
		
	$("#menu0 a").mouseover(function(){  fadeAll(200); $("#menu0 div").fadeIn(500); }); $("#menu0 a").mouseout(function(){ $("#menu0 div").fadeOut(500); });
	$("#menu1 a").mouseover(function(){  fadeAll(200); $("#menu1 div").fadeIn(500); }); $("#menu1 a").mouseout(function(){ $("#menu1 div").fadeOut(500); });
	$("#menu2 a").mouseover(function(){  fadeAll(200); $("#menu2 div").fadeIn(500); }); $("#menu2 a").mouseout(function(){ $("#menu2 div").fadeOut(500); });
	$("#menu3 a").mouseover(function(){  fadeAll(200); $("#menu3 div").fadeIn(500); }); $("#menu3 a").mouseout(function(){ $("#menu3 div").fadeOut(500); });
	$("#menu4 a").mouseover(function(){  fadeAll(200); $("#menu4 div").fadeIn(500); }); $("#menu4 a").mouseout(function(){ $("#menu4 div").fadeOut(500); });
	$("#menu5 a").mouseover(function(){  fadeAll(200); $("#menu5 div").fadeIn(500); }); $("#menu5 a").mouseout(function(){ $("#menu5 div").fadeOut(500); });
	$("#menu6 a").mouseover(function(){  fadeAll(200); $("#menu6 div").fadeIn(500); }); $("#menu6 a").mouseout(function(){ $("#menu6 div").fadeOut(500); });
	$("#menu7 a").mouseover(function(){  fadeAll(200); $("#menu7 div").fadeIn(500); }); $("#menu7 a").mouseout(function(){ $("#menu7 div").fadeOut(500); });
	$("#menu8 a").mouseover(function(){  fadeAll(200); $("#menu8 div").fadeIn(500); }); $("#menu8 a").mouseout(function(){ $("#menu8 div").fadeOut(500); });
	$("#menu9 a").mouseover(function(){  fadeAll(200); $("#menu9 div").fadeIn(500); }); $("#menu9 a").mouseout(function(){ $("#menu9 div").fadeOut(500); });
	$("#menu10 a").mouseover(function(){ fadeAll(200); $("#menu10 div").fadeIn(500); }); $("#menu10 a").mouseout(function(){ $("#menu10 div").fadeOut(500); });
	$("#menu11 a").mouseover(function(){ fadeAll(200); $("#menu11 div").fadeIn(500); }); $("#menu11 a").mouseout(function(){ $("#menu11 div").fadeOut(500); });
	
	//save selectors as variables to increase performance
	var $window = $(window);
	var $bg = $('#home');
	var $bg1 = $('#bg1');
	var $bg2 = $('#bg2');
	var $bg3 = $('#bg3');
	var $bg4 = $('#bg4');
	var $bg5 = $('#bg5');
	var $bg6 = $('#bg6');
	var $bg7 = $('#bg7');
	var $bg8 = $('#bg8');
	var $bg9 = $('#bg9');
	var $bg10 = $('#bg10');
	var $bg11 = $('#bg11');
	
	var $bgInner = $("#home .inner");
	var $bg1Inner = $("#bg1 .inner");
	var $bg2Inner = $("#bg2 .inner");
	var $bg3Inner = $("#bg3 .inner");
	var $bg4Inner = $("#bg4 .inner");
	var $bg5Inner = $("#bg5 .inner");
	var $bg6Inner = $("#bg6 .inner");
	var $bg7Inner = $("#bg7 .inner");
	var $bg7Balde = $("#bg7 .balde");
	var $bg8Inner = $("#bg8 .inner");
	var $bg9Inner = $("#bg9 .inner");
	var $bg10Inner = $("#bg10 .inner");
	
	var windowHeight = $window.height(); //get the height of the window
	
	//apply the class "inview" to a section that is in the viewport
	$('.section').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 + "% " + (-((windowHeight + pos) - adjuster) * inertia)  + "px";
	}
	
	function dot(pTop,winH){
		$('#nav li a').removeClass("active");
		
		if(pTop<200){ $('#menu0 a').addClass("active"); }
		if((pTop>winH-200)&&(pTop<winH+200)){ $('#menu1 a').addClass("active"); }
		if((pTop>(winH*2)-200)&&(pTop<(winH*2)+200)){ $('#menu2 a').addClass("active"); }
		if((pTop>(winH*3)-200)&&(pTop<(winH*3)+200)){ $('#menu3 a').addClass("active"); }
		if((pTop>(winH*4)-200)&&(pTop<(winH*4)+200)){ $('#menu4 a').addClass("active"); }
		if((pTop>(winH*5)-200)&&(pTop<(winH*5)+200)){ $('#menu5 a').addClass("active"); }
		if((pTop>(winH*6)-200)&&(pTop<(winH*6)+200)){ $('#menu6 a').addClass("active"); }
		if((pTop>(winH*7)-200)&&(pTop<(winH*7)+200)){ $('#menu7 a').addClass("active"); }
		if((pTop>(winH*8)-200)&&(pTop<(winH*8)+200)){ $('#menu8 a').addClass("active"); }
		if((pTop>(winH*9)-200)&&(pTop<(winH*9)+200)){ $('#menu9 a').addClass("active"); }
		if(pTop>(winH*10)-200){ $('#menu10 a').addClass("active"); }
	}
	
	//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($bg.hasClass("inview")){
			//call the newPos function and change the background position
			$bg.css({'backgroundPosition': newPos(50, windowHeight, pos, windowHeight, 0.3)});
			
			$bgInner.css({'backgroundPosition': newPos(50, windowHeight, pos, (windowHeight+(windowHeight/2)), 0.6)});
		}
		
		if($bg1.hasClass("inview")){
			$bg1.css({'backgroundPosition': newPos(50, windowHeight, pos, (windowHeight*2), 0.3)});
			$bg1Inner.css({'backgroundPosition': newPos(50, windowHeight, pos, ((windowHeight*2)+(windowHeight/2)), 0.6)});
		}
		
		if($bg2.hasClass("inview")){
			$bg2.css({'backgroundPosition': newPos(50, windowHeight, pos, (windowHeight*3), 0.3)});
			$bg2Inner.css({'backgroundPosition': newPos(50, windowHeight, pos, ((windowHeight*3)+(windowHeight/2)), 0.6)});
		}
		
		if($bg3.hasClass("inview")){
			$bg3.css({'backgroundPosition': newPos(50, windowHeight, pos, (windowHeight*4), 0.3)});
			$bg3Inner.css({'backgroundPosition': newPos(50, windowHeight, pos, ((windowHeight*4)+(windowHeight/2)), 0.6)});
		}
		
		if($bg4.hasClass("inview")){
			$bg4.css({'backgroundPosition': newPos(50, windowHeight, pos, (windowHeight*5), 0.3)});
			$bg4Inner.css({'backgroundPosition': newPos(50, windowHeight, pos, ((windowHeight*5)+(windowHeight/2)), 0.6)});
		}
		
		if($bg5.hasClass("inview")){
			$bg5.css({'backgroundPosition': newPos(50, windowHeight, pos, (windowHeight*6), 0.3)});
			$bg5Inner.css({'backgroundPosition': newPos(50, windowHeight, pos, ((windowHeight*6)+(windowHeight/2)), 0.6)});
		}
		
		if($bg6.hasClass("inview")){
			$bg6.css({'backgroundPosition': newPos(50, windowHeight, pos, (windowHeight*7), 0.3)});
			$bg6Inner.css({'backgroundPosition': newPos(50, windowHeight, pos, ((windowHeight*7)+(windowHeight/2)), 0.6)});
		}
		
		if($bg7.hasClass("inview")){
			$bg7.css({'backgroundPosition': newPos(50, windowHeight, pos, (windowHeight*8), 0.3)});
			$bg7Inner.css({'backgroundPosition': newPos(50, windowHeight, pos, ((windowHeight*8)+(windowHeight/2)), 0.6)});
			$bg7Balde.css({'backgroundPosition': newPos(0, windowHeight, pos, (windowHeight*8), 0.1)});
		}
		
		if($bg8.hasClass("inview")){
			$bg8.css({'backgroundPosition': newPos(50, windowHeight, pos, (windowHeight*9), 0.3)});
			$bg8Inner.css({'backgroundPosition': newPos(50, windowHeight, pos, ((windowHeight*9)+(windowHeight/2)), 0.6)});
		}
		
		if($bg9.hasClass("inview")){
			$bg9.css({'backgroundPosition': newPos(50, windowHeight, pos, (windowHeight*10), 0.3)});
			$bg9Inner.css({'backgroundPosition': newPos(50, windowHeight, pos, ((windowHeight*10)+(windowHeight/2)), 0.6)});
		}
		
		if($bg10.hasClass("inview")){
			$bg10.css({'backgroundPosition': newPos(50, windowHeight, pos, (windowHeight*11), 0.3)});
			$bg10Inner.css({'backgroundPosition': newPos(50, windowHeight, pos, ((windowHeight*11)+(windowHeight/2)), 0.6)});
		}
		
		//$('#pixels').html(pos); //display the number of pixels scrolled at the bottom of the page
		dot($window.scrollTop(),windowHeight);
	}
		
	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
	});
	
});