/*
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 = $('#intro');
	var $secondBG = $('#adulti');
	var $thirdBG = $('#copii');
	var $fourthBG = $('#zumba');
	var $fifthBG = $('#instructori');
	var $sixthBG = $('#galerie');
	var $seventhBG = $('#video');
	var $eightBG = $('#contact');
	
	var $gtarget = $('#target');
	var $dummy = $("#dummy");
	
	var windowHeight = $window.height(); //get the height of the window
	var storyHeight = 0;
		
	//apply the class "inview" to a section that is in the viewport
	$('#intro, #adulti, #copii, #zumba, #instructori, #galerie, #video, #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 = $('#nav').height() / 2;
		var windowCenter = (windowHeight / 2); 
		var newtop = windowCenter - navHeight;
		$('#nav').css({"top": newtop}); //set the new top position of the navigation list
		if (windowHeight < 1081) {
			storyHeight = windowHeight;
			} else {
			storyHeight = 1080;
			}
		$('.story').css({"height": storyHeight}); //resize sections
		var divtop = storyHeight / 3;
		$('.story > div').css({"top": divtop});
	}
	
	//function that centers the gallery image
	function RepositionDummy(){
		var windowHeight = $window.height();
		var dumHeight = $dummy.height();
		var pt = windowHeight / 2 - dumHeight /2;
		
	//	var windowWidth = $window.width();
	//	var dumWidth = $dummy.width();
	//	var pl = windowWidth / 2 - dumWidth /2;
		
		if(pt > 0){
			$dummy.css("paddingTop", pt+"px");
	//		$dummy.css("paddingLeft", 0);
			$dummy.css("height", "auto");
			$dummy.css("width", "100%");
		} else {
			$dummy.css("paddingTop", 0);
			$dummy.css("height", windowHeight);
			$dummy.css("width", "auto");
	//		$dummy.css("paddingLeft", pl+"px");
		}
	}
	
	//function that is called for every pixel the user scrolls. Determines the position of the background
	/*arguments: 
		x = horizontal position of background
	*/
	function newPos(x, adjuster, pos){
		return x + "% " + ((windowHeight - pos) /2 - (540 * 1.75 - storyHeight/2 * adjuster)) + "px";
	}
	
	//function to be called whenever the window is scrolled or resized
	function Move(){ 
		var pos = $window.scrollTop(); //position of the scrollbar

		if($firstBG.hasClass("inview")){
			$firstBG.css({'backgroundPosition': newPos(100, 1, pos)});
		}
		
		if($secondBG.hasClass("inview")){
			$secondBG.css({'backgroundPosition': newPos(50, 2, pos)});
		}
		
		if($thirdBG.hasClass("inview")){
			$thirdBG.css({'backgroundPosition': newPos(0, 3, pos)});
		}
		
		if($fourthBG.hasClass("inview")){
			$fourthBG.css({'backgroundPosition': newPos(50, 4, pos)});
		}
		
		if($fifthBG.hasClass("inview")){
			$fifthBG.css({'backgroundPosition': newPos(50, 5, pos)});
		}
		
		if($sixthBG.hasClass("inview")){
			$sixthBG.css({'backgroundPosition': newPos(50, 6, pos)});
		}
		
		if($seventhBG.hasClass("inview")){
			$seventhBG.css({'backgroundPosition': newPos(50, 7, pos)});
		}
		
		if($eightBG.hasClass("inview")){
			$eightBG.css({'backgroundPosition': newPos(50, 8, pos)});
		}
		
	}
		
	RepositionNav();
	
	$window.resize(function(){ //if the user resizes the window...
		Move();
		RepositionNav();
		RepositionDummy();
	});		
	
	$window.on('scroll', function(){ //when the user is scrolling...
		Move(); //move the background images in relation to the movement of the scrollbar
	});
	
	//gallery bg swap
	function Gswap(target){
		if ($gtarget.is(":visible")) {
		
			if ($dummy.attr("src") != target){
					$dummy.fadeOut(400, function(){$("#loading").slideDown('fast');
					});
					$dummy.attr("src", target);
					$dummy.load(function(){
						$dummy.fadeIn(400, function(){RepositionDummy(); $("#loading").slideUp('fast');
						});
					});
			}
		} else {
			$dummy.hide();
			$gtarget.slideDown(400, function(){
				$dummy.fadeOut(400, function(){$("#loading").slideDown('fast');
				});
				$dummy.attr("src", target);
				$dummy.load(function(){
					$dummy.fadeIn(400, function(){RepositionDummy(); $("#loading").slideUp('fast');
					});
				});
			});
		}
	}
	
	$("#thumbs a").on("click", function(event){
		var $t = $(this);
		Gswap($t.attr("href"));		
		event.preventDefault();
	});
	
	$("#nav a").on("click", function(){
		if ($(this).attr("href") != "#galerie"){
			$gtarget.slideUp(400,function(){
				$dummy.hide();
				$dummy.attr("src", "");
			});
		}
	});
	
});