/* Debugging function
 */
function writeDebugMessage(message) {
  var debugNode = document.getElementById('debug-output');
  if(debugNode==null) {
    // create it
    debugNode = document.createElement('ul');
    debugNode.setAttribute('id', 'debug-output');
    debugNode.style.background = 'white none';
    debugNode.style.color = '#000000';
    debugNode.style.borderStyle = 'solid';
    debugNode.style.borderWidth = 'medium';
    debugNode.style.borderColor = '#000000';
    debugNode.style.position = 'absolute';
    debugNode.style.top = '1em';
    debugNode.style.left = '1em';
    debugNode.style.width = '40%';
    debugNode.style.zIndex = '100';
    document.getElementsByTagName('body')[0].appendChild(debugNode);
  }
  var debugMessage = document.createElement('li');
  debugMessage.appendChild(document.createTextNode(message));
  debugNode.appendChild(debugMessage);
}


/* Returns an object with the name=value pairs from the query string
 * as properties.  Taken from 'Javascript: The Definitive Guide'
 * by David Flanagan (Example 13-5).
 */
function getArgs() {
  var args = new Object();
  var pairs = location.search.substring(1).split(',');
  for(var i=0; i<pairs.length; i++) {
    var pos = pairs[i].indexOf('=');
    if(pos==-1)
      continue;
    with(pairs[i])
      args[substring(0, pos)] = decodeURIComponent(substring(pos+1));
  }
  return args;
}


/* Returns whether the browser supports any of the
 * methods the following function knows about
 */
function canGetElementDimensions(element) {
  return (window.getComputedStyle || element.currentStyle
          || (element.offsetWidth && element.offsetHeight));
}


/* Returns the computed height of an element
 */
function getElementHeight(element) {
  // first try with a CSS2Properies object
  if(window.getComputedStyle) {
    var elementStyle = window.getComputedStyle(element, null);
  } else if(element.currentStyle) {
    var elementStyle = element.currentStyle;
  } else {
    elementStyle = null;
  }
  if(elementStyle) {
    var elementInternalHeight = elementStyle.height;
    elementInternalHeight = elementInternalHeight.substring(0, elementInternalHeight.length-2);  // crop the 'px' units
    if(parseInt(elementInternalHeight)==elementInternalHeight) {
      var elementPaddingTop = elementStyle.paddingTop;
      elementPaddingTop = elementPaddingTop.substring(0, elementPaddingTop.length-2);
      if(parseInt(elementPaddingTop)==elementPaddingTop) {
        var elementPaddingBottom = elementStyle.paddingBottom;
        elementPaddingBottom = elementPaddingBottom.substring(0, elementPaddingBottom.length-2);
        if(parseFloat(elementPaddingBottom)==elementPaddingBottom)
          return Number(elementPaddingTop) + Number(elementInternalHeight) + Number(elementPaddingBottom);
      }
    }
  }

  // next try an IE-specific property
  if(element.offsetHeight) {
    var elementHeight = element.offsetHeight;
    if(parseInt(elementHeight)==elementHeight)
      return elementHeight
  }

  // if we've got this far, then we're stuck
  return 0;
}


/* Slides the login form into or out of view
 * via a series of setTimeout calls
 */
function moveLoginForm(where, increment) {
  var loginDiv = document.getElementById('login-form');
  var loginDivHeight = Math.floor(getElementHeight(loginDiv));
  if((increment>0 && where<0)
     || (increment<0 && where>-loginDivHeight)) {
    loginDiv.style.top = where+'px';
    window.setTimeout('moveLoginForm('+(where+increment)+', '+increment+')', 0);
  } else if(increment<0) {
    // hide the form when we're done, to get
    // the controls out of the tabbing order
    loginDiv.style.visibility = 'hidden';
  }
}


/* Creates and shows a login form
 */
