var sectionId = "";

// adds the sub-navigation for a section
function addSubNav(mainNavId) {

	var subNavId = "sub-nav-" + mainNavId;
	var subNav = new Fx.Slide(subNavId);

	subNav.wrapper.setStyle('z-index', '100');
	subNav.wrapper.setStyle('margin-top', '0');
	subNav.wrapper.setStyle('overflow', 'visible');
	subNav.hide();

	// add an event listener to the "active" menu entry
	$("main-nav-" + mainNavId + "-active").addEvent("mouseover", function(e) {

		e.stop();
		$("content-wrapper").setStyle('z-index', '100');
		subNav.show();
		showMainNav(sectionId, mainNavId);
	});

	$("main-nav-" + mainNavId + "-active").addEvent("mouseout", function(e) {

		e.stop();
		$("content-wrapper").setStyle('z-index', '10');
		subNav.hide();

		if (mainNavId != sectionId) {

			hideMainNav(mainNavId);
		}
	});

	// add an event listener to the "inactive" menu entry
	$("main-nav-" + mainNavId + "-inactive").addEvent("mouseover", function(e) {

		e.stop();
		$("content-wrapper").setStyle('z-index', '100');
		subNav.show();
		showMainNav(sectionId, mainNavId);
	});

	$("main-nav-" + mainNavId + "-inactive").addEvent("mouseout", function(e) {

		e.stop();
		$("content-wrapper").setStyle('z-index', '10');
		subNav.hide();

		if (mainNavId != sectionId) {

			hideMainNav(mainNavId);
		}
	});

	// add an event listener to the sub-nav itself
	$(subNavId).addEvent("mouseenter", function(e) {

		e.stop();
		$("content-wrapper").setStyle('z-index', '100');
		subNav.show();
		showMainNav(sectionId, mainNavId);
	});

	$(subNavId).addEvent("mouseleave", function(e) {

		e.stop();
		$("content-wrapper").setStyle('z-index', '10');
		subNav.hide();

		if (mainNavId != sectionId) {

			hideMainNav(mainNavId);
		}
	});

}