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

/**
@class TabStripLayoutDOM
@namespace Web.UI.FeatureSets.Layouts
@constructor
@extends Web.UI.FeatureSets.Layouts.LayoutDOM
**/
ProspectDirector.Web.UI.FeatureSets.Layouts.TabStripLayoutDOM = 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-tabstrip-groups");
    },

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

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

    _groups_onChange: function (e) {

        var node = $(e.currentTarget),
            id = node.data("id"),
            fn = this._options["groupSelected"];

        this.get_groupsNode().find(".group").removeClass("selected");
        node.addClass("selected");

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

    },

    //================================
    // 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");
    },

    populateTabStrip: function (data) {

        var that = this,
            items = new ProspectDirector.Web.List(data);

        items.each(function (index, item) {
            that.get_groupsNode().append("<div data-id=\"" + item.id + "\" data-role=\"group\" class=\"group\"><span>" + item.name + "</span></div>");
        });

        this.get_groupsNode().on("click", "DIV.group", $.proxy(this._groups_onChange, this));

        this.get_groupsNode().disableTextSelection();

        this.selectGroup();

    },

    selectGroup: function (groupId) {

        var item = null;

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

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

        if (item !== null && item.length > 0) {
            item.click();
        }

    },

    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");
        $result.addClass("-pd-fs-layout-tabstrip");
        $result.attr("data-id", "container");

        $result.append("<div class=\"-pd-fs-layout-tabstrip-groups-border\">&nbsp;</div>");
        $result.append("<div class=\"-pd-fs-layout-tabstrip-groups\"></div>");
        $result.append("<div class=\"-pd-fs-layout-tabstrip-content\"></div>");

        return $result;

    },

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

    render: function (data) {

        var $result = this.template(),
            $content = $result.find(".-pd-fs-layout-tabstrip-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;

    }

});