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

/**
[NEEDS DOCUMENTATION]
@class MarkupEditor
@namespace Web.UI.FeatureSets.Editors
@extends Web.UI.FeatureSets.Editors.CompositeEditor
@constructor
**/
ProspectDirector.Web.UI.FeatureSets.Editors.MarkupEditor = ProspectDirector.Web.UI.FeatureSets.Editors.CompositeEditor.extend({

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

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

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

    _input_onFocus: function (e) {

        var $target = $(e.target);

        $target.closest("TD").find("INPUT[type=button]").focus();

    },

    _button_onClick: function () {

        var that = this;

        ProspectDirector.Web.UI.FeatureSets.Editors.MarkupEditorDialog.open({
            config: {
                title: this.get_definition().get_data().label
            },
            data: {
                value: this.getPrimaryValue()
            },
            callbacks: {
                ok: function (sender, e) {
                    that.setPrimaryValue(e);
                    that.updateUI(e);
                }
            }
        });

    },

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

    activate: function () {
        this._super();
        this.updateUI(this.getPrimaryValue());
        this.get_input().on("focus", $.proxy(this._input_onFocus, this));
    },

    updateUI: function (value) {

        if (value) {
            this.get_input().val("Click button to edit text...");
        }
        else {
            this.get_input().val("None");
        }

    },

    render: function () {
        return "<div id=\"" + this.getId() + "\" class=\"-pd-micro-editor-composite\">" +
                "<input type=\"text\" readonly disabled style=\"color:#AAAAAA;padding-left:5px;\">" +
                "<input type=\"button\" value=\"...\">" +
                "</div>";
    }

});