var userElm = null;
var passElm = null;
var enterElm = null;

var uglyHack = null;

loginInit = function()
{
  userElm = document.getElementById(txtUserNameId);
  passElm = document.getElementById(txtPasswordId);
  enterElm = document.getElementById('hidLoginEnterKeyPress');
  
  if (userElm == null)
    return;                 // Perhaps the login isn't available

  enterElm.value = '0';                        // Back-button might leave the value to 1
 
  userElm.serverValue = userElm.value;
  passElm.serverValue = passElm.value;
  userElm.serverClass = userElm.className;
  passElm.serverClass = passElm.className;

  if (passElm.type != 'password')
  {
    userElm.onfocus = loginGotFocus(false);
    passElm.onfocus = loginGotFocus(true);
  }
  else
  {
    userElm.onkeyup = loginUserChange;
    passElm.onblur = loginPassLostFocus;
  }
}

loginSwapMode = function()
{
  if (passElm.type == 'text' || (userElm.value.length == 0 && passElm.value.length == 0))
  {
    var newElm = document.createElement('input');

    if (passElm.type == 'password')
    {
      newElm.type = 'text';
      newElm.value = passElm.serverValue;
      userElm.value = userElm.serverValue;
      userElm.className = userElm.serverClass;
      newElm.className = passElm.serverClass;
      userElm.onblur = null;
      passElm.onblur = null;             // This is intensional!
    }
    else
    {
      newElm.type = 'password';
      newElm.value = '';
      userElm.value = '';
      userElm.className = 'LoginBox';   // TODO: hardcoded
      newElm.className = 'LoginBox';
      userElm.onblur = loginLostFocus;
      passElm.onblur = loginLostFocus;   // This is intensional!
      
      userElm.onkeydown = loginEnterKey;
      newElm.onkeydown = loginEnterKey;
    }

    newElm.name = passElm.name;
    newElm.serverValue = passElm.serverValue;
    newElm.serverClass = passElm.serverClass;

    var oldBlur = passElm.onblur;
    passElm.onblur = null;
    
    newElm.id = passElm.id;
    passElm.parentNode.replaceChild(newElm, passElm);
    
    newElm.onblur = oldBlur;
    newElm.onfocus = passElm.onfocus;
    
    passElm = newElm;
  }
}

loginGotFocus = function(passNeedsFocus) { return function()
{
  if (uglyHack != null)
  {
    clearTimeout(uglyHack);
    uglyHack = null;
    
    return;
  }
    
  loginSwapMode();
  
  if (passNeedsFocus)
    uglyHack = setTimeout(function() { passElm.focus(); }, 1);
}}

loginLostFocus = function()
{
  uglyHack = setTimeout(function() { loginSwapMode(); uglyHack = null; }, 1);
}

loginUserChange = function()
{
  var curUserName = userElm.value.toLowerCase();
  if (curUserName != userElm.serverValue && passElm.value == passElm.serverValue)
  {
    passElm.value = '';
  }
  else if (curUserName == userElm.serverValue && passElm.value.length == 0)
  {
    passElm.value = passElm.serverValue;
  }
}

loginPassLostFocus = function()
{
  if (userElm.value.toLowerCase() == userElm.serverValue && passElm.value.length == 0)
  {
    passElm.value = passElm.serverValue;
  }
}

loginEnterKey = function(evt)
{
    evt = evt || event;
    if (evt.keyCode == 13)
    {
        enterElm.value = "1";
        document.forms[0].submit();       // TODO: assuming there is only 1 form
        return false;
    }
}

if (window.addEventListener)
    window.addEventListener('load', loginInit, false);
else if (window.attachEvent)
    window.attachEvent('onload', loginInit);