(function($) {
	$.widget("ui.box", {

		_create: function() {
			var box = this.element;
			box
				.addClass("ui-widget ui-widget-content ui-corner-all")
				.css("padding", ".2em");

			var content = $('<div>&nbsp;</div>')
				.addClass("ui-widget-content ui-corner-bottom")
				.css('padding', '.5em 1em')
				.css('border', '0')
				.html(box.html());

			box.html(content);

			if (!box.attr('title') && !content.children("#title").html()) {
				return;
			}
			
			var titlebar = $('<div></div>');
			titlebar.addClass("ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-top")
			titlebar.css('padding', '.3em')
			titlebar.html(box.attr('title'));
			titlebar.prependTo(box);

			if (content.children("#title")) {
				titlebar.prepend(content.children("#title"));
			}
		}

	});
})(jQuery);
$(function() {
	$('div[id=box]').box();
});