/*
Demo: Despiration Tutorial Parallax Demo
Author: Elias Ghosn - Despiration.com
Author URL: http://www.despiration.com/
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 Despiration.com simply by leaving these comments in the source code or if you'd prefer, place a link on your website to http://www.despiration.com/.

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 top_border = $("#intro .top_border");
	var balloon01 = $("#intro .bg1");
	var croud01 = $("#intro .bg2");
	var croud02 = $("#intro .bg3");
	var croud03 = $("#intro .bg4");
	var croud04 = $("#intro .bg5");
	var croud05 = $("#intro .bg6");
	var people01 = $("#intro .bg7");
	//var service_bg = $("#intro .bg8");
	var cloud06 = $("#intro .bg9");
	var balloon02 = $("#intro .bg10");
	var cloud07 = $("#intro .bg11");
	var cloud08 = $("#intro .bg12");
	var cloud09 = $("#intro .bg13");
	var balloon03 = $("#intro .bg14");
	var balloon04 = $("#intro .bg15");
	var balloon05 = $("#intro .bg16");
	var balloon06 = $("#intro .bg17");
	var rainbow = $("#intro .bg18");
	//var cms_bg = $("#intro .bg19");
	//var img_wp = $("#intro .bg20");
	//var img_jm = $("#intro .bg21");
	var cloud11 = $("#intro .bg22");
	var island = $("#intro .bg23");
	var cloud12 = $("#intro .bg24");
	var cloud13 = $("#intro .bg25");
	var cloud14 = $("#intro .bg26");
	var bird01 = $("#intro .bg27");
	var bird02 = $("#intro .bg28");
	var bird03 = $("#intro .bg29");
	var airplane = $("#intro .bg31");
	var cloud15 = $("#intro .bg32");
	var cloud16 = $("#intro .bg33");
	var bird04 = $("#intro .bg34");
	var cloud17 = $("#intro .bg35");
	var corporate_bg = $("#intro .bg36");
	var cloud18 = $("#intro .bg37");
	var cloud19 = $("#intro .bg38");
	var bubble01 = $("#intro .bg39");
	var bubble02 = $("#intro .bg40");
	var bubble03 = $("#intro .bg41");
	var cloud20 = $("#intro .bg42");
	var cloud21 = $("#intro .bg43");
	var cloud22 = $("#intro .bg44");
	
	var windowHeight = $window.height(); //get the height of the window
	
	
	//apply the class "inview" to a section that is in the viewport
	$('#intro, #second').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 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(0, windowHeight, pos, 6500, 0)});
			//call the newPos function and change the second background position
			balloon01.css({'backgroundPosition': newPos(90, windowHeight, pos, 1400, 0.3)});
			croud01.css({'backgroundPosition': newPos(180, windowHeight, pos, 1300, 0.48)});
			croud02.css({'backgroundPosition': newPos(100, windowHeight, pos, 1300, 0.8)});
			croud03.css({'backgroundPosition': newPos(40, windowHeight, pos, 1400, 1.00)});
			croud04.css({'backgroundPosition': newPos(94, windowHeight, pos, 1200, 1.0)});
			croud05.css({'backgroundPosition': newPos(70, windowHeight, pos, 1450, 0.5)});
			people01.css({'backgroundPosition': newPos(70, windowHeight, pos, 1400, 0.55)});
			//service_bg.css({'backgroundPosition': newPos(100, windowHeight, pos, 1800, 1.0)});
			cloud06.css({'backgroundPosition': newPos(-40, windowHeight, pos, 1860, 0.6)});
			balloon02.css({'backgroundPosition': newPos(6, windowHeight, pos, 1850, 1.4)});
			cloud07.css({'backgroundPosition': newPos(-100, windowHeight, pos, 1900, 1.0)});
			cloud08.css({'backgroundPosition': newPos(26, windowHeight, pos, 2800, 0.8)});
			cloud09.css({'backgroundPosition': newPos(140, windowHeight, pos, 3200, 0.7)});
			balloon03.css({'backgroundPosition': newPos(-10, windowHeight, pos, 2300, 0.8)});
			balloon04.css({'backgroundPosition': newPos(10, windowHeight, pos, 2600, 0.9)});
			balloon05.css({'backgroundPosition': newPos(30, windowHeight, pos, 2800, 0.7)});
			balloon06.css({'backgroundPosition': newPos(20, windowHeight, pos, 2800, 1.0)});
			rainbow.css({'backgroundPosition': newPos(100, windowHeight, pos, 2800, 1.0)});
			//cms_bg.css({'backgroundPosition': newPos(0, windowHeight, pos, 3000, 1.0)});
			//img_wp.css({'backgroundPosition': newPos(80, windowHeight, pos, 3700, 0.7)});
			//img_jm.css({'backgroundPosition': newPos(70, windowHeight, pos, 3760, 0.9)});
			cloud11.css({'backgroundPosition': newPos(180, windowHeight, pos, 4000, 0.8)});
			island.css({'backgroundPosition': newPos(0, windowHeight, pos, 4250, 0.9)});
			cloud12.css({'backgroundPosition': newPos(130, windowHeight, pos, 4400, 0.7)});
			cloud13.css({'backgroundPosition': newPos(20, windowHeight, pos, 4500, 0.68)});
			cloud14.css({'backgroundPosition': newPos(-10, windowHeight, pos, 4600, 0.9)});
			bird01.css({'backgroundPosition': newPos(26, windowHeight, pos, 4560, 0.76)});
			bird02.css({'backgroundPosition': newPos(0, windowHeight, pos, 4570, 0.84)});
			bird03.css({'backgroundPosition': newPos(10, windowHeight, pos, 4400, 1.2)});
			airplane.css({'backgroundPosition': newPos(130, windowHeight, pos, 4700, 1.3)});
			cloud15.css({'backgroundPosition': newPos(-50, windowHeight, pos, 4700, 1.3)});
			cloud16.css({'backgroundPosition': newPos(0, windowHeight, pos, 5200, 1.0)});
			bird04.css({'backgroundPosition': newPos(100, windowHeight, pos, 5800, 0.7)});
			cloud17.css({'backgroundPosition': newPos(140, windowHeight, pos, 5500, 1.3)});
			corporate_bg.css({'backgroundPosition': newPos(0, windowHeight, pos, 5300, 1.0)});
			cloud18.css({'backgroundPosition': newPos(90, windowHeight, pos, 5900, 1.0)});
			cloud19.css({'backgroundPosition': newPos(0, windowHeight, pos, 6200, 1.3)});
			bubble01.css({'backgroundPosition': newPos(80, windowHeight, pos, 5800, 0.9)});
			bubble02.css({'backgroundPosition': newPos(90, windowHeight, pos, 5900, 1.0)});
			bubble03.css({'backgroundPosition': newPos(100, windowHeight, pos, 6000, 1.1)});
			cloud20.css({'backgroundPosition': newPos(90, windowHeight, pos, 6300, 1.4)});
			cloud21.css({'backgroundPosition': newPos(-70, windowHeight, pos, 6700, 1.0)});
			cloud22.css({'backgroundPosition': newPos(0, windowHeight, pos, 6650, 0.9)});

		}
		
		$('#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
	});
	
});