var userlist = [];

function register_user(username)
{
  userlist.push(username);
}

function draw_user(ul, username)
{
  var inp = document.createElement('input');
  inp.type = 'hidden';
  inp.name = 'users[]';
  inp.value = username;
  ul.parentNode.appendChild(inp);
  var li = document.createElement('li');
  li.username = username;
  li.userinput = inp;
  var delbtn = document.createElement('a');
  delbtn.style.color = '#ff0000';
  delbtn.href = '#';
  delbtn.onclick = function()
  {
    delete_user(this);
    return false;
  }
  delbtn.appendChild(document.createTextNode('[X]'));
  li.appendChild(delbtn);
  
  li.appendChild(document.createTextNode(' ' + username));
  ul.appendChild(li);
}

function draw_new_user(username, password)
{
  for ( var i = 0; i < userlist.length; i++ )
  {
    if ( userlist[i] == username )
    {
      alert('The username you entered is already in the list, please delete the current user and re-add it if you want to change the password.');
      return false;
    }
  }
  
  userlist.push(username);
  
  var ul = document.getElementById('userlist');
  
  var inp = document.createElement('input');
  inp.type = 'hidden';
  inp.name = 'users_add[' + username + ']';
  inp.value = password;
  ul.parentNode.appendChild(inp);
  var li = document.createElement('li');
  li.username = username;
  li.userinput = inp;
  var delbtn = document.createElement('a');
  delbtn.style.color = '#ff0000';
  delbtn.href = '#';
  delbtn.onclick = function()
  {
    delete_user(this);
    return false;
  }
  delbtn.appendChild(document.createTextNode('[X]'));
  li.appendChild(delbtn);
  
  li.appendChild(document.createTextNode(' ' + username));
  ul.appendChild(li);
  
  return true;
}

function userlist_init()
{
  var ul = document.getElementById('userlist');
  for ( var i = 0; i < userlist.length; i++ )
  {
    draw_user(ul, userlist[i]);
  }
}

function delete_user(a)
{
  var li = a.parentNode;
  var username = li.username;
  li.parentNode.parentNode.removeChild(li.userinput);
  li.parentNode.removeChild(li);
  
  for ( var i = 0; i < userlist.length; i++ )
  {
    if ( userlist[i] == username )
    {
      delete(userlist[i]);
      break;
    }
  }
}

function add_user_form()
{
  var ul = document.getElementById('userlist');
  
  if ( ul.parentNode.getElementsByTagName('form').length > 0 )
  {
    return false;
  }
  
  var theform = document.createElement('form');
  theform.action = 'javascript:void(0);';
  theform.onsubmit = function()
  {
    if ( this.username.value == '' || this.password.value == '' )
    {
      alert('Please enter a username and password.');
      return false;
    }
    if ( draw_new_user(this.username.value, this.password.value) )
    {
      this.parentNode.removeChild(this);
    }
    else
    {
      this.username.focus();
    }
    
    return false;
  }
  
  theform.appendChild(document.createTextNode('user: '));
  
  var i_user = document.createElement('input');
  i_user.type = 'text';
  i_user.name = 'username';
  i_user.size = '12';
  theform.appendChild(i_user);
  
  theform.appendChild(document.createTextNode(' pass: '));
  
  var i_pass = document.createElement('input');
  i_pass.type = 'password';
  i_pass.name = 'password';
  i_pass.size = '12';
  theform.appendChild(i_pass);
  
  theform.appendChild(document.createTextNode(' '));
  
  var i_sub = document.createElement('input');
  i_sub.type = 'submit';
  i_sub.value = 'Add';
  theform.appendChild(i_sub);
  
  ul.parentNode.appendChild(theform);
  
  i_user.focus();
}

window.onload = userlist_init;