///<reference path="Extjs_Intellisense.js" />
Ext.namespace('LUL.Admin');

// för att lägga till ny panel
LUL.Admin.NewPanelTab = Ext.extend(Ext.Panel, {
    id: 'newPanel',
    title: 'Ny panel',
    width: 'auto',
    height: 'auto',
    layout: 'fit',
    bodyStyle: 'padding: 10px; overflow-y: auto',

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

        var tpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="thumb-wrap" id="NewPanel-{cls}{id}">',
                '<div class="thumb"><img src="Panels/{image}"/></div>',
                '<span>{name}</span>',
                '</div>',
            '</tpl>',
            '<div class="x-clear"></div>'
        );

        var store = new Ext.data.JsonStore({
            url: dataManager.fetchPanelTypesURL,
            root: 'rows',
            fields: ['id', 'image', 'name', 'tableName', 'editor', 'cls']
        });

        var view = new Ext.DataView({
            store: store,
            tpl: tpl,
            singleSelect: true,
            overClass: 'x-view-over',
            itemSelector: 'div.thumb-wrap',
            emptyText: 'Finns inga paneler i systemet',
            afterDragDrop: function() { },
            panels: new Array()
        });
        view.on('render', this.onRenderView, this);

        store.on('load', function(store, records) {
            // fixa extra data för varje post...
            store.each(function(r) {
                view.panels['NewPanel-' + r.data.cls + r.data.id] = r.json;
            });
            if (view.rendered) view.refresh();
        });
        store.load();

        this.view = view;
        this.add(view);

        this.on('activate', function() {
            store.reload();
        });
    },

    onRenderView: function() {
        this.dragZone = new NewPanelDragZone(this.view, {
            containerScroll: true,
            mode: 'newPanel'
        });
    }
});

// för att lägga till ny panel
LUL.Admin.ExistingPanelTab = Ext.extend(Ext.Panel, {
    id: 'existingPanel',
    title: 'Befintlig panel',
    width: 'auto',
    height: 'auto',
    layout: 'fit',
    bodyStyle: 'padding: 10px; overflow-y: auto',

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

        var tpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="thumb-wrap" id="ExistingPanel-{cls}{id}">',
                '<div class="thumb"><img src="Panels/{image}" /></div>',
                '<span>{name}</span>',
                '</div>',
            '</tpl>',
            '<div class="x-clear"></div>'
        );

        var store = new Ext.data.JsonStore({
            url: dataManager.fetchExistingPanelsURL,
            root: 'rows',
            fields: ['id']
        });

        function afterDragDrop() {
            store.reload();
        }

        var view = new Ext.DataView({
            store: store,
            tpl: tpl,
            singleSelect: true,
            overClass: 'x-view-over',
            itemSelector: 'div.thumb-wrap',
            emptyText: 'Finns inga paneler i systemet',
            panels: new Array(),
            afterDragDrop: afterDragDrop
        });
        view.on('render', this.onRenderView, this);

        store.on('load', function(store, records) {
            // fixa extra data för varje post...
            store.each(function(r) {
                r.data.name = r.json.PanelData.name;
                r.data.image = r.json.PanelType.image;
                r.data.editor = r.json.PanelType.editor;
                r.data.tableName = r.json.PanelType.tableName;
                r.data.cls = r.json.PanelType.cls;
                view.panels['ExistingPanel-' + r.data.cls + r.data.id] = r.json;
            });
            if (view.rendered) view.refresh();
        });
        store.load();

        this.add(view);
        this.view = view;

        this.on('activate', function() {
            store.reload();
        });
    },

    onRenderView: function() {
        this.dragZone = new NewPanelDragZone(this.view, {
            containerScroll: true,
            mode: 'existingPanel'
        });
    }
});

