// A basic mootools slide
	
	var slide = [];
	
	window.addEvent('domready', function(){
	
		var i = 1;		
		
		// Get all list items that have a submenu (nested ul tags)
		$$('#menu li').each(function(li){
		
			// Add an id to the li element
			li.id = "menu_"+i;
			
			// If the li has a nested ul, it's a submenu
			if (li.getElement('ul') != null) {
						
				var temp = li.getElement('ul');
				
				// if we've set the display:none of the ul (to ease conding in DW), remove it
				if (temp.getStyle('display') == "none") {
					temp.setStyle('display','');	
				}
				
				// Get the calculated height of the <ul> submenu
				var height = temp.getSize().size.y;
				
				// Create the slide
				slide['menu_'+i] = new Fx.Styles(temp,{
					wait:false,
					duration:300,
					transition:Fx.Transitions.Cubic.easeOut					
				});
				slide['menu_'+i].set({
					'height' : 0,
					'background-color' : '#FFFFFF'
				});
				
				// Assign the event handlers to the parent <li> tag
				li.addEvent('mouseenter', function() {
					this.setStyle('background-color','#1F5486');
					slide[this.id].start({
						'height' : height/*,
						'background-color' : '#2C79C0'*/
					});
				});
				li.addEvent('mouseleave', function() {
					this.setStyle('background-color','');
					slide[this.id].start({
						'height' : 0/*,
						'background-color' : '#FFFFFF'*/
					});
				});
			
			}
			
			// Increment the counter
			i++;
		
		});
		
		// Mouse down functionality
		$$('#menu a').each(function(a){
			
			a.addEvent('mousedown',function() {
				this.setStyles({
					'background-color' : '#000000',
					'color' : '#FFFFFF'					
				});
			});
			
			a.addEvent('mouseup',function() {
				this.removeProperty('style');		
			});
			
		});
	
	});