<!DOCTYPE html>
<html lang="en">
	<head>
		<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
		<meta charset="utf-8">
		<title>Menu!!</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>
   
	</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">
	<p id="status">Para buscar un animal rellene el formulario</p></br>
	<form>
	<p>Fecha nacimiento del bichito: <input id="edad" type="date" name="edad" step="1" min="1990-01-01" max="2013-12-31"  required></p>
	<p>Tipo de animal<input type="radio" id="tipo" name="tipo" value="Perro"/> Perro
	<input type="radio" name="tipo" id="tipo" value="gato" checked/> Gato</p>
	<p>Sexo del animal<input type="radio" id="sexo" name="sexo" value="macho"/> macho
	<input type="radio" name="sexo" id="sexo" value="hembra"/> hembra</p>
	<input type="button" value="Guardar datos" onclick="datos();"align="center"/>
	</form>
	</div>
	<script>
	
	var socket=io.connect("http://192.168.1.5:3000/");
	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 datos(){
	//if (document.elements[2].checked) { 
      //  tipo=document.elements[2].value;
       // console.log(tipo);
    //} 
    if(document.getElementById("tipo")[0]){
		tipo="perro";
	}
    else
    	tipo="gato";
    if(document.getElementById("sexo")[0]){
		sexo="macho";
	}
    else
    	sexo="hembra";
    edad=document.getElementById("edad").value;
    //nombre = document.getElementById("nombre").value;
    console.log(nombre);
    console.log(tipo);
    console.log(edad);
    console.log(texto);

    socket.emit('busqueda',  nombre,  tipo, edad, sexo);
	console.log("ay");
    socket.on('procesado_busqueda', function (data) {
    	var cont=data.length;
    	var i;
    	for(i=0;i<cont;i++){
			
			document.body.innerHTML+="<p align='center'><font size='2' face='Courier'>"+ data[i].nombre + "</p><br>";
			document.body.innerHTML+="<p align='center'><font size='2' face='Courier'>"+ data[i].texto + "</p>";
			document.body.innerHTML+="<div class='center'><img src="+ data[i].img + " width="+ 320 + " height=" + 240 + "/></div></br>";
			
		}
	});
};
	</script>
	
</body>
</html>