/*
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 $start = $('#start');
	var $overview = $('#overview');
	var $program = $('#program');
	var $tension = $('#tension');
	var $gamestorming = $("#gamestorming");
	var $ethnography = $("#ethnography");
	var $human = $("#human");
	var $murderboarding = $("#murderboarding");
	var $innovation = $("#innovation");
	var $contact = $('#contact');
	
	var windowHeight = $window.height(); //get the height of the window
	
	
	//apply the class "inview" to a section that is in the viewport
	$('#start, #overview, #program, #tension, #gamestorming, #ethnography, #human, #murderboarding, #innovation, #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;
		
		var windowWidth = $window.width(); 
		var siteWidth = $('.story').width();
		var margins = windowWidth - siteWidth;
		var posLeft =  (margins / 5);
		
		$('#nav').css({
	//		"top": newtop, 
			"left": posLeft
			}); //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($start.hasClass("inview")){
			//call the newPos function and change the background position
			$start.css({'backgroundPosition': newPos(50, windowHeight, pos, 380, 0.4)}); 
			$("#link-start").addClass('selected');
		} else {
			$("#link-start, #link-program").removeClass('selected');
			Shadowbox.close();
		}
		
		//if the second section is in view...
		if($overview.hasClass("inview")){
			//call the newPos function and change the background position
			$overview.css({'backgroundPosition': newPos(50, windowHeight, pos, 1500, 0.2)});
			$("#link-overview").addClass('selected');
		} else {
			$("#link-overview, #link-program").removeClass('selected');
		}		
		
		//if the fourth section is in view...
		if($tension.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$tension.css({'backgroundPosition': newPos(50, windowHeight, pos, 2650, 0.3)});
			$("#link-tension, #link-program").addClass('selected');
		} else {
			$("#link-tension").removeClass('selected');
		}		
		
		//if the fourth section is in view...
		if($gamestorming.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$gamestorming.css({'backgroundPosition': newPos(50, windowHeight, pos, 3900, 0.3)});
			$("#link-gamestorming, #link-program").addClass('selected');
		} else {
			$("#link-gamestorming").removeClass('selected');
		}	
		
		//if the fourth section is in view...
		if($ethnography.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$ethnography.css({'backgroundPosition': newPos(50, windowHeight, pos, 5800, 0.3)});
			$("#link-ethnography, #link-program").addClass('selected');
		} else {
			$("#link-ethnography").removeClass('selected');
		}	
		
		//if the fourth section is in view...
		if($human.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$human.css({'backgroundPosition': newPos(50, windowHeight, pos, 7300, 0.5)});
			$("#link-human, #link-program").addClass('selected');
		} else {
			$("#link-human").removeClass('selected');
		}	
		
		//if the fourth section is in view...
		if($murderboarding.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$murderboarding.css({'backgroundPosition': newPos(50, windowHeight, pos, 8750, 0.3)});
			$("#link-murderboarding, #link-program").addClass('selected');
		} else {
			$("#link-murderboarding").removeClass('selected');
		}	
		
		//if the fourth section is in view...
		if($innovation.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$innovation.css({'backgroundPosition': newPos(50, windowHeight, pos, 9550, 0.3)});
			$("#link-innovation, #link-program").addClass('selected');
		} else {
			$("#link-innovation").removeClass('selected');
		}	
		
			//if the second section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 9800, 0.3)});
			$("#link-contact").addClass('selected');
		} else {
			$("#link-contact, #link-program").removeClass('selected');
		}
		
			//if the fourth section is in view...
		if($tension.hasClass("inview")||$gamestorming.hasClass("inview")||$ethnography.hasClass("inview")||$human.hasClass("inview")||$murderboarding.hasClass("inview")||$innovation.hasClass("inview")){
			//call the newPos function and change the background position for CSS3 multiple backgrounds
			$innovation.css({'backgroundPosition': newPos(50, windowHeight, pos, 8900, 0.3)});
			$("#link-program").addClass('selected');
		} else {
			$("#link-program").removeClass('selected');
		}
		
		
		
		
		
		$('#pixels').html(pos+" px"); //display the number of pixels scrolled at the bottom of the page
		console.log("scroll " + pos);
		console.log("window "+windowHeight);
		
		
		
if(pos > 400)
     $('#scroll-more').fadeOut();	
}
		
	
		
	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
		
	});
	
	
	// Create the Vertical Flyout Menu
	
	var site = function() {
	this.navLi = $('#nav li').children('ul').hide().end();
	this.init();
	
};


site.prototype = {
	init : function() {
	this.setMenu();
},// Enables the slidedown menu, and adds support for IE6
setMenu : function() {
	$.each(this.navLi, function() {
								if ( $(this).children('ul')[0] ) {
									$(this).find('ul')
									.append('<span />')
									.children('span')
									.addClass('arrow');
									}
	});
	this.navLi.hover(function() {
			$(this).find('> ul').stop(true, true).fadeIn('fast');// mouseover
			$(this).addClass('hovered');
			}, function() {
			$(this).find('> ul').stop(true, true).fadeOut('fast');// mouseout
			$(this).removeClass('hovered');
			});
	}
};
		
		
$('#nav').localScroll({
	duration:1500
	});

	new site();	
		
/***
 * Validator And Forms
 --------------------------------------------------------------------------------------------/
 *
 */

$('.email').autofill({
	value: 'Your Email',
	defaultTextColor: '#222'
});


$('input#submit').click(function(){
	var email = $('input#email').val();
	var loading = $('#loading');
	var form = $('#contactform');
	var resultscontainer = $('#results');

	loading.fadeIn('fast');	
	resultscontainer.hide();
	
$.ajax({
		type: 'post',
		url: 'contactengine.php',
		data: 'email=' + email,
		
		
		success: function(results){
			loading.fadeOut('slow');
			resultscontainer.text(results);
				resultscontainer.fadeIn('slow');

			}
		});// end of ajax
		return false;
});


});