<!DOCTYPE html>
<html lang="en">
	<head>
		<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
		<link href="icon.css" rel="stylesheet" type="text/css" />
		<meta charset="utf-8">
		<title>Menu!!</title>
		<link href="/css/style_menu.css" 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>
   		
	</head>

<body>
	<script>
   			var socket=io.connect("http:192.168.1.5:3000/");
   			var nombre;
   			var m;
   		
   			socket.emit("Cnt_usuario");
   			socket.on("nameUsuar",function(name){
   				
   				nombre=name;
   				console.log(nombre);
   			});
   			function msg(){
   				m=document.getElementById("msg").value;
   				console.log(m);
   				socket.emit("Mens",nombre,m);
   				socket.on("Mens_recibido",function(){
   					document.getElementById('status').innerHTML = '¡Mensaje enviado!';
   				});
   			};
   		</script>
	<div class="wrap">
	<nav>
		<ul class="menu">
			<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="/usuario"><span class="icon-github"> </span>Perfil</a>
			</li>
			<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-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="#"><span class="icon-users"></span>Donaciones</a>
				<ul>
					<li><a href="/Anuncios">Anuncios</a></li>
					
				</ul>
			<li><a href="#"><span class="icon-users"></span>Mercadillo</a>
			<li><a href="/logout">Salir</a></li>
			
		</ul>
		<div class="clearfix"> </div>	
	</nav>
	</div>	
	<div class="center">
		<p id="status">Escriba el mensaje deseado</p><br>
		<input id="msg" type="text"  size="150" name="historia"/>
		<input type="button" value="Guardar datos" onclick="msg();"align="center"/>
	</div>
</body>
</html>