// Code for megamenu

// The following array defines the relation between menu label IDs and menu content IDs (content is inserted in divs inside div#menustates)...
menuindex = [["gethelplabel", "gethelphtml"], ["learnlabel", "learnhtml"], ["joinuslabel", "joinushtml"]];

$(document).ready(function() {

	var mouseOverLabels = false; // Keeps track of whether the mouse is over the menu labels.

	// On hover and unhover of menu labels, do the following, respectively:
	$('li.menulabel').hover(function() {
		showMenu($(this).attr("id")); // Hands id of menu label hovered to showMenu().
		mouseOverLabels = true;
	}, function() {
		mouseOverLabels = false;
	});

	// If you hover over the body and you are not hovering over the menu labels, hide the menu.
	$('body').hover(function() {
		if (!mouseOverLabels) {
			hideMenu();
		}
	});
	
	// Hides the menu and resets various changed attributes to their defaults.
	function hideMenu() {
		$('div#menucontent').css("display","none");
	}
	
	// Shows the menu and changes various attributes for a highlight effect.
	function showMenu(id) {
		// Finds in the menuindex the right content ID that corresponds to the label ID.
		for (var i=menuindex.length-1; i>=0; i--) {
			if (menuindex[i][0] == id) {
				contentid = menuindex[i][1];
				break;
			}
		}
		$('div#menucontent').html($('#' + contentid).html()); // Replaces the content in the menu with the correct content.
		$('div#menucontent').css("display","block"); // Shows the menu.

	}
});