// för att lägga till tidigare dold panel
LUL.Admin.HiddenPanelTab = Ext.extend(Ext.Panel, {
    id: 'hiddenPanel',
    title: 'Dolda paneler',
    width: 'auto',
    height: 'auto',
    layout: 'fit',
    bodyStyle: 'padding: 10px; overflow-y: auto',

    constructor: function(c) {
        LUL.Admin.HiddenPanelTab.superclass.constructor.call(this, Ext.apply(c, {
            tbar: [
                { id: 'deletePanelButton', text: 'Ta bort', iconCls: 'icon-minus', handler: this.onDelete, scope: this }
            ]
        }));
    },

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

        var tpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="thumb-wrap" id="HiddenPanel-{cls}{id}">',
                '<div class="thumb"><img src="Panels/{image}" /></div>',
                '<span>{name}</span>',
                '</div>',
            '</tpl>',
            '<div class="x-clear"></div>'
        );

        var store = new Ext.data.JsonStore({
            url: dataManager.fetchHiddenPanelsURL,
            root: 'rows',
            fields: ['id']
        });

        function afterDragDrop() {
            store.reload();
        }

        var view = new Ext.DataView({
            store: store,
            tpl: tpl,
            singleSelect: true,
            overClass: 'x-view-over',
            itemSelector: 'div.thumb-wrap',
            emptyText: 'Finns inga paneler i systemet',
            panels: new Array(),
            afterDragDrop: afterDragDrop
        });
        view.on('render', this.onRenderView, this);

        store.on('load', function(store, records) {
            // fixa extra data för varje post...
            store.each(function(r) {
                r.data.name = r.json.PanelData.name; 
                r.data.image = r.json.PanelType.image;
                r.data.editor = r.json.PanelType.editor;
                r.data.tableName = r.json.PanelType.tableName;
                r.data.cls = r.json.PanelType.cls;
                view.panels['HiddenPanel-' + r.data.cls + r.data.id] = r.json;
            });
            if (view.rendered) view.refresh();
        });
        store.load();

        this.add(view);
        this.view = view;

        this.on('activate', function() {
            store.reload();
        });
    },

    onRenderView: function() {
        this.dragZone = new NewPanelDragZone(this.view, {
            containerScroll: true,
            mode: 'hiddenPanel'
        });
    },

    onDelete: function() {
        if (this.view.getSelectionCount() > 0) {
            Ext.Msg.show({
                title: 'Ta bord panel?',
                msg: 'Vill du verkligen ta bort vald panel? Åtgärden kan inte ångras efteråt',
                buttons: Ext.Msg.YESNO,
                fn: this.onConfirmDelete,
                scope: this,
                animEl: 'deletePanelButton',
                icon: Ext.MessageBox.QUESTION
            });
        }
    },

    // anropas efter att användaren bekräftat (eller nekat) borttagning
    onConfirmDelete: function(res) {
        if (res == 'yes') {
            var record = this.view.getSelectedRecords()[0];
            Ext.Ajax.request({
                url: dataManager.deletePanelURL,
                success: function() {
                    this.view.store.remove(record);
                },
                failure: function() {
                    Ext.Msg.alert('Misslyckades', 'Kunde inte ta bort panelen');
                },
                scope: this,
                params: { id: record.data.id }
            });
        }
    }
});

/**
* Create a DragZone instance for our JsonView
*/
NewPanelDragZone = function(view, config) {
    this.view = view;
    NewPanelDragZone.superclass.constructor.call(this, view.getEl(), config);
};
Ext.extend(NewPanelDragZone, Ext.dd.DragZone, {
    // We don't want to register our image elements, so let's 
    // override the default registry lookup to fetch the image 
    // from the event instead
    getDragData: function(e) {
        var target = e.getTarget('.thumb-wrap');
        if (target) {
            var view = this.view;
            if (!view.isSelected(target)) {
                view.onClick(e);
            }
            var data = view.panels[target.id];
            var dragData = {
                ddel: target,
                single: true,
                newPanel: true,
                mode: this.mode,
                data: data,
                callback: view.afterDragDrop
            };

            // data.editor innehåller ett klassnamn från databasen, tex. LUL.TextEditor
            if (this.mode == 'newPanel') dragData.callOnDrop = eval(data.editor + '.createNew');
            if (this.mode == 'hiddenPanel') {
                dragData.callOnDrop = eval(data.PanelType.editor + '.loadHiddenPanel');
                dragData.panelData = data.PanelData;
            }
            if (this.mode == 'existingPanel') {
                dragData.callOnDrop = eval(data.PanelType.editor + '.loadExistingPanel');
                dragData.panelData = data.PanelData;
            }
            return dragData;
        }
        return false;
    },

    // the default action is to "highlight" after a bad drop
    // but since an image can't be highlighted, let's frame it
    afterRepair: function() {
        if (Ext.get('insertHereMarker')) Ext.get('insertHereMarker').remove();
        locationManager.hideMarkers();
        //Ext.fly(this.dragData.ddel).frame('#8db2e3', 1);
        this.dragging = false;
    },

    // override the default repairXY with one offset for the margins and padding
    getRepairXY: function(e) {
        if (!this.dragData.multi) {
            var xy = Ext.Element.fly(this.dragData.ddel).getXY();
            xy[0] += 3; xy[1] += 3;
            return xy;
        }
        return false;
    }
});

// override för att få drag and drop från scrollad dataview att fungera
Ext.dd.DragDropMgr.getLocation = function(oDD) {
    if (!this.isTypeOfDD(oDD)) {
        return null;
    }

    var el = oDD.getEl(), pos, x1, x2, y1, y2, t, r, b, l;

    try {
        pos = Ext.lib.Dom.getXY(el);
    } catch (e) { }

    if (!pos) {
        return null;
    }

    var w = el.offsetWidth;
    var h = el.offsetHeight;
    if (el.scrollWidth > w) w = el.scrollWidth;
    if (el.scrollHeight > h) h = el.scrollHeight;

    x1 = pos[0];
    x2 = x1 + w;
    y1 = pos[1];
    y2 = y1 + h;

    t = y1 - oDD.padding[0];
    r = x2 + oDD.padding[1];
    b = y2 + oDD.padding[2];
    l = x1 - oDD.padding[3];

    return new Ext.lib.Region(t, r, b, l);
}