Ext.namespace("Ext.ux");
/**
 * GalleryPanel
 * 
 * galleryData: {name, src, thumbName, thumbSrc, desc}
 *  
 */
Ext.ux.GalleryPanel = Ext.extend(Ext.Panel,{
	
	columns: 5,
	galleryData: null,
	layout: 'fit',
	autoScroll: true,
	autoShowWidth: 0.7,
	autoShowHeight: 0.9,
	imgWidth: 150,
	imgPadding: 2,
	
	onShowNextImg: function()
	{
		if(!this.selectedRecord)
			return;
		var index = this.store.indexOf(this.selectedRecord) + 1;
		if(index >= this.store.getCount())
			index = 0;
		this.selectedRecord = this.store.getAt(index);
		var ip = this.viewWnd.getComponent('imgPanel');
		ip.setSource(this.selectedRecord.get('src'));
		this.viewWnd.setTitle(this.selectedRecord.get('desc'))
	},
	
	onImageClick: function(record,el)
	{
		if(this.viewWnd)
		{
			this.viewWnd.close();
			this.viewWnd = null;
		}
		this.selectedRecord = record;
		var width = this.autoShowWidth ? Ext.getBody().getWidth() * this.autoShowWidth : 640;
		var height = this.autoShowHeight ? Ext.getBody().getHeight() * this.autoShowHeight: 480;
		this.viewWnd = new Ext.Window({
			items: [
				new Ext.ux.ImgPanel({
					itemId: 'imgPanel',
					src: record.get('src'),
					autoScroll: true,
					listeners: {
						'imgclick': this.onShowNextImg,
						scope: this
					}
				})
			],
			layout: 'fit',
			width: width,
			height: height,
			constrainHeader: true,
			title: record.get('desc'),
			animateTarget: el,
			bbar: [
			'Clicca sulla foto per passare alla prossima'
			]
		})
		this.viewWnd.show();
	},
	
	onResizeDataView: function(p, w, h)
	{
		var dw = this.getComponent('gdw');
		if(dw.rendered && !this.collapsed)
		{
			var iw = this.imgWidth + this.imgPadding * 2;
			var max = Math.floor((w - 45) / iw);
			
			if(this.columns != max)
			{
				this.columns = max;
				dw.refresh();
			}
		}
	},
	
	onPanelRender: function()
	{
		this.onResizeDataView.call(this, this, this.getInnerWidth(), this.getInnerHeight());
	},
	
	initComponent: function()
	{
		if(!this.tpl)
		{
			this.tpl = new Ext.XTemplate(
				'<table><tr>',
				'<tpl for=".">',
		      '<td id="{name}" class="lor-thumb-wrap" style="cursor: pointer; padding: '+this.imgPadding+'px">',
				'<div style="text-align: center"><img src="{thumbSrc}" title="{desc}" style="border: 1px solid silver"></div>',
				'<span style="display: block;	overflow: hidden;	text-align: center; font-size: 7pt">{desc}</span>',
				'</td>',
				'<tpl if="this.endRow(xindex)"></tr><tr></tpl>',
		      '</tpl>',
		      '</tr></table>',
		      {
					compiled: true,
					endRow: function(index)
					{
						return index % this.galleryPanel.columns == 0;
					},
					galleryPanel: this
				}
			);
		}
		
		this.store = new Ext.data.JsonStore({
			data: this.galleryData,
			fields: [
				'name',
				'src',
				'thumbName',
				'thumbSrc',
				'desc'
			],
			autoDestroy: true,
			idProperty: 'name',
			autoLoad: true
		});
		
		this.items = [
		{
			xtype: 'dataview',
			tpl: this.tpl,
			itemId: 'gdw',
			store: this.store,
			overClass:'x-view-over',
         itemSelector:'td.lor-thumb-wrap',
         emptyText: 'Nessuna immagine disponibile',
         trackOver: true,
         listeners: {
				click: function(dv, index, node, ev){
					var id = node.id;
					var data = this.store.getById(id);
					this.onImageClick(data, new Ext.Element(node));
				},
				scope: this
			}
		}];
		
		Ext.ux.GalleryPanel.superclass.initComponent.call(this);
		
		this.on('bodyresize', this.onResizeDataView, this);
		this.on('afterlayout', this.onPanelRender, this);
	}
});