function showLoginForm() {
  // Check that we have DOM support, return true otherwise
  // to allow the fallback link to be followed
  if(!document.createElement
     || !document.getElementById
     || !document.getElementsByTagName
     || !document.body.setAttribute
     || !document.body.appendChild
     || !canGetElementDimensions(document.body)
     || !document.body.style)
    return true;

  var loginDiv = document.getElementById('login-form');
  if(loginDiv==null) {
    // Create the login form
    // Note that all styles must be applied inline so that IE will recognise them

    // get the querystring arguments for use later
    var args = getArgs();

    var loginDiv = document.createElement('div');
    loginDiv.setAttribute('class', 'sub-navigation');
    loginDiv.setAttribute('id', 'login-form');
    loginDiv.onkeypress = function(event) {
                            event = event ? event : window.event;
                            if(event.keyCode==27)
                              moveLoginForm(-1, -10)
                          };
    loginDiv.style.position = 'absolute';
    loginDiv.style.top = '-999px';
    loginDiv.style.right = '20px';
    loginDiv.style.width = '195px';
    // the following styles ought to be in the stylesheet, but for IE
    loginDiv.style.background = '#CCCCFF none';
    loginDiv.style.color = '#000000';
    loginDiv.style.fontSize = '87%';
    loginDiv.style.padding = '0';
    loginDiv.style.borderStyle = 'solid';
    loginDiv.style.borderWidth = '3px';
    loginDiv.style.borderColor = '#000000';
    loginDiv.style.margin = '0 0 0.6em 0';
    loginDiv.style.overflow = 'hidden';

      var loginHeading = document.createElement('h2');
      var loginCloseButton = document.createElement('span');
      loginCloseButton.onclick = function() {moveLoginForm(-1, -10)};
      loginCloseButton.style.display = 'block';
      loginCloseButton.style.cursor = 'pointer';
      loginCloseButton.style.cssFloat = 'right';   // for Moz, etc.
      loginCloseButton.style.styleFloat = 'right'; // for IE
      loginCloseButton.appendChild(document.createTextNode('x'));
      loginHeading.appendChild(loginCloseButton);
      loginHeading.appendChild(document.createTextNode('Login'));
      loginDiv.appendChild(loginHeading);

      var loginForm = document.createElement('form');
      loginForm.setAttribute('method', 'post');
      loginForm.setAttribute('action', '/forum/login.php');
      loginDiv.appendChild(loginForm);

        var loginList = document.createElement('ul');
        // the following styles ought to be in the stylesheet, but for IE
        loginList.style.padding = '0';
        loginList.style.margin = '0';
        loginForm.appendChild(loginList);

          var loginItemUsername = document.createElement('li');
          loginItemUsername.setAttribute('class', 'odd');
          // the following styles ought to be in the stylesheet, but for IE
          loginItemUsername.style.background = '#BDBDFF none';
          loginItemUsername.style.color = '#000000';
          loginItemUsername.style.listStyleType = 'none';
          loginItemUsername.style.padding = '0.1em 0.1em 0.2em 0.1em';
          loginItemUsername.style.margin = '0';
          loginList.appendChild(loginItemUsername);

            var loginLabelUsername = document.createElement('label');
            loginItemUsername.appendChild(loginLabelUsername);

              var loginSpanUsername = document.createElement('span');
              loginSpanUsername.style.cssFloat = 'left';   // for Moz, etc.
              loginSpanUsername.style.styleFloat = 'left'; // for IE
              loginSpanUsername.style.width = '6em';
              loginSpanUsername.appendChild(document.createTextNode('Username:'));
              loginLabelUsername.appendChild(loginSpanUsername);

              var loginInputUsername = document.createElement('input');
              loginInputUsername.setAttribute('name', 'username');
              loginInputUsername.setAttribute('id', 'login-form-username');
              loginInputUsername.setAttribute('size', '15');
              loginInputUsername.setAttribute('type', 'text');
              loginLabelUsername.appendChild(loginInputUsername);

          var loginItemPassword = document.createElement('li');
          loginItemPassword.setAttribute('class', 'even');
          // the following styles ought to be in the stylesheet, but for IE
          loginItemPassword.style.background = '#CCCCFF none';
          loginItemPassword.style.color = '#000000';
          loginItemPassword.style.listStyleType = 'none';
          loginItemPassword.style.padding = '0.1em 0.1em 0.2em 0.1em';
          loginItemPassword.style.margin = '0';
          loginList.appendChild(loginItemPassword);

            var loginLabelPassword = document.createElement('label');
            loginItemPassword.appendChild(loginLabelPassword);

              var loginSpanPassword = document.createElement('span');
              loginSpanPassword.style.cssFloat = 'left';   // for Moz, etc.
              loginSpanPassword.style.styleFloat = 'left'; // for IE
              loginSpanPassword.style.width = '6em';
              loginSpanPassword.appendChild(document.createTextNode('Password:'));
              loginLabelPassword.appendChild(loginSpanPassword);

              var loginInputPassword = document.createElement('input');
              loginInputPassword.setAttribute('name', 'password');
              loginInputPassword.setAttribute('size', '15');
              loginInputPassword.setAttribute('maxlength', '32');
              loginInputPassword.setAttribute('type', 'password');
              loginLabelPassword.appendChild(loginInputPassword);

          var loginItemRemember = document.createElement('li');
          loginItemRemember.setAttribute('class', 'odd');
          // the following styles ought to be in the stylesheet, but for IE
          loginItemRemember.style.background = '#BDBDFF none';
          loginItemRemember.style.color = '#000000';
          loginItemRemember.style.listStyleType = 'none';
          loginItemRemember.style.padding = '0.1em 0.1em 0.2em 0.1em';
          loginItemRemember.style.margin = '0';
          loginList.appendChild(loginItemRemember);

            var loginInputSubmit = document.createElement('input');
            loginInputSubmit.setAttribute('name', 'login');
            loginInputSubmit.setAttribute('value', 'Log in');
            loginInputSubmit.setAttribute('title', 'Log in');
            loginInputSubmit.setAttribute('type', 'submit');
            loginInputSubmit.style.display = 'block';
            loginInputSubmit.style.cssFloat = 'right';   // for Moz, etc.
            loginInputSubmit.style.styleFloat = 'right'; // for IE
            loginItemRemember.appendChild(loginInputSubmit);

            var loginLabelRemember = document.createElement('label');
            loginItemRemember.appendChild(loginLabelRemember);

              var loginInputRemember = document.createElement('input');
              loginInputRemember.setAttribute('name', 'autologin');
              loginInputRemember.setAttribute('type', 'checkbox');
              loginLabelRemember.appendChild(loginInputRemember);

              loginLabelRemember.appendChild(document.createTextNode('Remember me'));

            var loginInputRedirect = document.createElement('input');
            loginInputRedirect.setAttribute('name', 'redirect');
            loginInputRedirect.setAttribute('value', location.pathname+location.search+location.hash);
            loginInputRedirect.setAttribute('type', 'hidden');
            loginItemRemember.appendChild(loginInputRedirect);

            var loginInputSid = document.createElement('input');
            loginInputSid.setAttribute('name', 'sid');
            if(args.sid)
              loginInputSid.setAttribute('value', args.sid);
            else
              loginInputSid.setAttribute('value', '');
            loginInputSid.setAttribute('type', 'hidden');
            loginItemRemember.appendChild(loginInputSid);

            var loginInputOutside = document.createElement('input');
            loginInputOutside.setAttribute('name', 'outside');
            loginInputOutside.setAttribute('value', '1');
            loginInputOutside.setAttribute('type', 'hidden');
            loginItemRemember.appendChild(loginInputOutside);

          var loginItemRegister = document.createElement('li');
          loginItemRegister.setAttribute('class', 'even last');
          // the following styles ought to be in the stylesheet, but for IE
          loginItemRegister.style.background = '#CCCCFF none';
          loginItemRegister.style.color = '#000000';
          loginItemRegister.style.listStyleType = 'none';
          loginItemRegister.style.padding = '0.1em 0.1em 0.2em 0.1em';
          loginItemRegister.style.margin = '0';
          loginItemRegister.style.clear = 'right';
          loginList.appendChild(loginItemRegister);

            loginItemRegister.appendChild(document.createTextNode('» '));

            var loginItemRegisterLink = document.createElement('a');
            var url = '/forum/profile.php?mode=register';
            if(sessionId!='')
              url += '&sid='+sessionId;
            loginItemRegisterLink.setAttribute('href', url);
            loginItemRegisterLink.appendChild(document.createTextNode('Register'));
            loginItemRegister.appendChild(loginItemRegisterLink);

            loginItemRegister.appendChild(document.createTextNode(' | '));

            var loginItemRegisterLink = document.createElement('a');
            var url = '/forum/profile.php?mode=sendpassword';
            if(sessionId!='')
              url += '&sid='+sessionId;
            loginItemRegisterLink.setAttribute('href', url);
            loginItemRegisterLink.appendChild(document.createTextNode('Lost pwd?'));
            loginItemRegister.appendChild(loginItemRegisterLink);

    document.getElementsByTagName('body')[0].appendChild(loginDiv);
    loginInputSubmit.value='Log in';  // for the benefit of IE
  } else {
    // we've already created the login form
    // - we just need to show it
    loginDiv.style.visibility = 'visible';
    var loginInputUsername = document.getElementById('login-form-username');
  }
  loginInputUsername.focus();

  // Slide the loginDiv into view
  var height = Math.floor(getElementHeight(loginDiv));
  moveLoginForm(-height, 5);

  return false;
}