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

// hanterar redigeringspaneler
LUL.EditorManager = function() {
    var editingPanels = [];
    var editors = [];
    var em = this;

    var readyToEdit = false;
    var panelData = null;
    var panelTypes = null;

    this.addEvents(
        'readyToEdit'
    );

    this.getPanelData = function(id) {
        for (var i = 0; i < panelData.length; i++) {
            if (panelData[i].id == id) return panelData[i];
        }
        return null;
    }

    //this.getPanelDataFromDom = function(dom) {
    //    return this.getPanelData(LUL.extractData(Ext.get(dom)).id);
    //}

    // leta igenom panelData efter post som matchar en tags id
    this.getPanelDataFromId = function(id) {
        for (var i = 0; i < panelData.length; i++) {
            if (panelData[i].PanelType.cls + panelData[i].id == id) return panelData[i];
        }
        return null;
    }

    this.addPanelData = function(data) {
        panelData.push(data);
    }

    this.init = function() {
        loginManager.on('loggedIn', function() {
            if (adminManager.pageData && loginManager.pageRights < 3) this.setupEdit();
        }, this);
        loginManager.on('loggedOut', function() {
            if (adminManager.pageData && loginManager.pageRights < 3) this.stopEdit();
        }, this);
    }

    this.setupEdit = function() {
        var scope = this;

        function fetchedData(r) {
            panelData = Ext.util.JSON.decode(r.responseText).rows;
            readyToEdit = true;
            scope.fireEvent('readyToEdit');
        }

        function fetchedTypes(r) {
            // slå på dubbelklicksredigering 
            panelTypes = Ext.util.JSON.decode(r.responseText).rows;
            for (var i = 0; i < panelTypes.length; i++) {
                Ext.select('div.' + panelTypes[i].cls).on('dblclick', eval(panelTypes[i].editor + '.onDblClick'));
            }
        }

        function failure() {

        }

        // ladda paneldata
        Ext.Ajax.request({
            url: dataManager.fetchPanelDataURL,
            success: fetchedData,
            failure: failure
        });

        // ladda paneltyper
        Ext.Ajax.request({
            url: dataManager.fetchPanelTypesURL,
            success: fetchedTypes,
            failure: failure
        });
    }

    this.stopEdit = function() {
        for (var i = 0; i < panelTypes.length; i++) {
            Ext.select('div.' + panelTypes[i].cls).removeAllListeners();
        }
    }

    this.editPanel = function(id, extra) {
        if (readyToEdit && editingPanels.indexOf(id) == -1) {
            editingPanels.push(id);
            var data = this.getPanelDataFromId(id);
            var EditorType = eval(data.PanelType.editor);
            var editor = new EditorType({
                manager: this,
                editId: id,
                data: data,
                extra: extra?extra:null
            });
            editors[id] = editor;
        }
    }

    this.close = function(id, editor) {
        editingPanels.remove(id);
        editors.remove(editor);
    }

    this.closeAll = function() {
        while (editingPanels.length > 0) editors[editingPanels[0]].onClose();
    }
}

Ext.extend(LUL.EditorManager, Ext.util.Observable, {

});

// global instans
var editorManager = new LUL.EditorManager();

