// este archivo tiene los valores q tendra por defecto el mapa de google y los eventos del mismo
  //variable booelena para verificar si el punto de inicio ya fue agregado 
  
   var esPuntoInicioIngresado = false
   var esPuntoFinalIngresado = false;
   var esPuntoIntermedioIngresado = false;
   var esPuntoCreado = false;
   var puntoIntermedios = 0;
   var tipoPunto = '';
   var listaPolilines = new Array();;
   var PuntoInicialMarker =new Array();;
   var PuntoFinalMarker = new Array();;
   var PuntosIntermediosMarkers = new Array();;
   var TiempoEnPunto = new Array();;
   var cadenaPuntosInermedios = '';
   var tiempoIndex = '';
   var encodedPolyline;
   var esMatris = false;
   var infoWindowHml = "";
   var kml;
   //contadore para los markers de los puntos intermedios
   var mContPI = 0;

 //esta clase sirve para crear controles personalizados
    function CrearControles(){
      CrearControles.prototype.initialize = function(map) {
      var container = document.createElement("div");
      container.innerHTML = CrearControlZoom();
     // this.setButtonStyle_(container);

//      var PinicialInDiv = document.createElement("div");
//      this.setButtonStyle_(PinicialInDiv);
//      container.appendChild(PinicialInDiv );
//      PinicialInDiv.appendChild(document.createTextNode("Punto Inicial"));
//      GEvent.addDomListener(PinicialInDiv , "click", function() {
//      
//       setTipoPunto('inicio');
//       
//       var polyline = new GPolyline([
//       new GLatLng(37.4419, -122.1419),
//       new GLatLng(37.4519, -122.1519)
//       ], "#ff0000", 10);
//       map.addOverlay(polyline);
//      });

//      var PintermedioDiv = document.createElement("div");
//      this.setButtonStyle_(PintermedioDiv);
//      container.appendChild(PintermedioDiv);
//      PintermedioDiv.appendChild(document.createTextNode("Punto Intermedio"));
//      GEvent.addDomListener(PintermedioDiv, "click", function() {
//        esPuntoIntermedioIngresado = false;
//        setTipoPunto('intermedio');
//      });
//      
//      var PfinalDiv = document.createElement("div");
//      this.setButtonStyle_(PfinalDiv);
//      container.appendChild(PfinalDiv);
//      PfinalDiv.appendChild(document.createTextNode("Punto Final"));
//      GEvent.addDomListener(PfinalDiv, "click", function() {
//        setTipoPunto('final');
//      });
//       
//      var PgenerarDiv = document.createElement("div");
//      this.setButtonStyle_(PgenerarDiv);
//      container.appendChild(PgenerarDiv);
//      PgenerarDiv.appendChild(document.createTextNode("Generar Ruta"));
//      GEvent.addDomListener(PgenerarDiv, "click", function() {
//         if(encodedPolyline !=null)
//         {
//            map.removeOverlay(encodedPolyline);
//         }
//         var listaP = enviarListaPuntos();
//         if(listaP != "")
//         {
//            generarLinea(enviarListaPuntos()); 
//         }
//        
//      });
//      
//      var PgenerarMatrisDiv = document.createElement("div");
//      this.setButtonStyle_(PgenerarMatrisDiv);
//      container.appendChild(PgenerarMatrisDiv);
//      PgenerarMatrisDiv.appendChild(document.createTextNode("Generar Matrix"));
//      GEvent.addDomListener(PgenerarMatrisDiv, "click", function() {
//         if(encodedPolyline !=null)
//         {
//            map.removeOverlay(encodedPolyline);
//         }
//         var listaP = enviarListaPuntos();
//         if(listaP != "")
//         {
//             generarMatriz(enviarListaPuntos());
//         }             
//      });
//      var PResetMatrisDiv = document.createElement("div");
//      this.setButtonStyle_(PResetMatrisDiv );
//      container.appendChild(PResetMatrisDiv );
//      PResetMatrisDiv .appendChild(document.createTextNode("Reset"));
//      GEvent.addDomListener(PResetMatrisDiv , "click", function() {
//           reset();         
//      });
      
      //agrega los botones
      map.getContainer().appendChild(container);
      return container;
      }
      
      CrearControles.prototype.getDefaultPosition = function() {
        return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(50,50));
    }
