visorGrid = function(vPadre, vMiVentana, config){
	Ext.apply(this, config);
	this.config = config;
	// DOM
	this.el = vMiVentana.el;
	// Ventana padre en este caso la ventana de la aplicacion
	this.vPadre = vPadre;
	
	// sete al aventana del objeto
	this.vMiVentana   = vMiVentana;

	var dh = Ext.DomHelper;
	
	// crea las divisiones para la lista y detalle

 	var xBoxBlue = dh.append(this.el.dom, {tag: 'div', cls:'x-box-blue', style : config.layout.style}, true); YAHOO.util.Dom.generateId(xBoxBlue);
		var xBoxTl = dh.append(xBoxBlue.dom, {tag: 'div', cls:'x-box-tl'}, true); YAHOO.util.Dom.generateId(xBoxTl);
			var xBoxTr = dh.append(xBoxTl.dom, {tag: 'div', cls:'x-box-tr'}, true); YAHOO.util.Dom.generateId(xBoxTr);
				var xBoxTc = dh.append(xBoxTr.dom, {tag: 'div', cls:'x-box-tc'}, true); YAHOO.util.Dom.generateId(xBoxTc);
		var xBoxMl = dh.append(xBoxBlue.dom, {tag: 'div', cls:'x-box-ml'}, true); YAHOO.util.Dom.generateId(xBoxMl);
			var  xBoxMr = dh.append(xBoxMl.dom, {tag: 'div', cls:'x-box-mr'}, true); YAHOO.util.Dom.generateId(xBoxMr);
			
				//var xBoxMc = dh.append(xBoxMr.dom, {tag: 'div', cls:'x-box-mc'}, true); YAHOO.util.Dom.generateId(xBoxMc);
		var xBoxBl = dh.append(xBoxBlue.dom, {tag: 'div', cls:'x-box-bl'}, true); YAHOO.util.Dom.generateId(xBoxBl);
			var xBoxBr = dh.append(xBoxBl.dom, {tag: 'div', cls:'x-box-br'}, true); YAHOO.util.Dom.generateId(xBoxBl);
				var xBoxBc = dh.append(xBoxBr.dom, {tag: 'div', cls:'x-box-bc'}, true); YAHOO.util.Dom.generateId(xBoxBc);
 
	this.miDiv = dh.append(xBoxMr.dom, {tag: 'div', cls:'x-box-mr'}, true); 
	YAHOO.util.Dom.generateId(this.miDiv);
		
		this.divRegistros = dh.append(this.miDiv.dom, {tag: 'div' }, true);
		YAHOO.util.Dom.generateId(this.divRegistros);
			
		//Detalle
		this.divDetalle = dh.append(this.miDiv.dom, {tag: 'div', cls:'detalleDatos'}, true);
		YAHOO.util.Dom.generateId(this.divDetalle);
		//Botonera del detalle
			this.divDetalleBotonera = dh.append(this.divDetalle.dom, {tag: 'div'}, true);
			YAHOO.util.Dom.generateId(this.divDetalleBotonera);
			
			//detalle del registro
			this.divDetalleRegistro = dh.append(this.divDetalle.dom, {tag: 'div'}, true);
			YAHOO.util.Dom.generateId(this.divDetalleRegistro);
			
	// prepara el divRegistros para presentar los datos		
	this.crearVistaDatos();	
	
	vPadre.ventana.beginUpdate();
	
	//crea el layout del objeto
	this.layout = new Ext.NestedLayoutPanel(vMiVentana.ventana, config.layout );
	// se subcribe al evento destroy del content
	this.layout.on('destroy', this.destroy ,this, true);

	// agrega el panel en el centro de la ventana principal 
	vPadre.ventana.add(config.region, this.layout);
	
	//Agrega el panel central de la ventana de trabajo 
	this.panelListaDatos = vMiVentana.ventana.add('center', new Ext.ContentPanel(this.divRegistros.id, {  fitToFrame:true
																			   					,title: config.descripcion} ) );
	// Carga la botonera
	var toolbar =  this.botonera();
	
	//Detalle del registro
    this.panelDetalleDatos = new Ext.ContentPanel(this.divDetalle.id, { title: "Detalle.",
												  						fitToFrame:true,
																		resizeEl:this.divDetalle.id}
												  );
	
   	vMiVentana.ventana.add('south', this.panelDetalleDatos);
	
	this.recuperar();
	
	vPadre.ventana.restoreState();
   	vPadre.ventana.endUpdate();		

 };

