/// class PD.Web.UI.TextEditorDialog
/// using PD.Web.UI.Dialog

/**
@class TextEditorDialog
@constructor
@namespace Web.UI
@extends Web.UI.Dialog
**/
PD.Web.UI.TextEditorDialog =
PD.Web.UI.Dialog.extend({

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

    _editor: null,

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

    get_editorContainer: function () {
        return this.get_node().find("DIV[data-id=editor-container]");
    },

    get_okButton: function () {
        return this.get_node().find("BUTTON[data-id=ok]");
    },

    get_cancelButton: function () {
        return this.get_node().find("BUTTON[data-id=cancel]");
    },

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

    onInit: function (e) {

        var options = this.get_options();

        this._window._kendo.setOptions({
            title: options.title || "Text Editor",
            width: options.width || 600,
            height: options.height || 400
        });

    },

    onActivate: function () {

        this._editor_activate();

        this.center();

        this._setDefaultFocus();

        this.get_okButton().on("click", _.bind(this._okButton_onClick, this));
        this.get_cancelButton().on("click", _.bind(this._cancelButton_onClick, this));

    },

    onResize: function () {
        this._editor_sizeToFit();
    },

    _editor_onChange: function (e) {
        this.get_okButton().prop("disabled", false);
    },

    _okButton_onClick: function () {
        this.close({
            command: "ok",
            data: {
                content: this._editor.getContent()
            }
        });
    },

    _cancelButton_onClick: function () {
        this.close();
    },


    //================================
    // PROTECTED METHODS
    //================================

    template: function () {
        return [
            "<div class='-pd-msg-dialog'>",
                "<div data-id='editor-container' style='position:absolute;top:10px;left:10px;right:10px;bottom:44px;overflow:hidden;'>",
                    "<textarea></textarea>",
                "</div>",
                "<div class='-pd-dialog-button-deck' style=>",
                    "<button class='-pdjs-dialog-button' data-id='ok' disabled>OK</button>",
                    "<button class='-pdjs-dialog-button' data-id='cancel'>Cancel</button>",
                "</div>",
            "</div>"
        ];
    },

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

    _setDefaultFocus: function () {
        this.get_node().find(".-pd-dialog-button-deck button:first").focus();
    },

    _editor_activate: function () {

        var that = this;

        tinymce.init({
            selector: "#" + this.get_id() + " > 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) {
                that._editor = editor;
                editor.on('init', function (e) {
                    that._editor_loadContent();
                });
                editor.on('change', $.proxy(that._editor_onChange, that));
            }
        });

    },

    _editor_sizeToFit: function () {
        
        var $container = this.get_editorContainer(),
            max = $container.outerHeight() - 4;

        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);

    },

    _editor_loadContent: function () {

        var that = this,
            content = this.get_options()["content"];

        if (content == null) {
            return;
        }

        if (_.isString(content)) {
            this._editor.setContent(content);
            return;
        }

        if (_.isFunction(content)) {
            content(function (value) {
                that._editor.setContent(value);
            });
            return;
        }

    },

});

//================================
// STATIC METHODS
//================================

PD.Web.UI.TextEditorDialog.open = function (options) {
    return new PD.Web.UI.TextEditorDialog($.extend({
        title: "Text Editor"
    }, options));
};