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

	//slider team
	$('#navigation ul').localScroll();
	$('.next').localScroll();
	
	$('#slider-team').bjqs({
	  'animation' : 'slide',
	  'automatic' : false,
	  'showMarkers' : false,
	  'width' : 350,
	  'height' : 380
	});

	redrawDotNav();

	//save selectors as variables to increase performance
	var $window = $(window);
	var $firstBG = $('#intro');
	var $secondBG = $('#services');
	var $second_2_BG = $('#services-work');
	var $thirdBG = $('#company');
	var $fourthBG = $('#product-1');
	var $fourth_2_BG = $('#product-2');
	var $fourth_3_BG = $('#product-3');
	var $fifthBG = $('#clients');
	
	var mouse = $("#company-team .bg");
	var phone1 = $("#product-1 .bg");
	
	var windowHeight = $window.height(); //get the height of the window
	
	
	//apply the class "inview" to a section that is in the viewport
	$('#intro, #services, #services-work, #company, #company-team, #product-1, #product-2, #product-3, #clients').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 = $('#navigation').height() / 2;
		var windowCenter = (windowHeight / 2); 
		var newtop = windowCenter - navHeight;
		//$('#navigation').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, 800, 0.3)}); 
		}
		
		//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, 1650, 0.3)});
		}
		
		//if the second part 2 section is in view...
		if($second_2_BG.hasClass("inview")){
			//call the newPos function and change the background position
			$second_2_BG.css({'backgroundPosition': newPos(50, windowHeight, pos, 2750, 0.2)});
		}
		
		//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, 4300, 0.3)});
		}
		
		//if the fourth section is in view...
		if($fourthBG.hasClass("inview")){
			//call the newPos function and change the background position
			$fourthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 6100, 0.3)});
			//call the newPos function and change the second background position
			phone1.css({'backgroundPosition': newPos(50, windowHeight, pos, 6800, 0.6)});
		}
		
		//if the fourth part 2 section is in view...
		if($fourth_2_BG.hasClass("inview")){
			//call the newPos function and change the background position
			$fourth_2_BG.css({'backgroundPosition': newPos(50, windowHeight, pos, 7300, 0.2)});
		}
		
		//if the fourth part 3 section is in view...
		if($fourth_3_BG.hasClass("inview")){
			//call the newPos function and change the background position
			$fourth_3_BG.css({'backgroundPosition': newPos(50, windowHeight, pos, 8300, 0.1)});
		}
		
		//if the fifth section is in view...
		if($fifthBG.hasClass("inview")){
			//call the newPos function and change the background position
			$fifthBG.css({'backgroundPosition': newPos(50, windowHeight, pos, 9800, 0.2)});
		}
		
		redrawDotNav();
		
		//$('#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
	});
	
	
});

function redrawDotNav(){
	var section1Top =  0;
	// The top of each section is offset by half the distance to the previous section.
	var section2Top = $('#services').offset().top - (($('#company').offset().top - $('#services').offset().top) / 2) + 1300;
	var section3Top = $('#company').offset().top - (($('#product-1').offset().top - $('#company').offset().top) / 2);
	var section4Top = $('#product-1').offset().top - (($('#clients').offset().top - $('#product-1').offset().top) / 2) + 1300; 
	var section5Top = $('#clients').offset().top - (($('#contact-us').offset().top - $('#clients').offset().top) / 2)
	var section6Top = $('#contact-us').offset().top - (($(document).height() - $('#contact-us').offset().top) / 2);
	
	$('nav#navigation a').removeClass('active');
	
	if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){
		$('nav#navigation a.intro').addClass('active');
		
	} else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top){
		$('nav#navigation a.services').addClass('active');
		
	} else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top){
		$('nav#navigation a.company').addClass('active');
	
	} else if ($(document).scrollTop() >= section4Top && $(document).scrollTop() < section5Top){
		$('nav#navigation a.products').addClass('active');
		
	} else if ($(document).scrollTop() >= section5Top && $(document).scrollTop() < section6Top){
		$('nav#navigation a.clients').addClass('active');
		
	} else if ($(document).scrollTop() >= section6Top){
		$('nav#navigation a.contact-us').addClass('active');
	}
	
}