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

Ext.namespace('LUL');

var movieTitleTpl = new Ext.XTemplate(
    '<tpl for="PanelData">',
        '<div id="moviePanel{parent.id}Title" class="title">{name}</div>',
    '</tpl>'
);
var flvMovieTpl = new Ext.XTemplate(
    '<tpl for="PanelData">',
        "<div lul:data='path: \"Panels/MoviePanel/FlvPlayer.swf\", width: \"{width}\", height: \"{height}\", flashvars: {{ movieSrc: \"{src}\" }}' class='movie' id='moviePanel{parent.id}Movie'>Flashfilm laddas...</div>",
    '</tpl>'
);
var wmvMovieTpl = new Ext.XTemplate(
    '<tpl for="PanelData">',
        "<object width='{width}' height='{height}' classid='CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95' type='application/x-oleobject'><param name='FileName' value='{src}'>",
            "<param name='ShowControls' value='true'>",
            "<param name='ShowStatusBar' value='false'>",
            "<param name='ShowDisplay' value='false'>",
            "<param name='autostart' value='false'>",
            "<embed type='application/x-mplayer2' src='{src}' width='{width}' height='{height}' ShowControls='1' ShowStatusBar='0' ShowDisplay='0' autostart='0'></embed>",
        "</object>",
    '</tpl>'
);
var qtMovieTpl = new Ext.XTemplate(
    '<tpl for="PanelData">',
        "<object classid='clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B' codebase='http://www.apple.com/qtactivex/qtplugin.cab' width='{width}' height='{height}'>",
            "<param name='src' value='{src}'>",
            "<param name='autoplay' value='false'>",
            "<embed src='{src}' TYPE='image/x-macpaint' PLUGINSPAGE='http://www.apple.com/quicktime/download' width='{width}' height='{height}' autoplay='false></embed>",
        "</object>",
    '</tpl>'
);

var fakeMovieTpl = new Ext.XTemplate(
    '<tpl for="PanelData">',
        '<table width="100%" height="100%" cellspacing=0 cellpadding=0>',
            '<tr height="100%" align="center" valign="middle" style="background: black; color: white">',
                '<td valign="middle">{[values.src==""?"Ingen giltig film vald":values.src]}</td>',
            '</tr>',
        '</table>',
    '</tpl>'
);


//FIXA: flytt till klass
var loadMovie = function(p) {
    // välj rätt filmtyp
    var ext = p.data.PanelData.src.substring(p.data.PanelData.src.lastIndexOf('.') + 1);
    var tpl;
    switch (ext) {
        case 'flv':
            tpl = flvMovieTpl;
            break;
        case 'wmv':
            tpl = wmvMovieTpl;
            break;
        case 'mpg':
        case 'mp4':
        case 'mov':
            tpl = qtMovieTpl;
            break;
    }

    if (tpl) {
        movieTitleTpl.overwrite(p.editElement, p.data);
        tpl.append(p.editElement, p.data);

        if (ext == 'flv') {
            flashPanelHandler.initMovie(Ext.get(p.editElement.id + 'Movie'), {
                path: 'Panels/MoviePanel/FlvPlayer.swf',
                width: p.data.PanelData.width,
                height: p.data.PanelData.height,
                flashvars: {
                    movieSrc: '../../' + p.data.PanelData.src
                }
            });
        }
    }
    else {
        // ogiltig filmtyp
        movieTitleTpl.overwrite(p.editElement, p.data);
        p.editElement.dom.innerHTML += 'Ingen giltig film vald'; 
    }
}

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

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

    initComponent: function() {
        LUL.MovieEditor.superclass.initComponent.call(this);
        this.add({ html: fakeMovieTpl.apply(this.data) });
        this.setTitle(this.data.PanelData.name);
        //        this.data.path = this.data.PanelData.src;
        this.on('render', function() {
            // koppla swfupload till uppladdningsknappen
            this.folderPath = 'Files/Pages/' + adminManager.pageData.id;
            LUL.initDirectUpload(this.editId, this.folderPath, 'Filmfiler', '*.flv;*.wmv;*.mov;*.mpg;*.mp4', this.uploadComplete, this);
        }, this);
        if (document.selection && document.selection.createRange().htmlText == '') document.selection.clear();
    },

    uploadComplete: function(file) {
        this.data.path = this.folderPath + '/' + file.name;
        fakeMovieTpl.overwrite(this.body, { PanelData: { src: this.data.path} });
    },

    changeImage: function() {
        this.browser = new LUL.FileBrowser({
            type: 'movie',
            callback: function(path) {
                this.data.path = path;
                fakeMovieTpl.overwrite(this.body, { PanelData: { src: this.data.path} });
            }
        }, this);
    },

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

            function success() {
                p.getEl().unmask();
                LUL.MovieEditor.superclass.onSave.call(p);

                // kom ihåg ändringen
                p.data.PanelData.src = p.data.path;

                loadMovie(p);
            }

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

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

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

    onClose: function() {
        LUL.MovieEditor.superclass.onClose.call(this);
        loadMovie(this);
    },

    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.editMoviePanelSettingsURL);
    }
});

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

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

    LUL.EditorPanel.createNew(
        marker,
        insertBefore,
        { tag: 'div', id: 'moviePanelX' },
        dataManager.createMoviePanelURL,
        'moviePanel',
        success
    );
}

// laddar en dold panel...
LUL.MovieEditor.loadHiddenPanel = function(marker, insertBefore, dragData) {
    function success(response, id) {

        var title = movieTitleTpl.apply({ id: id, PanelData: dragData.panelData });

        var el = Ext.DomHelper.insertAfter(marker, {
            tag: 'div',
            id: 'moviePanel' + id,
            cls: 'moviePanel',
            html: title
        }, true);

        //movieTitleTpl.overwrite(el, { id: id, PanelData: dragData.panelData });

        var task = new Ext.util.DelayedTask();
        task.delay(500, function() {
            loadMovie({
                editElement: el,
                data: {
                    id: id,
                    PanelData: dragData.panelData
                }
            });
//            flashPanelHandler.initMovie(Ext.get('flashPanel' + id + 'Movie'), dragData.panelData);
        });

        Ext.get('moviePanel' + id).on('dblclick', LUL.MovieEditor.onDblClick);                
    }

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