
<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf8">
        <title>¡Salvalos!</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://localhost: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>	
	
<script>
	//console.log("yes");
    var socket=io.connect("http://localhost:3000");
    
    socket.emit('Mostrar_Localizaciones','enseñame las fotos y sus localizaciones');
    //console.log("siiii");
    //var canvas=document.querySelector('#c');
    var latitud;
    var longitud;
    var map;
    var direc;
	socket.on('Salvemoslos',function(data,img){
		console.log(data);
		if (data<10){
			console.log("aqui debo entrar");
			cont=data;
			console.log(cont);
		}else{
			cont=10;
		}
		
		
		for(i=0;i<=data-1;i++){
			console.log("aqui entro");
			//document.getElementByid('#imagen').src=img[i].img;
			//console.log(img);	
			console.log("coordenadas en el for");
			latitud=img[i].latitud;
			//console.log(latitud);
			longitud=img[i].longitud;
			//console.log(longitud);
			//socket.emit("coordenadas", latitud, longitud);
			
			//document.body.innerHTML+="<div class='center'><img src="+ img[i].foto + " width="+ 320 + " height=" + 240 + "/></div>";	
			var dir= "/rescate";
			//document.body.innerHTML+="<br><div class='center'><a href="+ dir +">Al rescate</a></div>";
			myPos = new google.maps.LatLng(latitud,longitud);
			geocoder = new google.maps.Geocoder();
			
			geocoder.geocode({"latLng": myPos}, function(results, status){
				if (status == google.maps.GeocoderStatus.OK){
				
					if (results[0])
					{
						direc= "<p><strong>Dirección: </strong>" + results[0].formatted_address + "</p>";
					}
					else
					{
						direc= "<p>No se ha podido obtener ninguna dirección en esas coordenadas.</p>";
					}
				}
				else
				{
					direc= "<p>El Servicio de Codificación Geográfica ha fallado con el siguiente error: " + status + ".</p>";
				}
			
			});
			document.body.innerHTML+="<div class='center'><img src="+ img[i].foto + " width="+ 320 + " height=" + 240 + "/></div>";	
			document.body.innerHTML += direc;
			document.body.innerHTML+="<br><div class='center'><a href="+ dir +">Al rescate</a></div>";
			
			
		}	
			
		//document.write("<div id="+mapa+ " style='width:320px; height:240px;'align='center'> </div>"); 
		
	});
	function showMap(latitud,longitud) {
		myPos = new google.maps.LatLng(latitud,longitud);
		console.log("la direccion");
		console.log(myPos);
		
		geocoder = new google.maps.Geocoder();
			geocoder.geocode({"latLng": myPos}, function(results, status)
			{
				if (status == google.maps.GeocoderStatus.OK)
				{
					if (results[0])
					{
						direc= "<p><strong>Dirección: </strong>" + results[0].formatted_address + "</p>";
					}
					else
					{
						direc= "<p>No se ha podido obtener ninguna dirección en esas coordenadas.</p>";
					}
				}
				else
				{
					direc= "<p>El Servicio de Codificación Geográfica ha fallado con el siguiente error: " + status + ".</p>";
				}
			//document.body.innerHTML += "<p><strong>Latitud:</strong> " + latitud + "</p><p><strong>Longitud:</strong> " + longitud + "</p>" + direc;
		
			});
		
					
		} 
		
	
	function Rescate(){
		console.log("Rescate");
	}
   
    </script>
    <div class="center">
		<h3 id="status" style= "font-style:oblique;font-family:cursive;font-size:18px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;">Animales en apuros. ¡¡¡Salvalos!!!<br><br>
		</div>
 </body>
</html>