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;