// basklass för redigeringspaneler, gör så att de kan flyttas och stängas
LUL.EditorPanel = Ext.extend(Ext.Panel, {
    style: 'margin-bottom: 5px; text-align: left',
    hideBorders: true,
    data: null,
    layout: 'fit',

    draggable: {
        endDrag: function(e) {
            var parentNode = this.el.dom.parentNode;
            parentNode.style.display = 'block';
            //this.locationBottom.style.display = 'none';
            var lm = locationManager;
            // flytta panel
            if (lm.placeBefore) {
                var el = parentNode; //dd.panel.el.dom.parentNode;
                var oldLocation = el.parentNode;
                var newLocation = lm.placeBefore.dom.parentNode;
                oldLocation.removeChild(el);
                newLocation.insertBefore(el, lm.placeBefore.dom);

                // spara ändring

                function success() { }

                function failure() {
                    alert('Kunde inte spara!');
                }

                var data = editorManager.getPanelDataFromId(parentNode.id);  
                var location = newLocation.id.substr(8); //id:t är locationXX där vi vill ha ut XX
                var placeBeforeData = editorManager.getPanelDataFromId(lm.placeBefore.id); 
                var placementId = placeBeforeData == null ? -1 : placeBeforeData.id

                Ext.Ajax.request({
                    url: dataManager.reorderPanelURL,
                    success: success,
                    failure: failure,
                    params: { id: data.id, newLocation: location, placeBefore: placementId }
                });

            }
            // göm "ramar"
            for (var i = 0; i < lm.locations.length; i++) {
                //Ext.get(lm.locations[i] + 'Top').dom.style.display = 'none';
                Ext.get(lm.locations[i] + 'Bottom').dom.style.display = 'none';
            }

        }
    },

    constructor: function(c) {
        var ee = Ext.get(c.editId);
        var h = (c.height) ? c.height : ee.getHeight() + 26;

        var tools = [
                { id: 'gear', qtip: 'Panelinställningar', handler: this.onPanelSettings, scope: this },
                { id: 'save', qtip: 'Spara ändringar och stäng redigeringen', handler: this.onSave, scope: this },
                { id: 'minus', qtip: 'Ta bort från sidan', handler: this.onRemove, scope: this },
                { id: 'close', qtip: 'Stäng redigeringen', handler: this.onClose, scope: this }
            ];

        if (c.tools) tools = tools.concat(c.tools);

        LUL.EditorPanel.superclass.constructor.call(this, Ext.apply(c, {
            id: 'editor' + c.editId,
            renderTo: c.editId,
            title: 'Namnlös',
            width: 'auto',
            height: h,

            editElement: ee,

            tools: tools
        }));
    },

    initComponent: function() {
        LUL.EditorPanel.superclass.initComponent.call(this);

        this.addEvents(
            'save',
            'close',
            'minus'
        );

        var ee = this.editElement;
        this.originalHtml = ee.dom.innerHTML;
        ee.dom.innerHTML = '';
    },

    showPanelSettings: function(fieldNames, url, onAfterSave) {
        var fields = [new Ext.form.Hidden({ name: 'id' })];

        var statusBar = new Ext.StatusBar({
            text: '',
            items: [
                    { text: 'OK', iconCls: 'icon-ok', handler: saveSettings, scope: this },
                    { text: 'Avbryt', iconCls: 'icon-cancel', handler: function() { win.close(); } }
                ]
        });

        // skapa fält från fältnamnen
        for (var i = 0; i < fieldNames.length; i++) {
            var f = fieldNames[i];
            if (f[0]) {
                var tt = f.length > 3 ? f[3] : '';
                fields.push(new LUL.TextField({ fieldLabel: f[0], name: f[1], anchor: '100%', allowBlank: f[2] ? true : false, statusBar: statusBar, tooltip: tt }));
            } else {
                f.statusBar = statusBar;
                fields.push(f);
            }
        }

        // efter sparning
        function success() {
            // kom ihåg datat
            for (var i = 0; i < fields.length; i++) {
                var f = fields[i];
                if (f.isFormField) {
                    // special för jsonData, som inte sätts som standard i databasen
                    if (f.name.indexOf('instanceData') == 0) this.data['instanceData'] = {};
                    eval('this.data.' + f.name + '=f.getValue()');
                }
            }
            // uppdatera visning
            this.setTitle(fields[1].getValue());
            win.close();
            if (onAfterSave) onAfterSave.call(this);
        }

        // spara
        function saveSettings() {
            form.form.submit({ waitMsg: 'Sparar', success: success, scope: this });
        }

        var form = new Ext.form.FormPanel({
            labelAlign: 'top',
            bodyStyle: 'padding: 10px; overflow-y: auto',
            items: fields,
            url: url
        });

        var win = new Ext.Window({
            title: 'Panelinställningar',
            width: 400,
            height: 400,
            modal: true,
            layout: 'fit',
            hideBorders: true,

            items: [
                form
            ],

            bbar: statusBar
        });
        win.show();

        // sätt värden i fält (mappning är this.data.[name])
        for (var i = 0; i < fields.length; i++) {
            var f = fields[i];
            // nödvändigt med try-catch då data kan skickas i this.data.jsonData.xxxx
            // men ibland är this.data.jsonData null
            try {
                if (f.isFormField) f.setValue(eval('this.data.' + f.name));
            } catch (err) {

            }
        }
    },

    onPanelSettings: function() {

    },

    onSave: function() {
        this.hide();
        this.manager.close(this.editId);
    },

    onClose: function() {
        this.hide();
        this.editElement.dom.innerHTML = this.originalHtml;
        this.manager.close(this.editId, this);
    },

    onRemove: function() {
        this.hide();
        this.manager.close(this.editId);
        var ee = this.editElement;
        dataManager.hidePanel(ee, function() {
            ee.remove();
        });
    }
});

