var Dialog = {};

Dialog.Box = Class.create();

Object.extend(Dialog.Box.prototype, 
{
	initialize: function(id, displayOverlay) 
	{
		this.dialog_box = $(id);
		this.dialog_box.show = this.show.bind(this);
		this.dialog_box.showAt = this.showAt.bind(this);
		this.dialog_box.hide = this.hide.bind(this);
		this.dialog_box.hideOverlay = this.hideOverlay.bind(this);
		this.dialog_box.slide = this.slide.bind(this);
		this.dialog_box.onShow = this.onShow.bind(this);
		this.dialog_box.onShowClear = this.onShowClear.bind(this);
		this.dialog_box.onHide = this.onHide.bind(this);
		this.dialog_box.onHideClear = this.onHideClear.bind(this);
		
		this._onShowFunction = new Array();
		this._onHideFunction = new Array();
		
		this._displayOverlay = displayOverlay;
		
		if (this._displayOverlay)
		{
			this.createOverlay();
		}

		this.parent_element = this.dialog_box.parentNode;

		var e_dims = Element.getDimensions(this.dialog_box);
		// var b_dims = Element.getDimensions(this.overlay);
		
		this.dialog_box.style.position = "absolute";
		// this.dialog_box.style.left = ((b_dims.width/2) - (e_dims.width/2)) + 'px';
		this.dialog_box.style.left = ((document.viewport.getWidth() / 2) - (e_dims.width / 2)) + 'px';
		this.dialog_box.style.top = '50px';
		this.dialog_box.style.zIndex = 91;
	},

	createOverlay: function() 
	{
		if($('dialog_overlay')) 
		{
			this.overlay = $('dialog_overlay');
		} 
		else 
		{
			this.overlay = document.createElement('div');
			this.overlay.id = 'dialog_overlay';

			Object.extend(this.overlay.style, 
			{
				position: 'absolute',
				top: 0,
				left: 0,
				zIndex: 90,
				width: '100%',
				backgroundColor: '#000',
				display: 'none'
			});
			
			document.body.insertBefore(this.overlay, document.body.childNodes[0]);
		}
	},

	moveDialogBox: function(where) 
	{
		Element.remove(this.dialog_box);

		if(where == 'back')
		{
			this.dialog_box = this.parent_element.appendChild(this.dialog_box);
		}
		else
		{
			if (this._displayOverlay)
			{
				// this.dialog_box = this.overlay.parentNode.insertBefore(this.dialog_box, this.overlay);
				this.overlay.parentNode.insertBefore(this.dialog_box, this.overlay);
			}
			else
			{
				document.body.insertBefore(this.dialog_box, document.body.childNodes[0]);
			}
		}
	},

	show: function() 
	{
		if (this._displayOverlay)
		{
			this.showOverlay();
		}
		
		this.moveDialogBox('out');
		
		this.dialog_box.style.display = 'block';
		
		if (this._onShowFunction.size() > 0)
		{
			this._onShowFunction.each(function(showFunction)
			{
				showFunction();
			});
		}
	},
	
	showAt: function(left, top)
	{
		this.dialog_box.style.left = left + 'px';
		this.dialog_box.style.top = top + 'px';
		this.show();
	}, 
		
	showOverlay: function()
	{
		this.overlay.style.height = document.viewport.getHeight() + 'px';

		// this.overlay.onclick = this.hide.bind(this);
		new Effect.Appear(this.overlay, {duration: 0.1, from: 0.0, to: 0.5});
	},

	hide: function() 
	{
		if (this._displayOverlay)
		{
			this.hideOverlay();
		}
		
		this.dialog_box.style.display = 'none';
		this.moveDialogBox('back');
		
		if (this._onHideFunction.size() > 0)
		{
			this._onHideFunction.each(function(hideFunction)
			{
				hideFunction();
			});
		}
	},
	
	hideOverlay: function()
	{
		new Effect.Fade(this.overlay, {duration: 0.1});
	},
	
	slide: function()
	{
		Effect.toggle(this.overlay,'slide');
	},
	
	onShow: function(functionName)
	{
		this._onShowFunction.push(functionName);
	},
	
	onShowClear: function()
	{
		this._onShowFunction.clear();
	},
	
	onHide: function(functionName)
	{
		this._onHideFunction.push(functionName);
	},
	
	onHideClear: function()
	{
		this._onHideFunction.clear();
	}
});