/**
 * Ext.ux.Gallery
 *
 * @author    Kristof Torfs
 * @copyright (c) 2010, by Kristof Torfs
 * @date      11. January 2011
 * @version   $Id$
 */
 
/* global Ext */

Ext.ns('Ext.ux');

/**
 *
 * @class Ext.ux.Gallery
 * @extends Ext.Panel
 */
Ext.ux.Gallery = Ext.extend(Ext.Panel, {
    // private
    _dv: null
    ,_tpl: null
    
    // soft config (can be changed from outside)
    ,border: false
    // Our data
    ,data: {
        records: []
    }
    // Url to the download script
    ,downloadUrl: ''
    ,enableSlideshow: true
    // Our current path
    ,path: ''
    // The base URL of the page (e.g. http://www.mydomain.com/gallery)
    ,baseUrl: ''
    // The datatype (foto or video)
    ,dataType: 'foto'
    // Url to the folder icon
    ,folderIcon: ''
    // Url to the folder-up icon
    ,folderUpIcon: ''
    // Path to the large image script
    ,previewUrl: ''
    // Url to the slideshow (images.xml) script
    ,slideshowUrl: ''
    // Path to the thumbnail script
    ,thumbUrl: ''
    // Url to the videofolder icon
    ,videoFolderIcon: ''
    // Path to the video thumbnail script
    ,videoThumbUrl: ''
    // Path to zip-download script
    ,zipDownload: ''
    // Path to zip-init script
    ,zipInit: ''
    // Path to zip-status script
    ,zipStatus: ''
 
    // {{{
    // uncomment constructor if you need it, e.g. if you need listeners
//    ,constructor:function(config) {
//        // constructor pre-processing - configure listeners here
//        config = config || {};
//        config.listeners = config.listeners || {};
//        Ext.applyIf(config.listeners, {
//             expand:{scope:this, fn:function() {
//            }}
//            ,collapse:{scope:this, fn:function() {
//            }}
//        });
//
//        // call parent contructor
//        AnExtension.superclass.constructor.apply(this, arguments);
//
//        // constructor post-processing
//
//    } // eo function constructor
    // }}}
    // {{{
    ,initComponent:function() {
        // {{{

        Ext.ux.Gallery.waitBox = Ext.MessageBox.wait('Uw selectie wordt gecontroleerd');
        Ext.ux.Gallery.progressBox = Ext.MessageBox.progress('Zipbestand maken', 'Het bestand wordt aangemaakt, dit kan even duren', '0%');
        Ext.ux.Gallery.waitBox.hide();
        Ext.ux.Gallery.progressBox.hide();
    
        this.addEvents(
            /**
             * @event buttonstatus
             * Fires after the enabled status of a button should change
             * @param {string} btnId
             * @param {boolean} enabled
            */
            'buttonstatus'
        );
        
        this._tpl = new Ext.XTemplate(
            '<tpl for=".">',
                '<tpl if="type == \'file\'">',
                    '<div class="thumb-wrap" id="{name}" title="{name}">',
                    '<div class="thumb"><img src="' + this.thumbUrl + '?path={path}"></div>',
                '</tpl>',
                '<tpl if="type == \'video\'">',
                    '<div class="thumb-wrap" id="{id}" title="{name}" rel="{name}">',
                    '<div class="thumb"><img src="' + this.videoThumbUrl + '?id={id}"></div>',
                '</tpl>',
                '<tpl if="type == \'folder\'">',
                    '<div class="thumb-wrap" id="{name}" title="{name}">',
                    '<div class="thumb">',
                    '<tpl if="id != -2">',
                        '<img src="' + this.folderIcon + '">',
                    '</tpl>',
                    '<tpl if="id == -2">',
                        '<img src="' + this.videoFolderIcon + '">',
                    '</tpl>',
                    '</div>',
                '</tpl>',
                '<tpl if="type == \'up\'">',
                    '<div class="thumb-wrap" id="{name}" title="{name}">',
                    '<div class="thumb"><img src="' + this.folderUpIcon + '"></div>',
                '</tpl>',
                '<span class="x-editable">{trunc}</span></div>',
            '</tpl>',
            '<div class="x-clear"></div>'
        ); // eo this._tpl

        // hard coded (cannot be changed from outside)
        var config = {
            autoHeight: true,
            items: [{
                xtype: 'dataview',
                store: {
                    xtype: 'jsonstore',
                    data: this.data,
                    root: 'records',
                    fields: ['id', 'type', 'path', 'name', 'trunc']
                },
                autoHeight: true,
                multiSelect: true,
                tpl: this._tpl,
                overClass: 'x-view-over',
                itemSelector: 'div.thumb-wrap',
                emptyText: 'Geen bestanden in deze map',
                plugins: [
                    new Ext.DataView.DragSelector()
                ]
            }]
        };
 
        // apply config
        Ext.apply(this, config);
        Ext.apply(this.initialConfig, config);
        // }}}
 
        // call parent
        Ext.ux.Gallery.superclass.initComponent.apply(this, arguments);
 
        // after parent code here, e.g. install event handlers
        this._dv = this.items.itemAt(0);
        this._dv.on({
            scope: this,
            dblclick: this.onPreview,
            selectionchange: function(dv, nodes) {
                var up = nodes[0];
                var selectionCount = dv.getSelectionCount();
                if ( (selectionCount > 0) && (dv.getRecord(up).get('type') == 'up') ) {
                    selectionCount--;
                }
                // Zip button
                var enabled = (selectionCount > 0);
                if (this.path.substr(0, 5) == 'Video') enabled = false;
                Ext.each(nodes, function(node) {
                    var record = dv.getRecord(node);
                    if (record.get('path') != 'Video') return true;
                    enabled = false;
                    return false;
                });
                this.fireEvent('buttonstatus', 'zip', enabled);
                // Download button
                var enabled = false;
                if (dv.getSelectionCount() != 1) enabled = false;
                else {
                    var sel = dv.getSelectedRecords()[0];
                    enabled = (sel.data.type == 'file');
                }
                this.fireEvent('buttonstatus', 'download', enabled);
                // Slideshow button
                var enabled = false;
                if (this.enableSlideshow) {
                    dv.getStore().each(function(record) {
                        if (record.get('type') != 'file') return true;
                        enabled = true;
                        return false;
                    });
                }
                this.fireEvent('buttonstatus', 'slideshow', enabled);
            },
        });
    } // eo function initComponent
    // }}}
    // {{{
    ,onRender:function() {
 
        // before parent code
 
        // call parent
        Ext.ux.Gallery.superclass.onRender.apply(this, arguments);
 
        // after parent code, e.g. install event handlers on rendered components
        this._dv.fireEvent('selectionchange', this._dv, []);
 
    } // eo function onRender
    // }}}
    ,onPreview: function() {
        var node = this._dv.getSelectedNodes()[0];
        var r = this._dv.getRecord(node);
        var url = this.baseUrl + '/' + r.get('path');
        switch (r.get('type')) {
            case 'folder':
            case 'up':
                document.location.href = url;
                break;
            case 'file':
                url = String.format(this.previewUrl + '?path={0}', r.get('path'));
                if (Ext.ux.Gallery.activeWin) Ext.ux.Gallery.activeWin.close();
                var win = new Ext.Window({
                    title: r.get('name'),
                    //modal: true,
                    width: 815,
                    height: 630,
                    resizable: false,
                    draggable: false,
                    html: String.format('<img src="{0}" />', url)
                });
                win.show(node);
                win.body.on({
                    scope: win,
                    click: win.close
                });
                Ext.ux.Gallery.activeWin = win;
                break;
            case 'video':
                if (Ext.ux.Gallery.activeWin) Ext.ux.Gallery.activeWin.close();
                var ytPanel = new Ext.ux.YoutubePlayer({
                    playerId     : 'beachvolleydeluxe',
                    ratioMode    : 'stretch',
                    cls          : 'ext-ux-youtubeplayer',
                    listeners: {
                        ready: function(p) {
                            p.loadVideoById(r.id);
                        }
                    }
                });
                var win = new Ext.Window({
                    title: r.get('name'),
                    width: 800,
                    height: 600,
                    //modal: true,
                    resizable: false,
                    draggable: false,
                    layout: 'fit',
                    items: [ytPanel],
                    bbar : new Ext.ux.YoutubePlayer.Control({
                        player : ytPanel,
                        border : false,
                        id     : 'control',
                        style  : 'border: none;'
                    })
                });
                win.show();
                Ext.ux.Gallery.activeWin = win;
                break;
        }
    } // eo function onPreview
    ,download: function() {
        if (arguments.length == 1) {
            var e = Ext.get(arguments[0]);
            if (e.hasClass('jsbutton-disabled')) return;
        }
        var r = this._dv.getSelectedRecords()[0];
        var url = String.format(this.downloadUrl + '?path={0}', r.get('path'));
        window.document.location.href = url;
    }
    ,selectAll: function() {
        this._dv.selectRange(0, this._dv.getNodes().length - 1);
    } // eo function selectAll
    ,selectNone: function() {
        this._dv.clearSelections();
    } // eo function selectNone
    ,selectInvert: function() {
        var select = [];
        for (var i = 0; i < this._dv.getNodes().length; i++) {
            if (!this._dv.isSelected(i)) select.push(i);
        }
        this._dv.select(select);        
    } // eo function selectInvert
    ,refresh: function() {
        document.location.reload();
    } // eo function refresh
    ,slideshow: function() {
        if (arguments.length == 1) {
            var e = Ext.get(arguments[0]);
            if (e.hasClass('jsbutton-disabled')) return;
        }
        if (Ext.ux.Gallery.activeWin) Ext.ux.Gallery.activeWin.close();
        var win = new Ext.Window({
            title: 'Diavoorstelling - ' + this.path,
            //modal: true,
            width: 815,
            height: 600,
            resizable: false,
            draggable: false,
            items: [{
                xtype: 'slideshow',
                basePath: window.urlJs + '/slideshow',
                width: 800,
                height: 600,
                imageXml: this.slideshowUrl,
                settingsXml: 'settings.php'
            }]
        });
        Ext.ux.Gallery.activeWin = win;
        win.show();
    } // eo function slideshow
    ,zip: function() {
        if (arguments.length == 1) {
            var e = Ext.get(arguments[0]);
            if (e.hasClass('jsbutton-disabled')) return;
        }
        var gallery = this;
        var dv = gallery._dv;
        var items = [];
        Ext.each(dv.getSelectedRecords(), function(r) {
            items.push(r.data.name);
        });
        items = Ext.util.JSON.encode(items);
        Ext.ux.Gallery.waitBox.wait('Uw selectie wordt gecontroleerd', 'Zipbestand maken');
        Ext.Ajax.request({
            url: gallery.zipInit,
            success: function(response, options) {
                ret = Ext.util.JSON.decode(response.responseText);
                Ext.ux.Gallery.waitBox.hide();
                if (ret.progress == 100) {
                    var href = gallery.zipDownload + '?path=' + ret.id + '.zip';
                    document.location.href = href;
                } else {
                    Ext.ux.Gallery.progressRunner = new Ext.util.TaskRunner();
                    Ext.ux.Gallery.progressTask = {
                        run: function() {
                            Ext.Ajax.request({
                                url: gallery.zipStatus,
                                success: function(response, options) {
                                    ret = Ext.util.JSON.decode(response.responseText);
                                    if (ret.progress == 100) {
                                        Ext.ux.Gallery.progressRunner.stop(Ext.ux.Gallery.progressTask);
                                        Ext.ux.Gallery.progressBox.hide();
                                        var href = gallery.zipDownload + '?path=' + ret.id + '.zip';
                                        document.location.href = href;
                                    } else {
                                        Ext.ux.Gallery.progressBox.progress('Zipbestand maken', 'Het bestand wordt aangemaakt, dit kan even duren', '0%');
                                        Ext.ux.Gallery.progressBox.updateProgress(ret.progress / 100, ret.progress + '%');
                                    }
                                },
                                params: {
                                    path: gallery.path,
                                    items: items
                                }
                            });
                        },
                        interval: 2000
                    };
                    Ext.ux.Gallery.progressRunner.start(Ext.ux.Gallery.progressTask);
                    Ext.ux.Gallery.progressBox.progress('Zipbestand maken', 'Het bestand wordt aangemaakt, dit kan even duren', '0%');
                    Ext.ux.Gallery.progressBox.updateProgress(0, '0%');
                }
            },
            params: {
                controller: gallery.zipInit,
                path: gallery.path,
                items: items
            }
        });
    } // eo function zip
    // any other added/overrided methods
}); // eo extend
 
// register xtype
Ext.reg('gallery', Ext.ux.Gallery); 
 
// eof