function CrearControlZoom(){
    var controles="";
    controles+="<div style=\"padding:3px 3px 3px 3px;\" >";
    controles+="<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\" >";
    controles+="<tr style=\"vertical-align: center;\">";
    controles+="<td style=\"background-image:url(http://mapealo.com/images/index/leftC.gif);height:38px;background-repeat:no-repeat;width:7px\"></td>";
    controles+="<td class=\"TextoNegro\" style=\"vertical-align: center;\">";
    controles+="<table cellspacing=\"0\" cellpadding=\"0\" style=\"background-image:url(http://mapealo.com/images/index/background_replicant.jpg);height:38px;background-repeat:repeat-x; \" >";
    controles+="<tr style=\"vertical-align: center;\">";
    controles+="<td class=\"TextoNegro\">Zoom:&nbsp;</td>";
    controles+="<td style=\"padding:0 3px 0 0 \"><img  title=\"Zoom In\" src=\"http://mapealo.com/images/index/zoomIn.gif\" width=\"19px\" height=\"18px\" style=\"cursor:pointer \" onclick=\"ObjMap.zoomIn('zoom','zoomStyleActive','zoomStyleInactive');\" /></td>";
    controles+="<td style=\"padding:0 3px 0 0 \">";
    controles+="<table cellpadding=\"0\" cellspacing=\"0\">";
    controles+="<tr style=\"vertical-align: bottom;\">";
//    var alto=28;
//    var posA=2;
//    var i=0;
//    for(i=maxZoom;i>=minZoom;i--){
//        controles+="<td style=\"text-align: center;\"><table cellspacing=\"0\" cellpadding=\"0\"><tr valign=\"bottom\">";
//        controles+="<td onclick=\"ObjMap.zoomVal('zoom','zoomStyleActive','zoomStyleInactive',"+i+",GlobalMinZoom,true,GlobalMinZoom,GlobalMaxZoom);\" class=\"zoomStyleInactive\" id=\"zoom"+i+"\" title=\"Zoom "+i+"\" style=\"height:"+alto+"px; \"></td>";
//        controles+="</tr></table><td>";alto=alto-2;posA=posA+2;
//    }
   controles+="</tr>";
   controles+="</table>";
   controles+="</td>";
   controles+="<td style=\"padding:0 3px 0 3px \"><img style=\"cursor:pointer \" src=\"http://mapealo.com/images/index/zoomOut.gif\" title=\"Zoom Out\" width=\"19px\" height=\"18px\" onclick=\"ObjMap.zoomOut('zoom','zoomStyleActive','zoomStyleInactive');\" /></td>";
   controles+="<td style=\"color:#AEC4E2; font-size:16px \" >&nbsp;|&nbsp;</td>";
//   if(GlobalIdioma=="ing"){
//    controles+="<td class=\"TextoNegro\">&nbsp;Map:&nbsp;</td>";
//   }
//   else{controles+="<td class=\"TextoNegro\">&nbsp;Mapa:&nbsp;</td>";};
   controles+="<td style=\"padding:0 3px 0 0 \"><img id=\"imgMapealo\" src=\"http://mapealo.com/images/index/btnMapealo.gif\" title=\"Mapa Mapealo\" onclick=\"ObjMap.ChangeMap(1);\" style=\"cursor:pointer \" /></td>";
   controles+="<td style=\"padding:0 3px 0 0 \"><img id=\"imgAereo\" src=\"http://mapealo.com/images/index/btnHibrido.gif\" title=\"Mapa Aereo\" onclick=\"ObjMap.ChangeMap(0);\" style=\"cursor:pointer \" /></td>";
   controles+="</tr>";
   controles+="</table>";
   controles+="</td>";
   controles+="<td style=\"background-image:url(http://mapealo.com/images/index/rightC.gif);height:38px;background-repeat:no-repeat;width:7px\"></td>";
   controles+="</tr>";
   controles+="</table>";
   controles+="</div>";
   return controles;
   };
    // setea las propiedades del boton
