<!DOCTYPE html>
<html>
<head>
	<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>		
	<meta charset="utf-8">
	<title>Foto y localización</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://localhost:3000/socket.io/lib/socket.io.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.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">
	<p id="status"style= "font-style:oblique;font-family:cursive;font-size:22px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;">Animal en apuros</p>
	<progress id="progress" style="visibility: hidden;"> </progress><br/>
	<input class="uiButton" id="hacer_foto" value="Hacer foto" type="button" />
	<input class="uiButton" id="guardar_foto" value="Guardar foto y localizacion" type="button"/>
	</br>
	<video id='v' width="320" height="240"> </video>
	<img src="" id='img' width='320' height='240'>
	<center><div id='mapa' style='width:320px; height:240px;'align="center"> </div><center>
	<canvas id='c'width="320" height="240"></canvas>
</div>
<script>
	window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || navigator.msGetUserMedia;
 
window.requestAnimationFrame = (function(){
     return  window.requestAnimationFrame       || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame    || 
              window.oRequestAnimationFrame      || window.msRequestAnimationFrame;
    })();	
	if (navigator.geolocation) {
				navigator.geolocation.getCurrentPosition(coordenadas, errores);
	}else{
		alert('Oops! Tu navegador no soporta geolocalización');
	}
	var video=document.querySelector('#v');
	if(navigator.getUserMedia){
		    	navigator.getUserMedia({video:true}, function(stream){ //extraemos la info de la camara y lo añadimos al vídeo
		        	video.src = window.URL.createObjectURL(stream); //al atributo src que es donde el video recibe la info a reproducir
		           		//como el streaming no se puede pasar como tal tenemos que crear un objeto url lo que retorna una url adecuada
		            video.play();//para empezar a reproducir
		    },function(e){console.log(e);});
		    }
		   else alert('Tiene un navegador obsoleto, descargue chrome!');
	video.addEventListener('loadedmetadata',function(){
		canvas.width=video.videoWidth;
		console.log(canvas.width);
		console.log(video.videoHeight);
		canvas.height=video.videoHeight;
		},false); // el false es para que el listener aparezca como apagado
		      
	var socket=io.connect("http://localhost:3000");
	
		
		var canvas=document.querySelector('#c');
		var boton=document.querySelector('#hacer_foto');
		var img=document.querySelector('#img');
		var img2=document.querySelector('#img2');
		var boton_socket=document.querySelector('#guardar_foto');
		var imgData;		            
		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);
			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 posicionn");}
			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,
				draggable:true,
				animation: google.maps.Animation.DROP
			});
			marker.setMap(map);
			directionsRenderer = new google.maps.DirectionsRenderer();
			directionsRenderer.setMap(map);
			}             
			
		    //el siguiente listener ejecuta una funcion una vez los datos de la camara
		    //se hayan cargado en el vídeo.
		    //Ya q el obj video de html tiene el vento loadedmetadata que indica que se han cargado
		    //los datos del video        
		      
	    boton.addEventListener('click',function(){
	    	console.log("entro");
			canvas.getContext('2d').drawImage(video,0,0); //que dibuje en las coordenadas 0 0 para que abarque todo el canvas
			imgData=canvas.toDataURL('image/png'); //toma lo del canvas y lo convierte en imagen
		    console.log(imgData);
		    img.setAttribute('src',imgData);
		    console.log("muestro2");
		});
		boton_socket.addEventListener('click',function(){
		    console.log(imgData);
		    socket.emit('Guardo_localizacion',imgData,latitud,longitud);
		    socket.on('Procesado_localizacion',function(data){
		    	console.log(data);
		    	document.getElementById('status').innerHTML = '¡Localizacion y foto del bichito guardada!';
		    });
		 });
	
	</script>	
</script>
</body>
</html>