// JavaScript Document


			var Dialog = new Class({
				Implements: Options,
				options: {
					speed: 500,
					maskColor: '#000000',
					backgroundColor: '#ffffff',
					width: 400,
					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();
							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
					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.getScrollTop() - this.pop.getCoordinates().height,
						'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');
					$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));
				}
			});


			
			/*
			$('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);
			});
			*/