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

var flashPanelTPL = new Ext.XTemplate(
    '<tpl for="PanelData">',
        '<div id="flashPanel{parent.id}Title" class="title">{name}</div>',
        '<div lul:data="path: \"{path}\", width: \"{width}\", height: \"{height}\"" class="movie" id="flashPanel{parent.id}Movie">Flashfilm laddas...</div>',
    '</tpl>'
);

// redigeringspanel för bild
LUL.FlashEditor = Ext.extend(LUL.EditorPanel, {
    constructor: function(c) {
        var ee = Ext.get(c.editId);
        c.height = c.data.PanelData.height + 30;
        
        LUL.FlashEditor.superclass.constructor.call(this, Ext.apply(c, {
            tbar: [
                { id: c.editId + 'Upload', text: 'Ladda upp', iconCls: 'icon-plus', tooltip: 'Ersätter flashfilmen i panelen med en från din dator som du väljer' },
                { text: 'Bläddra', iconCls: 'icon-folder', handler: this.changeMovie, scope: this, tooltip: 'Välj bland flashfilmer som finns i systemet, går även att ladda upp flera på en gång' }
           ]
        }));
    },

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

        this.on('render', function() {
            // visa flashfilmen i panelen
            var luldataTpl = new Ext.XTemplate('path: \"{path}\", width: \"{width}\", height: \"{height}\"');
            var el = Ext.DomHelper.insertFirst(this.body, {
                tag: 'div',
                id: 'flashPanel' + this.data.id + 'Movie',
                cls: 'movie',
                width: this.data.PanelData.width,
                height: this.data.PanelData.height,
                html: 'FlashFilm laddas...'
            }, true);
            flashPanelHandler.initMovie(el, this.data.PanelData);

            // direkt uppladdning
            this.folderPath = 'Files/Pages/' + adminManager.pageData.id;
            LUL.initDirectUpload(this.editId, this.folderPath, 'Flashfiler', '*.swf;*.flv', this.uploadComplete, this);
        }, this);

        this.setTitle(this.data.PanelData.name);
        // avmarkera text (en liten bugg?)
        if (document.selection && document.selection.createRange().htmlText == '') document.selection.clear();  
    },

    uploadComplete: function(file) {
        this.data.PanelData.path = this.folderPath + '/' + file.name;
        flashPanelHandler.initMovie(Ext.get(this.editId + 'Movie'), this.data.PanelData);
    },

    changeMovie: function() {
        this.browser = new LUL.FileBrowser({
            type: 'flash',
            callback: function(path) {
                this.data.PanelData.path = path;
                flashPanelHandler.initMovie(Ext.get(this.editId + 'Movie'), this.data.PanelData);
            }
        }, this);
    },

    onSave: function() {
        var p = this;

        function success() {
            p.getEl().unmask();
            LUL.FlashEditor.superclass.onSave.call(p);
            flashPanelTPL.overwrite(p.editElement, p.data);
            flashPanelHandler.initMovie(Ext.get(p.editId + 'Movie'), p.data.PanelData);
        }

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

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

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

    onClose: function() {
        LUL.FlashEditor.superclass.onClose.call(this);
        flashPanelTPL.overwrite(this.editElement, this.data);
        flashPanelHandler.initMovie(Ext.get(this.editId + 'Movie'), this.data.PanelData);
    },

    onPanelSettings: function() {
        var fieldNames = [
            ['Namn', 'PanelData.name', false, 'Panelens namn & titel'],
            ['Bredd', 'PanelData.width', false, 'Bredd i pixlar eller %' ],
            ['Höjd', 'PanelData.height', false, 'Höjd i pixlar eller %'],
            ['CSS stilmall', 'PanelData.style', true],
            ['CSS klass', 'PanelData.cls', true]
        ];
        this.showPanelSettings(fieldNames, dataManager.flashPanelEditSettingsURL);
    }
});

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

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

        Ext.get('flashPanel' + id).on('dblclick', LUL.FlashEditor.onDblClick);
    }


    LUL.EditorPanel.createNew(
        marker,
        insertBefore,
        { tag: 'div', id: 'flashPanelX' },
        dataManager.createFlashPanelURL,
        'flashPanel',
        success
    );
}

// laddar en dold panel...
LUL.FlashEditor.loadHiddenPanel = function(marker, insertBefore, dragData) {
    function success(response, id) {
        var el = Ext.DomHelper.insertAfter(marker, {
            tag: 'div',
            id: 'flashPanel' + id,
            cls: 'flashPanel',
            html: flashPanelTPL.apply({ id: id, PanelData: dragData.panelData })
        }, true);

        var task = new Ext.util.DelayedTask();
        task.delay(500, function() {
            flashPanelHandler.initMovie(Ext.get('flashPanel' + id + 'Movie'), dragData.panelData);
        });

        Ext.get('flashPanel' + id).on('dblclick', LUL.FlashEditor.onDblClick);
    }

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