capsadorForm = function (el, config ){
	this.key = null;
	this.config = config;
	var dh = Ext.DomHelper;

	// crea las diviciones del objeto colapsadorForm
	this.el = el;
	
	YAHOO.util.Dom.generateId(this.el);
	this.elBotonera = dh.append(el.dom, {tag: 'div'}, true); 
	YAHOO.util.Dom.generateId(this.elBotonera);
	// verifica si no viene un form
	if (!config.form){
			//var el = Ext.get(this.el.id);
			config.form  = {name:'', id:''};
	}
	// genera el identificador del form
	config.form.name = YAHOO.util.Dom.generateId().replace(/yui-gen/g,'form');
	config.form.id = config.form.name;	
	// crea el formulario en el documento
	this.elForm = dh.append(this.el.id, {tag: 'form', name: config.form.name, id: config.form.id, action: config.form.action, method : config.form.method}, true);
	YAHOO.util.Dom.generateId(this.elForm);
	// crea las divicion de las secciones dentro del form
	this.elSecciones = dh.append(this.elForm.dom, {tag: 'div'}, true); 
	YAHOO.util.Dom.generateId(this.elSecciones);
	// crea el toolbar
	if (config.botones) {
		this.el.addClass('detalleDatos');
		this.toolbar = this.botonera(config.botones);
	}
	// despliega el colapsador
	this.mostrar(config);
 };

capsadorForm.prototype = {

	mostrar 	: function(config){
		
		//verifica si es la misma clave no carga el contenido
		if (this.key == config.key) {
			return;
		}
		
		this.key = config.key;
		var el = this.elSecciones;
		
		this.um = el.getUpdateManager();
		el.update('');
		
		this.um.key = config.key;
		this.key = config.key;
		this.um.navRapida = config.navRapida;
		this.um.form = config.form;
		this.um.padre = config.padre;
		this.um.disableCaching = true;
		this.um.showLoadIndicator = false;	
		
		this.um.setRenderer({
						render : function(el, o, um, callback )
						{   
							   var cadDatosForm = o.responseText.htmlDecode();
							   um.JSON = cadDatosForm;
							   
							   var datosForm = Ext.util.JSON.decode(cadDatosForm);
							   // rescatar la data
							   um.datosForm = datosForm;
							   um.actualiza = function(seccion){
										/*datosForm[seccionForm].*/
										datosForm[seccion].umSeccion.update(datosForm[seccion].webservice);									
							   }
	
								// recorre la data
								for(var seccionForm in datosForm){
									
									// obtiene los datos del capsadorForm por grupo de opciones
									var datosSeccionForm = datosForm[seccionForm];
	
									//crea template para imprimir el encabezado   
									
									var tmpForm = new Ext.Template('<div class="dl-group-colapForm"><div class="dl-expand-icon-colapForm">' +
																		 '</div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{0}</div>');
									var tituloSeccionForm = tmpForm.append(el.dom, [datosForm[seccionForm].titulo], true);
												
									var tmpSeccionForm = new Ext.Template('<div class="dl-group-colapForm-bd"></div>');
									var cuerpoSeccion = tmpSeccionForm.append(el.dom , [], true);
									YAHOO.util.Dom.generateId(cuerpoSeccion);
									// rescata el id Dom de la seccion
									datosForm[seccionForm].id = cuerpoSeccion.id;
									
									var umSeccion = Ext.get(cuerpoSeccion.id).getUpdateManager();
									umSeccion.disableCaching = true;
									umSeccion.showLoadIndicator = false;
									umSeccion.form = um.form;
									umSeccion.padre = um.padre;
									umSeccion.setRenderer({
														  render : function(el, o, um, callback ) {
															  var contenido = o.responseText.htmlDecode();
															  contenido = contenido.replace(/%el%/g,el.id);
															  contenido = contenido.replace(/%form%/g,um.form.name);
															  contenido = contenido.replace(/%objeto%/g,um.padre);
															  el.update(contenido, true);
														  }
														  });
									datosForm[seccionForm].webservice += um.key ;
									umSeccion.update(datosForm[seccionForm].webservice);
									// crea el objeto para animar el capsadorForm expande y contrae
									var animaSeccion = new colapsador(tituloSeccionForm, cuerpoSeccion, um.navRapida);
									datosForm[seccionForm].colapsador = animaSeccion;
									//datosForm[seccionForm].umSeccion = umSeccion;
									
									// funcion que permite recargar la seccion del colapsador
									datosForm[seccionForm].umSeccion = umSeccion;
									datosForm[seccionForm].actualiza = function(){
										/*datosForm[seccionForm].*/
										umSeccion.update(datosForm[seccionForm].webservice);									
									}
									seccionForm === config.grupoExpandido ? animaSeccion.expande() : animaSeccion.colapsa();
								}
							}
					   });
		
		this.um.update(this.config.webservice);		
		
	},
	
	actualizar 		: function(webservice){
		// rescata la data anteriormente creada
		this.datosForm = this.um.datosForm;
		
		// direcciona a controlador para realizar la actualizacion
		this.um = this.el.getUpdateManager();
		// rescata la data anterior para que este disponible dentro del render
		this.um.datosForm = this.datosForm;
		this.um.form = this.config.form;
		this.um.padre = this.config.padre;
		this.um.disableCaching = true;
		this.um.showLoadIndicator = false;	
		this.um.navRapida = this.config.navRapida;
		this.um.setRenderer({
						render : function(el, o, um, callback )
						{   
							   var cadDatosForm = o.responseText.htmlDecode();
							   um.JSON = cadDatosForm;
							   
							   var datosForm = Ext.util.JSON.decode(cadDatosForm);
	

							   um.actualiza = function(seccion){
								this.datosForm[seccion].umSeccion.update(this.datosForm[seccion].webservice);									
							   }

								// recorre la data
								for(var seccionForm in datosForm){
									
									var cuerpoSeccion = um.datosForm[seccionForm];
									var umSeccion = Ext.get(cuerpoSeccion.id).getUpdateManager();
									umSeccion.form = um.form;
									umSeccion.padre = um.padre;									
									umSeccion.disableCaching = true;
									umSeccion.showLoadIndicator = false;
									umSeccion.setRenderer({
														  render : function(el, o, um, callback ) {
															  var contenido = o.responseText.htmlDecode();
															  contenido = contenido.replace(/%el%/g,el.id);
															  contenido = contenido.replace(/%form%/g,um.form.name);
															  contenido = contenido.replace(/%objeto%/g,um.padre);
															  el.update(contenido, true);
														  }
														  });
									// actualiza la seccion
									umSeccion.update(datosForm[seccionForm].webservice);
									// expande la seccion actualizada
									//cuerpoSeccion.colapsador.expande();
								}
							}
					   });
		
		this.um.update(webservice);		
		
	},
	
	postRegistrar	: function(){
		if (this.config.urlPostRegistrar) this.actualizar(this.config.urlPostRegistrar + this.key);
	},	
	
	botonera	: function(){
		 var tb = new Ext.Toolbar(this.elBotonera.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
	},

	form		: function(){
		return this.config.form;
	}
};