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

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

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

    _$tabsNode: null,

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

    onFrame: function (e) {
        this.setFrame(this, ".-pd-tabs");
    },

    onActivate: function () {
        this._$tabsNode = this.get_node().find(".-pd-tabs");
        this.get_node().on("click", ".-pd-tab", $.proxy(this._onTabClick, this));
        this.get_node().find(".-pd-scroll-l").on("click", $.proxy(this.onScrollLeft, this));
        this.get_node().find(".-pd-scroll-r").on("click", $.proxy(this.onScrollRight, this));
    },

    onTabClick: function (e) {
        this.get_children().each(function (index, tab) {
            tab.selected(tab === e.tab);
        });
    },

    onScrollLeft: function (e) {
        this._$tabsNode.scrollLeft(this._$tabsNode.scrollLeft() - 150);
    },

    onScrollRight: function (e) {
        this._$tabsNode.scrollLeft(this._$tabsNode.scrollLeft() + 150);
    },

    scrollSelectedTabIntoView: function () {

        var $tab = this.get_node().find(".-pd-tab.selected");

        if ($tab.length > 0) {
            $tab.parent().scrollLeft(0);
            $tab.parent().scrollLeft(Math.round($tab.position().left));
        }

    },

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

    _onTabClick: function (e) {

        var target = null,
            uid = $(e.currentTarget).prop("id");

        this.get_children().each(function (index, tab) {
            if (tab.get_id() === uid) {
                target = tab;
                return false;
            }
        });

        if (target) {
            target.onClick();
            this.onTabClick({
                tab: target
            });
        }

    },

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

    refresh: function () {

        var that = this,
            contentWidth = 0,
            overflow = 0;

        this.get_node().find(".-pd-tab").each(function (index, node) {
            contentWidth += $(node).outerWidth(true);
        });

        overflow = contentWidth - this._$tabsNode.width();
        overflow = overflow > 0 ? overflow : 0;

        if (overflow > 0) {
            this.get_node().find(".-pd-scrollers").show();
            this._$tabsNode.css({
                marginRight: "64px"
            });
        }
        else {
            this.get_node().find(".-pd-scrollers").hide();
            this._$tabsNode.css({
                marginRight: "0"
            });
        }

        setTimeout(function () {
            that.scrollSelectedTabIntoView();
        }, 200);

    },

    template: function (e) {

        return [
            "<div class='-pd-pri-tabstrip'>",
                "<div class='-pd-scrollers'>",
                    "<div class='-pd-scroll -pd-scroll-r' style='z-index:1;'><span></span></div>",
                    "<div class='-pd-scroll -pd-scroll-l' style='z-index:1;'><span></span></div>",
                "</div>",
                "<div class='-pd-tabs'></div>",
            "</div>"
        ];

    }

});