/*
JavaScript for Horizontal Scrolling Backgrounds for WeAreDesigners.net
Author: Sajith Jayaweera
Author URL: http://www.sajith.me/
Site URL: http://www.wearedesigners.net/

The below code is based on the excellent tutorial by Ian Lunn. Details and Copyrights below:

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 = $('#project1bg');
	var $secondBG = $('#project2bg');
	var $thirdBG = $('#project3bg');
	var $fourthBG = $('#project4bg');
	var $fifthBG = $('#project5bg');
	var $sixthBG = $('#project6bg');
	
	var windowHeight = $window.height(); //get the height of the window
	
	
	//apply the class "inview" to a section that is in the viewport
	$('#project1bg, #project2bg, #project3bg, #project4bg, #project5bg, #project6bg').bind('inview', function (event, visible) {
			if (visible == true) {
			$(this).addClass("inview");
			} else {
			$(this).removeClass("inview");
			}
		});
	
	
	//functions that are called for every pixel the user scrolls. Determines the position of the background
	/*arguments: 
		y = vertical 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
	*/	
	
	// horizontal algorithm
	
	// move background from left to right
	function newPosToRight(x, adjuster, inertia, y){
		return (((x - adjuster) * inertia)) + "px " + y + "%";
	}
	
	// move background from right to left
	function newPosToLeft(x, adjuster, inertia, y){
		return (-((x - adjuster) * inertia)) + "px " + y + "%";
	}
	
	// this is just to test the scroll position
	function testPos(x, y){
		return x + "px " + y + "%";
	}	
	
	
	//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 newPosToRight function and change the background position
			//what this really means: backgroundPosition: is  x-position = ((x - adjuster) * inertia)px / y-position is ypx
			//and the values are gained from the bottom array: (pos, adjuster, inertia, y-positon)
			$firstBG.css({'backgroundPosition': newPosToRight(pos, 1700, 0.2, 0)}); 
		}
		
		if($secondBG.hasClass("inview")){
			$secondBG.css({'backgroundPosition': newPosToLeft(pos, 0, 0.1, 0)});  //1750 adjuster
		}
		
		if($thirdBG.hasClass("inview")){
			$thirdBG.css({'backgroundPosition': newPosToRight(pos, 1500, 0.1, 0)});  //3500 adjuster
		}
		
		if($fourthBG.hasClass("inview")){
			$fourthBG.css({'backgroundPosition': newPosToLeft(pos, 2000, 0.1, 0)}); //5250 adjuster
		}
		
		if($fifthBG.hasClass("inview")){
			$fifthBG.css({'backgroundPosition': newPosToRight(pos, 5500, 0.1, 0)}); //7000 adjuster
		}
		
		if($sixthBG.hasClass("inview")){
			$sixthBG.css({'backgroundPosition': newPosToLeft(pos, 0, 0.1, 0)}); //8750 adjuster
		}
		
	}
	
	$window.resize(function(){ //if the user resizes the window...
		Move(); //move the background images in relation to the movement of the scrollbar
	});
	
	$window.bind('scroll', function(){ //when the user is scrolling...
		Move(); //move the background images in relation to the movement of the scrollbar
	});
	
});