var Dialog = new Class({
	options: {
		speed: 500,
		maskColor: '#000000',
		backgroundColor: '#ffffff',
		width: 400,
		height: 'auto',
		onComplete: Class.empty,
		onStart: Class.empty,
		opacity: 0.8,
		topOffset: 300
	},
	initialize: function(options){
		this.setOptions(options);
	},
	show: function(el) {

		// setup the message
		switch ($type(el)) {
			case 'element':
				this.el = $(el).clone();
				if (this.el.tagName == 'img') this.preload;
				break;
			case 'string':
				this.el = new Element('div',{
					'styles': {
						'padding': 10,
						'width': this.options.width,
						'height': this.options.height
					}
				}).setHTML(el)
				break;
			default:
				return false;
				break;
		}

		// create elements: mask, pop, message and close
		this.mask = new Element('div',{'styles':{
			'position':'absolute',
			'top':0,
			'left':0,
			'opacity':0,
			'height': (window.getHeight() > window.getScrollHeight())?window.getHeight():window.getScrollHeight(),
			'width':'100%',
			'background':this.options.maskColor,
			'z-index':9999
		}});
		this.pop = new Element('div',{'styles':{
			'position':'absolute',
			'visibility':'hidden',
			'width':'100%',
			'margin':0,
			'z-index':10000
		}});
		this.message = new Element('div',{'styles':{
			'background':this.options.backgroundColor,
			'margin':'0 auto'
		}});
		this.close = new Element('span',{'styles':{
			'display':'block',
			'background':'#000000',
			'text-align':'right',
			'color':'#ffffff',
			'padding':3,
			'cursor':'pointer'
		}}).setText('close');

		// add events to close the dialog box
		this.close.addEvent('click',this.hide.bind(this));

		// in case there are objects in our message,
		// we hide objects BEFORE we add the message to the dom
		$$('object','select').setStyle('visibility','hidden');

		// add elements to the DOM
		this.mask.injectInside(document.body);
		this.pop.injectAfter(this.mask);
		this.close.injectInside(this.message);
		this.el.injectInside(this.message);
		this.message.injectInside(this.pop).setStyle('width',this.el.getCoordinates().width);

		// position the dialog outside (above) the visible window
		this.pop.setStyles({
			'top': window.getScrollTop() - this.pop.getCoordinates().height,
			'visibility':'visible'
		});

		// start the animation
		this.fade = new Fx.Style(this.mask, 'opacity', {duration:this.options.speed});
		this.slide = new Fx.Style(this.pop, 'top', {duration:this.options.speed});

		this.fade.start(this.options.opacity);
		this.slide.start(window.getScrollTop() + this.options.topOffset);
		this.periodical = this.update.periodical(100,this);
	},
	update: function() {
		this.slide.start(window.getScrollTop() + this.options.topOffset);
		var h = (window.getHeight() > window.getScrollHeight())?window.getHeight():window.getScrollHeight();
		this.mask.setStyle('height',h);
	},
	hide: function() {
		$$('object','select').setStyle('visibility','visible');
		$clear(this.periodical);
		this.fade.start(0);
		this.slide.start(window.getScrollTop()-this.pop.getCoordinates().height).chain(function(){
			this.pop.remove();
			this.mask.remove;
			$$('body').setStyle('overflow','auto');

		}.bind(this));
	}
});
Dialog.implement(new Options);