/*
	Example Usage:

	var dlg = new Dialog({'maskColor':'#2C478F','backgroundColor':'#ffffff'});
	$('SimpleMessage').addEvent('click',function(e){
		var e = new Event(e);
		e.stop();
		dlg.show('This is a <b>simple message</b> with HTML formatting');
	});
	$('ElementMessage').addEvent('click',function(e){
		var e = new Event(e);
		e.stop();
		var el = new Element('div',{'styles':{'padding':10,'background':'#CCCCCC','width':600}}).setText('This is an HTML element');
		dlg.show(el);
	});
	*/


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

			// setup the message
			switch ($type(el)) {
				case 'element':
					this.el = $(el).clone();
					this.el.removeClass('hide');
					if (this.el.tagName == 'img') this.preload;
					break;
				case 'string':
					this.el = new Element('div',{
						'styles': {
							'padding':'10px',
							'width':this.options.width,
							'height':this.options.height
							}
						}).set('html',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': .75,
				'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',{'id':'dialog_box','styles':{
				'background':'#fff',
				'color': '#666',
				'padding': '5px',
				'margin':'0 auto'
			}});
			this.close = new Element('span',{'id':'dialog_close','styles':{
				'background':'#fff',
				'color': '#666',
				'text-align': 'right',
				'padding': '5px',
				'display':'block',
				'border-bottom':'3px double #666',
				'cursor':'pointer'
			}}).set('text','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
			document.body.appendChild(this.mask);
			document.body.appendChild(this.pop);
			this.close.inject(this.message,'inside')
			this.el.inject(this.message,'inside');
			this.message.inject(this.pop,'inside');
			this.message.setStyle('width',this.el.getCoordinates().width);


			// position the dialog outside (above) the visible window
			this.pop.setStyles({
				'top': (window.getCoordinates().height/2)-(this.pop.getCoordinates().height/2) ,
				'visibility':'visible'
			});
			
			/*
			// start the animation
			this.fade = new Fx.Tween(this.mask, 'opacity', {duration:this.options.speed});
			this.slide = new Fx.Tween(this.pop, 'top', {duration:this.options.speed});

			this.fade.start(.8);
			this.slide.start(window.getScrollTop()+30);
			this.periodical = this.update.periodical(100,this);
			*/
			
		},
		update: function() {
			this.slide.start(window.getScrollTop()+30);
			var h = (window.getHeight() > window.getScrollHeight())?window.getHeight():window.getScrollHeight();
			this.mask.setStyle('height',h);
		},
		hide: function() {
			$$('object','select').setStyle('visibility','visible');
			this.mask.dispose();
			this.pop.dispose();
			/*
			$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));
			*/
		}
	});


	var Pop = new Popup();