/// class ProspectDirector.Web.UI.FeatureSets.Editors.IconEditor
/// using ProspectDirector.Web.UI.FeatureSets.Editors.CompositeEditor

/**
@constructor
@class IconEditor
@namespace Web.UI.FeatureSets.Editors
@extends Web.UI.FeatureSets.Editors.CompositeEditor
**/
ProspectDirector.Web.UI.FeatureSets.Editors.IconEditor =
ProspectDirector.Web.UI.FeatureSets.Editors.CompositeEditor.extend({

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

    get_preview: function () {
        return this.get_element().find("DIV.preview");
    },

    get_input: function () {
        return this.get_element().find("INPUT[type=text]");
    },
    
    //==============================
    // EVENT HANDLERS
    //==============================

    _input_onKeyUp: function () {

        this.setPrimaryValue(this.get_input().val());
        this._updateUI(this.get_input().val());

    },

    _button_onClick: function () {

        var that = this;

        PDJS.Shared.Dialogs.IconBrowserDialog.open({
            callbacks: {
                ok: function (sender, data) {
                    that._setValue(data.value);
                }
            }
        });
        
    },
    
    //==============================
    // OVERRIDDEN METHODS
    //==============================

    activate: function () {
        this._super();
        this.get_input().on("keyup", $.proxy(this._input_onKeyUp, this));
        this.get_input().val(this.getPrimaryValue());
        this._updateUI(this.getPrimaryValue());
    },

    render: function () {
        return "<div id=\"" + this.getId() + "\" class=\"-pd-micro-editor-composite color-picker\">" +
                    "<div class='swatch preview' style='border-width:0;top:0;bottom:0;width:20px;height:20px;'></div>" +
                    "<input type=\"text\">" +
                    "<input type=\"button\" value=\"...\">" +
                "</div>";
    },
    
    //==============================
    // PRIVATE METHODS
    //==============================

    _setValue: function (value) {
        this.get_input().val(value);
        this.setPrimaryValue(value);
        this._updateUI(value);
    },

    _updateUI: function (value) {

        this.get_preview().css({
            backgroundRepeat: "no-repeat",
            backgroundImage: "url(" + PD.Path.resolve("~/application/icons/16x16/" + value) + ")",
            backgroundPosition: "center center"
        });

    }

});