var Dialog = new Class({

	Implements:Options,
	
	overlay: null,
	
	options:{
		overlayOpacity: 0.7,
		overlayColor: 'black',
		dialogTransition: Fx.Transitions.Sine.easeIn,
		dialogDuration: 300,
		width: 10,
		height: 10,
		dialogClass: '',
		draggable: false,
		draggableOptions: {},
		dialogClose: '',
		onComplete: function() { }
	},
	
	initialize: function(options) {
		this.setOptions(options);
		
		this.overlay = new Element('div', { 'styles': {
			'position': 'absolute',
			'left': 0,
			'width': '100%',
			'z-index': 100,
			'cursor': 'pointer',
			'opacity': 0,
			'visibility': 'visible',
			'height': 0,
			'display': 'none',
			'overflow': 'hidden'
		}}).inject($(document.body));
		
		this.dialog = new Element('div', { 'class': this.options.dialogClass , 'styles': {
			'opacity': '0',
			'position': 'absolute',
			'z-index': '101',
			'overflow': 'hidden',
			'top': '50%',
			'left': '50%',
			'margin': '0',
			'padding': '0'
		}}).inject($(document.body));
		if (this.options.draggable) this.dialog.makeDraggable(this.options.draggableOptions);
		
		this.overlay
				.set('tween', { duration: this.options.dialogDuration / 2, onComplete: function() {
					if (this.overlay.getStyle('opacity') == 0) {
						this.overlay.setStyle('display', 'none');
					} else {
						this.redraw_dialog();
					}
				}.bind(this) })
				
				.addEvent('click', function() {
					this.close();
				}.bind(this));
		
		window.addEvents({
			'resize': function() { this.redraw_overlay(); this.redraw_dialog(); }.bind(this),
			'scroll': function() { this.redraw_overlay(); this.redraw_dialog(); }.bind(this)
		});
		
		this.minimize();
		this.dialog.set('morph', { duration: this.options.dialogDuration, transition: this.options.dialogTransition, onComplete: function() {
			this.dialog.load();
		}.bind(this) });
	},
	
	minimize: function() {
		this.dialog.setStyles({
			top: $(window).getScroll().y + $(window).getHeight() / 2,
			left: $(window).getScroll().x + $(window).getWidth() / 2,
			width: 0,
			height: 0
		});	
	},
	
	show: function(url, options) {
		this.setOptions(options);
		this.minimize();
		this.redraw_overlay();
		this.overlay.setStyle('display', '').tween('opacity', this.options.overlayOpacity);
		
		this.dialog.set('html', '').set('load', { url: url , onComplete: function() {
			this.options.onComplete();
			if (this.options.dialogClose != '') {
				this.dialog.getElements(this.options.dialogClose).addEvent('click', function() {
					this.close();
				}.bind(this));
			}
		}.bind(this) });
	},
	
	close: function() {
		this.overlay.tween('opacity', 0);
		this.dialog.tween('opacity', 0);
	},
	
	redraw_dialog: function() {
		if (this.overlay.getStyle('display') == 'none') return;
		var draw = {
			top: $(window).getScroll().y + $(window).getHeight() / 2 - this.options.height / 2,
			left: $(window).getScroll().x + $(window).getWidth() / 2 - this.options.width / 2,
			width: this.options.width,
			height: this.options.height,
			opacity: 1
		};
		if (this.options.dialogTransition != null) {
			this.dialog.morph(draw);
		} else {
			draw.opacity = 0;
			this.dialog.setStyles(draw);
			this.dialog.morph({ opacity: 1 });
		}
	},
	
	redraw_overlay: function() {
		this.overlay.setStyles({
			'top': -$(window).getScroll().y,
			'background-color': this.options.overlayColor,
			'height': $(window).getScrollSize().y + $(window).getScroll().y
		});
	}
	
});