LUL.EditorPanel.onDblClick = function(e, selector) {
    var element = Ext.fly(e.target).findParent(selector);
    // ibland sker anropet av någon anledning två gånger, då blir det null andra gången
    if (element != null) {
        var id = element.id;
        if (id != '' && id.indexOf('ext') != 0) editorManager.editPanel(id);
    }
}

LUL.EditorPanel.commonAddPanel = function(insertBefore, url, params, success, marker) {

    function failure() {
        Ext.get(marker).remove();
        locationManager.hideMarkers();
        alert('Kunde inte spara!');
    }

    var location = insertBefore.dom.parentNode.id.substr(8); //id:t är locationXX där vi vill ha ut XX
    var placementData = editorManager.getPanelDataFromId(insertBefore.id);
    var placementId = placementData == null ? -1 : placementData.id

    params.newLocation = location;
    params.placeBefore = placementId;

    Ext.Ajax.request({
        url: url,
        success: success,
        failure: failure,
        params: params
    });
}

LUL.EditorPanel.createNew = function(marker, insertBefore, tag, url, type, success) {

    function onSuccess(response) {
        var res = Ext.util.JSON.decode(response.responseText);
        success.call(this, res, res.data.id);
        editorManager.addPanelData(res.data);
        editorManager.editPanel(type + res.data.id);
    }

    Ext.DomHelper.insertAfter(marker, tag);
    Ext.get(marker).remove();
    locationManager.hideMarkers();

    LUL.EditorPanel.commonAddPanel(insertBefore, url, {}, onSuccess, marker);
}

LUL.EditorPanel.loadHidden = function(marker, insertBefore, dragData, success) {
    function onSuccess(response) {
        var res = Ext.util.JSON.decode(response.responseText);
        success.call(this, res, dragData.data.id);
        Ext.get(marker).remove();
        locationManager.hideMarkers();
        if (dragData.callback) dragData.callback.call();
    }

    LUL.EditorPanel.commonAddPanel(insertBefore, dataManager.showPanelURL, { pid: dragData.data.id }, onSuccess, marker);
}

// laddar en befintlig panel...
LUL.EditorPanel.loadExisting = function(marker, insertBefore, dragData, success) {

    // id för paneltypen (bildpanelen, nyhetspanelen etc)
    var typeId = dragData.data.id;

    function onSuccess(response, options) {
        var res = Ext.util.JSON.decode(response.responseText);
        if (res.success) {
            success.call(this, res, res.id);
            editorManager.addPanelData(res.data);
            Ext.get(marker).remove();
            locationManager.hideMarkers();
            if (dragData.callback) dragData.callback.call();
        } 
    }

    LUL.EditorPanel.commonAddPanel(insertBefore, dataManager.addExistingPanelURL, { id: typeId, table: dragData.data.PanelType.tableName }, onSuccess, marker);
}