<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>¡Al rescate!</title>
	<link href="css/style_menu.css" rel="stylesheet" type="text/css" />
	<link href="icon.css" media="screen" rel="stylesheet" type="text/css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
	<script src="http://192.168.1.5:3000/socket.io/lib/socket.io.js"></script>
	<script src="http://j.maxmind.com/app/geoip.js"></script>
	<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div class="wrap">
	<nav>
		<ul class="menu">
			
			<li><a href="/usuario"><span class="icon-github"> </span>Perfil</a>
			</li>
			<li><a href="/Anuncios"><span class="icon-users"></span>Donaciones</a>
			<li><a href="#"><span class="icon-film"> </span>Adopciones</a>
				<ul>
					<li><a href="/video">Hacer foto</a></li>
					<li><a href="/index">Hacer video</a></li>
					<li><a href="/upload">Subir archivo</a></li>
					<li><a href="/mos_foto">Animales en adopcion</a></li>
					<li><a href="/mos_video">Animales felices</a></li>
					
				</ul>
			</li>
			<li><a href="#"><span class="icon-home"></span>¿Quienes somos?</a>
				<ul>
					<li><a href="/Adopcion">Como adoptar</a></li>
					<li><a href="/Busqueda">Busqueda</a></li>
					<li><a href="#">¿Quieres ayudar?</a></li>
						<ul>
							<li><a href="/Socio">Socio</a></li>
							<li><a href="/Simpatizante">Simpatizante</a></li>
							<li><a href="/Voluntario">Voluntario</a></li>
						</ul>
				</ul>
			</li>
			<li><a href="#"><span class="icon-location"> </span>Animales perdidos</a>
				<ul>
					<li><a href="/Foto_loc">Foto con localización</a></li>
					<li><a href="/Galeria_Loc">¡Al rescate!</a></li>
				
				</ul>
			</li>
			<li><a href="#"><span class="icon-users"> </span>Códigos QR</a>
				<ul>
					<li><a href="/Lec_qr">Lector qr</a></li>
					<li><a href="/Cod_qr">Generar qr</a></li>
				</ul>
			</li>
			
			
			<li><a href="/logout">Salir</a></li>
			
		</ul>
		<div class="clearfix"> </div>	
	</nav>
	</div>	
	<div class="center">
	<h3 id="status">Ver listado de usuarios para enviar un mensaje</h3>
	<input type="button" value="Comunicacion" onclick="Comunicacion()"/>
	</div>	
<div class="center" id='mapa' style='width:320px; height:240px;'align="center"> </div>
<canvas id='c'width="320" height="240"> </canvas>

<script>
if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(coordenadas, errores);
        }else{
            alert('Oops! Tu navegador no soporta geolocalizaciÃ³n. BÃ¡jate Chrome, que es gratis!');
        }
var socket=io.connect("http://192.168.1.5:3000");


socket.emit('Distancia',"calculamos distancia");

var lat;
var lon;
socket.on('LatLon',function(latitud,longitud){
	console.log(latitud);
	console.log(longitud);
	lat=latitud;
	lon=longitud;
});
var map;
var myPos;
var directionsRenderer;
var directionsService = new google.maps.DirectionsService();
	 	
     
     function coordenadas(position) {
     	latitud = position.coords.latitude;
        longitud = position.coords.longitude;
        precision = position.coords.accuracy;  
        showMap(latitud,longitud);
        travelToAddress();
        alert("Datos con una precisiÃ³n de " + precision/1000 + " km, " + precision + " metros");
     }
     function errores(err) {
        if (err.code == 0) {
           alert("Oops! Algo ha salido mal");
        }
        if (err.code == 1) {
           alert("Oops! No has aceptado compartir tu posiciÃ³n");
        }
        if (err.code == 2) {
           alert("Oops! No se puede obtener la posiciÃ³n actual");
        }
        if (err.code == 3) {
           alert("Oops! Hemos superado el tiempo de espera");
        }
     }

	function showMap(lat, longi) {
		
		myPos = new google.maps.LatLng(lat,longi);
		var myOptions = {
		  zoom: 13,
		  center: myPos,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		};
		map = new google.maps.Map(document.getElementById("mapa"), myOptions);
		var marker = new google.maps.Marker({
		    position: myPos,
		    title:"Hola Mundo",
		    draggable:true,
		    animation: google.maps.Animation.DROP
		});
		marker.setMap(map);
		directionsRenderer = new google.maps.DirectionsRenderer();
		directionsRenderer.setMap(map);
		
		}
function comunicacion(){
	socket.emit("ListadoUsuarios","quiero usuarios");
	socket.on("LosUsuarios",function(datos,num){
		var i;
		for(i=0;i<num;i++){
			document.body.innerHTML+="<p align='center'><font size='2' face='Courier'>Nombre Usuario"+ datos[i].usuario + "</p><br>";
			document.body.innerHTML+="<p align='center'><a href=/Mensaje/"+datos[i].usuario+"/>Enviarmensaje</a></p><br>";
		}
	});
};
	
function travelToAddress(){

  //Obtenemos la direccion
  //destino=document.forms[0].address.value;
  console.log("entro");
  directionsService = new google.maps.DirectionsService();
  console.log("lo hace");
  var destino= new google.maps.LatLng( lat,lon);
  console.log(destino);
  // opciones de busqueda
  var request = {
   
    origin: myPos,
    destination: destino,
    travelMode: google.maps.DirectionsTravelMode.DRIVING,
    };
console.log("si");
directionsService.route(request,getRuta);
}

function getRuta(result, status){
	console.log("entro2");
    if (status == google.maps.DirectionsStatus.OK) {
       directionsRenderer.setDirections(result);
       console.log("si");
    } else {
       error("Ha ocurrido un error debido a : " + status);
    }
}


function error(msg) {
alert(msg);
}
</script>
</body>
</html>