//    CrearControles.prototype.setButtonStyle_ = function(button) {
////      switch(tipoBoton)
////      {
////        case  ""
////      }
//        
//      button.style.posLeft = 10;
//      button.style.textDecoration = "underline";
//      button.style.color = "#0000cc";
//      button.style.backgroundColor = "white";
//      button.style.font = "small Arial";
//      button.style.border = "1px solid black";
//      button.style.padding = "2px";
//      button.style.marginBottom = "3px";
//      button.style.textAlign = "center";
//      button.style.width = "41px";
//      button.style.height = "172px";
//      button.style.cursor = "pointer";
//      button.style.backgroundImage = "url(../Images/b1.gif)";
////		button.style.cursor.cssText=" Z-INDEX: 101; LEFT: 100px; BACKGROUND-IMAGE: url(../Images/b1.gif); WIDTH: 27px; POSITION: absolute; TOP: 100px; HEIGHT: 30px"	
//    }


}
    //la clase CrearControles hereda de Gcontrol
    CrearControles.prototype = new GControl();



      //inicializacion del mapa  
   var  map = new GMap2(document.getElementById("map_canvas"),
   {   

       size: new GSize(800,650) } );
       map.addControl(new CrearControles());
       map.setCenter(new GLatLng(9.9424746600000002,-84.079656), 8);
//       var customUI = map.getDefaultUI();
//       customUI.maptypes.hybrid = false;
//       map.setUI(customUI);
     
    
    
    //inicializa el evento click del mapa para y envia el creado del overlay
   GEvent.addListener(map, "click", function(overlay,point){
        if(esPuntoCreado == false){
           // map.zoomIn();
        }
        else
        {
            if(point){crearPunto(point);}
        }
 });

 function setTipoPunto(tipo)
 {
    tipoPunto = tipo;
    esPuntoCreado = true;
  
 }
 function setTiempoEnPunto()
 {
    cerrarInfoWindow();
    if(document.getElementById('txtTiempoPunto').value != '')
    {
        TiempoEnPunto[tiempoIndex] = document.getElementById('txtTiempoPunto').value;
    }
    else{TiempoEnPunto[tiempoIndex] = 0;}
    
 }
 function cerrarInfoWindow()
 {
    var infoW = map.getInfoWindow();
    infoW.hide();
 }
 function crearPunto(point){
    switch(tipoPunto)
    {
        case 'inicio':
            if(esPuntoInicioIngresado == false)
            {
                //instacia a la calse GIcon para setear el icono q llevara el marker
                 var iconoMarca = new GIcon(G_DEFAULT_ICON);
                 iconoMarca.image = "Images/IMAGES/punto.png";
                 var tamanoIcono = new GSize(17,17);
                 iconoMarca.iconSize = tamanoIcono;
                 
                 var miMarca = new Marcadores();
                 miMarca.Mapa(map); 
                 miMarca.Punto(point);
                 miMarca.Icono(iconoMarca) ;
                 miMarca.MiMarca(); 
                 esPuntoInicioIngresado = true;
                 esPuntoCreado = false;
           }
          
        break;
        case 'intermedio':
            if(esPuntoIntermedioIngresado == false)
            {
                if(puntoIntermedios <=10)
                {
                     //instacia a la calse GIcon para setear el icono q llevara el marker
                     var iconoMarca = new GIcon(G_DEFAULT_ICON);
                     iconoMarca.image = "Images/IMAGES/punto_a.bmp";
                     var tamanoIcono = new GSize(17,17);
                     iconoMarca.iconSize = tamanoIcono;
                     
                     var miMarca = new Marcadores();
                     miMarca.Mapa(map); 
                     miMarca.Punto(point);
                     miMarca.Icono(iconoMarca) ;
                     miMarca.MiMarca(); 
                     puntoIntermedios += 1;
                     esPuntoIntermedioIngresado = true;   
                     esPuntoCreado = false; 
                    
                }
                else
                {
                    alert('el maximo de puntos inermedios es 10');
                }
                
           }
           
        break;
        case 'final':
                if(esPuntoFinalIngresado == false)
                {
                     var iconoMarca = new GIcon(G_DEFAULT_ICON);
                     iconoMarca.image = "Images/IMAGES/punto_r.bmp";
                     var tamanoIcono = new GSize(17,17);
                     iconoMarca.iconSize = tamanoIcono;
                     
                     var miMarca = new Marcadores();
                     miMarca.Mapa(map); 
                     miMarca.Punto(point);
                     miMarca.Icono(iconoMarca) ;
                     miMarca.MiMarca(); 
                     esPuntoFinalIngresado  = true;
                     esPuntoCreado = false;
              }      
        break;
   }
 }      

