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

Ext.namespace('LUL');

LUL.ImageEditorManager = function() {
    this.init = function() {
        editorManager.on('readyToEdit', function() {
            // ersätt vanliga länkar (href) med onclick
            var imagePanels = Ext.select('div.imagePanel');
            for (var i = 0; i < imagePanels.elements.length; i++) {
                var ip = Ext.get(imagePanels.elements[i]);
                //var data = editorManager.getPanelDataFromDom(ip);
                var data = editorManager.getPanelDataFromId(ip.id);
                if (data.PanelData.href != '' && data.PanelData.href != null) {
                    var ipa = ip;
                    ipa.href = data.PanelData.href;
                    var a = ip.child('a');
                    a.dom.href = '#';
                    // fördröj klick så vi kan avbryta med dubbelklick
                    a.on('click', function() {
                        this.task = new Ext.util.DelayedTask(function() {
                            document.location = this.href;
                        }, this);
                        this.task.delay(600);
                    }, ipa);
                }
            }
        }, this);
    }

    this.init();
}

var imageEditorManager = new LUL.ImageEditorManager();

// redigeringspanel för bild
LUL.ImageEditor = Ext.extend(LUL.EditorPanel, {
    constructor: function(c) {
        var ee = Ext.get(c.editId);
        c.height = ee.getHeight() + 52;

        LUL.ImageEditor.superclass.constructor.call(this, Ext.apply(c, {
            tbar: [
                { id: c.editId + 'Upload', text: 'Ladda upp', iconCls: 'icon-plus', tooltip: 'Ersätter bilden i panelen med en bild från din dator som du väljer' },
                { text: 'Bläddra', iconCls: 'icon-folder', handler: this.changeImage, scope: this, tooltip: 'Välj bland bilder som finns i systemet, går även att ladda upp flera bilder på en gång' }
            ]
        }));
    },

    initComponent: function() {
        LUL.ImageEditor.superclass.initComponent.call(this);
        this.add({ html: this.originalHtml });
        this.setTitle(this.data.PanelData.name);
        this.on('render', function() {
            // koppla swfupload till uppladdningsknappen
            this.folderPath = 'Files/Pages/' + adminManager.pageData.id;
            LUL.initDirectUpload(this.editId, this.folderPath, 'Bildfiler', '*.bmp;*.jpg;*.gif;*.png', this.uploadComplete, this);
        }, this);
    },

    uploadComplete: function(file) {
        this.data.path = this.folderPath + '/' + file.name;
        var img = Ext.get(this.editId + 'Image');
        var p = this;
        img.dom.onload = function() {
            p.setHeight(img.getHeight() + 52);
        }
        img.dom.src = this.data.path;
    },

    changeImage: function() {
        this.browser = new LUL.FileBrowser({
            //type: 'image',
            callback: function(path) {
                this.data.path = path;
                var img = Ext.get(this.editId + 'Image');
                var p = this;
                img.dom.onload = function() {
                    p.setHeight(img.getHeight() + 52);
                }
                img.dom.src = path;
            }
        }, this);
    },

    onSave: function() {
        if (this.data.path) {
            var p = this;

            function success() {
                p.getEl().unmask();
                LUL.ImageEditor.superclass.onSave.call(p);
                p.editElement.dom.innerHTML = Ext.get(p.editId + 'Image').dom.parentNode.innerHTML;
            }

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

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

            Ext.Ajax.request({
                url: dataManager.editImageURL,
                success: success,
                failure: failure,
                params: { id: this.data.PanelData.id, src: this.data.path }
            });
        } else {
            this.onClose();
        }
    },

    onPanelSettings: function() {
        var fieldNames = [
            ['Namn', 'PanelData.name', false, 'Panelens namn & titel'],
            ['Beskrivning', 'PanelData.alt', false, 'Kort beskrivning av bilden, för de som inte kan se den'],
            ['Länk-url', 'PanelData.href', true, 'Ange adress om du vill att bilden ska fungera som en länk'],
            ['Länk-mål', 'PanelData.target', true, 'Länkmål ("blank" för nytt fönster)'],
            new LUL.Checkbox({ hideLabel: true, boxLabel: 'Tillåt flera kopior', name: 'PanelData.allowMultiple', tooltip: 'Tillåt användning på flera sidor' }),
            ['CSS stilmall', 'PanelData.style', true],
            ['CSS klass', 'PanelData.cls', true]
        ];
        this.showPanelSettings(fieldNames, dataManager.editImagePanelSettingsURL);
    }
});

// hantera dubbelklick på sidan
LUL.ImageEditor.onDblClick = function(e) {
    var element = Ext.get(Ext.get(e.target).findParent('div.imagePanel'));
    if (element != null) {
        var id = element.id;
        if (id != '' && id.indexOf('ext') != 0) {
            // avbryt 'länkbeteendet'
            if (element.task) {
                element.task.cancel();
                element.task = null;
            }
            editorManager.editPanel(id);
        }
    }
}

// skapar ny textpanel och öppnar editorn för den
LUL.ImageEditor.createNew = function(marker, insertBefore) { 
    function success(res, id) {
        Ext.get('imagePanelX').set({
            id: 'imagePanel' + id,
            cls: 'imagePanel'
        });

        Ext.get('imagePanelXImage').set({
            id: 'imagePanel' + id + 'Image'
        });
        
        Ext.get('imagePanel' + id).on('dblclick', LUL.ImageEditor.onDblClick);
    }

    LUL.EditorPanel.createNew(
        marker,
        insertBefore,
        { tag: 'div', id: 'imagePanelX', html: '<img id="imagePanelXImage" src="Files/default.gif" alt="Ny bild" />' },
        dataManager.createImagePanelURL,
        'imagePanel',
        success
    );
}

// laddar en dold panel...
LUL.ImageEditor.loadHiddenPanel = function(marker, insertBefore, dragData) {    
    function success(response, id) {
        var html = new Ext.Template('<img src="{path}" alt="{alt}" />');

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

        Ext.get('imagePanel' + id).on('dblclick', LUL.ImageEditor.onDblClick);
    }

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

// skapar en ny kopia av en panel
LUL.ImageEditor.loadExistingPanel = function(marker, insertBefore, dragData) {
    function success(response, id) {
        var html = new Ext.Template('<img src="{path}" alt="{alt}" />');

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

        Ext.get('imagePanel' + id).on('dblclick', LUL.ImageEditor.onDblClick);
    }

    LUL.EditorPanel.loadExisting(
        marker,
        insertBefore,
        dragData,
        success
    );
}