/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
var MX_IMAGE = Ext.extend(Ext.util.Observable, {
    constructor: function(config){
        this.addEvents('finished'); // specify the events we're going to fire
        MX_IMAGE.constructor.call(this, config);
    },
    
    create: function(pid, i, value){
		var lang_please_select = "Glisser la photo à gauche, dans la colonne Sélection";
	
		var v = value.split('|||',3);
		var connUrl='/fileadmin/ressources_mob/mt_results/form_functions.php';

		this.imgView = new Ext.DataView({
			id: 'mobi-imgdrag-'+i,
			itemSelector: 'div.thumb-wrap',
			style:'overflow:auto',
			multiSelect: true,
			plugins: new Ext.DataView.DragSelector({dragSafe:true}),
			store: new Ext.data.JsonStore({
				proxy: new Ext.data.HttpProxy({method: 'POST', url: connUrl}),
				baseParams :{
					//lang: current_lang,
					actionMobi: 'getGalleryImages'	// <!>  NOT USED
				},
				//autoLoad: true,
				
				autoLoad: false,
				data:
					{'images':
						[{
							'name': v[2], 
							'size': 1024,
							'lastmod': 12345678,
							'url': v[0], 
							'idMobi':v[1]
						}]
					},
				
				root: 'images',
				//id:'name',
				fields:[
					'name', 'url', 'idMobi', 
					{name: 'shortName', mapping: 'name', convert: shortName}
				]
			}),
			tpl: new Ext.XTemplate(
				'<tpl for=".">',
				'<div class="thumb-wrap" id="{name}">',
					'<div class="thumb"><img src="'+mobiMainPhotoUrl+'{url}" class="thumb-img"></div>',
				'</div>',
				'</tpl>'
			),
			trackOver: true,
			listeners: {
				'mouseenter': function(dataview, index, node, e){
					var n = dataview.getRecord(node);
					var win = new Ext.Window({
						id: 'mobi-mt-results-comp-img-window',
						width:420,
						height:360,
						hideLabel: true,
						closable: false,
						layout: 'form',
						html: '<img width="420" height="320" src="http://'+window.location.hostname+'/'+n.data.url+'" title="'+n.data.name+'" />',
						items: [{
							xtype:'label',
							text: lang_please_select,
							cls: 'mobi-mt-results-comp-img-window-label'
						}]
					});
					win.show();
				},
				'mouseleave': function(dataview, index, node, e){
					Ext.getCmp('mobi-mt-results-comp-img-window').close();
				},
				'dblclick': function(dataview, index, node, e){
					var idDest = 'mobi-mt-results-comp-dataview';
					var data = dataview.getStore().getAt(index).data;
					if(Ext.getCmp(idDest).getStore().getCount()<5&&Ext.getCmp(idDest).getStore().find('idMobi',data.idMobi)==-1){
						StoreRecord = Ext.data.Record.create({name: 'name'}, {size: 'size'}, {lastmod: 'lastmod'}, {url: 'url'});
						Ext.getCmp(idDest).getStore().add(new StoreRecord({
							name: shortName(data.name),
							size: data.size,
							lastmod: data.lastmod,
							url: data.url,
							idMobi: data.idMobi
						}));
					}
				}
			}
		});
		
		this.panel = new Ext.Panel({ 
			id: 'mt_results_mx_image-'+i,
			cls: 'mt_results_mx_image',
			items: this.imgView
			/*,
			html: '<div class="mt_results_mx_image_over"></div>'*/
			
			//html: '<img src="http://'+window.location.hostname+'/'+value+'" title="img_'+pid+'-'+i+'">'
		});
		//alert(this.panel.getEl());
		//this.dragZone = new ImageDragZone(this.imgView, {containerScroll:true,
		//	ddGroup: 'compDrag'});
		
		this.fireEvent('finished', this.panel);
    }
});