<?php
  include "../include/dbcon.php";
?>
<html>
<head>
<style>
  .btnNumber{
    font-family:Arial;
	font-size: 40px;
	width: 60px;
	height: 60px;
  }
  .btnNumber2{
    font-family:Arial;
	font-size: 40px;
	width: 120px;
	height: 60px;
  }
  .btnNumber3{
    font-family:Arial;
	font-size: 30px;
	width: 180px;
	height: 60px;
  }
  .txtNumber{
    background-color:#000000;
	color:#00FF00;
	font-family:Arial;
	font-size:40px;
	width:180px;
  }

  .errmsg{
    color:#FF0000; 
	font-size:24px;
	text-shadow: 2px 2px #000000;
  }
	
	.mainpage{
	  background: url("img/bg01.png");
	  background-repeat: no-repeat;
	  background-size:100% 100%;
	}
</style>
</head>
<body onLoad="getFocus()" bgcolor="#CCCCCC">

<script>
  function getFocus(){
    focusCampo("txtNum");
  }
  function setNumber(pval){
    strNum = document.getElementById("txtNum").value;
	if(strNum.length <7 ){
	  document.getElementById("txtNum").value = strNum + pval;
	}
	focusCampo("txtNum");
  }
  function removeNumber(){
    strNum = document.getElementById("txtNum").value;
	if(strNum.length >0 ){
	  document.getElementById("txtNum").value = strNum.slice(0, -1);
	}
	focusCampo("txtNum");
  }
  
  function focusCampo(id){
    var inputField = document.getElementById(id);
    if (inputField != null && inputField.value.length != 0){
        if (inputField.createTextRange){
            var FieldRange = inputField.createTextRange();
            FieldRange.moveStart('character',inputField.value.length);
            FieldRange.collapse();
            FieldRange.select();
        }else if (inputField.selectionStart || inputField.selectionStart == '0') {
            var elemLen = inputField.value.length;
            inputField.selectionStart = elemLen;
            inputField.selectionEnd = elemLen;
            inputField.focus();
        }
    }else{
        inputField.focus();
    }
  }
</script>

<table width="100%" height="100%" border="0" class="mainpage">
<tr>
  <td style="vertical-align:middle">
  <center>

  <?php
  if( !empty($_SESSION["errmsg"])){
    echo "<span class='errmsg'>" . $_SESSION["errmsg"] . "</span>";
	unset($_SESSION["errmsg"]);
  }
  ?>
  <form action="login.php" method="post">
  <input type="hidden" name="pid" value="1" />
  <table style="border-style:double"><tr><td>
  <table border="0" bgcolor="#0099FF">
    <tr align="center">
	  <td colspan="3" style="background-color:#FF0000">
	    ADMINISTRATOR
	  </td>
	</tr>    
    <tr align="center">
	  <td colspan="3">
	    <input type="password" id="txtNum" name="pPass" class="txtNumber" value="" maxlength="7" />
	  </td>
	</tr>
    <tr>
	  <td><input type="button" class="btnNumber" value="1" onClick="setNumber(1)" /></td>
	  <td><input type="button" class="btnNumber" value="2" onClick="setNumber(2)" /></td>
	  <td><input type="button" class="btnNumber" value="3" onClick="setNumber(3)" /></td>
	</tr>
    <tr>
	  <td><input type="button" class="btnNumber" value="4" onClick="setNumber(4)" /></td>
	  <td><input type="button" class="btnNumber" value="5" onClick="setNumber(5)" /></td>
	  <td><input type="button" class="btnNumber" value="6" onClick="setNumber(6)" /></td>
	</tr>
    <tr>
	  <td><input type="button" class="btnNumber" value="7" onClick="setNumber(7)" /></td>
	  <td><input type="button" class="btnNumber" value="8" onClick="setNumber(8)" /></td>
	  <td><input type="button" class="btnNumber" value="9" onClick="setNumber(9)" /></td>
	</tr>
    <tr>
	  <td colspan="2"><input type="button" class="btnNumber2" value="0" onClick="setNumber(0)" /></td>
	  <td align="right"><input type="button" class="btnNumber" value="&larr;" onClick="removeNumber()" style="color:#FF0000" /></td>
	</tr>
	<tr>
	  <td colspan="3"><input type="submit" class="btnNumber3" value="LOGIN" style="color:#0000FF; font-size:34px" /></td>
	</tr>
  </table>
  </td></tr></table>
  </form>

  </center>
  </td>
</tr>
</table>

</body>
</html>