<div id="divwidth" style="border-style:solid; visibility:hidden">sadfsdf</div>
<script type="text/javascript">
  var pgwidth = document.getElementById("divwidth").offsetWidth;
</script>

<center>
<form action="punch.php" method="post">
<input type="hidden" name="fr" value="mb" />
<table id="mainbody" width="100%" border="0">
<tr>
  <th>
    <img id="comlogo" src="img/comlogo.gif">
  </th>
</tr>
<tr>
  <th>
    <iframe id="ifmTimepage" marginheight="0" marginwidth="0" src="mb_timepage.php" style="overflow:inherit; margin-top:0" frameborder="0"></iframe>
  </th>
</tr>
<tr>
  <th>
    <input id="txtId" name="txtId" type="text" style="font-size:70px; width:400px; text-align:center; color:#0033CC">
  </th>
</tr>
<tr>
  <th align="center">
  
  <table id="mainbody2" border="0">
  <tr align="center">
    <td><input id="btn1" type="button" value="1" onClick="setInputId('1')"></td>
	<td><input id="btn2" type="button" value="2" onClick="setInputId('2')"></td>
	<td><input id="btn3" type="button" value="3" onClick="setInputId('3')"></td>
  </tr>
  <tr align="center">
    <td><input id="btn4" type="button" value="4" onClick="setInputId('4')"></td>
	<td><input id="btn5" type="button" value="5" onClick="setInputId('5')"></td>
	<td><input id="btn6" type="button" value="6" onClick="setInputId('6')"></td>
  </tr>
  <tr align="center">
    <td><input id="btn7" type="button" value="7" onClick="setInputId('7')"></td>
	<td><input id="btn8" type="button" value="8" onClick="setInputId('8')"></td>
	<td><input id="btn9" type="button" value="9" onClick="setInputId('9')"></td>
  </tr>
  <tr align="center">
    <td><input id="btnC" type="submit" value="ok"></td>
	<td><input id="btn0" type="button" value="0" onClick="setInputId('0')"></td>
	<td><input id="btnD" type="button" value="&lArr;" onClick="setInputDel()"></td>
  </tr>
  </table>
  
  </th>
</tr>
</table>
</form>
</center>
<?
  if($_GET["msg"]!=""){
    echo "<script>alert('".$_GET["msg"]."');</script>";
  }
?>
<script>
  function setLayout(){
    document.getElementById("comlogo").style.width = (pgwidth*0.2);
    document.getElementById("ifmTimepage").style.width = (pgwidth*0.8);
    document.getElementById("ifmTimepage").style.height = 100;
	setBtnSize(0.12);
  }
  function setBtnSize(pratio){
    document.getElementById("btn1").style.width = (pgwidth*pratio);
    document.getElementById("btn2").style.width = (pgwidth*pratio);
	document.getElementById("btn3").style.width = (pgwidth*pratio);
	document.getElementById("btn4").style.width = (pgwidth*pratio);
	document.getElementById("btn5").style.width = (pgwidth*pratio);
	document.getElementById("btn6").style.width = (pgwidth*pratio);
	document.getElementById("btn7").style.width = (pgwidth*pratio);
	document.getElementById("btn8").style.width = (pgwidth*pratio);
	document.getElementById("btn9").style.width = (pgwidth*pratio);
	document.getElementById("btn0").style.width = (pgwidth*pratio);
	document.getElementById("btnD").style.width = (pgwidth*pratio);
	document.getElementById("btnC").style.width = (pgwidth*pratio);

    document.getElementById("btn1").style.height = (pgwidth*pratio);
    document.getElementById("btn2").style.height = (pgwidth*pratio);
	document.getElementById("btn3").style.height = (pgwidth*pratio);
	document.getElementById("btn4").style.height = (pgwidth*pratio);
	document.getElementById("btn5").style.height = (pgwidth*pratio);
	document.getElementById("btn6").style.height = (pgwidth*pratio);
	document.getElementById("btn7").style.height = (pgwidth*pratio);
	document.getElementById("btn8").style.height = (pgwidth*pratio);
	document.getElementById("btn9").style.height = (pgwidth*pratio);
	document.getElementById("btn0").style.height = (pgwidth*pratio);
	document.getElementById("btnD").style.height = (pgwidth*pratio);
	document.getElementById("btnC").style.height = (pgwidth*pratio);
	
	document.getElementById("btn1").style.fontSize = 590*pratio;
	document.getElementById("btn2").style.fontSize = 590*pratio;
	document.getElementById("btn3").style.fontSize = 590*pratio;
	document.getElementById("btn4").style.fontSize = 590*pratio;
	document.getElementById("btn5").style.fontSize = 590*pratio;
	document.getElementById("btn6").style.fontSize = 590*pratio;
	document.getElementById("btn7").style.fontSize = 590*pratio;
	document.getElementById("btn8").style.fontSize = 590*pratio;
	document.getElementById("btn9").style.fontSize = 590*pratio;
	document.getElementById("btn0").style.fontSize = 590*pratio;
	document.getElementById("btnD").style.fontSize = 590*pratio;
	document.getElementById("btnC").style.fontSize = 590*pratio;
	
  }
  function setInputId(ptext){
    var mystr = document.getElementById("txtId").value;
	document.getElementById("txtId").value = mystr + ptext;
  }
  function setInputDel(){
    var mystr = document.getElementById("txtId").value;
	document.getElementById("txtId").value = mystr.substring(0,(mystr.length-1));
  }
  setLayout();
</script>