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

var pos;

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


	//save selectors as variables to increase performance
	var $window = $(window);

    //first slide
    var $firstBG = $('#intro');
    var ths_article_bg = $("#intro .ths_article_bg");

    //second
    var $secondBG = $('#second');
    var $rent_screen = $("##second #screen");

    //third
	var $thirdBG = $('#third');
    var $bg_balls = $('#bg_balls');
    var $fg_balls = $('#foreground_bals');

    //fourth
	var $fourthBG = $('#fourth');
    var $books_shadows = $('#books_shadows');
    var $books = $('#books');

    //fifth
    var $fifthBG = $('#fifth');
    var $bg_sig_monitor = $('#bg_sig_monitor');


    var $logosslide = $('#logos_slide');
    var $logos1 = $('#logos1');


	var windowHeight = $window.height(); //get the height of the window


	//apply the class "inview" to a section that is in the viewport
	$('#intro, #second, #third, #fourth, #fifth, #logos_slide').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(50, windowHeight, pos, 900, 0.1)});
            ths_article_bg.css({'backgroundPosition': newPos(50, windowHeight, pos, 1385, 0.35)});
		}

		//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.1)});
			//call the newPos function and change the secnond background position
			$rent_screen.css({'backgroundPosition': newPos(50, windowHeight, pos, 1760, 0.18)});
		}

		//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, 3305, 0.1)});
			$bg_balls.css({'backgroundPosition': newPos(50, windowHeight, pos, 3350, 0.4)});
			$fg_balls.css({'backgroundPosition': newPos(50, windowHeight, pos, 3520, 1)});
		}

		//if the fourth section is in view...
		if($fourthBG.hasClass("inview")){
		    if(windowHeight >= 900){
                var startHeight = 4700;
            } else {
                var startHeight = 4440;
            }

            //alert(windowHeight);
			//call the newPos function and change the background
			$fourthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 4626, .1)});
			$books_shadows.css({'backgroundPosition': newPos(60, windowHeight, pos, startHeight, .7)});
			$books.css({'backgroundPosition': newPos(50, windowHeight, pos, startHeight, .9)});
		}

		//if the fourth section is in view...
		if($fifthBG.hasClass("inview")){
            if(windowHeight >= 900){
                var startHeight = 6520;
                $('#gear').css('margin-right', '-300px');
            } else {
                var startHeight = 6220;
                 $('#gear').css('margin-right', '-700px');
            }

            //call the newPos function and change the background position
			$fifthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 5100, .9)});
            $bg_sig_monitor.css({'backgroundPosition': newPos(50, windowHeight, pos, startHeight, .7)});

		}

		if($logosslide.hasClass("inview")){

            if(windowHeight >= 900){
                var startHeight = 7450;
            } else {
                var startHeight = 7250;
            }

			//call the newPos function and change the background position
			$logos1.css({'backgroundPosition': newPos(50, windowHeight, pos, startHeight, 0.5)});
		}



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



});