$(document).ready
(
	function()
	{
		var className;
		$('td.topNavCellHasChildren, td.bottomNavCellHasChildren')
		.children('div')
		.css({'visibility': 'visible'})
		.slideUp(0)
		.end()
		.children('span')
		.children('a')
		.contents()
		.unwrap() //make "pages" with children no longer links - do here so can still function as links if no JavaScript, in which case user can't see dropdowns
		.end()
		.end()
		.end()
		.mouseenter
		(
			function()
			{
				$(this).addClass('cellOn'); //only purpose of class is use in unExpand function
				if ($(this).children('div').is(':visible')) clearTimeout(navTimerId); //stop timer that would lead to hiding direct child submenu due to cursor having left this cell, because it is now back over this cell (probably now also over the absolutely positioned direct child submenu that we want to remain visible)
				else
				{
					className = $(this).children('span').attr('hoverClass');
					$(this)
					.children('span')
					.addClass(className)
					.css({'z-index': 15, 'border-color': 'black'})
					.end()
					.children('div')
					.css({'z-index': 10})
					.slideDown(300)
					;
				}
				$('td.topNavCellHasChildren, td.bottomNavCellHasChildren').not($(this).parents()).not($(this)).each
				(
					function()
					{
						$(this).children('div').slideUp //hide submenu that has parent other than cell now over or a parent of that cell
						(
							300, function()
							{
								className = $(this).parent().children('span').attr('hoverClass');
								$(this)
								.parent()
								.children('span')
								.removeClass(className)
								.css({'z-index': 'auto', 'border-color': 'transparent'})
								;
							}
						);
					}
				);
			}
		)
		.mouseleave
		(
			function()
			{
				$(this).removeClass('cellOn'); //only purpose of class is use in unExpand function
				navTimerId = setTimeout("unExpand()",500);
			}
		)
	}
);

function unExpand()
{
	$('td.topNavCellHasChildren:not(.cellOn), td.bottomNavCellHasChildren:not(.cellOn)').each //slide up all submenus not direct children of cell(s) cursor is over, if any (may be more than one such cell due to nesting of levels)
	(
	 	function()
		{
			var className = $(this).children('span').attr('hoverClass');
			$(this)
			.children('div')
			.slideUp
			(
				300,
				function()
				{
					$(this)
					.parent()
					.children('span')
					.removeClass(className)
					.css({'z-index': 'auto', 'border-color': 'transparent'})
					;
				}
			)
		}
	)
	;
}