/// <reference path="jquery-1.7.1-vsdoc.js" />
(function ($) {
    $.fn.extend({
        panel: function (options) {
            var defaults = {
                width: 350,
                height: 220
            };

            var options = $.extend(defaults, options);

            return this.each(function () {
                var o = options;

                var obj = $(this);
                obj.addClass('x-panel');
                obj.css('width', o.width.toString() + 'px');

                var content = obj.find('.content');

                var hc = obj.find('div:first');

                var headerContent = $('<div/>').addClass('x-panel-title-text').append(hc).css('width', (o.width - 6).toString() + 'px');

                var header = $('<div/>');
                header.addClass('x-panel-title').css('width', o.width);

                var r = $('<div/>').addClass('x-panel-right-corner');
                var h = $('<div/>').addClass('x-panel-left-corner').after(headerContent).after(r);
                header.append(h);

                //debugger;     
                var b = $('<div/>');
                b.addClass('x-panel-body').css('width', (o.width - 2) + 'px').css('min-height', o.height + 'px').append(content);

                var bottom = $('<div/>').addClass('x-panel-bottom');
                $('<div/>').addClass('x-panel-bottom-left')
                            .add($('<div/>').addClass('x-panel-bottom-center').css('width', (o.width - 6) + 'px'))
                            .add($('<div/>').addClass('x-panel-bottom-right')).appendTo(bottom);

                obj.append(header.add(b).add(bottom));

            });
        }
    });
})(jQuery);