(function($) {
	$.widget('ui.DpDialog', {
		overlayEl: $('<div class="ui-DpDialogOverlay"></div>'),
		dialogEl: $('<div class="layout-window ui-DpDialog"><div class="head"><div class="title"><span><span></span></span></div></div><div class="body ui-DpDialogBody"></div><div class="clr"></div></div>'),
		options:  {
			title: '',
			body: '',
			width: 600,
			height: 0
		},
		_init: function() {
			var that = this;
		
			this.overlayEl.css('background-color', '#DDD');
			this.overlayEl.css('opacity', '0.9');
			this.overlayEl.css('position', 'absolute');
			this.overlayEl.css('top', '0');
			this.overlayEl.css('left', '0');
			this.overlayEl.css('height', $(document).height());
			this.overlayEl.css('width', '100%');
			this.overlayEl.css('display', 'none');
			this.overlayEl.css('z-index', '100000');
			this.element.append(that.overlayEl);

			this.dialogEl.css('position', 'absolute');
			this.dialogEl.css('display', 'none');
			this.dialogEl.css('z-index', '100001');
			this.dialogEl.find('.title > span > span').empty().append(this.options.title);
			this.dialogEl.find('.body').empty().append(this.options.body);
			this.element.append(that.dialogEl);
			this.dialogEl.width(this.options.width);
			if (this.options.height) {
				this.dialogEl.height(this.options.height);
			}
			
			this.element.append(this.overlayEl.fadeIn('fast', function(){
				that.element.append(that.dialogEl.center().fadeIn('slow'));
			}));
		},
		close: function() {
			var that = this;
			this.dialogEl.fadeOut(	'fast',
									function(){
										that.overlayEl.fadeOut(	'fast',
																function(){
																	that.overlayEl.remove();
																	that.dialogEl.remove();
																});
									});
		}
	});
	$.DpDialog = {
		open: function(titleEl, contentEl){
			$('body').DpDialog({
				title: titleEl,
				body: contentEl
			});
		},
		close: function(title, contentHtml){
			$('body').DpDialog('close');
		}
	};
})(jQuery);