function initMenu() {
	attachMenu('firstMenu', 'firstMenuTarget');
	attachMenu('secondMenu', 'secondMenuTarget');
}

function attachMenu(menu, target) {
	$(target).addEvent('mouseenter', function() {
		showMenu($(menu), $(target));
	});
	
	$(menu).addEvent('mouseenter', function() {
		showMenu($(menu), $(target));
	});
	
	$(target).addEvent('mouseleave', function(e) {	
		if(e.target == $(target)) {
			hideMenu($(menu));			
		}
	});
	
	$(menu).addEvent('mouseleave', function(e) {
		if(e.target == $(menu) || e.target.parentNode == $(menu)) {
			hideMenu($(menu));	
		}		
	});
}

function showMenu(menu, target) {
	
	if(!menu.fx) {
		menu.fx = new Fx.Morph(menu, {
			duration: 300,
			wait: false,
			transition: Fx.Transitions.Quad.easeOut
		});
		
		menu.set({'styles':{'display': 'block'}});
		
		menu.regularHeight = menu.getSize().y;
		menu.set({'styles':{
			'height': 0,
			'opacity': 0,
			'z-index':10000
			}
		});
	}
	
	target = $(target);
	menu = $(menu);
	
	
	
	menu.set({
		'styles': {
			'top': [target.getCoordinates().bottom],
			'left': [target.getCoordinates().left],
		}		
	});
	
	menu.fx.start({
		'height': [menu.regularHeight],
		'opacity': 1
	})
	
	
}

function hideMenu(menu) {
	menu.fx.start({
		'height': [0],
		'opacity': 0
	});
}