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


	//save selectors as variables to increase performance
	var $window = $(window);
	var $homeBG = $('#home');
	var $collectionBG = $('#collection');
	var $collectionBG1 = $('#collection1');
	var $collectionBG2 = $('#collection2');
	var $pressBG = $('#press');
	var $storesBG = $('#stores');
	var $contactsBG = $('#contacts');
	var $mamaBG = $('#mama');
	var trainers = $("#collection .bg");
	
	var windowHeight = $window.height(); //get the height of the window
	
	
	//apply the class "inview" to a section that is in the viewport
	$('#home, #collection, #collection1, #collection2, #press, #stores, #contacts, #mama').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
		//$('#nav').css({"top": 150}); //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 offset=260;
		var pos = $window.scrollTop(); //position of the scrollbar


		if($homeBG.hasClass("inview")){
			//call the newPos function and change the background position
			$homeBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 900-offset, 0.3)}); 
		}
		

		if($collectionBG.hasClass("inview")){
			//call the newPos function and change the background position
			$collectionBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 1800-offset, 0.3)});
			//call the newPos function and change the secnond background position
			//trainers.css({'backgroundPosition': newPos(50, windowHeight, pos, 1800-offset, 0.6)});
		}

		if($collectionBG1.hasClass("inview")){
			//call the newPos function and change the background position
			$collectionBG1.css({'backgroundPosition': newPos(50, windowHeight, pos, 2700-offset, 0.3)});
			//call the newPos function and change the secnond background position
			//trainers.css({'backgroundPosition': newPos(50, windowHeight, pos, 1800-offset, 0.6)});
		}

		if($collectionBG2.hasClass("inview")){
			//call the newPos function and change the background position
			$collectionBG2.css({'backgroundPosition': newPos(50, windowHeight, pos, 3600-offset, 0.3)});
			//call the newPos function and change the secnond background position
			trainers.css({'backgroundPosition': newPos(50, windowHeight, pos, 4000-offset, 0.6)});
		}
		

		if($pressBG.hasClass("inview")){
			//call the newPos function and change the background position
			$pressBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 4500-offset, 0.3)});
		}
		

		if($storesBG.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$storesBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 5400-offset, 0.3)});;
		}


		if($contactsBG.hasClass("inview")){
			//call the newPos function and change the background position
			$contactsBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 6300-offset, 0.3)}); 
		}


		if($mamaBG.hasClass("inview")){
			//call the newPos function and change the background position
			$mamaBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 7200-offset, 0.3)}); 
		}
		
		$('#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
	});
	
});