/*
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 	= $('#bigbox1');
	var $secondBG 	= $('#bigbox2');
	var $thirdBG 	= $('#bigbox3');
	var $fourthBG 	= $('#bigbox4');
	var $fifthBG 	= $("#bigbox5");
	
	var windowHeight = $window.height(); //get the height of the window
	
	
	//apply the class "inview" to a section that is in the viewport
	$('.bigbox').bind('inview', function (event, visible) {
			//console.log($(this).attr("id")+"=> "+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 pos = $window.scrollTop();
		var result = pos+30 ;
		var result2 = pos+30 ;
		if(result<342)result=342;
		if(result2<342)result2=342;
		$('#box-news').stop(true,true);
		$('#box-news').animate({top: result+"px"}, 100, function(e){});
		
		$('#news-tab').stop(true,true);
		$('#news-tab').animate({top: result2+"px"}, 100, function(e){});
	}
	
	//function to be called whenever the window is scrolled or resized
	function Move(){
		var pos = $window.scrollTop(); //position of the scrollbar
		var calculed ;
		//console.log("Move("+pos+")");
		//console.log($firstBG.hasClass("inview"));
		
		RepositionNav();
		//if the first section is in view...
		if($firstBG.hasClass("inview")){
			// illus1 // 219px => 650px
			// illus2 // 328px => 650px
			// 0 => 220px;
			$firstBG.find(".illus1").stop(true,true);
			$firstBG.find(".illus1").animate({top: (0.22*pos+220)+"px"}, 100, function(e){});
			
			$firstBG.find(".illus2").stop(true,true);
			$firstBG.find(".illus2").animate({top: (0.09*pos+328)+"px"}, 200, function(e){});
		}
		
		//if the second section is in view...
		if($secondBG.hasClass("inview")){
			$secondBG.css("background-position", "0px "+(-0.23*pos+242)+"px");
			

		}
		
		//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)});
			$thirdBG.find(".illus1").stop(true,true);
			$thirdBG.find(".illus1").animate({top: (0.27*pos-204)+"px"}, 100, function(e){});
			
			$thirdBG.find(".illus2").stop(true,true);
			$thirdBG.find(".illus2").animate({top: (-0.13*pos+14)+"px"}, 200, function(e){});
			
			$thirdBG.find(".illus3").stop(true,true);
			$thirdBG.find(".illus3").animate({top: (0.06*pos+410)+"px"}, 200, function(e){});

		}
		
		//if the fourth section is in view...
		if($fourthBG.hasClass("inview")){
			if(pos>2350){
				$fourthBG.find(".illus1").stop(true,true);
				$fourthBG.find(".illus1").animate({bottom: (-0.48*pos+1140)+"px"}, 200, function(e){});
				
			
			}
			
			if(pos>2450){
				calculed = (-0.3*pos+740) ;
				if(calculed>0)calculed=0;
				$fourthBG.find(".illus3").stop(true,true);
				$fourthBG.find(".illus3").animate({bottom: calculed+"px"}, 100, function(e){});
				
				if(pos<2590){
					$fourthBG.find(".illus2").stop(true,true);
					$fourthBG.find(".illus2").animate({top: (-1.69*pos+4125)+"px"}, 200, function(e){});
				}
			}
			
			
		}
		
		if($fifthBG.hasClass("inview")){
			$fifthBG.find(".illus1").stop(true,true);
			$fifthBG.find(".illus1").animate({top: (-0.18*pos+786)+"px"}, 200, function(e){});

			$fifthBG.find(".illus2").stop(true,true);
			$fifthBG.find(".illus2").animate({top: (0.12*pos-244)+"px"}, 200, function(e){});
			
			$fifthBG.find(".illus3").stop(true,true);
			$fifthBG.find(".illus3").animate({top: (0.31*pos-594)+"px"}, 200, function(e){});
		}
	}
		
	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
	});
	
});