<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1252">
    <meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0">
    <meta http-equiv="cache-control" content="max-age=0">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT">
    <meta http-equiv="pragma" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    
  	html, body {
      height:100%;
      background-color: #f1f1f1;
    }

    
    header {
      background-color: #666;
      padding: 15px;
      text-align: center;
      font-size: 35px;
      color: white;
      height: auto;
    }
     
    article {
      float: left;
      padding: 10px;
      width: 65%;
      background-color: black;
      height: 100%;
      border: #f1f1f1 2px solid;
    }
      
    nav {
      padding: 15px;
      width: 100%;
      background-color: #f1f1f1;
      height: auto;
    }
    

	summary {
	  float: right;
	  background-color: #f1f1f1;
	  text-align: center;
      font-size: 30px;
	  width: 32%;
      height: auto;
	  color: black;
	  border: black 5px solid;
	}
	
    aside {
      width: 100%;
      background-color: #f1f1f1;
      height: 100%;
    }
  
    </style>
  </head>
  <body>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
		    function Refresh() { 
          var f_inicio = $('input[name="fecha_inicio"]').val();
          var f_termino = $('input[name="fecha_termino"]').val();
          var h_inicio = $('input[name="hora_inicio"]').val();
          var h_termino = $('input[name="hora_termino"]').val();
          var distancia_minima=$('input[name="d_minima"]').val();
          var distancia_maxima=$('input[name="d_maxima"]').val();
          if (f_inicio == '' || f_termino == ''){
            alert("debe ingresar fecha de inicio y termino")
                  return false;
                  }
          if(parseInt(distancia_maxima) < parseInt(distancia_minima)){
            alert("La distancia maxima debe ser mayor o igual a la distancia minima")
            return false;
          }        
          
          if (f_inicio + h_inicio<f_termino + h_termino){
             if ($('input[name="Descarga"]').is(':checked')) {
               mapa.location='/get_table?fecha_inicio='+$('input[name="fecha_inicio"]').val()+"&fecha_termino="+$('input[name="fecha_termino"]').val()+"&hora_inicio="+$('input[name="hora_inicio"]').val()+"&hora_termino="+$('input[name="hora_termino"]').val()+"&d_minima="+$('input[name="d_minima"]').val()+"&d_maxima="+$('input[name="d_maxima"]').val(); 
             }
             else {          
               mapa.location='/get_map?fecha_inicio='+$('input[name="fecha_inicio"]').val()+"&fecha_termino="+$('input[name="fecha_termino"]').val()+"&hora_inicio="+$('input[name="hora_inicio"]').val()+"&hora_termino="+$('input[name="hora_termino"]').val()+"&d_minima="+$('input[name="d_minima"]').val()+"&d_maxima="+$('input[name="d_maxima"]').val(); 
             }
          }
          else {
            alert("La fecha y hora de termino debe ser mayor a la fecha y hora de inicio")
          }
          return false;
        }
		</script>
    <header>
      <h3>Viajes interregionales</h3>
    </header>
    <nav>
      <form>Fecha inicio: <input name="fecha_inicio" min="{{fecha_min}}" max="{{fecha_max}}"

          type="date"> Hora inicio<input name="hora_inicio" value="00:00" step="3600"

          type="time"> Fecha termino: <input name="fecha_termino" min="{{fecha_min}}"

          max="{{fecha_max}}" type="date"> Hora termino<input name="hora_termino"

          value="00:00" step="3600" type="time"> Distancia minima: <input name="d_minima"

          min="0" max="4500" step="5" value="0" oninput="this.form.amountInput_d_minima.value=this.value"

          type="range"><input name="amountInput_d_minima" min="0" max="4500" value="0"

          oninput="this.form.d_minima.value=this.value" type="number"> (km)
        Distanica maxima: <input name="d_maxima" min="0" max="4500" step="5" value="0"

          oninput="this.form.amountInput_d_maxima.value=this.value" type="range">
        <input name="amountInput_d_maxima" min="0" max="4500" value="0" oninput="this.form.d_maxima.value=this.value"

          type="number"> (km) <input name="Descarga" value="yes" type="checkbox">Descargar
        tabla: viajes entre comunas <button type="button" onclick="Refresh()"

          ;=""> Buscar </button> </form>
      <p id="result"></p>
    </nav>
    <article> <iframe name="mapa" id="mapa" src="/show_map" style="border: 0; width: 100%; height: 100%;"></iframe></article>
    <summary>
	
	<b>Manual de uso</b>
	
	</summary>
    <aside>
	<br><br>
				<P ALIGN="center"><b>&iexcl;Bienvenid@&#33;</b> </P>
        <P ALIGN="justify"> Puedes visualizar en el mapa los viajes realizados entre regiones.
o descargar una tabla con el detalle de los viajes entre todas las comunas para tu selecci&oacute;n.</P>
        <P ALIGN="justify">Para ello, por favor selecciona en el formulario superior los
        siguientes valores:  </P>
      <P ALIGN="justify"> <b>- Fecha y hora inicio:</b> Indica el momento en que se empiezan a
        contabilizar los viajes. </P>
        <P ALIGN="justify"> - <b>Fecha y hora de termino:</b> Indica el momento en que se termina de
        contabilizar los viajes. </P>
     <P ALIGN="justify"> <b>- Distancia m&iacute;nima:</b> Indica la distancia m&iacute;nima necesaria para
        considerar un viaje. </P>
     <P ALIGN="justify"> <b>- Distancia m&aacute;xima:</b> Indica la distancia m&aacute;xima necesaria para considerar
        un viaje. </P> 
        
      	Por ejemplo, una selecci&oacute;n de: <br><br>
        
        <b>Fecha inicio:</b> 	  14-05-2015 <br>
        <b>Hora inicio: </b>	  	10:00<br>
        <b>Fecha termino:</b> 	  15-05-2015<br>
        <b>Hora termino: </b>	  12:00<br>
        <b>Distancia minima:</b> 200 km<br>
        <b>Distancia maxima:</b> 400 km<br>
       
       	 <P ALIGN="justify"> Muestra todos los viajes realizados entre las 10:00 del d&iacute;a 14-05-2015 y las 12:00 del d&iacute;a 15-05-2015, de una distancia de entre 200 km y 400 km.  </P>
      <P ALIGN="justify"> Una vez generado el mapa, utiliza icono en la esquina superior derecha del mapa para seleccionar las regiones que quieras visualizar </P>
      
    </aside>
    
  </body>
</html>
