var cm = $('categoriesMenu');
		var bm = $('brandsMenu');
			
		Event.observe(cm, 'mouseover', function(event) {mover(cm)}, false);
		Event.observe(cm, 'mouseout', function(event) {mout(cm, event)}, false);

		Event.observe(bm, 'mouseover', function(event) {mover(bm)}, false);
		Event.observe(bm, 'mouseout', function(event) {mout(bm, event)}, false);

		function mover(menu) {
			// If there's a pending menu close, then cancel it, else open the menu.
			if (menu.outTimeout != null)
			{
				clearTimeout(menu.outTimeout);
			}
			else
			{
				openMenu(menu);
			}
		}
	
		function mout(menu, event) {
			// If we're rolling off the menu (as opposed to the menu items), then hide the menu immediately,
			// else wait 300 ms to give a subsequent mouseover event the chance to cancel the close.  This stops
			// flickering associated wiht constant open/close and lets the user roll briefly off the menu.
			if ($(Event.element(event).parentNode).hasClassName('dropDownMenu'))
			{
				closeMenu(menu);
			}
			else
			{
				menu.outTimeout = setTimeout(function() {closeMenu(menu)}, 300);
			}
		}

		function openMenu(menu) {
			// Show the menu items and resize the menu as necessary.
			var menuDiv = menu.down('div');
			menuDiv.show();
			
			var viewPortHeight = window.innerHeight || (document.documentElement.clientHeight || document.body.clientHeight);
			var availableHeight = viewPortHeight - Position.cumulativeOffset(menuDiv)[1];
			
			if (availableHeight < menuDiv.scrollHeight)
			{
				menuDiv.style.height = availableHeight + 'px';
			}

			// Add the hover class name to alloow the menu to be restyled.
			Element.addClassName(menu, 'hover');			
		}
	
		function closeMenu(menu) {
			// Hide the mneu items.
			var menuDiv = menu.down('div');
			menuDiv.hide();
			
			// Remove the hover class name.
			Element.removeClassName(menu, 'hover');
			
			// Remove the timeout ID.
			menu.outTimeout = null;
		}