// JavaScript Document

	var slide = [];
	
	window.addEvent('domready', function(){
	
		var i = 1;
	
		// Start iterating through all LI items
		// If one has a nested UL, it's effectively a submenu
		$$('#menu li').each(function(li){

			if (li.getElements('ul').length) {
								
				// Set the id of the menu item
				li.id = 'menu_'+i;
				
				// The nested ul
				var ul = li.getElements('ul')[0];
				
				// Add the slide transition
				slide['menu_'+i] = new Fx.Style(ul, 'width', {
					wait:false,
					duration:300,
					transition:Fx.Transitions.Cubic.easeOut
				});
				
				// Add the mouse events to the li
				li.addEvent('mouseenter', function() { 
					slide[this.id].start(200);
				})
				li.addEvent('mouseleave', function() {
					slide[this.id].start(0);
				});
				
				// Hide the slide
				slide['menu_'+i].hide();
				
				// Set the visibility of the ul (Which was defined on the CSS to "visible")
				ul.setStyle('left','auto');
				
				// Increment counter
				i++;
				
			}
									 
		});
	
	});