Ext.namespace("Ext.ux");
/**
 * Pannello che include un'unica immagine.
 * Può essere ad esempio utilizzata per sostituire il classico window.open.
 * 
 * Parametri di cfg specifici (oltre a quelli di Ext.Window):
 * src: URL da utilizzare per caricare il contenuto della finestra
 * 
 * Eventi:
 * imgclick(ImgWindow, el_immagine): Lanciato quando si clicca l'immagine
 *  
 */
Ext.ux.ImgPanel = Ext.extend(Ext.Panel,{
	
	imgEl: null,
	
	enableLoadMask: true,
	
	setSource: function(url)
	{
		this.src = url;
		if(this.imgEl)
		{
			this.imgEl.dom.src = url;
			if(this.loadMask)
			{
				this.loadMask.show();
			}
		}
	},
	
	getSource: function()
	{
		return this.src;
	},
	
	getImgElement: function()
	{
		return this.imgEl;
	},
	
	initComponent: function()
	{
		Ext.ux.ImgPanel.superclass.initComponent.call(this);
		this.addEvents('imgclick','imgload');
	},
	
	onRender: function(el, pos)
	{
		this.imgEl = new Ext.Element(Ext.DomHelper.createDom({
			tag: 'img',
			style: 'border-style: none',
			src: this.src
		}));
		
		this.imgEl.on('click', function(){this.fireEvent('imgclick', this, this.imgEl)}, this);
		this.imgEl.on('load', function(){
			if(this.loadMask)
			{
				this.loadMask.hide();
			}
			this.fireEvent('imgload', this, this.imgEl)
		}, this);
		
		this.contentEl = this.imgEl.dom;
		
		Ext.ux.ImgPanel.superclass.onRender.call(this, el, pos);
		
		if(this.enableLoadMask)
		{
			this.loadMask = new Ext.LoadMask(this.body);
		}
	},
	
	onDestroy: function()
	{
		Ext.ux.ImgPanel.superclass.onDestroy.call(this);
		if(this.imgEl)
		{
			Ext.destroy(this.imgEl);
			this.imgEl = null;
		}
	}
});