function show(name)
{
	var mainnav = $(".nav li[subnav='" + name + "']");
	var subnav = $("#subnav ." + name);

	// determine that current nav is active
	mainnav.addClass("active");
	// set the styling for the nav
	mainnav.removeClass("blue");
	// show the subnav
	subnav.removeClass("hidden");
}

function hide(name)
{
	var mainnav = $(".nav li[subnav='" + name + "']");
	var subnav = $("#subnav ." + name);

	// determine that current nav is not selected
	mainnav.removeClass("active");
	// set the styling for the nav
	mainnav.addClass("blue");
	// hide the subnav
	subnav.addClass("hidden");
}

$(document).ready(function()
{
	// active the one that we want
	$(".nav li.active").each(function()
	{
		var subnav = $(this).attr("subnav");
		show(subnav);
	});
	
	// for each main nav in the page, register the hover function
	$(".nav li").hover(function()
	{
		var activesubnav = $(".nav li.active").attr("subnav");
		var subnav = $(this).attr("subnav");
		
		// check if current subnav is different with next subnav
		if (activesubnav != subnav)
		{
			// it is different then do the hide and show the new one
			//hide(activesubnav);
			//show(subnav);
		}
	});
});