/*
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() {

	//save selectors as variables to increase performance
	var $window = $(window);
	var $firstBG = $('#intro');
	var $secondBG = $('#whatwedo');
	var $thirdBG = $('#clients');
	var $fourthBG = $('#candidates');
        var $fifthBG = $('#vacancies');
        var $sixthBG = $('#testimonials');
        var $seventhBG = $('#contact');
	
        var feather1 = $('#intro .feather-1');
        var feather2 = $('#intro .feather-2');
        var feather3 = $('#intro .feather-3');
        var feather4 = $('#intro .feather-4');
        var feather5 = $('#intro .feather-5');
        
        var lime = $('#clients .lime');
        
        var cork1 = $('#candidates .cork-1');
        var cork2 = $('#candidates .cork-2');
        var cork3 = $('#candidates .cork-3');
        var cork4 = $('#candidates .cork-4');
        
        var bubble1 = $('#contact .bubble-1');
        var bubble2 = $('#contact .bubble-2');
        var bubble3 = $('#contact .bubble-3');
        
	var windowHeight = $window.height(); //get the height of the window
	
	//apply the class "inview" to a section that is in the viewport
	$('#intro, #whatwedo, #clients, #candidates, #vacancies, #testimonials, #contact').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 = $('#head-nav').height() / 3.5;
		var windowCenter = (windowHeight / 3.5); 
		var newtop = windowCenter - navHeight;
		$('#head-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();

		if($firstBG.hasClass("inview")){
                    feather4.css({'backgroundPosition': newPos(100, 0, pos, 200, 0.2)});
                    feather1.css({'backgroundPosition': newPos(0, 0, pos, 200, 0.6)});
                    feather3.css({'backgroundPosition': newPos(0, 0, pos, 200, 0.9)});
                    feather5.css({'backgroundPosition': newPos(64, 0, pos, 200, 1)});
                    feather2.css({'backgroundPosition': newPos(85, 0, pos, 200, 1)});
		}
                
		if($thirdBG.hasClass("inview")){
                        //lime.css({'backgroundPosition': newPos(0, windowHeight, pos, 2150, 0.2)});
		}
                
                if($fourthBG.hasClass("inview")){
                    cork1.css({'backgroundPosition': newPos(0, windowHeight, pos, 3500, 0.45)});
                    cork2.css({'backgroundPosition': newPos(83, windowHeight, pos, 2900, 0.6)});
                    cork3.css({'backgroundPosition': newPos(100, windowHeight, pos, 2900, 0.3)});
                    cork4.css({'backgroundPosition': newPos(57, windowHeight, pos, 3300, 0.8)});
		}
                
                if($seventhBG.hasClass("inview")){
                    bubble1.css({'backgroundPosition': newPos(3, windowHeight, pos, 6600, 0.5)});
                    bubble2.css({'backgroundPosition': newPos(18, windowHeight, pos, 7400, 0.4)});
                    bubble3.css({'backgroundPosition': newPos(1, windowHeight, pos, 8100, 0.3)});
		}
	}
		
	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
	});
	
});