/* Function to run on page load - sets up the button hovers */
$(function() {
	// When the user mouses over the grayscale button, show the color one
	$("#navigation a.default").mouseover(function() {
		//showMenu(this);
		showColorButton(this);
	});

	// When the user's mouse leaves the faded color button, hide the button
	$("#navigation a.hover").mouseout(function() {
		//hideMenu();
		hideColorButton(this);
	});
});


/* Shows the color representation of the selected button - this is called when the user starts mousing over the color button */
function showColorButton(element)
{
	// Get the id of the color button
	var colorButton = "." + $(element).attr("class").replace("default", "").replace(" ", "") + ".hover";

	// Fade in the color button
	$(colorButton).fadeIn("fast");

	// If any of the colored icons are still displayed, fade them out
	$(".hover.displayed").fadeOut("fast");

	// If any of the colored icons were still displayed before the fadeout, clear them of their displayed class
	$(".hover.displayed").removeClass('displayed');

	// Add the displayed class to the current selected icon
	$(colorButton).removeClass('displayed').addClass('displayed');
}

/* Fades out the color button - this is called when the user stops mousing over the color button */
function hideColorButton(element)
{
	// Fade out the color button
	$(element).fadeOut("fast");

	$(element).removeClass('displayed');
}