<!DOCTYPE html>
<html>
<head>	
<!--META-->
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Login</title>
	<!--STYLESHEETS-->
	<link href="css/style.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>
    <script>
    //Slider-in icons
    $(document).ready(function() {
		$(".username").focus(function() {
			$(".user-icon").css("left","-48px");
		});
		$(".username").blur(function() {
			$(".user-icon").css("left","0px");
		});
		
		$(".password").focus(function() {
			$(".pass-icon").css("left","-48px");
		});
		$(".password").blur(function() {
			$(".pass-icon").css("left","0px");
		});
	});    
    console.log("conectado");
    var socket=io.connect("http://192.168.1.5:3000");
    function reg() {
      //document.getElementById('status').innerHTML ="Browser has connected to the app server";
            socket.on('RegIn', function (data) {
	            console.log(data);
	            if(data=='ok'){
	                console.log("usuario bien registrado");
	                document.getElementById('status').innerHTML = 'Usuario bien registrado, ya puede loguearse';
	            }if(data=='ko'){
	                console.log("Ese usuario ya existe");
	                document.getElementById('status').innerHTML = 'Ese usuario ya existe';
	            } 
            });    
    };       
    function connect() {
      //document.getElementById('status').innerHTML ="Browser has connected to the app server";
            socket.emit('login', "logueado");
			console.log("ay");
            socket.on('retuLogIn', function (data) {
                //document.getElementById('status').innerHTML = 'Welcome ';
                console.log(data);
                if(data=='ok'){
                	console.log("usuario bien logueado");
                	document.location.href='menu';
                }else{
                	console.log("Usuario debe registrarse o cambiar pass");
                	document.getElementById('status').innerHTML = 'Usuario inexistente, vuelva a intentarlo';
                }   
            });
    };
</script>
</head>
<body>
    <div id="wrapper">
	<!--SLIDE-IN ICONS-->
    <div class="user-icon"> </div>
    <div class="pass-icon"> </div>
    <!--END SLIDE-IN ICONS-->
	<!--LOGIN FORM-->
	<form name="login-form" class="login-form" action="login" method="post">
		<!--HEADER-->
    	<div class="header">
    <!--TITLE--><h1>Login Form</h1><!--END TITLE-->
    <!--DESCRIPTION--><p id="status">Introduzca usuario y pass</p><!--END DESCRIPTION-->
   		 </div>
   		<!--END HEADER-->
		<!--CONTENT-->
    	<div class="content">
		<!--USERNAME--><input name="username" type="text" class="input username" value="user" onfocus="this.value=''" /><!--END USERNAME-->
		<!--PASSWORD--><input name="password" type="password" class="input password" value="Password" onfocus="this.value=''" /><!--END PASSWORD-->
    	</div>
    	<!--END CONTENT-->
   		 <!--FOOTER-->
    	<div class="footer">
		<!--LOGIN BUTTON--><input type="submit" name="submit" value="Login" class="button" onclick="connect()"/><!--END LOGIN BUTTON-->
    	<!--REGISTER BUTTON--><input type="submit" name="submit" value="Register" class="register" onclick="reg()" /><!--END REGISTER BUTTON-->
    	</div>
    <!--END FOOTER-->
	</form>
	<!--END LOGIN FORM-->
</div>
<!--END WRAPPER-->
<!--GRADIENT--><div class="gradient"> </div><!--END GRADIENT-->

</body>
</html>
					