<?php
require ("lib/lib.php");
$url="http://".$_SERVER['HTTP_HOST'].":".$_SERVER['SERVER_PORT'].$_SERVER['REQUEST_URI'];
if(extension($url) == 'php'){
	echo "<script language='JavaScript'>location.href = 'index.php?ID=Login'</script>";
	die();
}
if(isset($_SESSION['WEB2'])){	
	echo "<script language='JavaScript'>location.href = 'index.php'</script>";
	die();
}
?>
<script>
$(document).ready(function() {
	
	var inputUsuario = $("#edtUsuario");
	var reqUsuario = $("#req-Usuario");
	var inputPassword = $("#edtPassword");
	var reqPassword = $("#req-Password");
	
	function validarUsuario(){
		if(inputUsuario.val().length < 1 || inputUsuario.val().length > 15){
			inputUsuario.addClass("error2");
			reqUsuario.addClass("error2");
			$("#req-Usuario").html('A-Z y 0-9, Mín. 1 y Máx. 15 caracteres.');
			$("#req-UsuarioImg").html("<img src='images/asterisco.png' width='14' height='14' title='Campo Requerido!'>");
			return false;
		}
		else if(!inputUsuario.val().match(/^[a-zA-Z0-9_-]+$/)){
			inputUsuario.addClass("error2");
			reqUsuario.addClass("error2");
			$('#req-Usuario').html('Solo se aceptan números y letras.');
			$("#req-UsuarioImg").html("<img src='images/asterisco.png' width='14' height='14' title='Campo Requerido!'>");
			return false;
		}
		else {
			inputUsuario.removeClass("error2");
			reqUsuario.removeClass("error2");
			$("#req-Usuario").html("");
			$("#req-UsuarioImg").html("<img src='images/bien.png' width='14' height='14' title='Campo Completado!'>");
			if(inputPassword.val() == ''){
				inputPassword.addClass("error2");
				reqPassword.addClass("error2");
				$("#req-Password").html('Se requiere la Contraseña.');
				return false;
			} else
				return true;
		}
	}
	
	function validarPassword(){
		if(inputPassword.val().length < 1 || inputPassword.val().length > 15){
			inputPassword.addClass("error2");
			reqPassword.addClass("error2");
			$("#req-Password").html('A-Z y 0-9, Mín. 2 y Máx. 15 caracteres.');
			$("#PasswordImg").html("<img src='images/asterisco.png' width='14' height='14' title='Campo Requerido!'>");
			return false;
		}
		else if(!inputPassword.val().match(/^[a-zA-Z0-9]+$/)){
			inputPassword.addClass("error2");
			reqPassword.addClass("error2");
			$("#req-Password").html('Solo se aceptan números y letras.');
			$("#PasswordImg").html("<img src='images/asterisco.png' width='14' height='14' title='Campo Requerido!'>");
			return false;
		} else {
			inputPassword.removeClass("error2");
			reqPassword.removeClass("error2");
			$("#req-Password").html("");
			$("#PasswordImg").html("<img src='images/bien.png' width='14' height='14' title='Campo Completado!'>");
			if(inputUsuario.val() == ''){
				inputUsuario.addClass("error2");
				reqUsuario.addClass("error2");
				$("#req-Usuario").html('Se requiere el Nick de Usuario.');
				return false;
			}
			else
				return true;
		}
	}
	inputUsuario.blur(validarUsuario);
	inputPassword.blur(validarPassword);
	
	$("#FormLogin").submit(function(){
		if(validarUsuario() & validarPassword()){
			Login();
		} else 
			return false;
		return false;
	});	

	function Login(){
	  $.ajax({
		type: "POST",
		beforeSend: function(objeto, response){
			$('#message').html('');
			$("#loading").show();
		},
		complete:function(response){
				if(response != 'success'){
					$("#loading").hide();	
				}
		},
		data: "Usuario="+$('#edtUsuario').val()+"&Password="+$('#edtPassword').val()+"",	  
		url: "ProcesarLogin.php",
		success: function( response ) {
			if(response == 'Logueado') {
				url = "Inicio.php";  
				$(location).attr('href',url);
			}else
				$('#message').html(response);
		}
		});
		$("#Recover").html("<a  href='javascript: MenuRecover()'>Olvidaste tu Contraseña?</a>");
	};
});
</script>

