/// class PD.Web.UI.Controls.GridWidgetArea
/// using PD.Web.UI.Controls.Control

PD.Web.UI.Controls.GridWidgetArea =
PD.Web.UI.Controls.Control.extend({

    //===================================
    // FIELDS
    //===================================

    _widgets: null,
    _leftDock: null,
    _centerDock: null,
    _rightDock: null,

    //===================================
    // PROPERTIES
    //===================================

    get_leftDock: function () {
        return this._leftDock;
    },

    get_centerDock: function () {
        return this._centerDock;
    },

    get_rightDock: function () {
        return this._rightDock;
    },

    //===================================
    // EVENT HANDLERS
    //===================================

    onInit: function () {

        this._leftDock = new PD.Web.UI.Controls.GridWidgetAreaDock({
            dockName: "left"
        });

        this._centerDock = new PD.Web.UI.Controls.GridWidgetAreaDock({
            dockName: "center"
        });

        this._rightDock = new PD.Web.UI.Controls.GridWidgetAreaDock({
            dockName: "right"
        });

        this.get_children().add(this._leftDock);
        this.get_children().add(this._centerDock);
        this.get_children().add(this._rightDock);

    },

    //===================================
    // PUBLIC METHODS
    //===================================

    addWidget: function (widget) {

        var dock = widget.get_dock();

        switch (dock) {
            case "left":
                this._leftDock.get_children().add(widget);
                break;
            case "center":
                this._centerDock.get_children().add(widget);
                break;
            case "right":
                this._rightDock.get_children().add(widget);
                break;
        }

    },

    template: function () {
        return "<div class='-pd-widget-area'></div>";
    },

    autoAdjustDockSizes: function () {

        var leftWidth = this._leftDock.getContentWidth(),
            rightWidth = this._rightDock.getContentWidth();

        this._leftDock.get_node().css({
            width: leftWidth
        });

        this._centerDock.get_node().css({
            left: leftWidth,
            right: rightWidth
        });

        this._rightDock.get_node().css({
            width: rightWidth
        });

    }

});