/// class PD.Manage.Modules.MarkupVisualEditorFeature

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

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

    _mce: null,

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

    get_textarea: function () {
        return this.get_container().find("TEXTAREA");
    },

    get_mce: function () {
        return this._mce;
    },

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

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

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

    activate: function () {

        var that = this,
            content = this._getContent();

        tinymce.init({
            selector: "#" + this.getId() + " > DIV > TEXTAREA",
            apply_source_formatting: true,
            plugins: "link hr textcolor",
            menubar: false,
            statusbar: false,
            toolbar: [
                "undo redo | fontsizeselect forecolor backcolor | bold italic | alignleft aligncenter alignright | bullist numlist hr | outdent indent | link unlink"
            ],
            setup: function (editor) {
                editor.on('init', function (e) {
                    that._mce = editor;
                    editor.setContent(content);
                });
                editor.on('change', $.proxy(that._editor_onChange, that));
            }
        });

        setTimeout(function () {
            that._sizeEditor();
        }, 200);
        
    },

    size: function (e) {
        this._sizeEditor();
    },

    focus: function () {

        var that = this,
            content = this._getContent();

        if (this.get_mce() != null) {
            this.get_mce().setContent(content);
            this._sizeEditor();
        }

    },

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

    render: function () {

        var result = [
            "<div id='" + this.getId() + "' style='position:absolute;top:0;left:0;right:0;bottom:0;'>",
                "<div style='position:absolute;top:10px;left:10px;right:10px;bottom:10px;'>",
                    "<textarea></textarea>",
                "</div>",
            "</div>"
        ];

        return result.join("");

    },

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

    _sizeEditor: function () {
        
        var $container = this.get_container(),
            max = this.get_container().outerHeight() - 25;

        max -= $container.find('.mce-menubar.mce-toolbar').outerHeight(); 
        max -= $container.find('.mce-toolbar-grp').outerHeight(); 
        $container.find('.mce-edit-area').height(max);
        $container.find('IFRAME').height(max);

    },

    _commitChanges: function () {
        if (this.get_mce()) {
            this.setRemoteValue("value", this.get_mce().getContent());
        }
    },

    _getContent: function () {
        return this.getRemoteValue("value") || "";
    }

});