/// class PD.Manage.Modules.StringSettingFeature

/**
@class StringSettingFeature
@constructor
@namespace Web.UI.Canvas.Charts
@extends Web.UI.FeatureSets.MacroEditorBase
**/
PD.Manage.Modules.StringSettingFeature =
ProspectDirector.Web.UI.FeatureSets.MacroEditorBase.extend({

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

    get_input: function () {
        return this.get_container().find("INPUT");
    },

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

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

    activate: function () {
        this.get_input().val(this.getValue("value"));
        this.get_input().select();
        this.get_input().focus();

        this.get_input().prop("disabled", this.getValue("isReadOnly"));
        this.get_input().css({
            color: this.getValue("isReadOnly") ? "#AAAAAA" : "",
            borderColor: this.getValue("isReadOnly") ? "#CCCCCC" : ""
        });

    },

    commit: function () {
        this.setValue("value", this.get_input().val());
    },

    render: function () {

        var result = [
            "<div id='" + this.getId() + "' style='padding:10px 10px 10px 10px;font-size:12px;'>",
                "<label for='Value' class='-pd-macro-editor-label'>" + this.getValue("label") + "</label>",
                "<input type='text' class='-pd-macro-editor-input' style='box-sizing:border-box;width:100%;padding:3px;height:22px;'/><br/>",
            "</div>"
        ];

        return result.join("");

    }

});