var FadePanel = new Class({
	Implements: [Options],
	
	options: {
		showStyles: {display: 'block'},
		showDuration: 200,
		hideDuration: 400,
		hideDelay: 500
	},
	
	initialize: function(trigger, panel, z, options) {
		this.setOptions(options);
		this.panel = panel;
		this.panel.setStyles(this.options.showStyles);
		this.panel.setStyle('opacity',0);
		this.z = z;
		this.fx = new Fx.Tween(panel);
		trigger.addEvents({
			mouseenter: this.show.bind(this),
			mouseleave: this.hideCountdown.bind(this)
		});
	},
	
	show: function() {
		this.fx.cancel();
		this.fx.setOptions({duration: this.options.showDuration});
		this.fx.start('opacity', 1);
		this.z.index++;
		this.panel.setStyle('z-index', this.z.index);
		this.shown = true;
		!this.timer || $clear(this.timer);
	},
	
	hideCountdown: function() {
		this.timer = this.hide.delay(this.options.hideDelay, this);
	},
	
	hide: function() {
		this.shown = false;
		this.fx.cancel();
		this.fx.setOptions({duration: this.options.hideDuration});
		this.fx.start('opacity', 0);
	}
});