var DropMenu = new Class({

	Implements: [Events, Options],
	
	options: {
		showDelay: 100,
		hideDelay: 1000,
		duration: 800,
		FxDuration: 200,
		showName: '',
		target: '',
		oldShow: [],
		column: 0,
		duration: 750
	},

	initialize: function(element, options){
		this.setOptions(options);
		this.options.column = $$('#' + this.options.showName + ' ul').length;
		this.element = $(element);
		
		//this.Fx = new Fx.Tween(this.options.showName, {property: "opacity", duration: this.options.duration}).set(0);
		
		this.build();
	},
	
	build: function(){
		if( this.element ){
			var coor = this.element.getCoordinates();
			$(this.options.showName).setStyles({
				'left': coor.left,
				'top' : (coor.bottom + 30)
			});	
			this.attach();
		}
	},
	
	attach: function(){
		this.element.addEvent('mouseenter', function(event){
			//event.stop();
			clearTimeout(this.closetime);										 
			this.opentime = setTimeout(function(){ this.show(); }.bind(this), this.options.showDelay);
		}.bind(this));
		
		this.element.addEvent('mouseleave', function(event){
			//event.stop();
			clearTimeout(this.opentime);
			this.closetime = setTimeout(function(){ this.hide(); }.bind(this), this.options.hideDelay);
		}.bind(this));
	},
	
	show: function(){
		this.options.oldShow.each(function(element){
			$(element).setStyles({'display': 'none'});
		}.bind(this));
		
		$(this.options.showName).setStyles({'display': 'block'});
		
		//this.Fx.start(1);
		
		for(var i=0; i<this.options.column; i++){
			var list = $$('#' + this.options.showName);
			list.each(function(element){
				var fx = new Fx.Styles(element, {duration:this.options.FxDuration, wait:false});
				
				element.addEvent('mouseenter', function(){
					clearTimeout(this.closetime);
					fx.start({ 'padding-left' : element.getStyle('padding-left') });
				}.bind(this));
				
				element.addEvent('mouseleave', function(){
					clearTimeout(this.closetime);
					this.closetime = setTimeout(function(){this.hide();}.bind(this), this.options.hideDelay);
					fx.start({ 'padding-left' : element.getStyle('padding-left') });
				}.bind(this));
				
			}.bind(this));
		}
	},
	
	hide: function(){
		//onHide = this.onHide.bind(this);
		//this.Fx.chain(onHide).start(0);
		$(this.options.showName).setStyles({'display': 'none'});
	},
	
	onHide: function(){
		$(this.options.showName).setStyles({'display': 'none'});
	}
	
});