/*
JavaScript for Magnetyz
Author: Ian Lunn & tweaked by Vaibhav Bharadwaj
License: http://creativecommons.org/licenses/by-sa/3.0/ (Attribution Share Alike)
*/

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

	$('#nav').localScroll();

	//save selectors as variables to increase performance
	var $window = $(window);
	var $home = $('#home');
	var $about = $('#about');
	var $services = $('#services');
	var $portfolio = $('#portfolio');
	var $clients = $('#clients');
	var $contact = $('#contact');
	
	var smilie = $("#home .smilie");
	var magnet = $("#about .magnetbig");
	var penholder = $("#services .penholder");
	var filmcan = $("#portfolio .filmcan");
	var rolodex = $("#clients .rolodex");
	var mobile = $("#contact .mobile");
	
	var windowHeight = $window.height(); //get the height of the window
	
	$('.tree').click(function() {
		$('#levelbg').animate({top : '94px'}, 1000);
		document.getElementById('point').innerHTML = '00';
	});
	
	$('.magnet').click(function() {
		$('#levelbg').animate({top : '174px'}, 1000);
			document.getElementById('point').innerHTML = '01';
	});
	
	$('.beaker').click(function() {
		$('#levelbg').animate({top : '254px'}, 1000);
			document.getElementById('point').innerHTML = '02';
	});
	
	$('.bomb').click(function() {
		$('#levelbg').animate({top : '334px'}, 1000);
			document.getElementById('point').innerHTML = '03';
	});
	
	$('.mask').click(function() {
		$('#levelbg').animate({top : '414px'}, 1000);
			document.getElementById('point').innerHTML = '04';
	});
	
	$('.compass').click(function() {
		$('#levelbg').animate({top : '494px'}, 1000);
			document.getElementById('point').innerHTML = '05';
	});
	
	//apply the class "inview" to a section that is in the viewport
	$('#home, #about, #services, #portfolio, #clients, #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 windowWidth = $window.width(); //get the width of the window
		var navHeight = $('#nav').height();
		var navWidth = $('#nav').width() / 2;
		var windowCenter = (windowHeight);
		var windowMiddle = (windowWidth / 2); 
		var newtop = windowCenter - navHeight;
		var newleft = windowMiddle - navWidth;
		$('#nav').css({"top": newtop}); //set the new top position of the navigation list
		$('#nav').css({"left": newleft}); //set the new left 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 windowHeight = $window.height(); //get the height of the window
		var pos = $window.scrollTop(); //position of the scrollbar

		if(windowHeight >= 300 && windowHeight <= 350) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 495, 0.8)});
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 1585, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2445, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3410, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.5, windowHeight, pos, 4380, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5360, 0.6)});
		}
		}
		
		else if(windowHeight >= 351 && windowHeight <= 400) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 540, 0.8)});
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 1625, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2485, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3455, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.5, windowHeight, pos, 4415, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5400, 0.6)});
		}
		}
		
		else if(windowHeight >= 401 && windowHeight <= 450) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 595, 0.8)});
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 1670, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2530, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3505, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.5, windowHeight, pos, 4465, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5455, 0.6)});
		}
		}
		
		else if(windowHeight >= 451 && windowHeight <= 500) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 640, 0.8)}); 
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 1720, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2585, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3560, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.5, windowHeight, pos, 4520, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5505, 0.6)});
		}
		}
		
		else if(windowHeight >= 501 && windowHeight <= 550) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 690, 0.8)});
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 1780, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2645, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3610, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.5, windowHeight, pos, 4565, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5555, 0.6)});
		}
		}
		
		else if(windowHeight >= 551 && windowHeight <= 600) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 740, 0.8)});
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 1825, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2690, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3660, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.5, windowHeight, pos, 4620, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5605, 0.6)});
		}
		}
		
		else if(windowHeight >= 601 && windowHeight <= 650) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 785, 0.8)});
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 1875, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2740, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3710, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.5, windowHeight, pos, 4670, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5655, 0.6)});
		}
		}
		
		else if(windowHeight >= 651 && windowHeight <= 700) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 835, 0.8)});
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 1935, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2790, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3760, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.5, windowHeight, pos, 4725, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5710, 0.6)});
		}
		}
		
		else if(windowHeight >= 701 && windowHeight <= 750) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 890, 0.8)});
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 1980, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2845, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3815, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.3, windowHeight, pos, 4770, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5755, 0.6)});
		}
		}
		
		else if(windowHeight >= 751 && windowHeight <= 800) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 955, 0.8)}); 
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 2050, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2920, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3880, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.5, windowHeight, pos, 4835, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5820, 0.6)});
		}
		}
		
		else if(windowHeight >= 801 && windowHeight <= 850) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 720, 0.8)});
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 1800, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2630, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3640, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.3, windowHeight, pos, 4600, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5588, 0.6)});
		}
		}
		
		else if(windowHeight >= 851 && windowHeight <= 900) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 720, 0.8)});
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 1800, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2630, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3640, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.3, windowHeight, pos, 4600, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5588, 0.6)});
		}
		}
		
		else if(windowHeight >= 901 && windowHeight <= 950) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 1080, 0.8)}); 
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 2170, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 3000, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 4006, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.3, windowHeight, pos, 4966, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5953, 0.6)});
		}
		}
		
		else if(windowHeight >= 951 && windowHeight <= 1000) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 720, 0.8)});
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 1800, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2630, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3640, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.3, windowHeight, pos, 4600, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5588, 0.6)});
		}
		}
		
		else if(windowHeight >= 1001 && windowHeight <= 1050) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 720, 0.8)});
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 1800, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2630, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3640, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.3, windowHeight, pos, 4600, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5588, 0.6)});
		}
		}
		
		else if(windowHeight >= 1051 && windowHeight <= 1100) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 720, 0.8)});
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 1800, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2630, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3640, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.3, windowHeight, pos, 4600, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5588, 0.6)});
		}
		}
		
		else if(windowHeight >= 1101 && windowHeight <= 1150) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 720, 0.8)});
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 1800, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2630, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3640, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.3, windowHeight, pos, 4600, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5588, 0.6)});
		}
		}
		
		else if(windowHeight >= 1151 && windowHeight <= 1200) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 720, 0.8)});
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 1800, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2630, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3640, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.3, windowHeight, pos, 4600, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5588, 0.6)});
		}
		}
		
		else if(windowHeight >= 1201 && windowHeight <= 1250) {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 720, 0.8)});
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 1800, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 2630, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 3640, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(54.3, windowHeight, pos, 4600, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 5588, 0.6)});
		}
		}
		
		else {
		//if the first section is in view...
		if($home.hasClass("inview")){
			//call the newPos function and change the background position
			$home.css({'backgroundPosition': newPos(50, windowHeight, pos, 786, 0.3)});
			//call the newPos function and change the secnond background position
			smilie.css({'backgroundPosition': newPos(50, windowHeight, pos, 0, 0.8)}); 
		}
		
		//if the second section is in view...
		if($about.hasClass("inview")){
			//call the newPos function and change the background position
			$about.css({'backgroundPosition': newPos(50, windowHeight, pos, 1250, 0.3)});
			//call the newPos function and change the secnond background position
			magnet.css({'backgroundPosition': newPos(50, windowHeight, pos, 0, 0.6)});
		}
		
		//if the third section is in view...
		if($services.hasClass("inview")){
			//call the newPos function and change the background position
			$services.css({'backgroundPosition': newPos(50, windowHeight, pos, 1700, 0.3)});
			//call the newPos function and change the secnond background position
			penholder.css({'backgroundPosition': newPos(50, windowHeight, pos, 0, 0.6)});
		}
		
		//if the fourth section is in view...
		if($portfolio.hasClass("inview")){
			//call the newPos function and change the background position
			$portfolio.css({'backgroundPosition': newPos(50, windowHeight, pos, 2150, 0.3)});
			//call the newPos function and change the secnond background position
			filmcan.css({'backgroundPosition': newPos(47.6, windowHeight, pos, 0, 0.6)});
		}
		
		//if the fifth section is in view...
		if($clients.hasClass("inview")){
			//call the newPos function and change the background position
			$clients.css({'backgroundPosition': newPos(50, windowHeight, pos, 2600, 0.3)});
			//call the newPos function and change the secnond background position
			rolodex.css({'backgroundPosition': newPos(50, windowHeight, pos, 0, 0.6)});
		}
		
		//if the sixth section is in view...
		if($contact.hasClass("inview")){
			//call the newPos function and change the background position
			$contact.css({'backgroundPosition': newPos(50, windowHeight, pos, 3050, 0.3)});
			//call the newPos function and change the secnond background position
			mobile.css({'backgroundPosition': newPos(50, windowHeight, pos, 0, 0.6)});
		}
		}
		
	}
	
	// When the DOM is ready
	$(function() {
	
	var $allTabs = $(".tabs li a"), $el;
	
	// first tab and first content box are default current
	$(".tabs li:first-child a").addClass("current");
	
	$("#nav").delegate(".tabs li a", "click", function() {
		
		$el = $(this);
		
		if ( (!$el.hasClass("current"))) {
		
			// current tab correctly set
			$allTabs.removeClass("current");
			$el.addClass("current");
		};
	});
	
	});
		
	RepositionNav(); //Reposition the Navigation to bottom middle of 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 bottom middle of the window
	});		
	
	$window.bind('scroll', function(){ //when the user is scrolling...
		Move(); //move the background images in relation to the movement of the scrollbar
	});
	
});