/// class ProspectDirector.Web.UI.FeatureSets.MicroEditorAssemblerDOM
/// using ProspectDirector.Web.UI.FeatureSets.EditorAssemblerBase

/**
@class MicroEditorAssemblerDOM
@namespace Web.UI.FeatureSets
@extends Web.UI.FeatureSets.EditorAssemblerBase
@constructor
**/
ProspectDirector.Web.UI.FeatureSets.MicroEditorAssemblerDOM = ProspectDirector.Web.UI.FeatureSets.EditorAssemblerBaseDOM.extend({

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

    _grid: null,
    _editors: null,
    _data: null,

    //==============================
    // CONSTRUCTORS
    //==============================

    init: function (options) {
        this._super(options);
        this._editors = options.editors;
        this._data = options.data;
    },

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

    get_grid: function () {
        return this._grid;
    },

    get_gridNode: function () {
        return this.get_node().find("[data-id=grid]");
    },

    get_dataSource: function () {
        return this._grid.dataSource;
    },

    get_editors: function () {
        return this._editors;
    },

    get_data: function () {
        return this._data;
    },

    //==============================
    // INITIALIZERS
    //==============================

    _activateGrid: function () {

        var that = this,
            pager = null;

        this._grid = this.get_gridNode().kendoGrid({
            autoBind: false,
            pageable: true,
            scrollable: true,
            selectable: false,
            resizable: true,
            height: "100%",
            columns: [
                {
                    title: "&nbsp;",
                    hidden: true,
                    width: "30px",
                    attributes: {
                        style: "background-color:\\#EEEEEE;border:0px 1px 0px 0px;"
                    }
                },
                {
                    title: "Category",
                    field: "category",
                    hidden: true,
                    groupHeaderTemplate: "#=value#",
                    width: "150px"
                },
                {
                    title: "&nbsp;",
                    field: "label",
                    attributes: {
                        "class": "-pd-micro-editor-label"
                    },
                    template: function (e) {
                        return "<div class='" + (e.attributes["__required"] ? "required" : "") + "'>" + (e.label ? e.label : "") + "</div>";
                    },
                    width: "150px"
                },
                {
                    title: "&nbsp;",
                    field: "featurelet",
                    template: $.proxy(this._renderEditor, this),
                    attributes: {
                        style: "padding:0px;",
                        "class": "-pd-micro-editor"
                    }
                }
            ],
            dataBound: $.proxy(this._grid_onDataBound, this)
        }).data("kendoGrid");


        this.get_dataSource().data(this.get_data());

        pager = this.get_node().find(".k-pager-wrap");
        pager.empty();
        pager.append("<div class=\"-pd-micro-editor-description\"></div>");
        pager.css({
            padding: "0px"
        });

        this.get_dataSource().group({
            field: "category"
        });

        this.get_dataSource().sort([
            { field: "category", dir: "asc" },
            { field: "order", dir: "asc" },
            { field: "label", dir: "asc" }
        ]);

        this.get_grid().bind("columnResizing", $.proxy(this._grid_onColumnResizing, this));
        this.get_node().on("click", ".-pd-micro-editor-label", $.proxy(this._editorLabel_onClick, this));

        this._highlightEditorLabel(this.get_gridNode().find(".-pd-micro-editor-label").first());

    },

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

    _grid_onDataBound: function (e) {

        var that = this;

        if (this.get_editors().count() === 0) {
            ProspectDirector.Web.UI.Utilities.Kendo.Grid.addMessage($(this._grid.element), "no selection");
        }
        else {

            ProspectDirector.Web.UI.Utilities.Kendo.Grid.removeMessage($(this._grid.element));

            this.get_editors().each(function (index, editor) {
                editor.activate();
            });

        }

        setTimeout(function () {
            that._focusFirstField();
        }, 100)
        
    },

    _grid_onColumnResizing: function () {

        this.get_node().find(".k-grid-content > TABLE").css({
            width: "100%"
        });

    },

    _editorLabel_onClick: function (e) {

        var $label = $(e.currentTarget).closest(".-pd-micro-editor-label");

        this._clearEditorLabelHighlight();
        this._highlightEditorLabel($label);

    },

    _highlightEditorLabel: function ($label) {

        var $row = $label.closest("TR[data-uid]"),
            data = null;

        if ($row.length > 0) {

            data = this.get_dataSource().getByUid($row.data("uid"));

            $label.addClass("selected");

            this._updateDescription(data);
        }

    },

    _clearEditorLabelHighlight: function () {
        this.get_node().find(".-pd-micro-editor-label").removeClass("selected");
    },

    _updateDescription: function (data) {

        var $content = $("<div></div>");
        $desc = this.get_node().find(".-pd-micro-editor-description");

        $content.append("<b>" + (data.label ? data.label : "") + "</b>")
        $content.append("<br/>")
        $content.append(data.description ? data.description : "");

        $desc.empty();
        $desc.append($content[0].outerHTML);

    },

    _focusFirstField: function () {

        var $field = null;

        if (this._grid) {
            $field = this._grid.content.find("INPUT:enabled:first");
            $field.focus();
            $field.select();
        }

    },

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

    resize: function () {

        var $node = this.get_node(),
            $gridNode = this.get_gridNode();

        $gridNode.height($node.outerHeight() - 22);
        $gridNode.width($node.outerWidth() - 22);

        var filler = new ProspectDirector.Web.UI.Utilities.Kendo.Grid.Fill({
            selector: $gridNode.selector,
            useAvailableSpace: false
        });

        filler.size();

    },

    render: function () {

        var $result = $("<div id=\"" + this.get_id() + "\" data-role=\"MicroEditorAssembler\" class=\"-pd-micro-editor-assembler\"><div data-id=\"grid\"></div></div>");

        return $result[0].outerHTML;

    },

    activate: function () {
        this._super();
        this._activateGrid();
    },

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

    _renderEditor: function (data) {

        var result = null,
            editor = this.get_editors().getByName(data.feature, data.name);

        if (editor) {
            result = editor.render();
        }

        return result ? result : "#ERROR#";

    }

});