/*
 * Ext JS Library 2.2.1
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
 
var ImageChooser = function(config){
	this.config = config;
}

var filter_store = new Ext.data.SimpleStore({
    fields:['id','category'],
    data:[
		['','All'],
		['Dentists','Dentists'],
		['Gynecologists','Gynecologists'],
		['Internists','Internists'],
		['Pediatricians','Pediatricians']
	]
});

ImageChooser.prototype = {
    // cache data by image name for easy lookup
    lookup : {},
    
	show : function(el){
		if(!this.win){
			this.initTemplates();
			
			this.store = new Ext.data.JsonStore({
			    url: this.config.url,
			    root: 'images',
			    fields: [
			        'name', 'url', 'file', 'path'
			    ],
			    listeners: {
			    	'load': {fn:function(){ this.view.select(0); }, scope:this, single:true}
			    }
			});
			this.store.load();
			
			var formatData = function(data){
		    	this.lookup[data.file] = 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;">No images match the specified filter</div>',
				store: this.store,
				listeners: {
					'selectionchange': {fn:this.showDetails, scope:this, buffer:100},
					'loadexception'  : {fn:this.onLoadException, scope:this},
					'beforeselect'   : {fn:function(view){
				        return view.store.getRange().length > 0;
				    }}
				},
				prepareData: formatData.createDelegate(this)
			});
		    
			var cfg = {
		    	title: 'Choose a Template',
		    	id: 'img-chooser-dlg',
		    	layout: 'border',
				minWidth: 750,
				minHeight: 450,
				modal: true,
				closeAction: 'hide',
				border: false,
				items:[{
					id: 'img-chooser-view',
					region: 'center',
					autoScroll: true,
					items: this.view,
                    tbar:[{
                    	text:'Filter:'
                    },
                    	new Ext.form.ComboBox({
				        	displayField:'category',
					    	valueField:'id',
					    	store: filter_store,
					    	triggerAction:'all',
					    	mode:'local',
	                    	id: 'filter',
	                    	selectOnFocus: true,
	                    	width: 150,
	                    	listeners: {
	                    		'render': {fn:function(){
							    	Ext.getCmp('filter').getEl().on('keyup', function(){
							    		this.filter();
							    	}, this, {buffer:500});
							    	/*Ext.getCmp('filter').getEl().on('click', function(){
							    		this.filter();
							    	}, this, {buffer:500});
							    	Ext.getCmp('filter').getEl().on('change', function(){
							    		this.filter();
							    	}, this, {buffer:500});
							    	Ext.getCmp('filter').getEl().on('select', function(){
							    		this.filter();
							    	}, this, {buffer:500});*/
							    	Ext.getCmp('filter').getEl().on('blur', function(){
							    		this.filter();
							    	}, this, {buffer:500});
	                    		}, scope:this}
	                    	}
                    })]
				},{
					id: 'img-detail-panel',
					region: 'east',
					split: true,
					width: 510,
					minWidth: 510,
					maxWidth: 510
				}],
				buttons: [{
					text: 'Close',
					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.animateTarget = el;
	},
	
	initTemplates : function(){
		this.thumbTemplate = new Ext.XTemplate(
			'<tpl for=".">',
				'<div class="thumb-wrap" id="{file}">',
					'<div class="thumb"><img src="{url}"></div>',
				'</div>',
			'</tpl>'
		);
		this.thumbTemplate.compile();
		
		this.detailsTemplate = new Ext.XTemplate(
			'<div class="details">',
				'<tpl for=".">',
					'<img src="{url}">',
					'<div class="details-info">',
						'<span style="font-weight:bold;">{name}</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];
		    var data = this.lookup[selNode.id];
            detailEl.hide();
            this.detailsTemplate.overwrite(detailEl, data);
            detailEl.slideIn('l', {stopFx:true,duration:.2});
		}else{
		    detailEl.update('');
		}
	},
	
	filter : function(){
		var filter = Ext.getCmp('filter');
		this.view.store.filter('path', 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.select(0);
	},
	
	onLoadException : function(v,o){
	    this.view.getEl().update('<div style="padding:10px;">Error loading images.</div>'); 
	}
};

var template_gallery;
function show_templates(){
	template_gallery = new ImageChooser({
			url:location.href+'&get_images',
			width:750, 
			height:500
	});
	template_gallery.show();
}