;(function() {

    RED.editor.registerEditorPane("editor-tab-description", function() {
        return {
            label: RED._("editor-tab.description"),
            name: RED._("editor-tab.description"),
            iconClass: "fa fa-file-text-o",

            create: function(container, node) {
                var content = $('<div>', {class:"red-ui-tray-content"}).appendTo(container);
                this.editor = buildDescriptionForm(content,node);
                return content;
            },
            resize: function(node, size) {
                this.editor.resize();
            },
            close: function(node) {
                this.editor.destroy();
                this.editor = null;
            },
            show: function() {
                this.editor.focus();
            },
            apply: function(node, editState) {
                var oldInfo = node.info;
                var newInfo = this.editor.getValue();
                if (!!oldInfo) {
                    // Has existing info property
                    if (newInfo.trim() === "") {
                        // New value is blank - remove the property
                        editState.changed = true;
                        editState.changes.info = oldInfo;
                        delete node.info;
                    } else if (newInfo !== oldInfo) {
                        // New value is different
                        editState.changed = true;
                        editState.changes.info = oldInfo;
                        node.info = newInfo;
                    }
                } else {
                    // No existing info
                    if (newInfo.trim() !== "") {
                        // New value is not blank
                        editState.changed = true;
                        editState.changes.info = undefined;
                        node.info = newInfo;
                    }
                }
            }
        }
    });

    function buildDescriptionForm(container,node) {
        var dialogForm = $('<form class="dialog-form form-horizontal" autocomplete="off"></form>').appendTo(container);
        var toolbarRow = $('<div></div>').appendTo(dialogForm);
        var row = $('<div class="form-row node-text-editor-row" style="position:relative; padding-top: 4px; height: 100%"></div>').appendTo(dialogForm);
        var editorId = "node-info-input-info-editor-"+Math.floor(1000*Math.random());
        $('<div style="height: 100%" class="node-text-editor" id="'+editorId+'" ></div>').appendTo(row);
        var nodeInfoEditor = RED.editor.createEditor({
            id: editorId,
            mode: 'ace/mode/markdown',
            value: ""
        });
        if (node.info) {
            nodeInfoEditor.getSession().setValue(node.info, -1);
        }
        node.infoEditor = nodeInfoEditor;
        return nodeInfoEditor;
    }

})();