<!DOCTYPE html>
<html>
    <head>
    	<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
    	<link href="css/style_menu.css" rel="stylesheet" type="text/css" />
		<link href="icon.css" media="screen" rel="stylesheet" type="text/css"/>		
		<meta charset="utf-8">
        <title>Album</title>
        
		
    </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 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>
    console.log("inicio");
    var socket=io.connect("http://192.168.1.5:3000");
    var j;
    var op=true;
    $(document).ready(function()
        {
        $("#rec").click(function () {     
            $('#rec').toggle();
             });
         
    });
    if (op==true){
    socket.emit('mostrar_foto','enseñame las fotos');
    navigator.getUserMedia =navigator.getUserMedia || navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || navigator.msGetUserMedia;
    //var img=document.querySelector('#img');
    var canvas=document.querySelector('#c');
    var boton=document.getElementById('Recargar_foto');
    var user;
	socket.on('numero',function(data,img){
		console.log("aqui??'");
		console.log(data);
		
		//console.log(img[0].img);
		//console.log(img[0]);
		if(data==0){
			document.body.innerHTML+="<p align='center'style= 'font-style:oblique;font-family:cursive;font-size:25px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;>No hay fotos que mostrar</p><br>";
			
		}else{
		console.log("Primera iteración");
		for(i=0;i<data;i++){
			user=img[i].usuario;
			document.body.innerHTML+="<p align='center'style= 'font-style:oblique;font-family:cursive;font-size:25px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;>El usuario que ha subido la foto"+ img[i].usuario + "</p><br>";
			document.body.innerHTML+="<div class='center'><img src= "+ img[i].img +"  width="+ 320 + " height=" + 240 + "/></div></br>";
			document.body.innerHTML+="<p align='center'style= 'font-style:oblique;font-family:cursive;font-size:25px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;>"+ img[i].nombre + "</p><br>";
			document.body.innerHTML+="<p align='center'style= 'font-style:oblique;font-family:cursive;font-size:25px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;>"+ img[i].edad + "</p><br>";
			document.body.innerHTML+="<p align='center'style= 'font-style:oblique;font-family:cursive;font-size:25px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;"+ img[i].sexo + "</p><br>";
			document.body.innerHTML+="<p align='center'style= 'font-style:oblique;font-family:cursive;font-size:25px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;"+ img[i].tipo + "</p><br>";
			document.body.innerHTML+="<p align='center'style= 'font-style:oblique;font-family:cursive;font-size:25px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;>"+ img[i].texto + "</p><br>";
			document.body.innerHTML+="<p align='center'><a href=/Mensaje/"+user+"/>Enviarmensaje</a></p><br>";
		}
		}
	});
	}
function RecargaFoto(){
	console.log("recargaaaaaaaaaaaaaaaaaaaa");
	console.log(cont);
	op=false;
	socket.emit('mostrar_foto2','enseñame las fotos');
	socket.on('numero2',function(data,img){
		console.log("entroooooooooooooooooooo");
		console.log(cont);
	for(j=cont-1;j<data;j++){
			
			document.body.innerHTML+="<p align='center'style= 'font-style:oblique;font-family:cursive;font-size:25px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;"+ img[j].nombre + "</p><br>";
			document.body.innerHTML+="<p align='center'style= 'font-style:oblique;font-family:cursive;font-size:25px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;"+ img[j].edad + "</p><br>";
			document.body.innerHTML+="<p align='center'style= 'font-style:oblique;font-family:cursive;font-size:25px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;"+ img[j].sexo + "</p><br>";
			document.body.innerHTML+="<p align='center'style= 'font-style:oblique;font-family:cursive;font-size:25px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;>"+ img[j].tipo + "</p><br>";
			document.body.innerHTML+="<p align='center'style= 'font-style:oblique;font-family:cursive;font-size:25px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;>"+ img[j].texto + "</p>";
			document.body.innerHTML+="<div class='center'><img src="+ img[j].img + " width="+ 320 + " height=" + 240 + "/></div></br>";
			
		}
		});
	};
function verUp(){
	console.log("recargaaaaaaaaaaaaaaaaaaaa");
	socket.emit('most_fotos_up','enseñame las fotos');
	socket.on('ficheros',function(ficheros){
	console.log(ficheros);
	console.log(ficheros[0].img);
	console.log(ficheros.length)
	for(l=0;l<ficheros.length;l++){
			document.body.innerHTML+="<div class='center'><img src= " + ficheros[l].img + " width="+ 320 + " height=" + 240 + "/></div></br>";
			
			
		}
		});
	};
  
    </script>
    <div class="center">
	<p id="status" style="font-style:oblique;font-family:monospace;font-size:25px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;">Fotos de los distintos animales</p>
	</div>	
    <div class="center">
    <input type="button" value="Recargar fotos" id="rec" onclick="RecargaFoto();"align="center"/>
    </div>
    <div class="center">
    <input type="button" value="Fotos_up" id="up" onclick="verUp();"align="center"/>
    </div>
</body>
</html>