//esta clase sirve para la manipulacion de los markers
    
  function Marcadores(){
        //atributos
        var _mapa;
        var _punto;
        var _icono;
      
        //Get propiedades
        this.Punto = SetPunto;
        this.Mapa = SetMapa;
        this.Icono = SetIcono;
        
        //Get eventos
        this.MiMarca =  crearMarca;
       

    
        //set propiedades
        function SetMapa(paramMapa) 
        {
            _mapa = paramMapa;
        }
        function SetPunto(punto)
        {
            _punto = punto;
        }
        function SetIcono(icono)
        {
            _icono = icono;
        }
        
        
        //metodos
       function crearMarca(){

        //crea la instancia del nuevo mapa
            var lat =  _punto.lat();
            var lon =  _punto.lng();

            var center = new GLatLng(lat,lon);
            
            //agrega las caracteristicas del marker
                    
            var marker = new GMarker(center,{icon:_icono ,draggable: true});

           
            //se activan las escuhas para los eventos de arrastre
            GEvent.addListener(marker, "dragstart", function() {
             
              _mapa.closeInfoWindow();
              });

            GEvent.addListener(marker, "dragend", function() {
              //marker.openInfoWindowHtml("Se ha ...");

                 
              });
            switch(tipoPunto)
            {
                 case 'inicio':
                    PuntoInicialMarker[0] = marker;   
                 break;
                 case 'intermedio':
                    PuntosIntermediosMarkers[mContPI] = marker;  
                   //  var html = '<table><tr><td style="width: 207px">Tiempo:<input id="txtTiempoPunto" type="text" style="width: 31px" maxlength="3" onkeypress = "return validarNum(event)"  />minutos;</td></tr><tr><td style="width: 207px"><input id="btnAceptar" type="button" value="Aceptar" onclick="setTiempoEnPunto()" /><input id="btnCancelar" type="button" value="Cancelar" onclick="cerrarInfoWindow()"/></td></tr></table>';
          
                     GEvent.addListener(marker, "click", function() {
                             if(esMatris == true)
                             {
                                   marker.openInfoWindow;
                             }
                             else{
                                     // marker.openInfoWindowHtml(html);
                                tiempoIndex =  marker.Yo;
                                //crea una cadena con los nombres de los marcadores para indexar
                                if(cadenaPuntosInermedios == '')
                                {
                                    cadenaPuntosInermedios =  tiempoIndex;
                                }
                                else{cadenaPuntosInermedios +=  "*"+tiempoIndex;}
                                
                                if(TiempoEnPunto[tiempoIndex] == null)
                                {
                                    TiempoEnPunto[tiempoIndex] = '0';
                                }
                             }
                     
                   
                        
                     });
                    mContPI++;
                 break;
                 case 'final':
                    PuntoFinalMarker[0] =  marker;  
                     GEvent.addListener(marker, "click", function() {
                             if(esMatris == true)
                             {
                                   marker.openInfoWindow;
                             }
                     });
                 break;
            }
            _mapa.addOverlay(marker);
            if(tipoPunto == 'intermedio')
            {
                GEvent.trigger(marker, "click");
            
            }
           
      }
}
        
