//clase para crear el html de las carpetas de grupos de categorias
//en formato lista desplegable 
      
//en el caso de la lista, las carpetas de categorias y los recursos se anidan en elementos html 
//en función del grupo, que contiene sus categorías, y las categorias que contienen sus recursos
//{ grupo 1 -> (categoria 1 -> recursos categoria 1, categoria 2 -> recursos categoria 2,...)
//... grupo n -> (categoria x -> recursos categoria x, categoria y -> recursos categoria y)}

//en el caso del formato grafico, los grupos se insertan en un div, 
//las categorias en un div en función del grupo al que pertenecen, las cuales se insertan en un div para todas ellas
//y los recursos se insertaran en un div para cada categoria, y todos ellos en un div para todos los recursos
// grupos{grupo 1, grupo 2....grupo n} 
// categorias{catgrupo1 {cat 1, cat2...}, catgrupo x {cat y, cat z}} 
// recursos{reccat1 { rec1, rec2...}, reccat2 {rec3, rec4}}


function menuKmlGrafico(kmls)
{
    var objetoKmls = kmls;
    var arrayKmls = [];
    var numKmls = 0;
    
    
    var gestor = this;
    gestor.gestorMapa = "";
    gestor.pantalla = "";
    gestor.datosPantalla = {};
    gestor.todosVisible = 1;
	gestor.contenedorPantalla = {};
	gestor.interruptorPantalla = {};
    
    //la pantalla del menu estará dividida en 3 zonas
    var idZonaTitulo = "zonaTitulo";//la parte superior contendrá el título del ámbito seleccionado, kml, grupo o categoría
    var idZonaContenido = "zonaContenido_int";//la parte central, mostrará el contenido del ámbito seleccionado
    var idZonaIconos = "zonaIconos";//la parte central, mostrará el contenido del ámbito seleccionado
    var idZonaDocumentos ="zonaDocumentos";//la parte inferior será un slider donde se podrá alternar entre documentos
    
    for (idKml in objetoKmls)
    {   
        gestor.gestorMapa = objetoKmls[idKml].gestorMapa;
        arrayKmls[numKmls] = objetoKmls[idKml].id;
        numKmls = numKmls+1;
    };
    
          
    function rellenarTitulo(titulo)
    {
        jQuery('#zonaTitulo').html(titulo);
    }//rellenartitulo
    
    function rellenarContenido(tituloContenido,contenido)
    {

	    var tituloContenido = tituloContenido || "";
        var contenido = contenido;
        jQuery('#zonaContenido_int').css({visibility:'hidden'}).html(tituloContenido+contenido);
		
        altoContenido = jQuery('#zonaContenido_int').height();
        
		if (altoContenido > 300) 
		{
			jQuery('#zonaContenido').height(300);
			jQuery('#zonaContenido_int').css({visibility:'visible'})
			
			var distancia = jQuery('#zonaContenido_int').height() - jQuery('#zonaContenido').height();
			
	  
			function getPosicionActual(e, ui) {
			  
				e.stopPropagation();      
				if( ui.position.top < -(distancia)-5 ) {
                	ui.position.top = -(distancia)+'px';
				}
				if( ui.position.top > 0+5 ) {
					ui.position.top = '0px';
				}
	
			}
			
			var opcionesDrag = {
				axis: 'y',
				refreshPositions: true,
				drag: getPosicionActual,
			};
			
			jQuery('#zonaContenido_int').draggable(opcionesDrag);
            
        }
        else 
        {
			jQuery('#zonaContenido').animate({height:altoContenido},'slow')
            jQuery('#zonaContenido_int').css({visibility:'visible',top:0})
        }
        
    }//rellenarcontenido
    
    //metodo que carga los datos en la pantalla
    gestor.cargarPantalla = function()
    {
        var titulo;
        var tituloContenido;
        var contenido;
        var tipo = gestor.datosPantalla.tipo;
        var id = gestor.datosPantalla.kmlId;
        var idGrupo = gestor.datosPantalla.grupoId;
        var idCategoria = gestor.datosPantalla.categoriaId;
        var formato = gestor.datosPantalla.formato;
        var numCarpetas = "";
        
        (id != false) ? numCarpetas = objetoKmls[id].numCarpetasGrupo : numCarpetas = numCarpetas;
        
        switch(gestor.datosPantalla.tipo)
        {
          case 'todos' :
              titulo = crearRuta();
              contenido = crearHtmlCarpetas(objetoKmls); 
              break;
          case 'kml':
              titulo = crearRuta();
              tituloContenido = crearTituloKml();
              if (objetoKmls[id].numCarpetasGrupo > 0)
              {
                contenido = crearHtmlCarpetas(objetoKmls[id].carpetasGrupo);
              }
              else
              {
                var carpetas = {};
                for (idCategoria in objetoKmls[id].carpetasGrupo[id].categorias)
                {
                    var idCat = objetoKmls[id].carpetasGrupo[id].categorias[idCategoria];
                    carpetas[idCat] = (objetoKmls[id].carpetas[idCat]);
                }
                contenido = crearHtmlCarpetas(carpetas); 
              }
          break;
          
          case 'grupo':
              if (idGrupo != '')
              {
                 tituloContenido = crearTituloGrupo();
              }
              else
              {
                 idGrupo = id;
              }
              var carpetas = {};
              for (idCategoria in objetoKmls[id].carpetasGrupo[idGrupo].categorias)
              {
                var idCat = objetoKmls[id].carpetasGrupo[idGrupo].categorias[idCategoria];
                carpetas[idCat] = (objetoKmls[id].carpetas[idCat]);
              }
              contenido = crearHtmlCarpetas(carpetas);
              
          break;
          
          case 'categoria':
              tituloContenido = crearTituloCategoria();
              contenido = crearHtmlMarcadoresCategoria(id,idCategoria);
          break;
        }
        
        rellenarTitulo(titulo);
        rellenarContenido(tituloContenido,contenido);
        crearMenuIconos();
        Cufon.refresh();
    }//cargarpantalla

    gestor.actualizarPantalla = function(datos)
    {
        gestor.datosPantalla = datos;
        gestor.cargarPantalla(gestor.datosPantalla);
    }//actualizarpantalla
    
    //metodo que crea la pantalla
    function crearPantalla()
    {
    
      jQuery('#doscol_col_der').append('<div id="barra_lateral_grafico"><div id="grafico_pantalla"><div id="zonaTitulo"></div><div id="zonaContenido"><div id="zonaContenido_int"></div></div><div id="zonaIconos" class="grafico_zona_iconos"></div><div id="zonaDocumentos" class="grafico_zona_documentos"></div></div"></div>');
	  
	  gestor.contenedorPantalla = jQuery('#barra_lateral_grafico');
	  gestor.interruptorPantalla = jQuery('#grafico_img_formato_lista');
      
      var numKml = 0;
      
      for (id in objetoKmls)
      {
          var kml = objetoKmls[id];
         
          
          //creamos el html con el título e iconos del kml
          jQuery('#zonaDocumentos').append('<div id="grafico_slider_cont_'+kml.id+'" class="grafico_slider_cont_documento"><img id="grafico_slider_icono_kml_'+kml.id+'" class="grafico_slider_img"  src="/cgi-bin2/rec/iconos/googlemaps_nuevo/kml/'+kml.id+'.png" alt="'+kml.nombre+'" /><p class="grafico_slider_tit"><span class="grafico_slider_tit_txt">'+kml.nombre+'</span></p></div>');
          
          enlazarIcono('grafico_slider_icono_kml_'+kml.id,kml.id,'kml');
          
          numKml++;
      };
      
      //inicializaremos la pantalla mostrando el primer kml de la lista
     datosPantalla = {
        tipo:'todos',
        kmlId:false,
        grupoId:false,
        categoriaId:false,
        formato:'lista'
     };

      gestor.actualizarPantalla(datosPantalla);
        
    }//crearpantalla
    
    
    function crearMenuIconos()
    {
        var iconoMostrarOcultar = "";
        var iconoZoom = "";
        var iconoMostrarIconos = "";
        var iconoMostrarLista = "";
        var iconoSubirNivel ="";
      
        var formato = gestor.datosPantalla.formato;
        var tipo = gestor.datosPantalla.tipo;
        var categoriaId = gestor.datosPantalla.categoriaId;
        var grupoId = gestor.datosPantalla.grupoId;
        var kmlId = gestor.datosPantalla.kmlId;
        var tipoSuperior = "";
        var idTipoSuperior = "";
        
        var numGrupos = "";
        (kmlId != false) ? numGrupos = objetoKmls[kmlId].numCarpetasGrupo : numGrupos = 0;
        
        var idTipo = "";
        switch (tipo)
        {
            case 'todos':
              idTipo = false;
              tipoSuperior = false;
              idTipoSuperior = false;
            break;
            case 'kml':
              idTipo = gestor.datosPantalla.kmlId;
              tipoSuperior = "todos";
              idTipoSuperior = false;
            break;
            case 'grupo':
              idTipo = gestor.datosPantalla.grupoId;
              tipoSuperior = "kml";
              idTipoSuperior = gestor.datosPantalla.kmlId;
            break;
            case 'categoria':
              idTipo = gestor.datosPantalla.categoriaId;
              if(numGrupos > 0)
              {
                tipoSuperior = "grupo";
                idTipoSuperior = gestor.datosPantalla.grupoId;
              }
              else
              {
                tipoSuperior = "kml";
                idTipoSuperior = gestor.datosPantalla.kmlId;  
              }
            break;
        }
      
        
        iconoMostrarOcultar = '<div class="menu_iconos_icono menu_mostrarocultar"><img class="menu_icono" id="menu_icono_mostrarocultar" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_ocultar.png" alt="Mostrar / ocultar los recursos pertenecientes a este elemento" /></div>';
        
        iconoZoom = '<div class="menu_iconos_icono menu_zoom"><img class="menu_icono" id="menu_icono_zoom" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_zoom.png" alt="Zoom alrededor de todos los recursos pertenecientes a este elemento" /></div>';
          
        if (tipo=='todos')
		{
        iconoSubirNivel = '<div class="menu_iconos_icono menu_subir_nivel"><img class="menu_icono_off" id="menu_icono_subir" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_subir_nivel_off.png" alt="Mostrar elementos de nivel superior" /></div>';
        }
        else 
        {
        iconoSubirNivel = '<div class="menu_iconos_icono menu_subir_nivel"><img class="menu_icono" id="menu_icono_subir" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_subir_nivel_on.png" alt="Mostrar elementos de nivel superior" /></div>';
        }
          
        if (formato=='iconos' && tipo!='categoria')
        {
          iconoMostrarIconos = '<div class="menu_iconos_icono menu_mostrar_iconos"><img class="menu_icono menu_icono_off" id="menu_icono_iconos" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_mostrar_iconos_off.png" alt="Mostrar elementos en formato icono" /></div>';
          iconoMostrarLista = '<div class="menu_iconos_icono menu_mostrar_lista"><img class="menu_icono" id="menu_icono_lista" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_mostrar_lista_on.png" alt="Mostrar elementos en formato lista" /></div>';
        }
        else  if (formato=='lista' && tipo!='categoria')
        {
          iconoMostrarIconos = '<div class="menu_iconos_icono menu_mostrar_iconos"><img class="menu_icono" id="menu_icono_iconos" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_mostrar_iconos_on.png" alt="Mostrar elementos en formato icono" /></div>';
          iconoMostrarLista = '<div class="menu_iconos_icono menu_mostrar_lista"><img class="menu_icono menu_icono_off" id="menu_icono_lista" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_mostrar_lista_off.png" alt="Mostrar elementos en formato lista" /></div>';
        }
        else if(tipo=='categoria')
        {
          iconoMostrarIconos = '<div class="menu_iconos_icono menu_mostrar_iconos"><img class="menu_icono menu_icono_off" id="menu_icono_iconos" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_mostrar_iconos_off.png" alt="Mostrar elementos en formato icono" /></div>';
          iconoMostrarLista = '<div class="menu_iconos_icono menu_mostrar_lista"><img class="menu_icono menu_icono_off" id="menu_icono_lista" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_mostrar_lista_off.png" alt="Mostrar elementos en formato lista" /></div>';
        }
        
		//guardamos todo el html en una variable
        var iconos = iconoMostrarOcultar + iconoZoom + iconoMostrarIconos + iconoMostrarLista + iconoSubirNivel;
        //la insertamos en su contenedor en la página
		jQuery('#'+idZonaIconos).html(iconos);
        
		//desenlazamos todos los posibles eventos asociados a cada icono del menú
		jQuery('.menu_icono').each(function()
        {
            var idIcono = jQuery(this).attr('id');
            desEnlazarIcono(idIcono);
        });
        
        //en el caso de la categoria, no hay opción de mostrar iconos o listado para los recursos, solo listado
        if (tipo!='categoria')
        {
            if (formato=='iconos')
            {
              enlazarIcono('menu_icono_lista',idTipo,tipo,'lista');
            }
            else if (formato=='lista')
            { 
              enlazarIcono('menu_icono_iconos',idTipo,tipo,'iconos');
            }
        }
        
        //eventos para cada icono
        switch(tipo)
        {
            case 'todos':
                enlazarIconoMostrar('todos','menu_icono_mostrarocultar',false);
                enlazarIconoZoom('todos','menu_icono_zoom',false);
            break;
            case 'kml':
                enlazarIconoMostrar('kml','menu_icono_mostrarocultar',kmlId);
                enlazarIconoZoom('kml','menu_icono_zoom',kmlId);
                enlazarIcono('menu_icono_subir',idTipoSuperior,tipoSuperior,formato);
            break;
            
            case 'grupo':
                enlazarIconoMostrar('grupo','menu_icono_mostrarocultar',grupoId);
                enlazarIconoZoom('grupo','menu_icono_zoom',grupoId);
                enlazarIcono('menu_icono_subir',idTipoSuperior,tipoSuperior,formato);
            break;
            
            case 'categoria':
                enlazarIconoMostrar('categoria','menu_icono_mostrarocultar',categoriaId);
                enlazarIconoZoom('categoria','menu_icono_zoom',categoriaId);
                enlazarIcono('menu_icono_subir',idTipoSuperior,tipoSuperior,formato);
                desEnlazarIcono('menu_icono_lista');
                desEnlazarIcono('menu_icono_iconos');
            break;
        }
    }//crearmenuiconos
    
    function crearRuta()
    {
       var id = "";
       var nombre = "";
       
       if (objetoKmls[gestor.datosPantalla.kmlId]) 
       {
           id = objetoKmls[gestor.datosPantalla.kmlId].id;
       }
       else
       {
           id = false;
       }

       (id != false) ? nombre = objetoKmls[gestor.datosPantalla.kmlId].nombre : nombre = 'Callejero interactivo';
        
       var titulo =  '<div class="grafico_tit_pantalla_wrapper"><p class="grafico_pantalla_tit"><span class="grafico_pantalla_tit_txt">'+nombre+'</span></p><img class="grafico_img_formato" id="grafico_img_formato_lista" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_formato_lista.png" alt="Cambiar formato del menú a árbol de carpetas" /></div>';
       
       var contenedor = '<div class="grafico_cont_tit_pantalla">'+titulo+'</div>';
	   
       return contenedor;
    }//crearruta
  
    function crearTituloKml()
    {
       var id = objetoKmls[gestor.datosPantalla.kmlId].id;
       var nombre = objetoKmls[gestor.datosPantalla.kmlId].nombre;
        
       var titulo =  '<div class="grafico_tit_kml_wrapper"><p class="grafico_kml_tit"><img class="grafico_icono_tit_kml" id="icono_kml_'+id+'" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/kml/'+id+'.png" alt="'+nombre+'" /><span class="grafico_grupo_tit_txt">'+nombre+'</span></p></div>';
       
       var contenedor = '<div class="grafico_cont_tit_kml">'+titulo+'</div>';
       
       return contenedor;
    }//creartitulokml
    
    function crearTituloGrupo()
    {
        var kmlId = objetoKmls[gestor.datosPantalla.kmlId].id;
        var id = objetoKmls[gestor.datosPantalla.kmlId].carpetasGrupo[gestor.datosPantalla.grupoId].id;
        var nombre = objetoKmls[gestor.datosPantalla.kmlId].carpetasGrupo[gestor.datosPantalla.grupoId].nombre;
                
        var titulo = '<div class="grafico_tit_grupo_wrapper"><p class="grafico_grupo_tit"><img class="grafico_icono_tit_grupo" id="icono_grupo_'+id+'" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/grupos/'+id+'.png" alt="'+nombre+'" /><span class="grafico_grupo_tit_txt">'+nombre+'</span></p></div>';
    
        var contenedor = '<div class="grafico_cont_tit_grupo">'+titulo+'</div>';
        
        return contenedor;
        
    }//creartitulogrupo
    
    function crearTituloCategoria()
    {
        var id = objetoKmls[gestor.datosPantalla.kmlId].carpetas[gestor.datosPantalla.categoriaId].id;
        var nombre = objetoKmls[gestor.datosPantalla.kmlId].carpetas[gestor.datosPantalla.categoriaId].nombre;
        var formato = gestor.datosPantalla.formato;
        
        var titulo =  '<div class="grafico_tit_categoria_wrapper"><p class="grafico_categoria_tit"><img class="grafico_icono_tit_categoria" id="icono_categoria_'+id+'" src="/cgi-bin2/rec/iconos/googlemaps_mun/'+id+'.png" alt="'+nombre+'" /><span class="grafico_categoria_tit_txt">'+nombre+'</span></div>';
        
        var contenedor = '<div class="grafico_cont_tit_categoria">'+titulo+'</div>';
        
            
       return contenedor;
    }//creartitulocategoria
    
    function crearHtmlCarpetas(padreElemento)
    {
      
      var html = "";
      var numElementos = 0;
      var num = 0;
      var tipo = "";
      
      switch (gestor.datosPantalla.tipo)
      {
          case 'todos':
          tipo = 'kml';
          break;
          case 'kml':
			  if (objetoKmls[gestor.datosPantalla.kmlId].numCarpetasGrupo > 0)
			  {
				tipo = 'grupo';
			  }
			  else
			  {
				tipo = 'categoria';
			  }
          break;
          case 'grupo':
          tipo = 'categoria';
          break;
          case 'categoria':
          tipo = 'recursos';
          break;
      }
      
      for (elemento in padreElemento)
      {
            numElementos++;
      }
       
      for (elemento in padreElemento)
      {
          var objetoElemento = padreElemento[elemento];  
          
          switch(gestor.datosPantalla.formato)
          {
              case 'lista':
              
                //clase del contenedor que servirá para establecer en las css si es el primero, el último o interior
                var claseContenedor = 'grafico_cont_'+tipo;
                
                (num==0) ? claseContenedor = claseContenedor +' '+claseContenedor+'_top' : claseContenedor = claseContenedor;
                (num == numElementos-1) ? claseContenedor = claseContenedor +' '+claseContenedor+'_bottom' : claseContenedor = claseContenedor;
                (numElementos == 1) ? claseContenedor = claseContenedor+' '+claseContenedor+'_top_bottom' : claseContenedor = claseContenedor;
  
                //icono para mostrar u ocultar el elemento y sus hijos
                var iconoMostrarElemento = "";
                
                (objetoElemento.visible == 0) ? iconoMostrarElemento = 'ico_mostrar.png' : iconoMostrarElemento = 'ico_ocultar.png';
                
                htmlIconoMostrarElemento = '<img class="grafico_'+tipo+'_img grafico_'+tipo+'_img_mostrar" id="grafico_mostrar_'+objetoElemento.id+'" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/'+ iconoMostrarElemento +'" alt="Mostrar / ocultar en el mapa" />';
                
                //icono para hacer zoom en el elemento y sus hijos
                var htmlIconoZoomElemento = '<img class="grafico_'+tipo+'_img grafico_'+tipo+'_img_zoom" id="grafico_'+tipo+'_zoom_'+objetoElemento.id+'" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_zoom.png" alt="Zoom en este elemento" />';
                
                //icono que representa el elemento
                //si es una categoria de los recursos turisticos, le añadimos un fondo blanco al icono
                //si es un recurso, no existira icono
                var htmlIconoElemento = "";
                if (gestor.datosPantalla.tipo != 'categoria')
                {
                    htmlIconoElemento = '<img class="grafico_icono_'+tipo+'" id="grafico_icono_'+tipo+'_'+objetoElemento.id+'" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/'+tipo+'/'+objetoElemento.id+'.png" alt="'+objetoElemento.nombre+'" />';
                }
                
                //html completo del elemento
                html = html + '<div id="'+claseContenedor+'_'+objetoElemento.id+'" class="'+claseContenedor+'">' + htmlIconoMostrarElemento + htmlIconoZoomElemento+'<p class="grafico_'+tipo+'">' + htmlIconoElemento + '<span id="grafico_'+tipo+'_'+objetoElemento.id+'" class="grafico_'+tipo+'_txt">'+objetoElemento.nombre+'</span></p></div>';
                
              break;
              
              case 'iconos':
              default:
              
                //en el caso del listado en formato iconos, añadimos una condición para el caso de los recursos
                //puesto que los iconos de categorias no tienen fondo, les añadimos un fondo blanco como en el resto de los iconos
                //mediante un div que envuelve al icono
                if(gestor.datosPantalla.tipo == 'grupo' && gestor.datosPantalla.kmlId == 'kml_recursos')
                {             
                html = html + '<div class="grafico_cont_icono_'+tipo+'" id="'+objetoElemento.id+'"><div class="grafico_icono_'+tipo+'_wrapper"><img id="grafico_icono_'+tipo+'_'+objetoElemento.id+'" class="grafico_icono_'+tipo+'" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/'+tipo+'/'+objetoElemento.id+'.png" alt="'+objetoElemento.nombre+'" /></div><p class="grafico_'+tipo+'_txt">'+objetoElemento.nombre+'</p></div>';
                }
                else
                {
                html = html + '<div class="grafico_cont_icono_'+tipo+'" id="'+objetoElemento.id+'"><img id="grafico_icono_'+tipo+'_'+objetoElemento.id+'" class="grafico_icono_'+tipo+'" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/'+tipo+'/'+objetoElemento.id+'.png" alt="'+objetoElemento.nombre+'" /><p class="grafico_'+tipo+'_txt">'+objetoElemento.nombre+'</p></div>';
                }
                
              break;
              
          }//switch
          
          if (gestor.datosPantalla.tipo != 'categoria')
          {
            enlazarIcono('grafico_icono_'+tipo+'_'+objetoElemento.id,objetoElemento.id,tipo);
          }
          enlazarIconoZoom(tipo,'grafico_'+tipo+'_zoom_'+objetoElemento.id,objetoElemento.id);
          enlazarIconoMostrar(tipo,'grafico_mostrar_'+objetoElemento.id,objetoElemento.id);
          
          num++;

      }//for

      return html;
    }//crearHtmlCarpetas
      
    //metodo privado para crear el html de los marcadores de cada categoria
    function crearHtmlMarcadoresCategoria(idKml,idCategoria)
    {
        var objetoMarcadores = objetoKmls[idKml].marcadoresPorCategoria[idCategoria];
        var htmlMarcadores = "";
        var numMarcadores = 0;
        var numMarcador = 0;
        
        for (var idMarcador in objetoMarcadores)
        {
            numMarcadores++;
        }
        for (var idMarcador in objetoMarcadores)
        {
          var objetoMarcador = gestor.gestorMapa.marcadores[objetoMarcadores[idMarcador]];
  
          
          var claseContenedor = 'grafico_cont_marcador';
          
          if (numMarcador==0)
          {
              claseContenedor = claseContenedor + ' grafico_cont_marcador_top';
          }
          
          if (numMarcador == numMarcadores-1)
          {
              claseContenedor = claseContenedor + ' grafico_cont_marcador_bottom';
          }
          
          if (numMarcadores == 1)
          {
              claseContenedor = 'grafico_cont_marcador grafico_cont_marcador_top_bottom';
          }
                 
          htmlMarcadores = htmlMarcadores + '<div id="marcador_'+objetoMarcador.id+'" class="'+claseContenedor+'"><img class="grafico_marcador_img grafico_marcador_img_mostrar" id="grafico_mostrar_'+objetoMarcador.id+'" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_ocultar.png" alt="Mostrar / ocultar en el mapa" /><img class="grafico_marcador_img grafico_marcador_img_zoom" id="grafico_marcador_zoom_'+objetoMarcador.id+'" src="/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_zoom.png" alt="Zoom en este recurso" /><p class="grafico_marcador"><span id="grafico_marcador_'+objetoMarcador.id+'" class="grafico_marcador_txt">'+objetoMarcador.nombre+'</span></p></div>';
                 
          //añadimos al span del marcador el evento click, con el que reproduciremos el click
          //del marcador correspondiente sobre el mapa
                 
          //añadimos al icono de mostrar/ocultar el evento click, para mostrar u ocultar
          //el marcador correspondiente sobre el mapa
          //es importante pasar como parametro en el evento, el objeto Marcador actual
          //puesto que así mantememos en el ámbito del evento, el objeto correcto
          enlazarIconoMarcadorClick(objetoMarcador);
          enlazarIconoZoom('marcador','grafico_marcador_zoom_'+objetoMarcador.id,objetoMarcador.id);
          enlazarIconoMostrar('marcador','grafico_mostrar_'+objetoMarcador.id,objetoMarcador.id);
          
          numMarcador++;
                                     
      }//for
      
      return htmlMarcadores;    
            
    }//crearMarcadores
	
	//metodo que a partir de un id de elemento y su tipo, obtiene el objeto elemento
    function obtenerElemento(tipo,idElemento)
    {
      var elemento = "";
      
      //como puede haber varios kmls, es necesario determinar a cuál de ellos pertenece el elemento actual
      var kmlId = "";
      
      if (tipo == 'kml')
      {
          kmlId = idElemento;
      }
      else if(gestor.datosPantalla.kmlId != false)
      {
          kmlId = gestor.datosPantalla.kmlId;
      }
      else
      {
          for (kml in objetoKmls)
          {
              var objetoKml = objetoKmls[kml];
              
              if (!!objetoKml.carpetas[idElemento])
              {
                  kmlId = objetoKml.id;
              } 
              else if (!!objetoKml.carpetasGrupo[idElemento])
              {
                  kmlId = objetoKml.id;
              }
          }
      }
      
      switch(tipo)
      {
          case 'categoria':     
              elemento = objetoKmls[kmlId].carpetas[idElemento];
              break;
              
          case 'grupo':
              elemento = objetoKmls[kmlId].carpetasGrupo[idElemento];
              break;
          
          case 'kml':
              elemento = objetoKmls[kmlId];
              break;
              
          case 'todos':
              var elemento = objetoKmls;
              break;
          }
          
      return elemento;
    }//obtenerElemento
    
    //metodo que a partir de un elemento y su tipo, obtiene los id's de los marcadores correspondientes
    //en un array
    function obtenerMarcadores(tipo,idElemento)
    {
      var arrayIdsMarcadores = [];
	  var elemento = obtenerElemento(tipo,idElemento);
      
      switch(tipo)
      {
          case 'todos':
             
              for (idDocumento in elemento)
              {
                  var marcadoresKml = elemento[idDocumento].marcadores;
                  
                  for (idMarcador in marcadoresKml)
                  {
                     arrayIdsMarcadores.push(marcadoresKml[idMarcador]);
                  }

              }
              break;
		  
		  default:
          arrayIdsMarcadores = elemento.marcadores;
              break;

       }
          
       return arrayIdsMarcadores;
    }//obtenerMarcadores
    
    function desEnlazarIcono(idNodo)
    {
      jQuery('#'+idNodo).die('click');
      jQuery('#'+idNodo).unbind('click');
    }//desenlazaricono
    
    //metodo privado que servirá para crear el funcionamiento de los iconos de cada kml, grupo, o categoria
    function enlazarIcono(idNodo,id,tipo,formato)
    {
        jQuery('#'+idNodo).die('click');

        jQuery('#'+idNodo).live('click',{id:id,tipo:tipo,formato:formato},function(e)
        {
            var tipo = e.data.tipo;
            var KmlId = gestor.datosPantalla.kmlId;
            var GrupoId = gestor.datosPantalla.grupoId;
            var CategoriaId = gestor.datosPantalla.categoriaId;
            var formato = e.data.formato || gestor.datosPantalla.formato;
            
            switch(tipo)
            {
                case 'todos':
                  KmlId = false;
                  GrupoId = false;
                  CategoriaId = false;
                break;
                
                case 'kml':
                KmlId = e.data.id;
                break;
                
                case 'grupo':
                if (objetoKmls[KmlId].numCarpetasGrupo > 0)
                {
                  GrupoId = e.data.id;
                }
                break;
                
                case 'categoria':
                CategoriaId = e.data.id;
                break;
            }
            
            datosPantalla = {
                  tipo:tipo,
                  kmlId:KmlId,
                  grupoId:GrupoId,
                  categoriaId:CategoriaId,
                  formato:formato
            };

            gestor.actualizarPantalla(datosPantalla);
        })
    }//enlazaricono
    
    //metodo que aplica al icono y nombre del recursos el evento click en el mapa al hacer click
    function enlazarIconoMarcadorClick(objetoMarcador)
    {
        var objetoMarcador = objetoMarcador;
        jQuery('#grafico_marcador_'+objetoMarcador.id).live('click',{objetoMarcadorId:objetoMarcador.id},function(e)
        {
            //ejecutamos el metodo del  gestor de mapas que dispara un click en el marcador
            //que se le pasa como parámetro
            gestor.gestorMapa.clickMarcador(e.data.objetoMarcadorId);

        });
    }//enlazarIconoMarcadorClick
	
	function enlazarIconoZoom(tipo,idNodo,idElemento)
    {
    //evento para realizar zoom sobre todos los recursos de las categorias del grupo

        jQuery('#'+idNodo).die('click');                                                                                                       
                                                                                                               
        jQuery('#'+idNodo).live('click',{tipo:tipo,idElemento:idElemento},function(e)
        {
            //recogemos el objeto marcador a partir del evento
			var tipo = e.data.tipo;
			var idElemento = e.data.idElemento;
			
            var arrayIdMarcadores = [];
			
			if (tipo == 'marcador') 
			{
				arrayIdMarcadores.push(idElemento)
			}
			else
			{
				arrayIdMarcadores = obtenerMarcadores(tipo,idElemento);
			}
            
           	//el mapa establecerá los límites alrededor del marcador cuyo id le pasamos
            gestor.gestorMapa.calculaLimitesMapa(arrayIdMarcadores);
        });
    }//enlazarIconoTodosZoom
    
	//funcion que establece el icono correspondiente a mostrar/ocultar un elemento determinado
	//si el parametro icono existe, la llamada se realiza desde el icono de la barra de iconos
	//si el parametro elemento existe, la llamada se realiza desde la funcíon que comprueba los iconos
	//de los elementos hijos de aquel en el que se ha hecho click para mostrar ocultar
	function cambiarIconoMostrar(estado,idIcono,idElemento) 
	{
		var estado = estado;
		var idElemento = idElemento;
		var idIcono = idIcono;
		var idNodo = "";
		
		//si pasamos idnodo, almacenamos el valor; sino, lo construimos a partir de idelemento
		//generalmente, si hay idnodo es que el click proviene de la barra de iconos
		//si no, proviene de los iconos del listado de kml, grupos, categorias o recursos
		
		if (idIcono != false)
		{
			idNodo = '#'+idIcono;
		}
		else 
		{
			idNodo = '#grafico_mostrar_'+idElemento;
		}
		
		//en función del estado del marcador, mostraremos un icono u otro
		if (estado == 1)
		{
			jQuery(idNodo).attr('src','/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_ocultar.png');
		}
		else
		{
			jQuery(idNodo).attr('src','/cgi-bin2/rec/iconos/googlemaps_nuevo/ico_mostrar.png');
		}
    }//cambiarIconoMostrar
    
    function enlazarIconoMostrar(tipo,idIcono,idElemento)
    {
        jQuery('#'+idIcono).die('click');
        
        jQuery('#'+idIcono).live('click',{tipo:tipo,idElemento:idElemento},function(e,forzarModo)
        {
            //variable que recoge el objeto html en el que hemos hecho click
            var icono = jQuery(e.target); 
            //recogemos los datos del elemento actual a partir del evento
            var idElemento = e.data.idElemento;
            var tipo = e.data.tipo;
            //estado de visibilidad el elemento
            var elemento = "";
			
			(tipo == 'marcador') ? elemento = gestor.gestorMapa.marcadores[idElemento] : elemento = obtenerElemento(tipo,idElemento);
            
			var estadoElemento = "";
            
            if (tipo == 'todos') 
			{
				estadoElemento = gestor.todosVisible;
			} 
			else if (tipo == 'marcador')
			{
				estadoElemento = elemento.marcadorIcono.getVisible();
			}
			else
			{
				estadoElemento = elemento.visible;
			}

            //variable que recogerá los marcadores que vamos a mostrar u ocultar
            var marcadoresId = [];
			(tipo == 'marcador') ? marcadoresId[0] = idElemento : marcadoresId = obtenerMarcadores(tipo,idElemento);
                       
            //el parametro modo nos indica si queremos forzar el mostrar u ocultar las categorias y recursos
            //necesario si este evento se dispara porque hacemos click en el icono de mostrar/ocultar kml
            //si no, alternaremos entre mostrar u ocultar en función del estado
            var modo = "";
            forzarModo ? modo = forzarModo : modo = 'alternar'; 
            
            //cuando hacemos click en el icono de mostrar/ocultar, la finalidad de la función consiste en 
            //recoger todos los marcadores que pertenecen a ese elemento y mostrarlos u ocultarlos
            //y establecer el parámetro 'visible' del elemento y sus hijos
            //función que recoge el id de un elemento y establece el valor de visibilidad para él 
            //y sus elementos hijos de forma recursiva
            function cambiarEstadoElemento(idElementoCambiar,estado,tipo)
            {
                var elementoCambiar = obtenerElemento(tipo,idElementoCambiar);
                
                if (tipo == 'todos')
                {
                    gestor.todosVisible = estado 
                }
                else
                {
                    elementoCambiar.visible = estado; 
                    cambiarIconoMostrar(estado,false,idElementoCambiar);
                }

                
                switch(tipo)
                {
                    case 'todos':
                        
                        for (idKml in elementoCambiar)
                        {
                            var idElementoKml = elementoCambiar[idKml].id;
                            cambiarEstadoElemento(idElementoKml,estado,'kml')
                        }
                        break;
                    
                    case 'kml':
                        
                        
                        for (idGrupo in elementoCambiar.carpetasGrupo)
                        {
                            var idElementoGrupo = elementoCambiar.carpetasGrupo[idGrupo].id;
                            cambiarEstadoElemento(idElementoGrupo,estado,'grupo')
                        }
                        break;
                    
                    case 'grupo':

                        var idsCategoriasGrupo = elementoCambiar.categorias;
                        
                        for (numCategoria in idsCategoriasGrupo)
                        {
                            var idElementoCategoria = idsCategoriasGrupo[numCategoria];
                            cambiarEstadoElemento(idElementoCategoria,estado,'categoria')
                        }
                        break;
                    
                    case 'categoria':
					    
						var marcadoresCategoria = elementoCambiar.marcadores;
						
						for (idMarcador in marcadoresCategoria)
                        {
                             cambiarIconoMostrar(estado,false,marcadoresCategoria[idMarcador]);
                        }
                        break;
                }
                
            }//cambiarestadoelemento
                      
            function mostrarElemento()
            {
				if (tipo != 'marcador')
				{
					//almacenamos el valor del estado de visibilidad del elemento
					cambiarEstadoElemento(idElemento,1,tipo); 
					
					//hacemos click en cada marcador mostrandolo
					for (marcador in marcadoresId)
					{
						var idMarcador = marcadoresId[marcador];
						gestor.gestorMapa.mostrarMarcadores(idMarcador);
					}  
				}
				else
				{
					gestor.gestorMapa.mostrarMarcadores(idElemento);
				}
				
                //cambiamos el icono en función del estado
                cambiarIconoMostrar(1,icono.attr('id'),false);
            }
                      
            function ocultarElemento()
            {
				if (tipo != 'marcador')
				{
					//almacenamos el valor del estado de visibilidad del elemento
					cambiarEstadoElemento(idElemento,0,tipo); 
					
					//hacemos click en cada marcador ocultándolo
					for (marcador in marcadoresId)
					{
						var idMarcador = marcadoresId[marcador];
						gestor.gestorMapa.ocultarMarcadores(idMarcador);
					}
				}
				else
				{
					gestor.gestorMapa.ocultarMarcadores(idElemento);
				}
									
				//cambiamos el icono en función del estado
				cambiarIconoMostrar(0,icono.attr('id'),false);
            }
                      
            function alternarElemento()
            {   
                //emulamos el evento click en cada uno de ellos
                //si el grupo está visible
                (estadoElemento == 1) ? ocultarElemento() :  mostrarElemento();
            }
            
            //comprobamos si hay que forzar el evento mostrar u ocultar, y si no, alternamos
            switch(modo)
            {
                case 'mostrar':
                mostrarElemento();
                break;
	                          
                case 'ocultar':
                ocultarElemento();
                break;
                          
                case 'alternar':
                alternarElemento();
                break;
            }
	            
	      
	        });
	                   
	}//enlazariconomostrar
	    
  crearPantalla();
}//menuKmllista