/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */

/*
 * Ext JS Library 2.0
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */
var mmwini;
var mmwinv;

var mediaManager = function(config){
    this.config = config;
    if (typeof this.config.limit == "undefined") 
    	this.config.limit = 9;
    if (typeof this.config.offset == "undefined")
		this.config.offset = 1;    
}

mediaManager.prototype = {
    // cache data by image name for easy lookup
    lookup : {},

    show : function(el, callback){
        if((this.config.viewid == "mediaImages" && !mmwini) || (this.config.viewid == "mediaVideos" && !mmwinv)){
            this.initTemplates();

            this.store = new Ext.data.JsonStore({
                url: this.config.url,
                root: 'images',
                fields: [
                    'name', 'url', 'id',
                    {name:'size', type: 'float'},
                    'bigurl', 'maxOffset', 'player', 'vidurl', 'width', 'height'
                ],
                listeners: {
                    'load': {fn:function(){ this.view.select(0); }, scope:this, single:true}
                }
            });
            this.store.load({params: { offset: this.config.offset, limit: this.config.limit}});

            var formatSize = function(data){
                if(data.size < 1024) {
                    return data.size + " bytes";
                } else {
                    return (Math.round(((data.size*10) / 1024))/10) + " KB";
                }
            };

            var formatData = function(data){
                data.shortName = data.name.ellipse(15);
                data.sizeString = formatSize(data);
                data.dateString = new Date(data.lastmod).format("m/d/Y g:i a");
                this.lookup[data.name] = data;
                return data;
            };

            this.view = new Ext.DataView({
                tpl: this.thumbTemplate,
                singleSelect: true,
                id: this.config.viewid,
                overClass:'x-view-over',
                itemSelector: 'div.thumb-wrap',
                emptyText : '<div style="padding:10px;">'+this.config.noMedia+'</div>',
                store: this.store,
                listeners: {
                    'selectionchange': {fn:this.showDetails, scope:this, buffer:100},
                    //'dblclick'       : {fn:this.doCallback, scope:this},
                    'loadexception'  : {fn:this.onLoadException, scope:this},
                    'beforeselect'   : {fn:function(view){
                        return view.store.getRange().length > 0;
                    }}
                },
                prepareData: formatData.createDelegate(this)
            });



		    var nButton = new Ext.ux.form.BrowseButton({
		        text: 'Bild hochladen',
		        inputFileName: 'Filedata',
		        handler: function(browseButton) {
		            if (!this.uploadForm) { // if the form hasn't been created
		                    var uploadFormEl = Ext.getBody().createChild({
		                        tag: 'form',
		                        style: 'display:none'
		                    });
		                    this.uploadForm = new Ext.form.BasicForm(uploadFormEl, {
		                        url: '/?modul=media&a=upload',
		                        fileUpload: true
		                    });
		            }
		            var inputFileEl = browseButton.detachInputFile();
		            inputFileEl.appendTo(this.uploadForm.getEl());
		            this.uploadForm.submit({
		                scope: this,
		                params: {
		                    PHPSESSID: 'e3c2149d627d5d08b4c794be0653153e'
                           ,APC_UPLOAD_PROGRESS: '4f35b8d0e0ac1'
		                },
		                waitTitle: 'Datei-Upload',
		                waitMsg: 'Datei wird hochgeladen ...',
                        failure: function(form, action) {
                            Ext.ux.Toast.msg('Statusmeldung', 'Es ist ein Fehler beim Upload des Bildes aufgetreten!');
                        },
                        success: function(form, action) {
							this.config.offset = 1;
		                    Ext.getCmp(this.config.viewid).store.load({params: {limit:this.config.limit, offset:this.config.offset}});
		                    Ext.getCmp(this.config.viewid).refresh();
                        }
		            });

	            },
		        scope: this
		    });

            var cfg = {
                title: 'Medien-Manager',
                id: this.config.cfgid+'dlg',
                layout: 'border',
                minWidth: 500,
                minHeight: 400,
                modal: true,
                closeAction: 'hide',
                border: false,
                items:[{
	                    id: this.config.cfgid+'view',
	                    region: 'center',
	                    autoScroll: true,
	                    items: this.view
	                },{
	                    id: this.config.cfgid+'detail-panel',
	                    region: 'east',
	                    split: true,
	                    width: 150,
	                    minWidth: 150,
	                    maxWidth: 250
                    }
                ],

                buttons: [{
               		id: this.config.cfgid+'pre'
               	   ,text:'zur&uuml;ck'
               	   ,handler:function(){ 
                   		if(this.config.offset > 1) {
	               	   		this.config.offset=this.config.offset-1;
	               	   		this.store.load({params: {limit:this.config.limit, offset:this.config.offset}}); 
               	   		}
           	   		}
               	   ,scope:this
            	},{
                	id: this.config.cfgid+'next'
                   ,text:'weiter'
                   ,handler:function(){ 
                    	if(this.store.getAt(0).data.maxOffset > this.config.offset) {
	                   		this.config.offset=this.config.offset+1;
	                   		this.store.load({params: {limit:this.config.limit, offset:this.config.offset}}); 
                   		}
               		}
                  ,scope:this
               	}, nButton, {
                    id: this.config.cfgid+'ok-btn',
                    text: 'OK',
                    handler: this.doCallback,
                    scope: this
                },{
                    text: 'Abbrechen',
                    handler: function(){ this.mmwin.hide(); },
                    scope: this
                }],
                keys: {
                    key: 27, // Esc key
                    handler: function(){ this.mmwin.hide(); },
                    scope: this
                }
            };
            Ext.apply(cfg, this.config);
            this.mmwin = new Ext.Window(cfg);
        	if (this.config.viewid == "mediaImages") {
        		mmwini = this.mmwin;
			} else {
				mmwinv = this.mmwin;
			}              
        } else {
        	if (this.config.viewid == "mediaImages") {
        		this.mmwin = mmwini;
			} else {
				this.mmwin = mmwinv;
			}        		
        }
        this.mmwin.show(el);
        this.callback = callback;
        this.animateTarget = el;
    },

    initTemplates : function(){
        this.thumbTemplate = new Ext.XTemplate(
            '<tpl for=".">',
                '<div class="thumb-wrap" id="{name}">',
                '<div class="thumb"><img src="{url}" title="{name}"></div>',
                '<span>{shortName}</span></div>',
            '</tpl>'
        );
        this.thumbTemplate.compile();

        this.detailsTemplate = new Ext.XTemplate(
            '<div class="details">',
                '<tpl for=".">',
                    '<img src="{url}"><div class="details-info">',
                    '<b>Name:</b>',
                    '<span>{name}</span>',
                    '<b>Groe&szlig;e:</b>',
                    '<span>{sizeString}</span>',
                '</tpl>',
            '</div>'
        );
        this.detailsTemplate.compile();
    },

    showDetails : function(){
        var selNode = this.view.getSelectedNodes();
        var detailEl = Ext.getCmp(this.config.cfgid+'detail-panel').body;
        if(selNode && selNode.length > 0){
            selNode = selNode[0];
            Ext.getCmp(this.config.cfgid+'ok-btn').enable();
            var data = this.lookup[selNode.id];
            detailEl.hide();
            this.detailsTemplate.overwrite(detailEl, data);
            detailEl.slideIn('l', {stopFx:true,duration:.2});
        }else{
            Ext.getCmp(this.config.cfgid+'ok-btn').disable();
            detailEl.update('');
        }
    },


    doCallback : function(){
        var selNode = this.view.getSelectedNodes()[0];
        var callback = this.callback;
        var lookup = this.lookup;
        if(selNode && callback){
            var data = lookup[selNode.id];
            callback(data);
        }
        this.mmwin.hide();

    },

    onLoadException : function(v,o){
        this.view.getEl().update('<div style="padding:10px;">Error loading images.</div>');
    }
};

String.prototype.ellipse = function(maxLength){
    if(this.length > maxLength){
        return this.substr(0, maxLength-3) + '...';
    }
    return this;
};