// store

var afiliadosPrx = new Ext.data.ScriptTagProxy	({
//var afiliadosPrx = new Ext.data.HttpProxy ({
	url		: 'http://www.ziving.com/pasajson.php'
});
//console.log(afiliadosPrx);

var afiliadosSto = new Ext.data.JsonStore({
	storeId		: 'afiliadosSto',
	proxy		: afiliadosPrx,
	fields		: ['x','y','telefono','direccion','cp','localidad','especialistas','email','id','emergencias','web'],
	root		: 'asociado',
	//
	listeners	: {
		//load	: function(store, records, options){
		//	
		//}
	}
});

var afiliadoTpl2 = new Ext.XTemplate(
	'<tpl for=".">',
		'<div class="afiliado">',
		'<div class="localidad">{localidad}</div>',
		'<div class="especialista">{especialistas}</div>',
		'<div class="telefono">{telefono}</div>',
		'</div>',
	'</tpl>',
	'<div class="x-clear"></div>'
);


var afiliadosCbox = {
	xtype: 'combo',
	//fieldLabel: 'Title', 
	store: afiliadosSto, 
	displayField: 'localidad', 
	typeAhead: false, 
	loadingText: 'Searching...', 
	emptyText: 'Encuentra tu centro Ziving...', 
	//minChars: 3, 
	anchor: '100%', 
	pageSize: 0, 
	triggerAction: 'all', 
	tpl: afiliadoTpl, 
	itemSelector: 'afiliado', 
	onSelect: function(record) {
		//this.setValue(record.data.title); 
		//this.collapse(); 
		//Ext.getCmp('movies-form').getForm().loadRecord(record);
	}
};

var afiliadoTpl = new Ext.XTemplate(
	'<tpl for=".">',
		'<div class="afiliado">',
		'<div class="localidad" ext:qtip="Pulsar para ver detalles..." ext:qwidth="100"><b>{localidad}</b></div > ',
		'<span class="especialista">{especialistas}</span>',
		//'<span class="telefono">{telefono}</span>',
		'</div>',
	'</tpl>',
	'<div class="x-clear"></div>'
);

var detalleTpl = new Ext.XTemplate(
	'<div id="detalleAfiliado">',
	'<tpl for=".">',
		'<div class="localidad"><b>{localidad}</b></div > ',
		'<div class="especialista">{especialistas}</div>',
		'<div class="direccion"',
			'<div>{direccion}</div>',
			'<div>{cp} - {localidad}</div>',
		'</div>',
		'<div class="telefono">Teléfono: {telefono}</div>',
		'<div class="direccion">Emergencias: {emergencias}</div>',
	'</tpl>',
	'</div>',
	'<div class="x-clear"></div>'
);

var afiliadosDview = new Ext.DataView({
	id			: 'afiliadosDview',
	store		: afiliadosSto,
	tpl			: afiliadoTpl,
	singleSelect: true,
	overClass	:'imagen-over',
	itemSelector: 'div.afiliado',
	autoScroll	: true,
	//autoHeight	:true,
	height		: 300,
	//columnWidth : 1,
	listeners: {
		click : function( dv, index, node, e ){
			
			var rec = dv.store.getAt(index);
			//console.log(rec.data)
			Ext.getCmp('afiliadosDview').hide();

			detalleTpl.overwrite(Ext.getCmp('detallesDview').body,rec.data);
			var lacadena = rec.data.x+','+ rec.data.y+','+ rec.data.telefono+','+ rec.data.direccion+'<br/>'+ rec.data.cp+' - '+ rec.data.localidad+','+ rec.data.especialistas+','+ rec.data.email+','+rec.data.id+','+ rec.data.emergencias+','+ rec.data.web;
			Ext.apply(Ext.getCmp('detallesDview'), {cadena: lacadena});
			Ext.getCmp('detallesDview').show();
            //
			//map.markers = [];
			//var mrk = {lat: rec.data.x, lng: rec.data.y, title:"Ziving<br/>"+rec.data.especialistas};
			//var point = map.fixLatLng(new google.maps.LatLng(rec.data.x, rec.data.y));
			//map.getMap().setCenter(point);
			//map.addMarker(point,mrk,null,null,null,"Ziving en "+rec.data.localidad+"<br/><b> "+rec.data.especialistas+"<div style='font-size: small;'></b><br/>"+rec.data.direccion+"<br/>T: "+rec.data.telefono)+"</div>";
			//
			//Ext.getCmp('verAfiliadoPanel').toggleCollapse(true);
		},
		prepareData: function(data){
			//data.shortName = Ext.util.Format.ellipsis(data.title, 25);
			//var imagen = new String(data.content).match(/src=(.+?[\.jpg|\.gif]")/)[1];
			//data.imagen = (imagen.replace("\"","")).replace("\"","");
			//return data;
		},
	}
});

var detallesDview = new Ext.Panel({
	id			: 'detallesDview',
	//store		: afiliadosSto,
	tpl			: detalleTpl,
	autoScroll	: true,
	height		: 300,
	border		: true,
	tbar	: [
		{
			text		: "Ver todos",
			handler		: function(){
				Ext.getCmp('detallesDview').hide();
				Ext.getCmp('afiliadosDview').show();
			}
		},
		{
			xtype		: "tbseparator"
		},
		{
			text		: "Visitar la Web",
			handler		: function(){
				window.location.href = "whr.php?" + Ext.getCmp('detallesDview').cadena;
			}
		}
	 ],
});

var verAfiliadoPanel = new Ext.Panel( {
	//autoEl: 'div',
	//renderTo: Ext.getBody(),
	//renderTo: 'myPanel',
	//width		: 600,
	autoHeight	: true,
	//height		: 600,
	layout		: 'column',
	border		: true,
	frame		: false,
	padding		: '10px',
	id			: 'verAfiliadoPanel',
	layoutConfig: {
		align: 'strech'
	},
	items		: [
		{
		 	xtype: 'gmappanel',
			id: 'mapa',
			height: 600,
			columnWidth: 0.5,
			zoomLevel: 16,
			gmapType: 'map',
			mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
			mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
			//setCenter: {
			//    geoCodeAddr: 'Pompeyo 4, 25006 Lleida, Spain',
			//    marker: {title: 'Ziving Central'}
			//}
		 }
	],
	columnWidth : 0.75,
	collapsed	: true
});