var numMenuItems = 5;
var intervalId = 0;
var image1Visible = false;
var tickCount = 0;
var init = true;

$(document).ready
(
	function()
	{
		resizeElements();

		$("#backgroundImage1").load(function() { imageLoaded(); });
		$("#backgroundImage2").load(function() { imageLoaded(); });
		// Initialize image 1.
		var slideIndex = Math.floor(Math.random() * slideImages.length)
		var src = slideImages[slideIndex];
		$("#backgroundImage1").attr("src", "images/" + src);
		// Remember when this happened.
		var date = new Date();
		tickCount = date.getTime();
		// Make sure we reload an image if something goes wrong and nothing happens for a while.
		intervalId = setInterval("displayNextSlide()", 10000);
	}
);

// Event triggered when window is resized
$(window).resize
(
	function() 
	{
		resizeElements();
	}
);

// Resize the menu items and background image.
function resizeElements()
{
	var aspectRatio = 1.5;
	var backgroundImage1 = $("#backgroundImage1");
	var backgroundImage2 = $("#backgroundImage2");
	var iframe = $("#iframeDiv");
	var iframeBackground = $("#iframeBackgroundDiv");

	var width = $(window).width();
	var height = $(window).height();
	iframe.width(width * 0.7);
	iframe.height($(window).height() * 0.8);
	iframe.css("left", (width - width * 0.7)/2);
	iframe.css("top", (height - height * 0.8) / 2);

	iframeBackground.width(width * 0.75);
	iframeBackground.height($(window).height() * 0.85);
	iframeBackground.css("left", (width - width * 0.75) / 2);
	iframeBackground.css("top", (height - height * 0.85) / 2);
	
	
	if(($(window).width()/aspectRatio) > $(window).height())
	{
		backgroundImage1.width($(window).width());
		backgroundImage1.height($(window).width()/aspectRatio);
		
		backgroundImage2.width($(window).width());
		backgroundImage2.height($(window).width()/aspectRatio);
	}
	else
	{
		backgroundImage1.height($(window).height());
		backgroundImage1.width($(window).height()*aspectRatio);
		
		backgroundImage2.height($(window).height());
		backgroundImage2.width($(window).height()*aspectRatio);
	}			
		
	var fontSize = ($(window).height()-15)/numMenuItems;
	$(".menuItem").css("font-size", fontSize + "px");	
}

function displayNextSlide()
{
	clearTimeout(intervalId);
	var fadeTime = 3000;
	if (init)
		fadeTime = 1000;

	if(image1Visible)
		$("#backgroundImage1").fadeOut(fadeTime, function() { fadeFinished(); });		
	else
		$("#backgroundImage1").fadeIn(fadeTime, function() { fadeFinished(); });		
			
	image1Visible = !image1Visible;

	// This gives the page 10 seconds to load a new image.
	// If the image is loaded sooner the interval will be reset, otherwise the interval will load another image.	
	intervalId = setInterval("displayNextSlide()", 10000); 
}

function fadeFinished()
{
	// The current image is now being shown, safe to load the next image.
	var slideIndex = Math.floor(Math.random()*slideImages.length)
	var src = slideImages[slideIndex];
	
	// Remember when this happened.
	var date = new Date();
	tickCount = date.getTime();
		
	var image = image1Visible ? $("#backgroundImage2") : $("#backgroundImage1")
	image.attr("src", "images/" + src);
	if(image.complete)
		image.trigger("load");
}

function imageLoaded()
{
	// Image is loaded, reset the timer so the image is shown after the proper time.
	clearTimeout(intervalId);
	var date = new Date();
	timeout = 7000 - (date.getTime() - tickCount); // Reduce delay by the time elapsed while image was loading.
	if (timeout < 0)
		timeout = 0;
	
	if(!init)
		intervalId = setInterval("displayNextSlide()", timeout);
	else
	{
		// Special case for the first time.
		displayNextSlide(); // Display this slide right now.
		init = false;
		$("#menuDiv").fadeIn(1000);
	}
	
}

function MenuItemHover(div, isHovering)
{
	if (isHovering)
	{
		div.className = 'menuItemHover';
		document.body.style.cursor = 'pointer';
	}
	else
	{
		div.className = 'menuItem';
		document.body.style.cursor = 'auto';
	}
}

function showPanel(show, src) 
{
	var panelBackground = $("#iframeBackgroundDiv");
	var panel = $("#iframeDiv");
	var iframe = $("#iframePanel");
	var opacity = 0.7;

	if (show)
	{
		if(iframe.attr("src") != src)
			iframe.attr("src", src);
		
    	if ($("#menuDiv").position().left >= 0)
    		$("#menuDiv").animate({ left: -$("#menuDiv").width() }, 1000);

    	if ($("#menuButtonDiv").position().left < 0)
    		$("#menuButtonDiv").animate({ left:0 }, 1000);

   		$("#logoDiv").animate({ right: -$("#logoDiv").width() }, 1000);

    	if (!panel.is(":visible"))
    	{
    		resizeElements();
    		panelBackground.fadeTo(1000, opacity);
    		panel.fadeIn(1000);
        }		
    }
    else
    {
    	if ($("#menuDiv").position().left < 0)
    		$("#menuDiv").animate({ left: 0 }, 1000);

    	if ($("#menuButtonDiv").position().left >= 0)
    		$("#menuButtonDiv").animate({ left: -$("#menuButtonDiv").width() }, 1000);

   		$("#logoDiv").animate({ right: 20 }, 1000);

    	if (panel.is(":visible"))
    	{
    		panel.fadeOut(1000);
    		panelBackground.fadeOut(1000);
    	}
	}
}

function DisplayMenu(anchor)
{
	switch($.trim(anchor.innerHTML))
	{
		case "SHOWS":
			showPanel(true, "shows.htm");
			break;
		case "ABOUT":
			showPanel(true, "about.htm");
			break;
		case "VIDEO":
			window.open("http://www.vimeo.com/user2977111");
			break;
		case "FRIENDS":
			showPanel(true, "friends.htm");
			break;
		case "THE MASH":
			showPanel(true, "mash.htm");
			break;
			
	}
		
	return false;
}

function HomeButtonHover(isHovering)
{
	if (isHovering)
	{
		document.body.style.cursor = 'pointer';
		if ($("#homeButton").attr("src") != "images/homeHover.gif")
			$("#homeButton").attr("src", "images/homeHover.gif");
	}
	else
	{
		document.body.style.cursor = 'auto';
		if ($("#homeButton").attr("src") != "images/homeButton.gif")
			$("#homeButton").attr("src", "images/homeButton.gif");
	}

}