$.viewportHeight = function() {
	return self.innerHeight ||
		jQuery.boxModel && document.documentElement.clientHeight ||
		document.body.clientHeight;
};

// $.fn.wait = function(time, type) {
// 	time = time || 1000;
// 	type = type || "fx";
// 	return this.queue(type, function() {
// 		var self = this;
// 		setTimeout(function() {
// 			$(self).dequeue();
// 		}, time);
// 	});
// };

$(document).ready(function() {

	function randomRange(min, max) {
	  var randVal = min + (Math.random() * (max - min));
	  return Math.round(randVal);
	}

	$('#main.home div div').each(function(i){
		var el = $(this);
		el.css('opacity', 0);
		setTimeout(function() {
			el.css('opacity', 1).hide().fadeIn(randomRange(600, 2000));
		}, randomRange(100, 1500));
	});

	$('#countdown-inner').innerfade({
		speed: 750,
		timeout: 5000,
		type: 'sequence'
	});
	
	$('#countdowns').innerfade({
		speed: 800,
		timeout: 4000,
		type: 'sequence'
	});

	function clean()
	{
		$('.ghost').remove();
		$('#subnav').remove();
		// $('#nav ul ul').hide();
	}

	$('#nav ul li').hover(
		function(e) {

			clean();

			var el = $(this);
			var menu = el.parent();
			var width = el.width();
			
			var menu_position = menu.position();
			var el_position = el.position();
			// var clone = $(this).clone();

			el.clone().css({
				'width': width,
				'top': el_position.top - 10,
				'left': el_position.left - 10
			}).addClass('ghost').appendTo(menu);

			var wrapper_position = $("#wrapper-inner").position();
			
			// This was too simple :-)

			// el.children("ul").show().css({
			// 	'top': menu_position.top + el_position.top - 10,
			// 	'left': wrapper_position.left + el_position.left + width - 20
			// });

			// Complicated but positioning is easier in IE

			el.children("ul").clone().attr('id', 'subnav').addClass("menu").css({
				'top': menu_position.top + el_position.top - 10,
				'left': wrapper_position.left + el_position.left + width - 20
			}).insertAfter("#nav").show();

			$('#nav ul ul, ul#subnav').hover(
				function(e) {
					e.stopPropagation();
				},
				function() {
					clean();
				}
			)

			e.stopPropagation();
		}
	);

	$("#main").hover(clean, clean);

	$("#wrapper-inner").hover(clean, clean);

	$(".top-menu").hover(clean, clean);

	$(document).click(clean);

});

function fix_main_height(height)
{
	if ( $("#main").height() < height ) {
		$("#main").css('height', height + 'px');
	} else {
		// $("#main").css('height', 'auto');
	}
}

function resize()
{
	// for the HP, minimal height
	// 702 = 482 + 100 x 2 + 10 x 2
	if ( $.viewportHeight() < 702 ) {

		// console.log('Case 1');

		// display the bottom mask at 600px relative from the top
		// so that it can be hidden if there is no suffisant space
		// useful on the HP when we want to have the logo visible
		$("#mask-bottom").css('top', 602);
		$("#wrapper").css('margin-bottom', '0');

		// hide red borders bellow the square
		$("#mask-bottom-inner-inner").css('padding-bottom', '1500px');

		// change the height so that we have the proper red borders on left and right
		fix_main_height(602 - 100 - 95 - 10);

		// in case we have a part of the bottom red border on screen
		// we want to be able to scroll and see the bottom of the #main div
		$("#main").css('margin-bottom', '100px');
	
	// general maximal height
	// 1020 = 800 + 100 x 2 + 10 x 2
	} else if ( $.viewportHeight() > 1020 ) {

		// console.log('Case 2');

		// display the bottom mask relatively from the top
		// so that the mask square will never be bigger than a square
		$("#mask-bottom").css('top', 920);
		$("#wrapper").css('margin-bottom', '0');
		
		// hide red borders bellow the square
		$("#mask-bottom-inner-inner").css('padding-bottom', '1500px');

		// change the height so that we have the proper red borders on left and right
		fix_main_height(820 - 95 - 10);

		// make the #main div scrollable in the mask
		var availableHeight = $.viewportHeight() - 1020 + 90;
		$("#main").css('margin-bottom', availableHeight + 'px');
	
	// general case
	} else {

		// console.log('Case 3');

		// display the bottom mask relatively from the bottom
		// so that it's always on the bottom
		$("#mask-bottom").css('top', 'auto');
		$("#wrapper").css('margin-bottom', '100px');

		// default value
		$("#mask-bottom-inner-inner").css('padding-bottom', '30px');

		// change the height so that we have the proper red borders on left and right
		fix_main_height( $.viewportHeight() - 100 * 2 - 95 - 10 + 45 + 40);

		// default value
		$("#main").css('margin-bottom', 0);
	}
}

$(document).ready(function() {
	// $("#mask-top").hide();
	// $("#mask-bottom").hide();
	// $("#wrapper").css('border', '0');
	resize();
});

$(window).resize(resize);