<div id="login_alert" style="display: none; width:0px; height:0px; overflow:hidden;"></div>
<div id="login_whm">

    <form method="post" id="loginwhm" action="">
        <p>Acceso a Clientes:</p> 			<div><input type="text" id="user2" name="user2" size="50" placeholder="email" /></div>
        <div><input type="password"  id="pass2" name="pass2" size="20" placeholder="password" /></div>
        <div><input type="submit" class="btnlogin" value="Ingresar!" /></div>
    </form>
    
    <div id="loadlogin" style="position:relative; width:100%; height:100%; background:url('{$TEMPLATE_URL}/img/layer_1_bg.png'); text-align:center; padding:5px 0; margin-top:-28px; border-radius:5px; display:none;">
        <img src="{$TEMPLATE_URL}/img/loginloader.gif" />
    </div>

</div>


{literal}
<script>
				
			$.validator.setDefaults({
				submitHandler: function() { 
				
						if ($('#user2').val() != 'usuario' && $('#pass2').val() != ''){
							
								$('#loadlogin').show();

								$.post("{/literal}{$TEMPLATE_URL}{literal}/plugins/loginwhm.php", $("#loginwhm").serialize(), function(data) {
								$('#login_whm').html(data);
								$('#loadlogin').hide();
								});
							
						}
						return false;	
				 }
			});

	
	// Validar Formulario Login
			$("#loginwhm").validate({
				
				
				errorLabelContainer: $("#login_alert"),
		
				rules: {
					user2: {
						email: true,
						required: true,
						minlength: 0
					},
					
					pass2: {
						required: true,
						minlength: 0
					},
				},
				
				messages: {
					user2: {
						message: "",
					},
					
					pass2: {
						required: "",
					},

				}
				
			}
			);

</script>
{/literal}