visorGrid.prototype =  {

	crearVistaDatos	: function(){
		
	var el = this.divRegistros;
	if (this.config.objeto){ 
		this.config.objeto.el = this.divDetalleRegistro; 
	}
	var config = this.config;
	this.Grid = new grid(el, config);
	this.grid = this.Grid.grid;
	this.ds = this.Grid.ds;
	this.cm = this.Grid.cm;
	
	// se subscribe al evento rowselect
	this.grid.selModel.on('rowselect', this.verDetalle.createDelegate(this));
	
	// despues de cargar el grid selecciona el primer registro
	this.ds.addListener('load',this.grid.selModel.selectFirstRow, this.grid.selModel, true);
	
	this.ds.on('load', this.alCargarDatos, this, true);
	}, 

	alCargarDatos	: function(){
		//Si no retorna datos limpia la seccion de detalle
        if(this.ds.getTotalCount() < 1){
       		this.divDetalleRegistro.update('No se encontraron datos de ' +  this.config.descripcion.toLowerCase());
      	}
		
        // Actualiza el texto en la barra de estado
		this.vPadre.sur().setContent(this.config.descripcion);	
		// Actualiza el tutor
		var um = this.vPadre.este().getEl().getUpdateManager();
		um.setRenderer({
				 	 render : function(el, o){
						 var contenido = o.responseText.htmlDecode();
						 el.update(contenido,true);
				     }
				    });
		// si tiene tutorial lo carga
//		if (this.config.tutorial.url) {
//			um.update(this.config.tutorial.url);
//		}
		
        this.vPadre.sur().getEl().addClass('done');		
	},
	
	recuperar		: function(){
		var me = this
		if (!me.vMiVentana){
			me = this.objeto;
		}		
		me.vMiVentana.ventana.beginUpdate();
		me.vPadre.sur().setContent('cargando ' + me.config.proxy.url + '...');
		Ext.LoadMask.prototype.msg = 'Cargando ' + me.config.descripcion.toLowerCase();
		me.ds.load(me.config.proxy);

		me.vMiVentana.ventana.restoreState();
        me.vMiVentana.ventana.endUpdate(false);
	},
	
	botonera		: function(){
		 var tb = new Ext.Toolbar(this.divDetalleBotonera.id);
		 for(var boton in this.config.botones){
			if  (!isNaN(boton)) {
				this.config.botones[boton].objeto = this;
				tb.addButton(this.config.botones[boton]);
				tb.addSeparator();
			}
		 }
		 
		 // agrega el boton de ayuda si esta definida en el espacio global
		 if (YAHOO.gestorAST.editaAyuda){
			var botonEditarAyuda = {
								id:YAHOO.util.Dom.generateId().replace(/yui-gen/g,'botonAyuda'), 
								text: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;',
								cls:'x-btn-text-icon editarAyuda',																			
								tooltip: {text:'Editor de ayuda contextual para ' +  this.config.descripcion.toLowerCase(), title:'Editar ayuda.', autoHide:true},
								handler: gestorAST.editarAyuda,
								objeto : this
							};
			
			tb.addButton(botonEditarAyuda);
			tb.addSeparator();
		}
		 // agrega el boton de ayuda si esta definida en el espacio global
		 if (YAHOO.gestorAST.verAyuda){
			
			var botonVerAyuda = {
									id:YAHOO.util.Dom.generateId().replace(/yui-gen/g,'botonAyuda'), 
									text: '',
									cls:'x-btn-text-icon ayuda',																			
									tooltip: {text:'Ayuda para ' + this.config.descripcion.toLowerCase() , title:'Ayuda.', autoHide:true},
									handler: gestorAST.verAyuda,
									objeto: this
									};
			tb.addButton(botonVerAyuda);
		   }			
		 return tb
	},
	
	ultimoRegistro	: function(){
	 	return this.ultimoRegistroVisitado;
	},

	id				: function(){
	 return this.config.id;
	},

    verDetalle		: function(){
		
		this.panelDetalleDatos.setTitle('Detalle de ' + this.config.descripcion.toLowerCase());
		
		var row = this.grid.getSelections();
		if (row){
			// asume que en el primer elemento que viene es el id del registro
			var id = row[0].id;
			var lnk = row[0].data.KEY;
			
			// almacena el ultimo registro visitado
			this.ultimoRegistroVisitado = {id : id, lnk : lnk };
		
			// si viene un objeto 
			if(this.config.objeto) { 
					this.config.objeto.padre = this.config.id;
					// crea el objeto indicado
					var objetoEl = this.config.objeto.el;
					var objetoConfig = this.config.objeto.config;
					// informa a la instancia quien es su padre			
					objetoConfig.padre = this.config.id;					
					objetoConfig.key = lnk;
					var objetoClase = this.config.objeto.clase;
					// verifica si se ha creado el objeto
					if (! this.config.objeto.instancia){	
						// crea el objeto
						this.config.objeto.el.update('');
						this.config.objeto.instancia = eval( 'new ' + objetoClase + '( objetoEl,  objetoConfig )' ); 
					}
						else{		
							// muestra el objeto
							this.config.objeto.instancia.mostrar(objetoConfig);
					}
			}
				else {	
						// actualiza el contenido especificado la url
						var um = getEl(this.divDetalleRegistro.id).getUpdateManager();
						um.disableCaching = true;
						um.showLoadIndicator = false;	
						um.setRenderer({
									 render : function(el, o){
										 var contenido = o.responseText.htmlDecode();
										 // pasa el id del elemento contenedor a la pagina alojada
										 contenido = contenido.replace(/%el%/g,el.id);
										 el.update(contenido,true);
									 }
									});
						um.update(lnk);			
			}
			
		}
    },
	
	getEl			: function (){
		return this.layout.getEl();
	},
	
	activar			: function(){
		this.vPadre.ventana.showPanel(this.layout.getEl().id);
		this.recuperar();
	},
	
	destroy 		: function(){
	
		if(this.config.objeto) {
			this.config.objeto.instancia = null;
		}
	
	}
	
};