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

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

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

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

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

    get_browseButton: function () {
        return this.get_node().find("input[type=button]");
    },

    get_label: function () {
        return this.get_node().find(".-pd-selection-box-input-label");
    },

    get_value: function () {
        return this.get_node().find(".-pd-selection-box-input-value");
    },

    get_callback: function () {
        return this.get_options("callback");
    },

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

    onActivate: function () {
        this.get_browseButton().on("click", _.bind(this._browseButton_onClick, this))
    },

    _browseButton_onClick: function (e) {
        var callback = this.get_options()["callback"];
        if (_.isFunction(callback)) {
            callback(this);
        }
    },

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

    setSelection: function (value, label, icon) {
        var callback = this.get_options()["change"];
        this.get_label().html(label);
        this.get_value().val(value);
        if (_.isFunction(callback)) {
            callback({
                label: label,
                value: value
            });
        }
    },

    //===========================
    // PROTECTED METHODS
    //===========================

    template: function (options) {
        return [
            "<div class='-pd-selection-box-input'>",
                "<div class='-pd-selection-box-input-label'></div>",
                "<input type='text' class='-pd-selection-box-input-value' style='display:none' />",
                "<input type='button' value='...' class='-pd-selection-box-input-button'/>",
            "</div>"
        ];
    }

});