Tauri.UI.OverlayBox = Class.create({
	
	zIndex : 9000,
	box: null,
	textBox: null,
	buttonsBox : null,
	buttonsList : null,
	boxClass: '',
	modal: false,
	centerBox: null,
	
	initialize : function (opts) {
		this.copyOpts({
			onClose : Prototype.emptyFunction,
			onHide  : Prototype.emptyFunction,
			onShow  : Prototype.emptyFunction,
			onClick : Prototype.emptyFunction
		});
		this.copyOpts(opts);
	},
	
	copyOpts : function (opts) {
		var t = this;
		$H(opts).each(function (pair) {
			t[pair.key] = pair.value;
		});
	},
	
	createBox : function (addContentClassName) {
		
		this.box = new Element('div').addClassName('overlay-box').insert(
			new Element('div').addClassName('tl').insert(
				new Element('div').addClassName('tr').insert(
					(this.topline = new Element('div')).addClassName('tc')
				)
			)
		).insert(
			new Element('div').addClassName('cl').insert(
				new Element('div').addClassName('cr').insert(
					this.element('centerBox', 'div').addClassName('cc').addClassName(addContentClassName).insert(
						this.element('textBox', 'div').addClassName('text')
					).insert(
						this.element('buttonsBox', 'div').addClassName('buttons').hide()
					)
				)
			)
		).insert(
			new Element('div').addClassName('bl').insert(
				new Element('div').addClassName('br').insert(
					(this.bottomline = new Element('div')).addClassName('bc')
				)
			)
		);
		if (this.boxClass) {
			this.box.addClassName(this.boxClass);
		}
 		if (this.modal && Object.isNumber(this.zIndex)) {
			this.overlayer = new Tauri.UI.OverLayer({zIndex: this.zIndex});
			this.zIndex += 1;
		}
		if (Object.isNumber(this.zIndex)) {
			this.box.setStyle({zIndex: this.zIndex});
		}
		this.box.hide();
		$$('body').first().insert(this.box);
		return this.box;
	},
	
	createButton : function (text, onclick) {
		var btn = new Element('li').insert(
			new Element('div').addClassName('message-button').insert(
				new Element('div').addClassName('message-button-in').insert(
					new Element('div').addClassName('message-button-text').update(text)
				)
			)
		);
		if (onclick) {
			btn.observe('click', onclick);
		}
		return btn;
	},
	
	addButton : function (text, onclick) {
		if (!this.buttonsList) {
			this.buttonsBox.insert(
				this.element('buttonsList', 'ul')
			).insert(
				new Element('div').addClassName('spacer')
			);
		}
		this.buttonsList.insert(this.createButton(text, onclick));
	},
	
	showButtons : function () {
		this.buttonsBox.show();
	},
	
	hideButtons : function () {
		this.buttonsBox.hide();
	},
	
	element : function (name, tag, opts) {
		this[name] = new Element(tag, opts);
		return this[name];
	},
	
	hide : function () {
		this.hidden = true;
		this.box.hide();
		this.onHide();
		if (this.overlayer) {
			this.overlayer.hide();
		}
	},
	
	show : function () {
		this.hidden = false;
		this.box.show();
		this.onShow();
		if (this.overlayer) {
			this.overlayer.show();
		}
	},
	
	close : function (buttonId) {
		if (buttonId) {
			this.onClick(buttonId);
		}
		if (this.overlayer) {
			this.overlayer.destroy();
		}
		Tauri.UI.Msgs.unregister(this);
		this.box.remove();
		this.onClose();
	}
});

Tauri.UI.OverLayer = Class.create({
	
	opacity   : 0.4,
	bgcolor   : 'white',
	layer     : null,
	
	initialize : function (opts) {
		var t = this;
		$H(opts).each(function (p) {
			t[p.key] = p.value;
		});
		this.layer = (new Element('div')).setStyle({
			position: 'absolute',
			top: '0',
			left: '0',
			backgroundColor: this.bgcolor,
			opacity: this.opacity,
			zIndex: this.zIndex
		}).hide();
		$$('body').first().insert(this.layer);
		this.evResize = this.checkSize.bindAsEventListener(this);
		Event.observe(window, 'resize', this.evResize);
		Event.observe(window, 'scroll', this.evResize);
		this.checkSize();
	},
	
	evResize : null,
	checkSize : function (event) {
		if (!$('ui-overlayer-checker')) {
			$$('body').first().insert(
				new Element('div', {id: 'ui-overlayer-checker'}).setStyle({
					width: '100%',
					height: '0',
					lineHeight: '0',
					fontSize: '0',
					padding: '0',
					margin: '0'
				})
			);
		}
		
		this.layer.setStyle({
			width: $('ui-overlayer-checker').getWidth() + 'px',
			height: (document.viewport.getDimensions().height + document.viewport.getScrollOffsets().top) + 'px'
		});
	},
	
	show : function () {
		this.layer.show();
	},
	
	hide : function () {
		this.layer.hide();
	},
	
	destroy : function () {
		Event.stopObserving(window, 'resize', this.evResize);
		Event.stopObserving(window, 'scroll', this.evResize);
		if (this.layer) {
			this.layer.remove();
			delete this.layer;
		}
	}
	
});