/// class PD.Manage.Modules.MarkupTextualEditorFeature

PD.Manage.Modules.MarkupTextualEditorFeature =
ProspectDirector.Web.UI.FeatureSets.MacroEditorBase.extend({

    //==============================
    // FIELDS
    //==============================

    _editor: null,

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

    get_editor: function () {
        return this._editor;
    },

    get_editorNode: function () {
        return this.get_container().find("DIV[data-id=markup-editor]");
    },

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

    _editor_onChange: function () {
        this._commitChanges();
    },

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

    activate: function () {
        
        ace.config.set("basePath", PD.Path.resolve("~/areas/shared/assets/external/ace"));
        this._editor = ace.edit(this.get_editorNode()[0]);
        this.get_editor().setTheme("ace/theme/chrome");
        this.get_editor().getSession().setMode("ace/mode/html");
        this.get_editor().getSession().on("change", $.proxy(this._editor_onChange, this));
        this.get_editor().renderer.setShowPrintMargin(false);
        this.get_editor().setOption("highlightActiveLine", false);
        this.get_editor().setOption("scrollPastEnd", true);
        this._setEditorValueAndFocus();

    },

    focus: function () {
        this._setEditorValueAndFocus();
    },

    commit: function () {
        this._commitChanges();
    },

    render: function () {

        var result = [
            "<div id='" + this.getId() + "' style='font-size:12px;position:absolute;top:0;left:0;bottom:0;right:0;padding:10px;'>",
                "<div style='font-size:12px;position:absolute;top:10px;left:10px;bottom:10px;right:10px;border:1px solid #AAAAAA;'>",
                    "<div data-id='markup-editor' class='-pd-ace-editor'></div>",
                "</div>",
            "</div>"
        ];

        return result.join("");

    },

    _commitChanges: function () {
        if (this.get_editor()) {
            this.setValue("value", this.get_editor().getSession().getValue());
        }
    },

    _setEditorValueAndFocus: function () {

        var editor = this.get_editor(),
            value = this.getValue("value");

        if (editor != null && value != null) {
            editor.setValue(value);
            editor.focus();
            editor.selection.moveTo(0, 0);
        }

    }

});