/*
Author: Ian Lunn
Author URL: http://www.ianlunn.co.uk/
*/

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


	//save selectors as variables to increase performance
	var $window = $(window);
	var $slide1BG = $('#slide1');
	var $slide2BG = $('#slide2');
	var $slide3BG = $('#slide3');
	var $slide4BG = $('#slide4');
	
	var internalPanel1_1 = $("#slide1 .internalPanel1");
	
	var internalPanel2_1 = $("#slide2 .internalPanel1");
	var internalPanel2_2 = $("#slide2 .internalPanel2");
	var internalPanel2_3 = $("#slide2 .internalPanel3");
	var internalPanel2_4 = $("#slide2 .internalPanel4");
		
	var internalPanel3_1 = $("#slide3 .internalPanel1");
	var internalPanel3_2 = $("#slide3 .internalPanel2");
	var internalPanel3_3 = $("#slide3 .internalPanel3");
	
	var internalPanel4_1 = $("#slide4 .internalPanel1");	
	var internalPanel4_2 = $("#slide4 .internalPanel2");	
	var internalPanel4_3 = $("#slide4 .internalPanel3");	
	var internalPanel4_4 = $("#slide4 .internalPanel4");	
	var internalPanel4_6 = $("#slide4 .internalPanel6");	
	var internalPanel4_7 = $("#slide4 .internalPanel7");									
									
var windowHeight = $window.height(); //get the height of the window

	
	
	//apply the class "inview" to a section that is in the viewport
	$('#slide1, #slide2, #slide3, #slide4').bind('inview', function (event, visible) {
			if (visible == true) {
			$(this).addClass("inview");
			} else {
			$(this).removeClass("inview");
			}
		});
	
			

	
	//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 (-(( 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 slide1
		if($slide1BG.hasClass("inview")){
			//call the newPos function and change the background position
			$slide1BG.css({'top': newPos(0, windowHeight, pos, 0, 0)});
			//call the newPos function and change the secnond background position
			internalPanel1_1.css({'top': newPos(0, windowHeight, pos, 800, 0.4)});
		}
		
		//if slide2
		if($slide2BG.hasClass("inview")){
		
			if ((parseInt(internalPanel2_1.css('top')) < 22) && (parseInt(internalPanel2_1.css('top')) != 0 )){
					internalPanel2_1.css({'top':'22px'});
					internalPanel2_2.css({'top':'282px'});
					internalPanel2_3.css({'top':'429px'});
					internalPanel2_4.css({'top':'429px'});
	
				}
			if (parseInt(internalPanel2_1.css('top')) > 22 || parseInt(internalPanel2_1.css('top')) <= 0 || pos < 780 ){
				//call the newPos function and change the background position
				$slide2BG.css({'top': newPos(0, windowHeight, pos, 0, 0)});
				//call the newPos function and change the secnond background position
				internalPanel2_1.css({'top': newPos(0, windowHeight, pos, 835, 0.4)});
				internalPanel2_2.css({'top': newPos(0, windowHeight, pos, 1248, 0.6)});
				internalPanel2_3.css({'top': newPos(0, windowHeight, pos, 1315, 0.8)});
				internalPanel2_4.css({'top': newPos(0, windowHeight, pos, 1315, 0.8)});
			}
		}
		 
				//if slide3
		if($slide3BG.hasClass("inview")){
		
			if ((parseInt(internalPanel3_2.css('top')) < 50 )&& (parseInt(internalPanel3_2.css('top')) != 0 )){
/*
				internalPanel3_1.css({'top':'-193px'});
*/
				internalPanel3_2.css({'top':'111px'});
				internalPanel3_3.css({'top':'414px'});
			}
			
			if (parseInt(internalPanel3_2.css('top')) > 111 || parseInt(internalPanel3_2.css('top')) <= 0 || pos < 1370 ){
				//call the newPos function and change the background position
				$slide3BG.css({'top': newPos(0, windowHeight, pos, 0, 0)});
				//call the newPos function and change the secnond background position
/*
				internalPanel3_1.css({'top': newPos(0, windowHeight, pos, 400, 0.2)});
*/
				internalPanel3_2.css({'top': newPos(0, windowHeight, pos, 1553, 0.6)});
				internalPanel3_3.css({'top': newPos(0, windowHeight, pos, 1886, 0.8)});
				}
		}
		
						//if slide3
		if($slide4BG.hasClass("inview")){
		
		    var hitBottom = false;
		
		    if ($(window).height() + $(window).scrollTop() >= $(document).height()) {
	     	    var hitBottom = true;	
		    }

			if (((parseInt(internalPanel4_1.css('top')) < 50) && (parseInt(internalPanel4_1.css('top')) != 0 )) || hitBottom ){
				internalPanel4_1.css({'top':'50px'});
				internalPanel4_2.css({'top':'21px'});
				internalPanel4_3.css({'top':'526px'});
				internalPanel4_4.css({'top':'411px'});
				internalPanel4_6.css({'top':'411px'});
				internalPanel4_7.css({'top':'411px'});	
				
			}
		
			if (parseInt(internalPanel4_1.css('top')) > 50 || parseInt(internalPanel4_1.css('top')) <= 0 || pos < 1890 ){
		
				//call the newPos function and change the background position
				$slide4BG.css({'top': newPos(0, windowHeight, pos, 0, 0)});
				//call the newPos function and change the secnond background position
				internalPanel4_1.css({'top': newPos(0, windowHeight, pos, 1974, 0.6)});
				internalPanel4_2.css({'top': newPos(0, windowHeight, pos, 1956, 0.3)});
				internalPanel4_3.css({'top': newPos(0, windowHeight, pos, 2763, 0.6)});
				internalPanel4_4.css({'top': newPos(0, windowHeight, pos, 2915, 0.4)});
				internalPanel4_6.css({'top': newPos(0, windowHeight, pos, 2915, 0.4)});
				internalPanel4_7.css({'top': newPos(0, windowHeight, pos, 2915, 0.4)});
			  } 
		}
		
		
		$('#pixels').html(pos); //display the number of pixels scrolled at the bottom of the page
	}
		
	
	Move();
	
	if(!navigator.userAgent.match(/iPhone/i) && !navigator.userAgent.match(/iPad/i)) {
		$window.bind('scroll', function(){ //when the user is scrolling...
			Move(); //move the background images in relation to the movement of the scrollbar
		});
	}

	if(navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {

	
			internalPanel1_1.css({'top': "320px"});
	
			internalPanel2_1.css({'top': "80px"});
			internalPanel2_2.css({'top': "280px"});
			internalPanel2_3.css({'top': "400px"});		
			internalPanel2_3.css({'top': "420px"});		
						
/*
			internalPanel3_1.css({'top': "0px"});
*/
			internalPanel3_2.css({'top': "80px"});
			internalPanel3_3.css({'top': "400px"});		
			
			internalPanel4_1.css({'top': "60px"});
			internalPanel4_2.css({'top': "30px"});
			internalPanel4_3.css({'top': "540px"});		
			internalPanel4_4.css({'top': "460px"});		
			internalPanel4_6.css({'top': "390px"});	
			internalPanel4_7.css({'top': "410px"});	
			
	}	
	
	
});