// dialogbox.js -- web dialog box component
// Written by Oo+
// require MooTools 1.2+
// an integral part of TRE Web 2.0 Components

/// Encapsulate modal dialog box implementation.
var DialogBox = new Class({
	Implements: [Events, Options],

	/// Construct dialog box with content element and caption string.
	initialize: function(content, caption, options) {
		this.setOptions(options);
		this.visible = false;
		this.prepare();
		this.setCaption(caption);
		this.setContent(content);
		return this;
	},

	/// Assign caption to dialog box.
	setCaption: function(caption) {
		this.caption.set('html', caption ? caption : "");
		return this;
	},

	/// Assign content element to dialog box.
	setContent: function(content) {
		var oldContent = this.content.getFirst();
		if (oldContent)
			oldContent.dispose();
		if (content) {
			this.content.grab($(content));
			this.content.getElements('.close').removeEvents('click').addEvent('click', function() {
				this.close(true);
			}.bind(this));
		}
		return this;
	},

	/// Set message into content panel.
	setMessage: function(message) {
		this.content.set('html', message);
		return this;
	},

	/// Open dialog box in center of screen.
	open: function() {
		if (!this.visible) {
			if (Browser.Engine.trident)
				$$('select').each(function(e) { e.stackedHide(); });
			var page = $(document.body);
			var pageSize = page.getScrollSize();
			this.shadow.setStyle('width', pageSize.x);
			this.shadow.setStyle('height', pageSize.y);
			page.adopt(this.shadow);
			page.adopt(this.dialog);
			this.center();
			this.dialog.setStyle('visibility', 'visible');
			this.dialog.fade(0, 1);
			this.focus();
			this.visible = true;
			this.fireEvent('open');
		}
		return this;
	},

	/// Close the opened dialog box.
	close: function(manual) {
		if (this.visible) {
			this.dialog.set('opacity', 0);
			this.dialog.setStyle('visibility', 'hidden');
			this.dialog.dispose();
			this.shadow.dispose();
			if (Browser.Engine.trident)
				$$('select').each(function(e) { e.stackedShow(); });
			this.visible = false;
			this.fireEvent('close', $defined(manual) ? true : false);
		}
		return this;
	},

	/// Position dialog box in center of screen.
	center: function() {
		var page = $(document.body);
		var contentSize = this.content.getSize();
		var viewportSize = page.getSize();
		var x = viewportSize.x > contentSize.x ? (viewportSize.x - contentSize.x) / 2 : 0;
		var y = viewportSize.y > contentSize.y ? (viewportSize.y - contentSize.y) / 2 : 0;
		var offset = page.getScroll();
		x += offset.x;
		y += offset.y;
		this.dialog.setStyle('left', x);
		this.dialog.setStyle('top', y);
		return this;
	},

	/// Update dialog box content and caption and open it if it is still closed.
	update: function(content, caption) {
		this.setCaption(caption);
		this.setContent(content);
		if (this.visible) {
			this.center();
			this.focus();
		}
		else
			this.open();
		return this;
	},

	/// Focus on element with CSS class 'focus'
	focus: function() {
		var focus = this.content.getElement('.focus');
		if (focus)
			focus.focus();
		return this;
	},

	//////////////////////////////////////////////////////////////////////
	// These members are for internal use only.
	//////////////////////////////////////////////////////////////////////

	/// Prepare basis elements to form a dialog box.
	prepare: function() {
		// create shadow to cover entire page
		this.shadow = new Element('div', {
			styles: {
				display: 'block',
				visibility: 'visible',
				position: 'absolute',
				left: 0,
				top: 0,
				width: 0,
				height: 0,
				margin: 0,
				padding: 0,
				background: this.options.shadowColor,
				opacity: this.options.shadowOpacity
			}
		});

		// create dialog box container
		this.dialog = new Element('div', {
			styles: {
				display: 'block',
				visibility: 'hidden',
				position: 'absolute',
				left: 0,
				top: 0,
				width: 'auto',
				height: 'auto',
				overflow: 'hidden',
				opacity: 0
			}
		});

		// create dialog frame elements
		this.dialog.set('html', "<div class=\"" + this.options.dialogClass + "\">" +
			"<div class=\"head\"><div class=\"inner\"><div class=\"caption\">&nbsp;</div></div></div>" +
			"<div class=\"body\"><div class=\"content\"></div></div></div>");

		// grab handle to caption and content
		this.caption = this.dialog.getElement('.caption');
		this.content = this.dialog.getElement('.content');

		// make dialog box draggable
		this.dialog.makeDraggable({handle: this.caption, container: this.shadow});
		return this;
	},

	options: {
		/*
		onOpen: function() {},
		onClose: function(clickedByButton) {},
		*/
		shadowOpacity: 0.5,
		shadowColor: '#000',
		dialogClass: 'dialogbox'
	}
});

var MessageBox = new Class({
	Implements: [Events, Options],

	initialize: function(content, caption, options) {
	},

	options: {
	}
});