var bUserHasFocus = true;
function logIn()
{
  var width = (window.innerWidth) ? window.innerWidth : document.body.clientWidth;

  var layer = document.createElement('div');
  layer.style.zIndex = 11;
  layer.id = 'layer';
  layer.style.position = 'absolute';
  layer.style.top = '0px';
  layer.style.left = '0px';
  layer.style.height = document.documentElement.scrollHeight + 'px';
  layer.style.width = width + 'px';
  layer.style.backgroundColor = 'black';
  layer.style.opacity = '0';
  layer.style.filter += ("progid:DXImageTransform.Microsoft.Alpha(opacity=0)");
  document.body.appendChild(layer);  

  var div = document.createElement('div');
  div.style.zIndex = 12;
  div.id = 'box';
  div.style.position = 'absolute';
  div.style.top = '200px';
  div.style.left = (width / 2) - (380 / 2) + 'px'; 
  div.style.height = '160px';
  div.style.width = '380px';
  div.style.backgroundColor = '#6d5331';
  div.style.border = '2px solid white';
  div.style.padding = '5px';
  document.body.appendChild(div);

  var a = document.createElement('a');
  a.innerHTML = '<table width="100%" height="100%" border="0" cellpadding="15" cellspacing="0"><tr><td align="center" valign="middle">' +
    '<form><table width="100%" border="0" cellpadding="5" cellspacing="0"><tr><td>&nbsp; &nbsp; User Name:</td>' +
    '<td><input id="user" type="text" size="30" onFocus="userHasFocus(true);" onBlur="userHasFocus(false);"/></td>' +
    '</tr><tr><td>&nbsp; &nbsp; Password:</td><td><input id="password" type="password" size="30" /></td></tr>' +
    '<tr><td colspan="2"><font color="e87474" align="right"><b><div id="loginError"></div></b></font></td></tr><tr>' +
    '<td colspan="2" align="right"><table border="0" cellpadding="5" cellspacing="0">' +
    '<tr><td><button type="button" onClick="okLogIn()">&nbsp;Login&nbsp;</button></td>' +
    '<td><button type="button" onClick="closeLogIn()">Cancel</button> &nbsp;</td>' +
    '</tr></table></td></tr></table></form></td></tr></table>';
  div.appendChild(a);

  document['onkeydown'] = onKeyDownLogin;
  document.getElementById('user').value = '';
  document.getElementById('password').value = '';
  document.getElementById('user').focus();
}
function okLogIn() 
{
  var sUser = document.getElementById('user').value;
  var sPswd = document.getElementById('password').value;

  // Verify account  
  var xmlhttp = getXmlHttpObject();
  xmlhttp.open('POST', 'validuser.php?user=' + sUser + '&pswd=' + sPswd, false);
  xmlhttp.send(null);
  var sError = xmlhttp.responseText;
  sError.replace(' ', '');
  if (sError.length > 0)
  {
    document.getElementById('loginError').innerHTML = sError + " &nbsp; &nbsp;";
    return false;
  }
  xmlhttp.open('POST', 'casecorrectuser.php?user=' + sUser, false);
  xmlhttp.send(null);
  sUser = xmlhttp.responseText;
  setCookie('userID', sUser, 30);
  closeLogIn();
  window.location.reload();
}
function closeLogIn() 
{
  document['onkeydown'] = onKeyDownMain;
  document.body.removeChild(document.getElementById('layer'));
  document.body.removeChild(document.getElementById('box'));
}
function userHasFocus(b)
{
  bUserHasFocus = b;
}
function onKeyDownLogin(e)
{
  var evt = e || window.event;
  if (evt.keyCode == 27)
  {
    closeLogIn();
    return false;
  }
  if (evt.keyCode == 13)
  {
    if (bUserHasFocus)
      document.getElementById('password').focus();
    else  
      okLogIn();
    return false;
  }
  return true;
}