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

if (!isiPhone()) {

	// Apply fixed attachment
	
	$('.parallax').each(function(){ $(this).css('background-attachment','fixed'); });
	
	$('#Method').each(function(){ $(this).css('background-position','right top'); });


	//save selectors as variables to increase performance
	var $window = $(window);
	var $T1 = $('#T1');
	
	var $Home = $('#Home');
	var $Method = $('#Method');
	var $Services = $('#Services');
	var $Studies = $('#Studies');
	var $Contact = $('#Contact');
	
	
	var $bleed = $("#bleed");
	var $strap = $("#Method .strap");
	
	
	var $float1 = $("#float1");
	var $float2 = $("#float2");
	var $float3 = $("#float3");
	var $float4 = $("#float4");
	var $float5 = $("#float5");
	var $float6 = $("#float6");
	var $float7 = $("#float7");
	var $float8 = $("#float8");
	
	var windowHeight = $window.height(); //get the height of the window
	
	$('#T1,#Home,#Method,#Services,#Studies,#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
	}
	
	//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){
		
		var y = x + "% " + (-((windowHeight + pos) - adjuster) * inertia);
		
		return y + "px";
	}
	
	//function to be called whenever the window is scrolled or resized
	function Move(){ 
		var pos = $window.scrollTop(); //position of the scrollbar
		
		$bleed.css({'backgroundPosition': newPos(100, 800, pos, 1220, -0.1)}); 
		
		if($T1.hasClass("inview")){
			//call the newPos function and change the background position
			$float1.css({'backgroundPosition': newPos(0, windowHeight, pos, 1500, -0.5)}); 
			$float2.css({'backgroundPosition': newPos(10, windowHeight, pos, 4000, 0.1)}); 
			$float3.css({'backgroundPosition': newPos(40, windowHeight, pos, 1500, -0.1)}); 
			$float4.css({'backgroundPosition': newPos(50, windowHeight, pos, 1500, -0.7)});
			$float5.css({'backgroundPosition': newPos(60, windowHeight, pos, 1500, -0.1)});
			$float6.css({'backgroundPosition': newPos(70, windowHeight, pos, 1500, -0.3)});
			$float7.css({'backgroundPosition': newPos(80, windowHeight, pos, 1500, -0.4)});
			$float8.css({'backgroundPosition': newPos(90, windowHeight, pos, 500, -0.1)});
		}
		
		if($Home.hasClass("inview")){
			//call the newPos function and change the background position
			// $('li#navHome').addClass('active');
			$('#homelogo').fadeOut();
		} else { 
			// $('li#navHome').removeClass('active'); 
			$('#homelogo').fadeIn();
		}
		
		if($Home.hasClass("inview")){
			//call the newPos function and change the background position
			inactiveNav(); $('li#navStart').addClass('active'); 
			
		} else { 
			$('li#navStart').removeClass('active'); 
		}
		
		if((!$Home.hasClass("inview")) && ($Method.hasClass("inview"))){
			//call the newPos function and change the background position
			inactiveNav(); $('li#navMethod').addClass('active'); 
			
		} else { 
			$('li#navMethod').removeClass('active'); 
		}
		
		if($Services.hasClass("inview")){
			//call the newPos function and change the background position
			inactiveNav(); $('li#navServices').addClass('active'); 
			
		} else { 
			$('li#navServices').removeClass('active'); 
		}
		
		if($Studies.hasClass("inview")){
			//call the newPos function and change the background position
			inactiveNav(); $('li#navStudies').addClass('active');
			
		} else { 
			$('li#navStudies').removeClass('active'); 
		}
		
		if($Contact.hasClass("inview")){
			//call the newPos function and change the background position
			inactiveNav(); $('li#navContact').addClass('active');
			
		} else { 
			$('li#navContact').removeClass('active'); 
		}
		
		// if($Services.hasClass("inview")){
		// 	$('ul#service li').each(function() { $(this).fadeIn('1800'); });
		// }
		
		$('#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
	});
	
} else { 

// iPad scrolling

var $window = $(window);

var $Home = $('#Home');

$('#Home').bind('inview', function (event, visible) {
			if (visible == true) {
			$(this).addClass("inview");
			} else {
			$(this).removeClass("inview");
			}
		});

$window.bind('scroll', function(){ //when the user is scrolling...
		if($Home.hasClass("inview")){
			//call the newPos function and change the background position
			// $('li#navHome').addClass('active');
			$('#homelogo').fadeOut();
		} else { 
			// $('li#navHome').removeClass('active'); 
			$('#homelogo').fadeIn();
		}
		
	});
	
		



}
	
});

function inactiveNav() { 

$('ul#nav li').each(function(){ $(this).removeClass('active');});

}