var PopUp = new Class({
	Implements: [Events, Options],
	options: {
		onShow: Class.empty,
		onHide: Class.empty,
		autoHide: true,
		autoHideDelay: 1200,
		duration: 700,
		close: '.close'
	},
	initialize: function(toggler, element, options){
		this.setOptions(options);
		
		// element that toggles opening of pop up
		this.toggler = $(toggler);
		
		// element to show/hide
		this.element = $(element);
		// store opacity effect
		this.element.fx = new Fx.Tween(this.element,{
			property: 'opacity',
			duration: this.options.duration
		});
		
		// start hidden
		this.element.setStyle('opacity', 0).removeClass('hidden');
		this.isShown = false;
		
		this.attach();
	},
	attach: function(){
		var self = this;
		
		// click event to show
		this.toggler.addEvent('click', function(e){
			e.preventDefault();
			self.show();
		});
		
		// click event to hide
		this.element.getElement(this.options.close).addEvent('click', function(e){
			e.preventDefault();
			self.hide();
		});
		
		// autohide events
		if(this.options.autoHide){
			this.element.addEvent('mouseleave', function(e){
				self.timeout = (function(){
					self.hide();
				}).delay(self.options.autoHideDelay);
			});
			this.element.addEvent('mouseenter', function(e){
				$clear(self.timeout);
			});
		}
	},
	show: function(){
		this.element.fx.start(1).chain(function(){
			this.fireEvent('onShow');
			this.isOpen = true;
		}.bind(this));
	},
	hide: function(){
		this.element.fx.start(0).chain(function(){
			this.fireEvent('onHide');
			$clear(this.timeout);
			this.isOpen = false;
		}.bind(this));
	}
});