/* Global constants */
var IMAGE_WIDTH_1440 = 1440;

// Minimum margin
var bgHMargin = 40;
var bgVMargin = 40;

// The width of the viewport on loading.
// Set on document load, constant afterward.
var gWidth = 0;

// Description: The height of the viewport on loading.
// Set on document load, constant afterward.
var gHeight = 0;

// The width of the selected background image.
// Set to one of the constant values defined above.
var imageWidth = 0;

// The horizontal offset of the background image to center it.
// This should always be a negative value.
var hOffset = 0;

// The horizontal offset of the background image to show the
// target area of the slide.
var targOffset = '-750px';

// The width of the image to slide to
var miniWidth = 300;

(function ($) {
	$('document').ready (function () {		
		var bgWrapper = $('#bg-wrapper');
		
		var vpWidth = getViewportWidth ();
		var vpHeight = getViewportHeight ();
		
		// Store the values for later
		gWidth =  vpWidth - bgHMargin*2;
		gHeight =  vpHeight - bgVMargin*2;
		
		if (gWidth > 1440) gWidth = 1440;
		if (gHeight > 988) gHeight = 988;
		
		// Override minimum margin if necessary
		if (gWidth < vpWidth) bgHMargin = (vpWidth - gWidth) / 2;
		if (gHeight < vpHeight) bgVMargin = (vpHeight - gHeight) / 2;
		
		bgWrapper
			.css ('height', gHeight + 'px')
			.css ('marginTop', bgVMargin + 'px')
			.css ('marginBottom', bgVMargin + 'px')
			.css ('marginLeft', bgHMargin + 'px')
			.css ('marginRight', bgHMargin + 'px');
		
		// Select the appropriate sized background image
		// TODO: Add switch statement
		imageWidth = IMAGE_WIDTH_1440;
		
		// Set the selected background and position
		var bg = $('#bg');
		hOffset = ((parseInt (gWidth) - imageWidth) / 2) + 'px';
		
		// Content page position
		$('.page')
			.css ('top', bgVMargin + 10 + 'px')
			.css ('left', bgHMargin + miniWidth + 50 + 'px');
		
		/* When the form is invalid, we want the show the contact page again.
		 * We do this by setting the width in the index controller.
		 * Any css specific to each case is set here */
		 
		if (!bgWrapper.css ('width') || bgWrapper.css ('width') == 'auto' || bgWrapper.css ('width') == '0px') {
			// On form callback, the width is already set so only set it here
			bgWrapper.css ('width', gWidth);

			// Set the background with centered offset
			bg.css ('background', 'url(img/bg.png) ' + hOffset + ' center no-repeat');
		} else {
			// Also hide the logo and controls if the width is set (page showing)
			$('#logo').add ($('#controls')).css ('display', 'none');
			
			// Set the background with target offset
			bg.css ('background', 'url(img/bg.png) ' + targOffset + ' center no-repeat');
		}
			
		// Navigation behaviour
		$('.link-about').click (function () { switchPage ($('.about')); });
		$('.link-blog').click (function () { switchPage ($('.blog')); });
		$('.link-recent').click (function () { switchPage ($('.recent')); });
		$('.link-contact').click (function () { switchPage ($('.contact')); });
		
		// Mouseover on the posts
		$('.posts li').hover (
			function () { $(this).css ('background', '#0b465d'); },
			function () { $(this).css ('background', 'none'); }
		);
	});
	
	var switchPage = function (page) {
		var bgWrapper = $('#bg-wrapper');
		var bg = $('#bg');
		var logo = $('#logo');
		var controls = $('#controls');
		
		// Is a page already showing?
		var isPage = false;
		$('.page').each (function () {
			if ($(this).css ('display') == 'block')
				isPage = true;
		});
		
		if (isPage) {
			// If there's already a page, fade it out then bring in the requested one
			$('.page').filter (function () { return ($(this).css ('display') == 'block'); }).fadeOut ('medium', function () { page.fadeIn () });
		}
		else {
			bgWrapper.animate (
				{width: miniWidth + 'px'},
				1000,
				'swing',
				function () { page.fadeIn (); }
			);
			bg.animate (
				{backgroundPosition: targOffset},
				1000
			);
			
			logo.fadeOut (400);
			controls.fadeOut (400);
			
			// Fade out the visible page and return to homepage
			$('.logo').click (function () {				
				$('.page').filter (function () { return ($(this).css ('display') == 'block'); }).fadeOut ('medium', animateInHomepage);
			});
		}
	};

	var animateInHomepage = function () {
		var bgWrapper = $('#bg-wrapper');
		var bg = $('#bg');
		
		bgWrapper.animate (
			{width: gWidth},
			1000,
			'swing',
			fadeInControls
		);
		bg.animate (
			{backgroundPosition: hOffset},
			1000
		);
	};
	var fadeInControls = function () {
		var logo = $('#logo');
		var controls = $('#controls');
			
		logo.fadeIn (400);
		controls.fadeIn (400);
	};
})(jQuery);