/// class PD.Manage.Modules.OverviewPanel
// using PD.Web.UI.Controls.Control

PD.Manage.Modules.OverviewPanel =
PD.Web.UI.Controls.Control.extend({

    //===================================
    // PROTECTED METHODS
    //===================================

    _data: null,
    _selectedId: null,

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

    onActivate: function (e) {
        this.get_node().on("click", ".-pd-overview-module-box", $.proxy(this._onModuleClick, this));
        this.get_node().on("dblclick", ".-pd-overview-module-box", $.proxy(this._onModuleDoubleClick, this));
    },

    _onModuleClick: function (e) {

        this._selectedId = $(e.currentTarget).data("id");

        this._selectModuleBox(this._selectedId);
        e.preventDefault();
        e.stopPropagation();

    },

    _onModuleDoubleClick: function (e) {
        
        var $target = $(e.currentTarget);

        window.location.href = $target[0].href;
        
    },

    //===================================
    // PUBLIC METHODS
    //===================================
    
    load: function (data) {

        var that = this;

        this.get_children().clear();

        _.each(data, function (group) {
            that.get_children().add(new PD.Manage.Modules.OverviewPanelGroup({
                area: group.name,
                modules: group.tiles
            }));
        });

        this._selectFirstModuleBox();

    },

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

    hide: function () {
        this.get_node().hide();
    },

    show: function () {
        this.get_node().show();
        this._fireSelectionFn();
    },

    select: function (id) {
        if (id !== undefined) {
            this._selectModuleBox(id);
            this._fireSelectionFn();
        }
        else {
            return this._getSelectedModule();
        }
    },

    //===================================
    // PRIVATE METHODS
    //===================================

    _getSelectedModule: function () {
        return this.get_node().find(".-pd-overview-module-box[data-id='" + this._selectedId + "']").data("module");
    },

    _selectModuleBox: function (id) {

        var $box = $(".-pd-overview-module-box[data-id='" + id + "']"),
            data = $box.data("module");

        this.get_node().find(".-pd-selected").removeClass("-pd-selected");

        $box.addClass("-pd-selected");

        if (data != null) {
            this._fireSelectionFn();
        }

    },

    _selectFirstModuleBox: function () {
        var $moduleBox = this.get_node().find(".-pd-overview-module-box:first");
        this._selectModuleBox($moduleBox.data("id"));
        $moduleBox.focus();
        this._fireSelectionFn();
    },

    _fireSelectionFn: function () {

        var selectFn = this.get_options()["select"]

        if (PD.Type.isFunction(selectFn)) {
            selectFn({
                module: this._getSelectedModule()
            });
        }


    }

});