// When the DOM is ready
$('document').ready(function(){

	/* -- Fancybox -- */

	// Set Fancybox defaults
	$.fn.fancybox.defaults.overlayColor = '#000';
	$.fn.fancybox.defaults.overlayOpacity = 0.7;
	$.fn.fancybox.defaults.hideOnContentClick = false;
	$.fn.fancybox.defaults.padding = 0;
	$.fn.fancybox.defaults.titlePosition = "inside";
	$.fn.fancybox.defaults.centerOnScroll = true;
	
	// Activate Fancybox links
	$('a.fancybox').fancybox();
	
	/* -- Thumbnails -- */

	// Fade in thumbnail images
	$('.tile a, .fancybox, .thumbnail').children('img').FadeInImageOnLoad();
	
	// We only let the body and the spookies fly when the browser is not IE :-)
	if (! $.browser.msie) {
		
		// Disable the spoook flies on mobile devices:
		if(! navigator.userAgent.match(/Android/i) && !navigator.userAgent.match(/webOS/i) &&
			! navigator.userAgent.match(/iPhone/i) && ! navigator.userAgent.match(/iPod/i) &&
			! navigator.userAgent.match(/iPad/i)) {
				$('#spook1')
						.sprite({fps: 9, no_of_frames: 10, rewind: true})
						.spRandom({
							top: 134, 
							bottom: 234, 
							left: 150, 
							right: ($(window).width() / 2),
							speed: 10000
						})
						.active();

				$('#spook2')
						.sprite({fps: 9, no_of_frames: 10, rewind: true})
						.spRandom({
							top: 134,
							bottom: 234,
							left: $(window).width() / 2,
							right: $(window).width() - 40,
							speed: 10000
						})
						.active();
			
	
			}
			
			$('body').pan({fps: 30, speed: 1, dir: 'left'});
	}
	
	// Let's make mister JOE stir on mouse move
	var $joeRight = $.trim($('#joe').css('right').replace('px', ''));
	$('body').mousemove(function(e) {
		var $x = e.pageX;
		var $movePix = parseInt($joeRight) + Math.floor($x / 30);
		$('#joe').css('right', $movePix);
	});
	
	// Calculate the content's width, based on the window size
	calculateWidth();
	$(window).resize(function() {
		calculateWidth();
	});
});

// Calculate the content's width, based on the window size
function calculateWidth() {
	var $width = $(window).width();
	
	$('#content').width($width - 170);
	$('#content').css('margin-left', '170px');
}

/**
 * Toggle a html-element
 * 
 * This function will show or hide (animated) a element
 *
 * @param element jQuery element
 * @param bool TRUE to show, FALSE to hide
 * @return void
 */
function toggleElement(element, displayFlag, speed) {
	if (!$(element).is(':animated')) {
		(displayFlag) ? $(element).stop().slideDown(speed) : $(element).stop().slideUp(speed);
	}
}