window.addEvent('domready', function() {
			
	var allowHide = false;
	
	// this will determine whether or not we remove the active class
	// when the menu gets hidden
	var hasActive = $('productsLink').hasClass('active');
	
	$('productsLink')
		.addEvent('mouseover',
			function() {
			
				allowHide = false;
				show();
			
			}
		)
		.addEvent('mouseout',
			function() {
			
				allowHide = true;
				hide();
			
			}
		)
		.addEvent('click',
			function(e) {
				var ev = new Event(e);		
				ev.preventDefault();
			}
		);
	
	function show() {	
		
		$('productsMenu')
			.setStyle('display', 'block')
			.addEvent('mouseover', 
				function() {
				
					// remove mouseout event from menu parent so it
					// doesn't hide the menu when mouse goes
					// from menu parent to the the menu
					$('productsLink').removeEvent('mouseout');
					allowHide = false;
				
				}
			)
			.addEvent('mouseout', 
				function() {
				
					// add mouseout event back to menu parent
					$('productsLink').addEvent('mouseout', 
						function() {
						
							hide();
							allowHide = true;
						
						}
					);
				
					hide();
					allowHide = true;
				
				}
			);
		
		$('productsLink').addClass('active');
	
	}
	
	function hide() {
		setTimeout(
			function() {
			
				if (allowHide) {
				
					$('productsMenu').setStyle('display', 'none');
				
					if (!hasActive) {
						$('productsLink').removeClass('active');
					}
				
				}
			
			}, 
			100
		);	
	}

});