Ext.ns('Ext.ux.HtmlEditor.ButtonImage');

Ext.ux.HtmlEditor.ButtonImage = Ext.extend(Ext.util.Observable, {

    init: function(cmp){
		var win, bnt;
		
        this.cmp = cmp;
        this.cmp.on('render', this.onRender, this);

		var css = '.x-edit-image {background: url(public/images/picture.png) 0 0 no-repeat !important;}';
		Ext.util.CSS.createStyleSheet(css, 'editor-css');
    }

    ,onRender: function(){
		this.cmp.getToolbar().addButton([new Ext.Toolbar.Separator()]);
		
        var cmp = this.cmp;
        this.btn = this.cmp.getToolbar().addButton({
            iconCls       : 'x-edit-image'
            ,handler      : this.show
            ,scope        : this
            ,tooltip      : {title: 'Inserir imagem'}
            ,overflowText : 'Inserir imagem'
        });
		this.btn.disable();
    }
	
	,lookup : {}

	,show : function(el, callback){
		if(!this.win){
			this.initTemplates();

			this.store = new Ext.data.JsonStore({
			    url: 'acao.php',
				baseParams : {acao  : 'listarImagens'},
    			width:515,
    			height:350,				
			    root: 'images',
			    fields: [
			        'name', 'url',
			        {name:'size', type: 'float'},
			        {name:'lastmod', type:'date', dateFormat:'timestamp'}
			    ],
			    listeners: {
			    	'load': {fn:function(){ this.view.select(0); }, scope:this, single:true}
			    }
			});
			this.store.load();

			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,
				overClass:'x-view-over',
				itemSelector: 'div.thumb-wrap',
				emptyText : '<div style="padding:10px;">N�o existe imagem com esse nome</div>',
				store: this.store,
				
				plugins: [
					new Ext.DataView.LabelEditor({dataIndex: 'name'})
				],
			
				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 cfg = {
		    	title: 'Escolha uma imagem',
		    	id: 'img-chooser-dlg',
		    	layout: 'border',
				width: 600,
				height: 300,				
				modal: true,
				resizable   : false,				
				closeAction: 'hide',
				border: false,
				items:[{
					id: 'img-chooser-view',
					region: 'center',
					autoScroll: true,
					items: this.view,
                    tbar:[
					
					{
						iconCls: 'add-image',
						text: 'Upload',
						handler: function(){
						
							var dialog;						
							if (!dialog) {
							  dialog = new Ext.ux.UploadDialog.Dialog({
								url: 'acao.php',
								base_params: { acao : 'upload'},
								reset_on_hide: true,
								allow_close_on_upload: true,
								upload_autostart: false,
								post_var_name: 'upload'								
							  });

								dialog.on('uploadsuccess', this.onUploadSuccess, this);
							}
							dialog.show();
	
						},
						scope: this
					  }, '-', {
						iconCls:'delete-image',
						text:'Deletar',
						handler: this.deleteFile,
						scope: this
					  }, '-',					
					
					{
                    	text: 'Pesquisar:'
                    },{
                    	xtype: 'textfield',
                    	id: 'filter',
                    	selectOnFocus: true,
                    	width: 100,
                    	listeners: {
                    		'render': {fn:function(){
						    	Ext.getCmp('filter').getEl().on('keyup', function(){
						    		this.filter();
						    	}, this, {buffer:500});
                    		}, scope:this}
                    	}
                    }]
				},{
					id: 'img-detail-panel',
					region: 'east',
					split: true,
					width: 150,
					minWidth: 150,
					maxWidth: 250
				}],
				buttons: [{
					id: 'ok-btn',
					text: 'OK',
					handler: this.doCallback,
					scope: this
				},{
					text: 'Cancelar',
					handler: function(){ this.win.hide(); },
					scope: this
				}],
				keys: {
					key: 27, // Esc key
					handler: function(){ this.win.hide(); },
					scope: this
				}
			};
			Ext.apply(cfg, this.config);
		    this.win = new Ext.Window(cfg);
		}

		this.reset();
	    this.win.show(el);
		this.callback = callback;
		this.animateTarget = el;
	}

	,deleteFile : function(ed, value){
		
		Ext.Msg.confirm('Confirma��o', 'Deseja mesmo excluir essa imagem?', function(opt){
			if(opt === 'yes'){							
				var selNode = this.view.getSelectedNodes();	 
				if(selNode && selNode.length > 0){
					selNode     = selNode[0];
					var data    = this.lookup[selNode.id];
				
					var imagem = data.name;
									
					Ext.Ajax.request({
						url: 'acao.php',
						callback: function(){				
							this.view.store.reload();
							this.view.refresh();
						},
						scope: this,
						params: {
							acao: 'deletarImagem',
							imagem: imagem									
						}
					});
				}	
			}
		}, this);	
	}
	
	,onUploadSuccess : function(dialog, filename, resp_data, record){
		this.view.store.reload();
		this.view.refresh();
	}
	  
	,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 class="x-editable">{shortName}</span></div>',
			'</tpl>'
		);
		this.thumbTemplate.compile();

		this.detailsTemplate = new Ext.XTemplate(
			'<div class="details">',
				'<tpl for=".">',
					'<img src="{url}" style="width: 100px; height: 80px;" /><div class="details-info">',
					'<b>Nome da Imagem:</b>',
					'<span>{name}</span>',
					'<b>Tamanho:</b>',
					'<span>{sizeString}</span>',
					'<b>Ultima modifica��o:</b>',
					'<span>{dateString}</span></div>',
				'</tpl>',
			'</div>'
		);
		this.detailsTemplate.compile();
	}

	,showDetails : function(){
	    var selNode = this.view.getSelectedNodes();
	    var detailEl = Ext.getCmp('img-detail-panel').body;
		if(selNode && selNode.length > 0){
			selNode = selNode[0];
			Ext.getCmp('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('ok-btn').disable();
		    detailEl.update('');
		}
	}

	,filter : function(){
		var filter = Ext.getCmp('filter');
		this.view.store.filter('name', filter.getValue());
		this.view.select(0);
	}

	,reset : function(){
		if(this.win.rendered){
			Ext.getCmp('filter').reset();
			this.view.getEl().dom.scrollTop = 0;
		}
	    this.view.store.clearFilter();		
		this.view.store.sort('name','asc');
		this.view.select(0);
	}

	,doCallback : function(){
        var selNode = this.view.getSelectedNodes()[0];
		var lookup = this.lookup;
		
		var data = lookup[selNode.id];
		var img = Ext.getCmp('imagens');
		img.append('<img src="'+data.url+'" style="width: 250px; height: 190px;" />');   			

		this.win.hide(this.animateTarget);	
    }

	,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;
};