// JavaScript Document
window.addEvent("domready", function() {
		
	/* Creates a div wrapper around li.show ul and a div to contain our temporary shadow!*/
	var ul = $('showdropdown');
	var targ = ul.parentNode;
	var slideWrapper = new Element('div');
	var shadowWrapper = new Element('div', {
		'class': 'shadow',
		'styles': {
			'display':'none'
		}
	});
	slideWrapper.adopt(ul);
	targ.appendChild(shadowWrapper);
	targ.appendChild(slideWrapper);
	
	//sets the pos/neg margins to height of the ul!
	var posheight = $('showdropdown').getStyle('height').replace('px','');
	var negheight;
	posheight = (posheight*1);
	negheight = posheight - (posheight*2);
	$('showdropdown').setStyle('margin-top',negheight);
	
	//generates the effect objects
	var slideul = new Fx.Styles('showdropdown', {duration: 1000, transition: Fx.Transitions.Quad.easeInOut, wait:false});
	var slideWrap = new Fx.Styles(slideWrapper, {duration: 1000, transition: Fx.Transitions.Quad.easeInOut, wait:false});
	
	$$('li.show').addEvent('mouseenter', function(e) {
		e = new Event(e);
		shadowWrapper.setStyle('display','block');
		slideul.start({
			'margin-top': 0,
			'height': posheight
		}).chain(function() {
			shadowWrapper.setStyle('display','none');
		});
		slideWrap.start({
			'height': posheight
		});
		e.stop();
	});
	
	$$('li.show').addEvent('mouseleave', function(e) {
		e = new Event(e);	
		shadowWrapper.setStyle('display','block');
		slideul.start({
			'margin-top': negheight,
			'height': 0
		});
		slideWrap.start({
			'height': 0
		}).chain(function() {
			shadowWrapper.setStyle('display','none');
		});
		e.stop();
	});
});