<style>
.wrapper {width: 1004px;padding: 0 10px;}
.wrapper, .content { margin: 0 auto; }
.fondo{background: url(img/bg2.png) top no-repeat;margin:0;padding:0;}
.form{margin: 0 18%;padding-top:18%;text-align:left}
.form input, select{width:100%;padding: 10px;margin-bottom: 5px;border:0;}
.form label{color:#ff700a;padding-left: 20px;}
.form button{background-color: #0057a3;color: #FFFFFF;padding: 10px 25px;border: 0;border-radius: 3px;font-weight: bold;cursor:pointer;}
.form button:hover{opacity: 0.8;}
.navegadores{padding-top:30px;color:#464444;text-align:center;padding-bottom: 10%;}
.navegadores span{padding-left: 20px;}
</style>


  <div class="content">
    <div class="wrapper">
      <div class="form">
        <form name="FormLogin" id="FormLogin" action= "" method="post">
          <p>
            <input type="text" name="edtUsuario" id="edtUsuario" maxlength="15" placeholder="*No. Cliente"/><span id="req-UsuarioImg" class="requisites error"></span><br/>
          </p>
          <p>
            <input type="password" name="edtPassword" id="edtPassword" maxlength="15" onkeyup="this.value = this.value.toUpperCase();" placeholder="*NIP"/>
			<span id="PasswordImg" class="requisites error"></span>
			<span id="req-Password" class="requisites error"></span><br/>
          </p>
          <p>
            <button>INICIAR SESI&Oacute;N</button>
          </p>
        </form>
      </div>
      <div class="navegadores">
        <p>El funcionamiento de esta p&aacute;gina es mejor a partir de las siguientes versiones o posteriores y tener actualizado el Adobe Flash Player:</p>
        <p>
          <span>Google Chrome: 18</span> 
          <span>Mozilla Firefox: 11</span> 
          <span>Internet Explorer: 8</span>
        </p>
        <p><img src="img/navegadores.png" /></p>

      </div>
    </div>

<!--
<table width="1023" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td width="454" scope="col">&nbsp;</td>
    <td width="62" scope="col">&nbsp;</td>
    <td width="507" scope="col">&nbsp;</td>
  </tr>
  <tr>
    <td scope="col">&nbsp;</td>
    <td scope="col">&nbsp;</td>
    <td scope="col">&nbsp;</td>
  </tr>
  <tr>
    <td scope="col">&nbsp;</td>
    <td scope="col">&nbsp;</td>
    <td scope="col">&nbsp;</td>
  </tr>
  <tr>
    <td scope="col">&nbsp;</td>
    <td scope="col">&nbsp;</td>
    <td scope="col">&nbsp;</td>
  </tr>
  <tr>
    <td colspan="3" scope="col">
    <form name="FormLogin" id="FormLogin" action= "" method="post">
      <table align="center" width="500" height="250" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="120" scope="col">&nbsp;</td>
          <td width="241" scope="col">&nbsp;</td>
          </tr>
        <tr>
          <td height="45" colspan="2" align="center" scope="col">&nbsp;</td>
          </tr>
        <tr>
          <td scope="col">&nbsp;</td>
          <td scope="col">&nbsp;</td>
        </tr>
        <tr>
          <td scope="col">&nbsp;</td>
          <td scope="col">&nbsp;</td>
        </tr>
        <tr>
          <td scope="row">&nbsp;</td>
          <td align="left"><label><b>No. Cliente: </b></label></td>
          </tr>
        <tr>
          <td scope="row">&nbsp;</td>
          <td align="left"><input class="txt" name="edtUsuario" type="text" id="edtUsuario" maxlength="15"/><span id="req-UsuarioImg" class="requisites error"></span></td>
          </tr>
        <tr>
          <td scope="row">&nbsp;</td>
          <td align="left"><b><span id="req-Usuario" class="requisites error"></span></b></td>
          </tr>
        <tr>
          <td scope="row">&nbsp;</td>
          <td align="left"><label><b>NIP: </b></label></td>
          </tr>
        <tr>
          <td scope="row">&nbsp;</td>
          <td align="left"><input class="txt" name="edtPassword" type="password" id="edtPassword" maxlength="15" onkeyup="this.value = this.value.toUpperCase();"/><span id="PasswordImg" class="requisites error"></span></td>
          </tr>
        <tr>
          <td scope="row">&nbsp;</td>
          <td align="left"><b><span id="req-Password" class="requisites error"></span></b></td>
          </tr>
        <tr>
          <td scope="row">&nbsp;</td>
          <td align="left">&nbsp;</td>
          </tr>
        <tr>
          <td colspan="2" align="center" scope="row"><input class="submit" type="submit" height="20" width="110" id="submit" name="submit" value="Iniciar Sesión" align="texttop" title="Iniciar Sesión"/></td>
          </tr>
        <tr>
          <td scope="row">&nbsp;</td>
          <td align="left">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="2" align="center" scope="row"><b><div id="message"></div></b></td>
          </tr>
        <tr>
          <td colspan="2" align="center" scope="row"><b><div id="loading"><img src="images/loader.gif" /><br>Espere, Autenticación en Proceso...</br></div></b></td>
        </tr>
        <tr>
          <td colspan="2" align="right" scope="row">&nbsp;</td>
        </tr>
        <tr>
          <td colspan="2" align="right" scope="row"><b><div id="Recover"></div></b></td>
          </tr>
        <tr>
          <td height="45" colspan="2" align="right" scope="row">&nbsp;</td>
        </tr>
      </table>
	</form>
    <table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td width="202">&nbsp;</td>
        <td width="230">&nbsp;</td>
      </tr>
      <tr>
        <th colspan="2" align="center"><label class="Recomencaciones">El funcionamiento de esta página es mejor a partir de las siguientes versiones o posteriores y tener actualizado el Adobe Flash Player:</label></th>
      </tr>
      <tr>
        <th colspan="2" align="center">&nbsp;</th>
      </tr>
      <tr>
        <th colspan="2" align="center"><label class="Recomencaciones">Mozilla Firefox: 11</label></th>
      </tr>
      <tr>
        <th colspan="2" align="center"><label class="Recomencaciones">Google Chrome: 18</label></th>
      </tr>
      <tr>
        <th colspan="2" align="center"><label class="Recomencaciones">Internet Explorer: 8</label></th>
      </tr>
      <tr>
        <td colspan="2" align="center"><img src="images/Navegadores.png" alt="" width="210" height="90" /></td>
      </tr>
  </table></td>
  </tr>
  <tr>
    <td align="center" colspan="3" scope="row"></td>
  </tr>
</table>
-->