var pe = null;

Event.observe(window, 'load', function() {
	
	hideAllSubmenus();
	
	prepareSubmenu('menu_option2');
	prepareSubmenu('menu_option3');
	prepareSubmenu('menu_option4');
	prepareSubmenu('menu_option5');
	prepareSubmenu('menu_option8');
	$('menu_option8_submenu').style.width = '100px';
	

	Event.observe('menu_option2', 'mouseover', showSubmenu);
	Event.observe('menu_option3', 'mouseover', showSubmenu);
	Event.observe('menu_option4', 'mouseover', showSubmenu);
	Event.observe('menu_option5', 'mouseover', showSubmenu);
	Event.observe('menu_option8', 'mouseover', showSubmenu);

	Event.observe('menu_option2_submenu', 'mouseover', stopClosing);
	Event.observe('menu_option3_submenu', 'mouseover', stopClosing);
	Event.observe('menu_option4_submenu', 'mouseover', stopClosing);
	Event.observe('menu_option5_submenu', 'mouseover', stopClosing);
	Event.observe('menu_option8_submenu', 'mouseover', stopClosing);

	Event.observe('menu_option2_submenu', 'mouseout', setUpToClose);
	Event.observe('menu_option3_submenu', 'mouseout', setUpToClose);
	Event.observe('menu_option4_submenu', 'mouseout', setUpToClose);
	Event.observe('menu_option5_submenu', 'mouseout', setUpToClose);
	Event.observe('menu_option8_submenu', 'mouseout', setUpToClose);

}); 

function showSubmenu(event) {
	
	if (pe && pe.stop) {
		pe.stop();
	}
	
	hideAllSubmenus();
	
	linkElement = event.element();
	submenuElement = $(event.element().id+'_submenu');
	
	submenuElement.show(); 
	
}

function hideAllSubmenus() {
	$('menu_option2_submenu').hide();
	$('menu_option3_submenu').hide();
	$('menu_option4_submenu').hide();
	$('menu_option5_submenu').hide();
	$('menu_option8_submenu').hide();

}

function prepareSubmenu(optionId) {
	$(optionId+'_submenu').absolutize();
	$(optionId+'_submenu').clonePosition($(optionId));
	$(optionId+'_submenu').style.width = '200px';
	$(optionId+'_submenu').style.top = '165px';

}

function stopClosing(event) {
	if (pe && pe.stop) {
		pe.stop();
	}
}

function setUpToClose(event) {
	
	e = event.element();

	// the <a>'s in the <div> get the event, so find the <div> representing the whole menu
	
	while (e.identify().substr(-7) !== "submenu" && e.up()) {
		e = e.up();
	}
	
	submenuElement = e;
	pe = new PeriodicalExecuter(function(pe){ submenuElement.hide(); pe.stop(); }, 1);
}