var RegioDialog_Element = new Class({

	Implements: [Events, Options],
	Extends: RegioDialog,

	options: {
		content_layout: '\
			<div class="box-layout">\n\
				<div class="box-header"><h3><span>$title</span></h3></div>\n\
				<div class="box-content">$content</div>\n\
				<div class="box-footer"></div>\n\
			</div>\n\
		',
		title: '',
		scrollbar: true,
		container: '.box-content'
	},

	initialize : function(element, options){
		this.root = document.getElement('body');
		this.Element = element;
		this.setOptions(options);

		this.Mask = new RegioMask();

		this.open();

		document.addEvent('keydown', function (event) {
			var PressedKey = event.key;

			if( PressedKey == 'esc') {
				event.stop();
				this._close();
			}

		}.bind(this));
	},

	open: function () {

		// Checks if the element Dialog exists and delete it
		if( $chk($('dialog')) ) {
			$('dialog').destroy();
		}

		var dialog = new Element('div', {
			'id': 'dialog',
			'class': 'dialog element-dialog',
			'styles': {
				'top': document.getScroll().y + 50
			}
		});

		var dialog_header  = new Element('div',{
			'class': 'dialog_header'
		}).inject(dialog);

		var dialog_header_close  = new Element('div',{
			'class': 'close',
			'events': {
				'click': function () {
					this._close();
				}.bind(this)
			}
		}).inject(dialog_header);

		this.dialog_content  = new Element('div',{
			'class': 'dialog_content'
		}).inject(dialog);

		if( this.Element.getAttribute('title') !== null ) {
			this.options.title = this.Element.getAttribute('title');
		}

		if( $type(this.Element) == 'string' ) {
			this.dialog_content.set('html',this.options.content_layout.replace('$title',this.options.title).replace('$content',this.Element));
		} else {
			this.dialog_content.set('html',this.options.content_layout.replace('$title',this.options.title).replace('$content',''));

			var CopyElement = this.Element.clone();
			CopyElement.inject(this.dialog_content.getElement('.box-content'));
		}

		if( this.options.scrollbar === true ) {
			this.setScrollbar();
			
		}

		dialog.inject(this.root);

	},

	setScrollbar: function () {

		if( $chk( this.dialog_content.getElement(this.options.container) ) ) {

			this.dialog_content.getElement(this.options.container).setStyles({
				'overflowY':'auto',
				'overflowX':'hidden',
				'height': (document.getHeight()-180)+'px'
			});

			window.addEvent('resize', function() {
				this.dialog_content.getElement(this.options.container).setStyles({
					'overflowY':'auto',
					'overflowX':'hidden',
					'height': (document.getHeight()-180)+'px'
				});
			}.bind(this));
		}

	}

});