/// class ProspectDirector.Web.UI.FeatureSets.Layouts.SideBarLayoutDOM

/**
@class SideBarLayoutDOM
@namespace Web.UI.FeatureSets.Layouts
@constructor
@extends Web.UI.FeatureSets.Layouts.Layout
**/
ProspectDirector.Web.UI.FeatureSets.Layouts.SideBarLayoutDOM = ProspectDirector.Web.UI.FeatureSets.Layouts.LayoutDOM.extend({

    //================================
    // CONSTRUCTOR
    //================================

    init: function (options) {
        this._super(options);
    },

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

    get_groups: function () {
        return this.get_groupsNode().data("kendoListView");
    },

    get_groupsNode: function () {
        return this.get_containerNode().find(".-pd-fs-layout-sidebar-groups");
    },

    get_contentNode: function () {
        return this.get_containerNode().find(".-pd-fs-layout-sidebar-content");
    },

    get_contentHeaderNode: function () {
        return this.get_containerNode().find(".-pd-fs-layout-sidebar-content-header");
    },

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

    _groups_onChange: function (e) {

        var groupNode = $(e.sender.select()),
            id = groupNode.data("id"),
            fn = this._options["groupSelected"];

        setTimeout($.proxy(function () {
            if ($.isFunction(fn)) {
                fn(id);
            }
        }, this), 50);

        this.get_contentHeaderNode().html(groupNode.children("SPAN").text());

    },

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

    applyAssemblerSelection: function (id) {

        var assemblerNode = this.get_contentNode().children("[data-id=" + id + "]");

        assemblerNode.css({
            visibility: "visible"
        });

    },

    clearAssemblerSelections: function (id) {

        var assemblerNode = this.get_contentNode().children("[data-id=" + id + "]");

        this.get_contentNode().children().hide();

        assemblerNode.css({
            display: "",
            visibility: "hidden"
        });

    },

    clearGroupValidationErrors: function () {
        this.get_groupsNode().find(".group > SPAN").removeClass("validation-failure-group");
    },

    populateSidebar: function (data) {

        this.get_groupsNode().kendoListView({
            dataSource: data,
            template: "<div data-id=\"${id}\" data-role=\"group\" class=\"group\"><span>${name}</span></div>",
            selectable: true,
            change: $.proxy(this._groups_onChange, this)
        });

        this.get_groupsNode().disableTextSelection();

    },

    selectGroup: function (groupId) {

        var item = null;

        if (groupId != null) {
            item = this.get_groupsNode().find("DIV[data-id=" + groupId + "]");
        }

        if (item === null || item.length === 0) {
            item = this.get_groupsNode().children().first();
        }

        if (item !== null && item.length > 0) {
            this.get_groups().select(item);
        }

    },

    showGroupValidationErrors: function (groupIds) {

        var that = this;

        this.clearGroupValidationErrors();

        groupIds.each(function (index, id) {
            that.get_groupsNode().find("DIV[data-id=" + id + "] > SPAN").addClass("validation-failure-group");
        });

    },

    template: function () {

        var $result = $("<div></div>");

        $result.addClass("-pd-fs-layout-sidebar");
        $result.attr("data-id", "container");

        $result.append("<div class=\"-pd-fs-layout-sidebar-groups-header\">Categories</div>");
        $result.append("<div class=\"-pd-fs-layout-sidebar-groups\"></div>");

        $result.append("<div class=\"-pd-fs-layout-sidebar-content-header\"></div>");
        $result.append("<div class=\"-pd-fs-layout-sidebar-content\"></div>");

        return $result;

    },

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

    render: function (data) {

        var $result = this.template(),
            $content = $result.find(".-pd-fs-layout-sidebar-content");

        data.each(function (index, item) {
            $content.append("<div data-id=\"" + item.id + "\" data-role=\"assembler-container\" style=\"box-sizing:border-box;height:100%;position:relative;\">" + item.content + "</div>");
        });

        return $result[0].outerHTML;

    }

}); 