<!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>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
   		<script>
   			var socket=io.connect();
   			
   			function fotos(){
   				socket.emit("Fotos_usuario","Quiero las fotos");
   				socket.on("Fotos_recibidas",function(img){
   					var cont=img.length;
   					var i;
   					for(i=0;i<cont;i++){
						document.body.innerHTML+="<div class='center'><img src= "+ img[i].img +"  width="+ 320 + " height=" + 240 + "/></div></br>";
						document.body.innerHTML+="<p align='center'><font size='2' face='monospace'>"+ img[i].nombre + "</p><br>";
						document.body.innerHTML+="<p align='center'><font size='2' face='monospace'>"+ img[i].edad + "</p><br>";
						document.body.innerHTML+="<p align='center'><font size='2' face='monospace'>"+ img[i].sexo + "</p><br>";
						document.body.innerHTML+="<p align='center'><font size='2' face='monospace'>"+ img[i].tipo + "</p><br>";
						document.body.innerHTML+="<p align='center'><font size='2' face='monospace'>"+ img[i].texto + "</p>";
			
					}
   				});
   			}
   			function mensajes(){
   				socket.emit("Mensajes_usuario","Quiero los mensajes");
   				socket.on("Mensajes_recibidos",function(data,len){
   					//var cont=data.length;
   					for(i=0;i<len;i++){
   						var user=data[i].nombre;
   						
						document.body.innerHTML+="<div class='box'style=' height:100px;width:400px'><p align='center'><p style= 'font-style:oblique;font-size:17px;font-family:monospace;font-weight:bold;'>Usuario que envia mensaje:"+ data[i].usuario_envia + "</p><br><p align='center' style= 'font-family:monospace;font-style:oblique;font-weight:bold;'>Mensaje:"+ data[i].mensaje + "</p><br></div>";
						//document.body.innerHTML+="<p align='center'><font size='2' style= 'font-weight:bold;text-shadow: 3px 3px 0 rgba(256,256,256,1.0);' face='Helvetica'>Mensaje:"+ data[i].mensaje + "</p><br>";
						document.body.innerHTML+="<p align='center'><a href='/Mensaje/"+ data[i].usuario_receptor + "/'>Contestar a "+ data[i].usuario_envia + "</p><br>";
						
					}
   				});
   			}
   		</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>
	$(document).ready(function()
        {
        $("#bot").click(function () {     
            $('#bot').toggle();
             });
         $("#mens").click(function () {     
            	$('#mens').toggle();
             });
       		$("#fot").click(function () {     
            	$('#fot').toggle();
             });
       
       
    });
	function Comunicacion(){
	 
		console.log("entro si");
	socket.emit("ListadoUsuarios","quiero usuarios");
	socket.on("LosUsuarios",function(datos,num){
		var i;
		console.log("1");
		document.getElementById('status').innerHTML = 'Los usuarios registrados a los que puede enviar mensajes:';
		//document.getElementById('bot').hiden();
		for(i=0;i<num;i++){
			document.body.innerHTML+="<div class='box'style=' height:25px;width:200px'><p align='center'><font size='2' style= 'font-family:monospace;font-weight:bold;text-shadow: 3px 3px 3px #aaa;' face='Courier'>Nombre Usuario:" + datos[i].usuario + "</p></div><br>";
			document.body.innerHTML+="<p align='center'><a href=/Mensaje/"+datos[i].usuario+"/>Enviarmensaje</a></p></div><br>";
		}
		document.body.innerHTML+="</div>";
	});
};
	</script>	
	<div class="center">
	<p id="status"style= "font-style:oblique;font-family:cursive;font-size:23px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;">PERFIL DE USUARIO</p><br>
	
	<h3 id="status"style= "font-style:oblique;font-family:cursive;font-size:18px;font-weight:bold;text-shadow: 3px 3px 3px #aaa;">Ver listado de usuarios para enviar mensaje.</h3>
	<br><input type="button" value="Comunicacion" id="bot" onclick="Comunicacion()"/>
	</div>		
	<div class="center">
	<input type="button" id="mens" name="submit" value="Ver mensajes recibidos" onclick="mensajes();"/><br>
	<input type="button" id="fot" name="submit" value="Ver tus fotos" onclick="fotos();"/>
	</div>
</body>
</html>