/// class ProspectDirector.Web.UI.FeatureSets.Editors.ViewEditor
/// 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.ViewEditor =
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

        ProspectDirector.Types.Core.Dialogs.ViewEditor.show({
            config: {
                actions: ["Maximize", "Close"],
                resizable: true,
                width: 800,
                height: 500
            },
            params: {
                viewId: this.getPrimaryValue()
            }
        });

    },

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

    activate: function () {
        this._super();
    },

    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\" value=\"Click to edit...\" disabled style='padding-left:5px !important;color:#CCCCCC;font-style:italic;left:5px;'>" +
            "<input type=\"button\" value=\"...\">" +
            "</div>";
    },

    //==============================
    // PRIVATE METHODS
    //==============================

    _setValue: function (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"
        });

    }

});