/// class PD.Web.UI.Controls.DropDownListTemplate
/// using PD.Web.UI.Controls.Template

PD.Web.UI.Controls.DropDownListTemplate =
PD.Web.UI.Controls.Template.extend({

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

    get_select: function () {
        return this.getNode().find("SELECT");
    },

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

    onActivate: function (e) {
        this._super(e);
        this.get_select().on("change", $.proxy(this.onChange, this));
    },

    onChange: function (e) {
        this.executeCommand({
            fontSize: this.get_select().val()
        });
    },

    onCommandChange: function (e) {
        e.toolbar.enable(e.node, e.enabled);
        e.node.find("[data-id=label]").text(e.label);
    },

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

    template: function () {

        var result = [
            "<div id='" + this.data("id") + "' data-id='" + this.data("id") + "'>",
                "<span data-id='label' style=\"padding-left:7px;padding-right:7px;font-size:12px;\">",
                this.data("label") || "",
                "</span>",
                "<select style=\"padding:3px;border:1px solid #DDDDDD;width:70px;font-size:12px;\">",
                    this._getListItems().join(""),
                "</select>",
            "</div>"
        ];

        return result.join("");

    },

    //===================================
    // PRIVATE METHODS
    //===================================
    
    _getListItems: function () {

        var result = [],
            items = this.data("items");

        if (_.isArray(items)) {

            _.each(items, function (item) {
                
                var value = null;

                if (_.isString(item) || _.isNumber(item)) {
                    value = "<option>" + item.toString() + "</option>";
                }
                else {
                    value = "<option value='" + item.value + "'>" + item.text + "</option>";
                }

                result[result.length] = value;

            });

        }

        return result;

    }

});