var Dropdown = new Class({

	// implements
	Implements: [Events, Options],

	// options
	options: {
		onClose: function(element) {
			element.getPrevious('a').removeClass('active');
			element.fade('out');
		},
		onOpen: function(element) {
			element.getPrevious('a').addClass('active');
			element.fade('in');
		},
		onInitialize: function(element) {
			//element.removeClass('open').addClass('close');
			element.setStyles({'display': 'block', 'opacity': 0}).get('tween').set('tween', {duration: 'short'});
			element.getPrevious('a').addEvent('click', function(event) {
				event.stop();
			});
		},
		mouseenterdelay: 300,
		mouseleavedelay: 300,
		selector: '.sub'
	},
	
	// initialize
	initialize: function(element, options) {
		this.setOptions(options);
		this.element = document.id(element);
		this.elements = this.element.getElements(this.options.selector);
		this.build();
	},

	// build
	build: function() {
		this.elements.each(function(item) {
			this.fireEvent('initialize', item);
			var parent = item.getParent('li');
			var timer;
			parent.addEvents({
				'mouseenter': function() {
					//console.log('mouseenter');
					if (this.options.mouseenterdelay) {
						//timer = this.fireEvent.delay(this.options.delay, this, ['open', item]);
						timer = (function() {
							this.fireEvent('open', item);
						}.bind(this)).delay(this.options.mouseenterdelay);
					} else {
							this.fireEvent('open', item);
					}
				}.bind(this),
				'mouseleave': function() {
					clearTimeout(timer);
					if (this.options.mouseleavedelay) {
						//timer = this.fireEvent.delay(this.options.delay, this, ['close', item]);
						timer = (function() {
							this.fireEvent('close', item);
						}.bind(this)).delay(this.options.mouseleavedelay);
					} else {
						this.fireEvent('close', item);
					}
				}.bind(this)
			});
		}.bind(this));
	}

});