///<reference path="../../Lib/Extjs_Intellisense.js" />

Ext.namespace('LUL');

// redigeringspanel för text
LUL.TextEditor = Ext.extend(LUL.EditorPanel, {
    initComponent: function() {
        LUL.TextEditor.superclass.initComponent.call(this);

        if (this.height < 300) this.height = 300;

        this.editor = new LUL.HtmlEditor({
            value: this.originalHtml,
            width: this.width,
            height: this.height
        });

        this.add(this.editor);

        this.editor.on('render', this.onRenderEditor, this);

        this.setTitle(this.data.PanelData.name);
    },

    onRenderEditor: function() {
        this.editor.focus();
        this.editor.setWidth(this.getSize().width);
    },

    onSave: function() {
        var p = this;

        function success() {
            p.getEl().unmask();
            LUL.TextEditor.superclass.onSave.call(p);
            p.editElement.dom.innerHTML = p.editor.getValue();
        }

        function failure() {
            p.getEl().unmask();
            alert('Kunde inte spara!');
        }

        this.getEl().mask('Sparar');

        this.editor.toggleSourceEdit(false);
//        var val = this.editor.doc.body || this.editor.doc.documentElement;
//        val = this.editor.cleanHtml(val.innerHTML);

        Ext.Ajax.request({
            url: dataManager.editTextPanelURL,
            success: success,
            failure: failure,
            params: { id: this.data.PanelData.id, text: this.editor.getValue() }
        });
    },

    onPanelSettings: function() {
        var fieldNames = [
            ['Namn', 'PanelData.name', false, 'Panelens namn & titel'],
            ['CSS stilmall', 'PanelData.style', true],
            ['CSS klass', 'PanelData.cls', true]
        ];
        this.showPanelSettings(fieldNames, dataManager.editTextPanelSettingsURL);
    }
});

// hantera dubbelklick på sidan
LUL.TextEditor.onDblClick = function(e) {
    LUL.EditorPanel.onDblClick(e, 'div.textPanel');
}

// skapar ny textpanel och öppnar editorn för den
LUL.TextEditor.createNew = function(marker, insertBefore) {
    function success(res, id) {        
        Ext.get('textPanelX').set({
            id: 'textPanel' + id,
            cls: 'textPanel'
        });
        Ext.get('textPanel' + id).on('dblclick', LUL.TextEditor.onDblClick);
    }

    LUL.EditorPanel.createNew(
        marker,
        insertBefore,
        { tag: 'div', id: 'textPanelX', html: 'Ny textpanel' },
        dataManager.createTextPanelURL,
        'textPanel',
        success
    );
}

// laddar en dold panel...
LUL.TextEditor.loadHiddenPanel = function(marker, insertBefore, dragData) {
    function success(response, id) {
        var html = new Ext.Template('{text}');

        Ext.DomHelper.insertAfter(marker, {
            tag: 'div',
            id: 'textPanel' + id,
            cls: 'textPanel',
            html: html.apply(dragData.panelData)
        });

        Ext.get('textPanel' + id).on('dblclick', LUL.TextEditor.onDblClick);        
    }

    LUL.EditorPanel.loadHidden(
        marker,
        insertBefore,
        dragData,
        success
    );

}