<!DOCTYPE html>
<html lang="en"  class="c-LoginHtml">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
		<meta name="description" content="Ranger" />
		<meta name="author" content="MyStream Limited" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<link rel="shortcut icon" href="favicon.ico" />
		<title>Login | Ranger App</title>
		<link rel="stylesheet" href="js/plugins/jquery-ui/jquery-ui.css" />
		<link rel="stylesheet" href="css/style.css?a=b" />
		<link rel="stylesheet" href="css/media.css" />

	</head>
	<body class="c-LoginPage">
		<header class="dashboard-header">
			<div class="dashboard-logo">
				<a href="/v2" class="icomoon icon-logo">
					<span class="icon-logo1"></span>
					<span class="icon-logo2"></span>
				</a>
			</div>
		</header>
		<main class="c-Wizard-Steps">
			<article class="c-Wizard-Step c-Wizard-Step-First c-Wizard-Step-Login active">
				<div class="c-Wizard-Step-Block">
					<div class="c-Wizard-Step-Block-Container">
						<!--header class="c-Wizard-Step-Header">
							<h1>RANGER CONCEPT APP</h1>
						</header-->
						<section class="c-Wizard-Step-Container">
							<div class="c-Wizard-Step-Form">
								<div id="message"></div>
								<div class="c-Wizard-Step-Form-Input">
									<input id="username" data-step="1" type="text" placeholder="USERNAME" class="c-Wizard-Step-Form-Input c-Wizard-Step-Form-Input-Text c-Wizard-Step-Form-Login-Input" />
									<a class="c-Clear-Handle c-BtnClear icon-cross" href="#"></a>
								</div>
								<div class="c-Wizard-Step-Form-Input">
									<input id="password" data-step="1" type="text" placeholder="PASSWORD" class="c-Wizard-Step-Form-Input c-Wizard-Step-Form-Input-Text c-Wizard-Step-Form-Login-Input" />
									<a class="c-Clear-Handle c-BtnClear icon-cross" href="#"></a>
								</div>
								<div class="c-Wizard-Step-Container-Buttons">
									<a class="c-Wizard-Step-Container-Button c-BtnSave" href="#">SUBMIT</a>
								</div>
							</div>
						</section>
					</div>
				</div>
				<div class="c-Wizard-Step-Footer">
					<a href="#" class="c-Wizard-Step-Footer-Button-Help" data-popup="forgottenPopup">FORGOTTEN PASSWORD</a>
				</div>
			</article>
		</main>

		<script src="js/jquery-1.9.0.min.js"></script>
		<script src="js/jquery-migrate-1.1.0.js"></script>
		<script type="text/javascript">
			$(document).ready(function () {
				$(".c-Wizard-Step-Form")
					.on("focus", ".c-Wizard-Step-Form-Input", function () {
						var $this = $(this),
								$parents = $this.parents(".c-Wizard-Step-Form-Input"),
								$form = $this.parents(".c-Wizard-Step-Form");
						if ($parents.length && !$parents.hasClass("c-Wizard-Step-Form-Three-Inputs")) {
							$parents.addClass("u-Focused");
						}
					})
					.on("blur", ".c-Wizard-Step-Form-Input", function () {
						var $this = $(this),
								$parents = $this.parents(".c-Wizard-Step-Form-Input"),
								$form = $this.parents(".c-Wizard-Step-Form"),
								$val = $this.val();
						if ("" == $val) {
							$parents.removeClass("u-Focused");
						}
					})
					.on("keyup", ".c-Wizard-Step-Form-Input", function () {
						var $this = $(this),
								$parents = $this.parents(".c-Wizard-Step-Form-Input"),
								$form = $this.parents(".c-Wizard-Step-Form"),
								$val = $this.val();
						$("#message").html('');		
						if ("" == $val) {
							$parents.find("a").hide();
						} else {
							$parents.find("a.c-BtnClear").show();
							if ($this.parents(".c-Wizard-Step").hasClass("c-Wizard-Step-ValidateParking")) {
								console.log($.trim($val).length);
								if ($.trim($val).length == 11) {
									$parents.find("a").show();
								} else {
									$parents.find("a.c-BtnSave").hide();
								}
								$(this).val($val.replace(/[^\d]/, ''));
							} else {
								$parents.find("a").show();
							}
						}
					})
					.on("click", ".c-BtnClear", function () {
						var $this = $(this),
								$parents = $this.parents(".c-Wizard-Step-Form-Input"),
								$input = $parents.find(".c-Wizard-Step-Form-Input"),
								$form = $this.parents(".c-Wizard-Step-Form"),
								$val = $this.val();
						$input.val("").trigger("keyup").trigger("blur");

						$("#message").html('');
						return false;
					})
					.on("click", ".c-BtnSave", function () {
						var $this = $(this),
								$username = $("#username"),
								$password = $("#password"),
								$uname_val = $.trim($username.val()),
								$pass_val = $.trim($password.val());

						$("#message").html('');		
						if ('' == $uname_val) {
							$("#message").append('<p class="error">Please entet valid username!</p>');
						}
						if ('' == $pass_val) {
							$("#message").append('<p class="error">Please entet valid password!</p>');
						}
						if('' == $("#message").html()) {
							$.post('', {login: true, username: $uname_val, password: $pass_val}, function (json) {
								$("#message").html('<p class="success">'+json.message+'</p>');
								if(json.status){
									window.location.reload(true);
								}
							}, 'json').fail(function (error) {
								$("#message").html('<p class="error">PLEASE TRY AGAIN!</p>');
							});
						}
						return false;
					});
				
			});
		</script>
	</body>
</html>