var isIE = /\bMicrosoft\b/i.test(navigator.appName);
var rootPath = "http://gotochriswest.com/";
var buttonImagePath = rootPath + "images/buttons/";

// Preload all menu button images.
var images = ["down", "up", "home", "down_glow", "up_glow", "home_glow"];
for(var i = 0; i < images.length; i++)
	preloadImage(buttonImagePath + images[i] + ".gif");

// Defines any remaining events and styles for the floating menu.
window.onload = function()
{
	// Now that all of the images have been preloaded, show them along with the
	// menu header.
	gE("imgDown").src = buttonImagePath + "down.gif";
	gE("imgUp").src = buttonImagePath + "up.gif";
	gE("imgHome").src = buttonImagePath + "home.gif";
	gE("menuHeader").style.display = (isIE ? "block" : "table");

	// Set the style of the fading strip below the buttons.
	with(gE("fadingMenuStrip").style)
	{
		if(isIE)
			filter = ("progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"
				+ rootPath + "images/borders/round_fade-bottom.png', sizingMethod=scal"
				+ "e)");
		else
			backgroundImage = ("url('" + rootPath + "images/borders/round_fade-bottom"
				+ ".png')");
	}

	// Setup the onmouseover and onmouseout events for the header buttons.
	gE("imgDown").onmouseover = function()
	{
		scrollMenu.downInterval = setInterval("scrollMenu(-1)", 100);
		glowImage("imgDown", true);
	};
	gE("imgDown").onmouseout = function()
	{
		clearInterval(scrollMenu.downInterval);
		glowImage("imgDown", false);
	};
	gE("imgUp").onmouseover = function()
	{
		scrollMenu.upInterval = setInterval("scrollMenu(1)", 100);
		glowImage("imgUp", true);
	};
	gE("imgUp").onmouseout = function()
	{
		clearInterval(scrollMenu.upInterval);
		glowImage("imgUp", false);
	};
	gE("imgHome").onmouseover = function(){glowImage("imgHome", true);};
	gE("imgHome").onmouseout = function(){glowImage("imgHome", false);};
	gE("imgHome").onclick = function()
	{
		self.location = rootPath + "menu/main.php";
	};
	
	// Make sure the menu isn't sitting too high when it is resized.
	window.onresize = function(){scrollMenu(0);}

	// Move the menu down to correspond with the header.
	gE("floatingMenu").style.top = 999;
	scrollMenu(0);
}

// Set the floating menu to a valid position in the specified direction.
function scrollMenu(direction)
{
	var menuH = parseInt(gE("floatingMenu").clientHeight);
	var headerH = parseInt(gE("menuHeader").clientHeight) - 6;
	var totalH = parseInt(isIE ? document.body.offsetHeight : window.innerHeight);
	totalH -= headerH;
	var top;
	if(totalH >= menuH)
		top = headerH;
	else
		top = parseInt(gE("floatingMenu").style.top) + (direction * 15);
	var cantMoveUp = (top <= totalH + headerH - menuH);
	darken("imgDown", cantMoveUp);
	var cantMoveDown = (top >= headerH);
	darken("imgUp", cantMoveDown);
	if(cantMoveUp && !cantMoveDown && direction <= 0)
		top = totalH + headerH - menuH;
	if(cantMoveDown && 0 <= direction)
		top = headerH;
	gE("floatingMenu").style.top = top;
}

// Lowers the opacity of the specified element if dimIt is true, otherwise the
// opacity is set to normal.
function darken(elementID, darkenIt)
{
	var opacity = (darkenIt ? 40 : 100);
	if(isIE)
	{
		gE(elementID).style.filter = "alpha(opacity=" + opacity + ")";
		gE(elementID).style.zoom = "100%";
	}
	else
		gE(elementID).style.opacity = (opacity / 100);
}

// Used for changing the glowing buttons whenever they are hovered over.
function glowImage(imgID, glowIt)
{
	with(gE(imgID))
	{
		var imgSrc = "" + src;
		var isGlowing = /_glow\.\w+$/i.test(imgSrc);
		if(glowIt && !isGlowing)
			src = imgSrc.replace(/(\.\w+)$/, "_glow$1");
		else if(!glowIt && isGlowing)
			src = imgSrc.replace(/_glow(\.\w+)$/i, "$1");
	}
}

// Used to preload any image before the rest of the page loads.
function preloadImage(imagePath)
{
	var img = new Image(1, 1);
	img.src = imagePath;
	preloadImage[imagePath] = img;
}

// Shortcut for getting elements by ID.
function gE(id){return document.getElementById(id);}