menu = function (el, datos, config ){
//	 config.grupoExpandido, config.click,
	 
	Ext.apply(this, config);
	
	// verifica si el menu lo crea en el dom 
	if ( ! config.creaDom ) {
		this.JSON = datos;
		this.datosMenu = Ext.util.JSON.decode(this.JSON );
		
	} 
	  else {
		
			this.el = Ext.get(el);
			this.url = datos;			
			this.um = this.el.getUpdateManager();
			this.um.navRapida = config.navRapida;
			this.um.disableCaching = true;
			this.um.showLoadIndicator = false;
			this.um.objeto = this;
			
			this.um.setRenderer({
							render : function(el, o, um, callback )
							   {   
								   var cadDatosMenu = o.responseText.htmlDecode();
								   um.JSON = cadDatosMenu;
								   
								   var datosMenu = Ext.util.JSON.decode(cadDatosMenu);
		
									// recorre la data
									for(var grupoMenu in datosMenu){
										
										// obtiene los datos del menu por grupo de opciones
										var datosGrupoMenu = datosMenu[grupoMenu];
		
										// template de menu
										var strTemplate = '<div class="dl-group-hd">{0}<div class="dl-expand-icon"></div></div>';
										var tmpMenu = new Ext.Template(strTemplate);
										
										var tituloGrupoMenu = tmpMenu.append(el.dom, [grupoMenu], true);
										// imprime el tooltips del menu
										Ext.QuickTips.tips(Ext.apply({target: tituloGrupoMenu.id }, { text: datosGrupoMenu.nombre, title:[grupoMenu], autoHide:true}));
	
										//imprime el cuerpo del las opciones
										var tmpCuerpoMenu = new Ext.Template('<div class="dl-group-bd"></div>');
										var cuerpoMenu = tmpCuerpoMenu.append(el.dom, [], true);
										// crea el objeto animar el menu expande y contrae
										var animaMenu = new colapsador(tituloGrupoMenu, cuerpoMenu, um.navRapida);
										
										// recorre las opciones del grupo de menu
										for(var i = 0, len = datosGrupoMenu.opciones.length; i < len; i++) {
											
											var f = datosGrupoMenu.opciones[i];
											f.datosGrupoMenu = grupoMenu;
											
											
											strTemplate = '<div class="dl-group-child"><div class="dl-selection">' 
														+ '<a id="{id}"><span class="menuContenido">{nombre}<br></span></a></div></div>';
														
											// si esta en modo desarrollo imprime el icono de desarrollo.			
											if (YAHOO.gestorAST.modoDesarrollo) {
												strTemplate = '<div class="dl-group-child"><div class="dl-selection">' 
															+ '<a id="{id}"><div class="desarrollo"></div><span class="menuContenido">{nombre}<br></span></a></div></div>';
											}											
											// imprime la opcion
											var tmpOpcion = new Ext.Template(strTemplate);
											var item = tmpOpcion.append(cuerpoMenu.dom, f, true);
											
											if((i+1) % 2 == 0) item.addClass('dl-selection-alt');
											
											// agrega el listener para el click y mouseover en el grupo de menu	
											if (YAHOO.gestorAST.modoDesarrollo) item.addListener('dblclick', um.objeto.modoDesarrollo);
											
											item.addListener('click', config.click, f, true);
											if (config.mouseover) {
												item.mon('mouseover', config.mouseover, f, true);
											}
											
											item.addClassOnOver('dl-selection-over');
										}
										// deja la primera opcion abierta
										grupoMenu === config.grupoExpandido ? animaMenu.expande() : animaMenu.colapsa();
									}
								}
						   });
			this.um.update(this.url);		
		   }
	

};

menu.prototype = {

	creaDatosMenu : function(opcion){
		if (!this.datosMenu){
			this.datosMenu = Ext.util.JSON.decode(this.um.JSON );
		}
	},
	
	valoresEnCero : function(opcion){
		
		this.creaDatosMenu();
		for(var grupoMenu in this.datosMenu){
					
			var datosGrupoMenu = this.datosMenu[grupoMenu];
			// recorre las opciones del grupo de menu
			for(var i = 0, len = datosGrupoMenu.opciones.length; i < len; i++) {
				datosGrupoMenu.opciones[i].valor = 0;
				
			}
		}		
		
	},
	
	seleccionar : function(id){
		
		for(var grupoMenu in this.datosMenu){
					
			var datosGrupoMenu = this.datosMenu[grupoMenu];
			// recorre las opciones del grupo de menu
			for(var i = 0, len = datosGrupoMenu.opciones.length; i < len; i++) {
				if (datosGrupoMenu.opciones[i].id == id){
					datosGrupoMenu.opciones[i].valor = 1;
				}
				
			}
		}		
		
	},

	modoDesarrollo : function(){
		alert('modo desarrollo.');
	},
		
	seleccionado : function(){
		for(var grupoMenu in this.datosMenu){
					
			var datosGrupoMenu = this.datosMenu[grupoMenu];
			// recorre las opciones del grupo de menu
			for(var i = 0, len = datosGrupoMenu.opciones.length; i < len; i++) {
				if (datosGrupoMenu.opciones[i].valor == 1){
					return datosGrupoMenu.opciones[i];
				}
				
			}
		}		
		
		
	}
	
	
};