var detachables = $$('.has-submenu');
var menuretract;
detachables.each(function(element) {
	element.addEvents({
		mouseenter: function() {
			this.morph({
				'color': '#FFCC33',
				'border-bottom-color': '#AA0101'
			});
			
			this.setStyle('background-position','140px center');
			
			// display the menu below the current 
			// selection
			$(this.name + '-menu').morph({
				'height': '160px'
			});
		},
		
		mouseleave: function() {
			menuretract = setTimeout(retractMenu,500);
			var menu    = this.name;
			
			function retractMenu() {
				$(menu).morph({
					'color': '#FFF',
					'border-bottom-color': '#530000'
				});
				
				$(menu).setStyle('background-position','156px center');
				
				// display the menu below the current 
				// selection
				$(menu + '-menu').morph({
					'height': '0px'
				});	
			}
		}
	});
	
	$(element.name + '-menu').addEvents({
		mouseenter: function() {
			clearTimeout(menuretract);
		},

		mouseleave: function() {
			$(element.name).morph({
				'color': '#FFF',
				'border-bottom-color': '#530000'
			});
			
			$(element.name).setStyle('background-position','156px center');
			
			// display the menu below the current 
			// selection
			this.morph({
				'height': '0px'
			});
		}
	});
});