// holds an instance of XMLHttpRequest
var xmlHttpValidate = createXmlHttpRequestObject();
var xmlHttpRegister = createXmlHttpRequestObject();

// URL to validate input
var validateURL = "validateProcess.php";

// URL for updating registration page
var registerURL = "registerProcess.php";

// initialize the validation requests cache 
var validateCache = new Array();

// how often to access the server
var updateInterval = 1000; // miliseconds to wait to get new message

// when set to true, display detailed error messages
var showErrors = true;


// the function handles the validation for any form field
function validate(inputValue, fieldID)
{
  // only continue if xmlHttp isn't void
  if (xmlHttpValidate)
  {
    // if we received non-null parameters, we add them to cache in the
    // form of the query string to be sent to the server for validation
    if (fieldID)
    {
      // encode values for safely adding them to an HTTP request query string
     inputValue = encodeURIComponent(inputValue);
     fieldID = encodeURIComponent(fieldID);
      // add the values to the queue
      validateCache.push("inputValue=" + inputValue + "&fieldID=" + fieldID);
    }
    // try to connect to the server
    try
    {
      // continue only if the XMLHttpRequest object isn't busy
      // and the cache is not empty
      if ((xmlHttpValidate.readyState == 4 || xmlHttpValidate.readyState == 0) && validateCache.length > 0)
      {
        // get a new set of parameters from the cache
        var cacheEntry = validateCache.shift();
        // make a server request to validate the extracted data
        xmlHttpValidate.open("POST", validateURL, true);
        xmlHttpValidate.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlHttpValidate.onreadystatechange = handleValidate;
        xmlHttpValidate.send(cacheEntry);
      }
    }
    catch (e)
    {
      // display an error when failing to connect to the server
      displayError(e.toString());
    }
  }
}


// function that handles the HTTP response
function handleValidate() 
{
  // when readyState is 4, we read the server response
  if (xmlHttpValidate.readyState == 4) 
  {
    // continue only if HTTP status is "OK"
    if (xmlHttpValidate.status == 200) 
    {
      try
      {
        // read the response from the server
        readValidate();
      }
      catch(e)
      {
        // display error message
        displayError(e.toString());
      }
    }
    else
    {
      // display error message
      displayError(xmlHttpValidate.statusText);
    }
  }
}

// read server's response 
function readValidate()
{
  // retrieve the server's response 
  var response = xmlHttpValidate.responseText;
  // server error?
  if (response.indexOf("ERRNO") >= 0 
      || response.indexOf("error:") >= 0
      || response.length == 0)
    throw(response.length == 0 ? "Server error." : response);
  // get response in XML format (assume the response is valid XML)
  responseXml = xmlHttpValidate.responseXML;
  // get the document element
  xmlDoc = responseXml.documentElement;
  result = xmlDoc.getElementsByTagName("result")[0].firstChild.data;
  fieldID = xmlDoc.getElementsByTagName("fieldid")[0].firstChild.data;
  
  //if statement prevents error that occurs when user cancels form.  is there a conflict with another script or xhr object? 
  if (document.getElementById("feedback_" + fieldID)) {document.getElementById("feedback_" + fieldID).innerHTML = result;}

  // call validate() again, in case there are values left in the cache
  setTimeout("validate();", 500);
}


function checkForm()
{
var j = 0;
var imgs = document.body.getElementsByTagName("img");
if (imgs.length) {
         for (var i = 0; i < imgs.length; i++) { 
		   if (imgs[i].className == "okay") {
		   j++;
		   }
		 }
		 }
		 if (j==4) {
		 	register(); } else { alert("The form is NOT complete"); }
}


/* makes asynchronous request to create new user */
function register()
{
  // save the message to a local variable and clear the text box
  var oRegisterUser = document.getElementById("registerUser").value;
  var oRegisterPass = document.getElementById("registerPass").value;
  var oRegisterName = document.getElementById("registerName").value;
  var oRegisteGender = document.getElementById("registerGender").value;
  var oRegisteEmail = document.getElementById("registerEmail").value;
  
  // only continue if xmlHttpRegister isn't void
  if(xmlHttpRegister)
  {
    try
    {
      // don't start another server operation if such an operation 
      //   is already in progress 
      if (xmlHttpRegister.readyState == 4 || 
          xmlHttpRegister.readyState == 0) 
      {

    params =  "mode=SendAndRetrieveNewUser" +
              "&username=" + encodeURIComponent(oRegisterUser) + 
             "&password=" + encodeURIComponent(oRegisterPass) +
			 "&name=" + encodeURIComponent(oRegisterName) +
			 "&gender=" + encodeURIComponent(oRegisteGender) +
			 "&email=" + encodeURIComponent(oRegisteEmail);

        // call the server page to execute the server-side operation
        xmlHttpRegister.open("POST", registerURL, true);
        xmlHttpRegister.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xmlHttpRegister.onreadystatechange = handleRegistration;
        xmlHttpRegister.send(params);
      }
      else
      {
        // we will check again for new messages 
        setTimeout("register();", updateInterval);
      }
    }
    catch(e)
    {
      displayError(e.toString());
    }
  }
}

// function that handles the HTTP response
function handleRegistration() 
{
  // when readyState is 4, we read the server response
  if (xmlHttpRegister.readyState == 4) 
  {
    // continue only if HTTP status is "OK"
    if (xmlHttpRegister.status == 200) 
    {
      try
      {
        // read the response from the server
        readRegister();
      }
      catch(e)
      {
        // display error message
        displayError(e.toString());
      }
    }
    else
    {
      // display error message
      displayError(xmlHttpRegister.statusText);
    }
  }
}

// read server's response 
function readRegister()
{
  // retrieve the server's response 
  var response = xmlHttpRegister.responseText;
  // server error?
  if (response.indexOf("ERRNO") >= 0 
      || response.indexOf("error:") >= 0
      || response.length == 0)
    throw(response.length == 0 ? "Server error." : response);
  document.getElementById("logPanel_Container").innerHTML = response;
}

// I'm not sure if this function is necessary; I think the
// form now clears itself automatically
function clearNewUserForm()
{
  document.getElementById("registerUser").value = "";
  document.getElementById("registerPass").value = "";
  document.getElementById("registerName").value = "";
  document.getElementById("registerGender").value  = "";
  document.getElementById("registerEmail").value = "";
  document.getElementById("registerTOS").checked = false;
  ajaxpage('getHeader.php', 'logPanel_Container');
}