function generarLinea(latlonCadena)
{
    if(document.getElementById("chbKml").checked ==true)
     {
         PageMethods.generarPolilineaCodificadaRestriccion(latlonCadena,poliline);
     }
     else
     {
        PageMethods.generarPolilineaCodificada(latlonCadena,poliline);
     }
}
function generarMatriz(latlonCadena)
{
    PageMethods.generarMatrisTiempo(latlonCadena,distanciaTiempo);

}
//meuestra los links laterales con la distancia y el tiempo
function distanciaTiempo(cadena)
{
    var dis_tie = cadena.split("&");
    var tiempos =  dis_tie[0].split("*");
    var  distancias =  dis_tie[1].split("*");
    var side_bar_html;
    var tiempo = "";
    var distancia = "";
   
    for(i=0;i<=distancias.length - 1;i++)
    {
        
        tiempo  = tiempos[i].toString();
        distancia = distancias[i].toString();
        if(i != distancias.length-1)
        {
            side_bar_html +=  '<a href="javascript:getPuntoIntermedio(' + i + ')" class="button"><span class="Unidades">Tiempo: ' + tiempo +' ' + 'Distancia: ' +   distancia+ '</span></a><br>';
        }
        else
        {
             side_bar_html +=  '<a href="javascript:getUltimoPunto()" class="button"><span class="Unidades">Tiempo: ' + tiempo +' ' + 'Distancia: ' +   distancia+ '</span></a><br>';
        }
        
    }
    
    
    document.getElementById("side_bar").innerHTML = side_bar_html; 
}
//funcion para buscar el ultimo punto y generar una ruta desde la matris
function getUltimoPunto()
{
    var cadenaLon = "";
    var cadenaLat = "";
    var cadenaTiempo = ""; 
    
    cadenaTiempo = "0"; 
    cadenaLon = PuntoInicialMarker[0].getLatLng().x.toString();
    cadenaLat = PuntoInicialMarker[0].getLatLng().y.toString();
    cadenaLon += '*' +PuntoFinalMarker[0].getLatLng().x.toString();
    cadenaLat += '*' +PuntoFinalMarker[0].getLatLng().y.toString(); 
    cadenaTiempo += '*0'
    
    var cadenaLatLon =  cadenaLat +'&'+cadenaLon +'&'+cadenaTiempo ;
    generarLinea(cadenaLatLon);
  //  esMatris= true;
//    infoWindowHml  = '<table><tr><td style="width: 207px"></td></tr></table>';
//    PuntoFinalMarker[0].bindInfoWindowHtml(infoWindowHml);
  
}
function getPuntoIntermedio(indice)
{
    var cadenaLon = "";
    var cadenaLat = "";
    var cadenaTiempo = ""; 
    
    cadenaTiempo = "0"; 
    cadenaLon = PuntoInicialMarker[0].getLatLng().x.toString();
    cadenaLat = PuntoInicialMarker[0].getLatLng().y.toString();
    cadenaLon += '*' + PuntosIntermediosMarkers[indice].getLatLng().x.toString();
    cadenaLat += '*' + PuntosIntermediosMarkers[indice].getLatLng().y.toString();  
    cadenaTiempo += '*0' ;
    
    var cadenaLatLon =  cadenaLat +'&'+cadenaLon +'&'+cadenaTiempo;
    generarLinea(cadenaLatLon);
//    esMatris= true;
//    infoWindowHml  = '<table><tr><td style="width: 207px">Tiempo:<input id="txtTiempoPunto" type="text" style="width: 31px" maxlength="3" onkeypress = "return validarNum(event)"  />minutos;</td></tr><tr><td style="width: 207px"><input id="btnAceptar" type="button" value="Aceptar" onclick="setTiempoEnPunto()" /><input id="btnCancelar" type="button" value="Cancelar" onclick="cerrarInfoWindow()"/></td></tr></table>';
//    PuntosIntermediosMarkers[0].openInfoWindowHtml(infoWindowHml);
    
}
function poliline(codigo)
{
    if(codigo!="")
    {
         encodedPolyline = new GPolyline.fromEncoded({
        color: "#da160b",
        weight: 2,
        points: codigo.toString(),
        levels: "BBB",
        zoomFactor: 32,
        numLevels: 3});
        map.addOverlay(encodedPolyline);
    }
    else{
        alert('No hay ruta');
    }


}
//esta funcion crea un strin con los X y Y luego los envia al server
function enviarListaPuntos()
{
    var cadenaLon = "";
    var cadenaLat = "";
    var cadenaTiempo = "";
    if(PuntoInicialMarker.length ==1 && PuntoFinalMarker.length ==1 )
    {
    
        cadenaLon = PuntoInicialMarker[0].getLatLng().x.toString();
        cadenaLat = PuntoInicialMarker[0].getLatLng().y.toString();
         var cadenaPI =  cadenaPuntosInermedios.split("*");
        cadenaTiempo = "0";    
        if(PuntosIntermediosMarkers.length >= 1)
        { 
            var totalMarkers = 0 ; 
            totalMarkers = PuntosIntermediosMarkers.length-1;
           

            for(var i = 0; i <=totalMarkers;i++)
            {
            
                cadenaLon += '*' + PuntosIntermediosMarkers[i].getLatLng().x.toString();
                cadenaLat += '*' + PuntosIntermediosMarkers[i].getLatLng().y.toString();     
                cadenaTiempo += '*'+ TiempoEnPunto[cadenaPI[i]].toString();
            
            }
            cadenaLon += '*' +PuntoFinalMarker[0].getLatLng().x.toString();
            cadenaLat += '*' +PuntoFinalMarker[0].getLatLng().y.toString(); 
            cadenaTiempo += '*0' ; 
       }
       else
       {
           cadenaLon += '*' +PuntoFinalMarker[0].getLatLng().x.toString();
           cadenaLat += '*' +PuntoFinalMarker[0].getLatLng().y.toString();  
           cadenaTiempo += '*0' ;
            
       }  
          var cadenaLatLon =  cadenaLat +'&'+cadenaLon +'&'+cadenaTiempo ;
          return cadenaLatLon; 
          //generarLinea(cadenaLatLon); 
         
       
    }
    else
    {
        alert('Debe marcar un punto de inicio y uno final');
        return "";
    }

}
function restriccion()
{
     if(document.getElementById("chbKml").checked ==true)
     {
            kml = new GGeoXml("http://www.tnmgsecure.com/RESTRICCION_VEHICULAR.kml");
           map.addOverlay(kml);
     }
     else{
        map.removeOverlay(kml);
        
     }
    
}
function reset()
{
    
    Array.clear(PuntoInicialMarker);
    Array.clear(PuntoFinalMarker);
    Array.clear(PuntosIntermediosMarkers);
    Array.clear(TiempoEnPunto);
    
    map.clearOverlays();
    
//    listaPolilines = new Array();;
//    PuntoInicialMarker =new Array();;
//    PuntoFinalMarker = new Array();;
//    PuntosIntermediosMarkers = new Array();;
//    TiempoEnPunto = new Array();
    esPuntoInicioIngresado = false
    esPuntoFinalIngresado = false;
    esPuntoIntermedioIngresado = false;
    esPuntoCreado = false;
    puntoIntermedios = 0;
    tipoPunto = '';
    cadenaPuntosInermedios = '';
    tiempoIndex = '';
    encodedPolyline;
    esMatris = false;
    infoWindowHml = "";
   //contador para los markers de los puntos intermedios
   var mContPI = 0;



}
function validarNum(e)
{
    tecla = (document.all) ? e.keyCode : e.which;
    if (tecla == 8) return true;
    patron = /\d/;
    te = String.fromCharCode(tecla);
    return patron.test(te);
}