var dropDownMenu = Class.create();
dropDownMenu.prototype = {
	initialize:function(cls,option){
		this.cls = cls;
		this.option = Object.extend({dur:0.3,type:0,delayDur:0.2}, option || {});
		this.dur = this.option.dur;
		this.type = this.option.type;
		this.delayDur = this.option.delayDur;
		this.delayID;
		this.init();
	},
	
	init:function(){
		$$(this.cls).each(function(o){
			var oH=o.down(1).getDimensions().height;
			//o.down(1).setStyle({opacity:'0'});
			o.down(1).makeClipping().setStyle({height:'0px'});
			if (this.type == 2){
				o.down(2).setStyle({position: "absolute", bottom:oH+"px"});
			}
			o.observe("mouseover",function(e){
				/*
				if(this.subMenu&&this.subMenu!=o){
					window.clearTimeout(this.delayID);
					this.mvHideMenu(this.subMenu.down(1),oH);
				}
				*/
				if(this.delayID&&this.subMenu==o){
					window.clearTimeout(this.delayID);
				}
				if (o.down(1).getStyle('height')!=oH)
				{
					this.subMenu = o;
					this.mvShowMenu(o.down(1),this.dur,this.type,oH);
				}
			}.bindAsEventListener(this,o));
			o.observe("mouseout",function(e){
				this.delayID = this.mvHideMenu.delay(this.delayDur,o.down(1),this.dur,this.type,oH);
			}.bindAsEventListener(this,o));
		}.bind(this));
	},

	mvShowMenu:function(element,dur,type,h){
		var o = $(element);
		var dur = dur;
		var type = type;
		var oH = h;
		//o.show();
		
		new Effect.Morph(o, {
			style: 'height:'+oH+'px',
			//style:{opacity:'1'},
			transition:Effect.Transitions.linear,
			afterUpdateInternal: function(effect) {
				if (type == 2){
					effect.element.down().setStyle({bottom:(oH - effect.element.clientHeight) + 'px' }); 
				}else if(type == 1){
					effect.element.setStyle({opacity: effect.element.clientHeight/oH });
				}
			},
			duration:dur
		});
		
		return element;
	},

	mvHideMenu:function(element,dur,type,h){
		var o = $(element);
		var dur = dur;
		var type = type;
		var oH = h;
		
		new Effect.Morph(o, {
			style: 'height:0px',
			transition:Effect.Transitions.linear,
			afterUpdateInternal: function(effect) {
				if (type == 2){
					effect.element.down().setStyle({bottom:(oH - effect.element.clientHeight) + 'px' }); 
				}else if(type == 1){
					effect.element.setStyle({opacity: effect.element.clientHeight/oH });
				}
			},
			afterFinish:function(effect){
				//effect.element.hide();
			},
			duration:dur
		});
		
		return element;
	}
};