$(function() {
	
	// Let's preload the images
	$('img').preload({
		placeholder:'http://christianals.com/site/images/ajax-loader.gif'
	});
		
	// Make the windown scrollable
	$(window)._scrollable();
	
	// Scrolling check
	var pageScrolling = false;
	
	// Define som variables
	var theOffset;
	var noKey;
		
	// Here we test if the mousewheel has been used, if user scroll the noKey is set, to be used later if the user choose to use the up and down Arrow
	$(window).mousewheel(function(event, delta) {
		noKey = true;
		// showSidebar('hide');
	});

	
	// Add some classes
	$('.layout .row:first').addClass('first activ');
	$('.layout .row:eq(1)').addClass('second');
	$('.layout .row:last').addClass('last');
	
	// Functions	
	function showSidebar(event) {
			
		var sbTarget	= '.sidebar';
		
		if (event == 'show') {
			var sbWidth	= 0;
		} else if (event == 'hide') {
			var sbWidth	= -$(sbTarget).width() - 40;
		}
		
		$(sbTarget).stop().animate({
			'left'	: sbWidth
		}, 700, "easeInOutExpo");
	}
	
	function sidebarHeight(theClass, theHeight) {
		$('.' + theClass).height(theHeight+'px');
		return false;
	}
	
	function scrollToSection(target) {
		//var targetId = '#' + target;
		// We disable the up and down keys when the page is scrolling to prevent the queuing up of strokes (like doing a stop when using .animate())
		pageScrolling = true;
		
		// The scollTo plugin
		$(window).scrollTo(target, 2000, {
		    easing	: "easeInOutExpo",
		    onAfter : function() {
		    	// Set pageScroll and noKey back to defalut state
		    	pageScrolling = false;
		    	noKey = false;
		    } 
		});
	}
	
	function scrollUpDown(way) {
	
	// Define some postion and target variables
	var activ	= $('.activ');
	var activT	= activ.offset().top;
	var wPos	= $(window).scrollTop();
	
	// Get the offset value, -1 if the .activ element top is above the browser top and 1 if below
	var offsetValue = wPos - activT;
		
		// If the user have scroll with the mousewheel
		if (noKey == true) { 
			
			// If the user press the down arrow and have scrolled up and activ element top is above the browser top 
			if (way === "down" && offsetValue >= -1) {
				var target = activ.next();
				
			}
			// If the user press the down arrow and have scrolled up and activ element top is above the browser top 
			else if (way === "up" && offsetValue <= 1 ) {
				var target = activ.prev();
			}
			else {
				var target = activ;
			} 
			
		} else {
		
			if (way === "up") {
				var target = activ.prev('.row');
			} 
			else if (way === "down") {
				var target = activ.next('.row');
			}
		}
		
		// Get the .activ top postion		
		var targetPos = target.offset().top;
		
		// Because of how the waypoint plugin registere the activ offset we need to make the element scroll 1px longe when going up
		if (way === "up") {
			var tp	= targetPos - 1;
		} 
		else {
			var tp	= targetPos;		
		}		
		
		// We disable the up and down keys when the page is scrolling to prevent the queuing up of strokes (like doing a stop when using .animate())
		pageScrolling = true;
		
		// The scollTo plugin
		$(window).scrollTo(tp, 500, {
		    easing	: "easeOutExpo",
		    onAfter : function() {
		    	// Set pageScroll and noKey back to defalut state
		    	pageScrolling = false;
		    	noKey = false;
		    } 
		});
		return false;
	}
	
	// This set the last divs height so that no matter how big a screen the element will alway sroll to the top
	function airFunc() {
		
		var aHeight		= $('.layout .row:last').height();
		var wHeight		= $(window).height();
		var airHeight	= wHeight - aHeight;
		
		$('.air').css({ 'height' : airHeight + 'px' });
	}
	
	//When scroll keep track of the activ element
	$('.row').waypoint(function(event, direction) {
							
			$(this)
		    .addClass('target');
		    $('.activ').removeClass('activ');
		    $('.target').addClass('activ').removeClass('target');
						
	});
	
	
	
	// Set the air and sidebar height to begin with
	airFunc();
	var wResizeHeight = $(window).height();
	sidebarHeight('sidebar', wResizeHeight);
	sidebarHeight('sidebarContent', wResizeHeight);

	// Set the air and sidebar height when window is resized
	$(window).resize(function(){
		var wResizeHeight = $(window).height();
		sidebarHeight('sidebar', wResizeHeight);
		sidebarHeight('sidebarContent', wResizeHeight);
		airFunc();
    });
	
	// Key navigation - fire function and check if the page is scrolling
	$(document).keydown(function(e){
	
		if (e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40) {
			e.preventDefault();
		}
	
		if (e.keyCode == 40 && pageScrolling != true && !$('.activ').hasClass('last')) { 
			scrollUpDown('down');
			//showSidebar('hide');
		} else if (e.keyCode == 38 && pageScrolling != true && !$('.activ').hasClass('first')) { 
			scrollUpDown('up');
			//showSidebar('hide');
		} /* else if (e.keyCode == 37) {
			showSidebar('hide');
		} else if (e.keyCode == 39) {
			showSidebar('show');
		} */		
	});
	
	// Scroll to Section
	/*
	$('a[href*=#]').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			var $target = $(this.hash);
			$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
			if ($target.length) {
				var targetOffset = $target.offset().top;
				scrollToSection(targetOffset);
			return false;
			}
		}
	});
	*/
	
	// Set the sidebar height and make scrollabel
	$('.sidebarContent').each(
		function()
		{
			$(this).jScrollPane(
				{
					showArrows: $(this).is('.arrow')
				}
			);
			var api = $(this).data('jsp');
			var throttleTimeout;
			$(window).bind(
				'resize',
				function()
				{
					if ($.browser.msie) {
						if (!throttleTimeout) {
							throttleTimeout = setTimeout(
								function()
								{
									api.reinitialise();
									throttleTimeout = null;
								},
								50
							);
						}
					} else {
						api.reinitialise();
					}
				}
			);
		}
	)
	
});