/*

File: contact.js
Purpose: To submit a contact form for validation.  Also to clear the form of input.
Author: Ryan Brady
Last modified: January 2007
Requirements:
  - contact.submit.php (to validate and email input)
    - email.php (to create the email)
  - cssjs.js (to help with CSS classes via JavaScript)
  - sarissa.js (to help with the AJAX work and cross-browser support)
  - util-functions.js (for making the code easier and cleaner)
Comments:
  - Thanks to the tutorial at <http://yourhtmlsource.com/javascript/ajax.html> for help
Known-issues:

*/



//=================================================================================================
// Submit form to a server-side script for validation and handle what comes back
//=================================================================================================

addEvent(window, "load", init, false);

function init() {
  if (!Sarissa || !document.getElementsByTagName) {
    return;
  }
  var formElements = document.getElementsByTagName("form");
  for (var i = 0; i < formElements.length; i++) {
    if (formElements[i].className.match(/\bajax\b/)) {
      addEvent(formElements[i], "submit", processForm, false);
    }
  }
}

function processForm(e) {

  //-----------------------------------------------------------------------------------------------
  // Set things up
  //-----------------------------------------------------------------------------------------------

  // Cancel the submission and figure-out which for form was submitted (helpful with multiple forms)
  knackerEvent(e);
  var target = window.event ? window.event.srcElement : e ? e.target : null;        // target is the same as form#feedback here, but not always
  if (!target) {
    return;
  }
  var feedbackForm = document.getElementById("feedback");
  var parent = feedbackForm.parentNode;                                             // To be used in creating the status message

  // Disable the inputs for submission
  for (var i = 0; i < target.length; i++) {
    feedbackForm.elements[i].disabled = true;
  }

  // Display the working/loading indicator image                                    // Use feedbackForm instead of target in case the form is submitted with the Enter key
  if (document.getElementById("message")) {
    var messageP = document.getElementById("message");
    messageP.parentNode.removeChild(messageP);
  }
  var messageP = document.createElement("p");
  var messageText = document.createTextNode("Processing...");
  messageP.setAttribute("id", "message");
  cssjs("add", messageP, "processing");
  messageP.appendChild(messageText);
  parent.insertBefore(messageP, feedbackForm);

/*
  var processingIMG = document.createElement("img");
  processingIMG.src = "images/grass.background.png";
  processingIMG.setAttribute("id", "processing");
  processingIMG.setAttribute("alt", "Processing form submission");
  processingIMG.setAttribute("title", "Processing form submission");
  parent.insertBefore(processingIMG, target);
*/

  // The request: How and where the information is being sent
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("POST", "scripts/contact.submit.php", true);


  //-----------------------------------------------------------------------------------------------
  // Callback function
  //-----------------------------------------------------------------------------------------------
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4) {

      // Callback code: Do this when a response comes back
      if (xmlhttp.status == 200) {

        // Count the number of input fields and check the validation response for each one
        var fields = xmlhttp.responseXML.getElementsByTagName("field");
        for (var i = 0; i < fields.length; i++) {
  
          //document.getElementById("xml").value = i + " ";

          if (xmlhttp.responseXML.getElementsByTagName("input")[i].firstChild) {
            var input = xmlhttp.responseXML.getElementsByTagName("input")[i].firstChild.data;   // The input given by the user
          }
          var flag = xmlhttp.responseXML.getElementsByTagName("flag")[i].firstChild.data;       // Whether or not the <input> passed validation
          var label = xmlhttp.responseXML.getElementsByTagName("label")[i].firstChild.data;     // The <label> that the <input> is under (in case a single <label> is used for more than one <input>)
          label = label + "_label";                                                             // Make it match it's HTML id (done here instead of responseXML for easier changes)

          // Check if the input passed validation or not
          if (flag == 0) {
            cssjs("add", document.getElementById(label), "stop");
          }
          if (flag == 1) {
            if (cssjs("check", document.getElementById(label), "stop") == true) {
              cssjs("remove", document.getElementById(label), "stop");
            }
          }
  
          // Can't figure-out why this switch won't work in place of the if... then's above
          /*switch (flag) {
            case 0:
              cssjs("add", document.getElementById(label), "stop");
              break;
            case 1:
              if (cssjs("check", document.getElementById(label), "stop") == true) {
                cssjs("remove", document.getElementById(label), "stop");
              }
              break;
          }*/
  
        } // Loop over i

        // Check to see if the whole form is OK to send
        var send = xmlhttp.responseXML.getElementsByTagName("send")[0].firstChild.data;
        if (send == 1) {
          // Validation is passed -----------------------------------------------------------------
  
          // Remove the error-indicator if necessary - - - - - - - - - - - - - - - - - - - - - - - 
          for (var j = 0; j < target.length; j++) {                       // It's possible for the variables, "fields" and, "target" to be different
  
            if (cssjs("check", document.getElementById(label), "stop") == true) {
              cssjs("remove", document.getElementById(label), "stop");
            }
  
            cssjs("add", feedbackForm, "sent");
            feedbackForm.elements[j].disabled = true;
  
          }

          // Display a confirmation message - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          // Remove the error message if it is there and them re-create <p id="message">
          if (document.getElementById("message")) {
            var messageP = document.getElementById("message");
            messageP.parentNode.removeChild(messageP);
          }
          var messageP = document.createElement("p");
          messageP.setAttribute("id", "message");

          // See if the email was successfully sent or not - - - - - - - - - - - - - - - - - - - -
          var sendSuccess = xmlhttp.responseXML.getElementsByTagName("success")[0].firstChild.data;
          if (sendSuccess == 1) {

            var messageText = document.createTextNode("Thank you!");
            cssjs("add", messageP, "success");
            messageP.appendChild(messageText);                              // Make the inside of <p id="message">

          } else {

            var messageText1 = document.createTextNode("Sorry, there was an error sending the message. " + "\u00a0" + "Please ");
            var messageText2 = document.createTextNode(" us directly.");

            var emailA = document.createElement("a");
            emailA.setAttribute("href", "mailto:info@casassaryan.com");
            var emailText = document.createTextNode("email");
            emailA.appendChild(emailText);

            cssjs("add", messageP, "error");
            messageP.appendChild(messageText1);
            messageP.appendChild(emailA);
            messageP.appendChild(messageText2);

          }

          parent.insertBefore(messageP, feedbackForm);                    // Insert <p id="message"> before <form id="feedback">


          // Remove the buttons - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
          var feedbackButtons = document.getElementById("feedback_buttons");
          feedbackButtons.parentNode.removeChild(feedbackButtons);

        } else {
          // Validation not passed (flags are already set above) ----------------------------------

          // Enable the inputs for editting
          for (var k = 0; k < target.length; k++) {
            feedbackForm.elements[k].disabled = false;
          }

          // Make <p id="message"> it it hasn't been made already
          if (document.getElementById("message")) {
            var messageP = document.getElementById("message");
            messageP.parentNode.removeChild(messageP);
          }

          var messageP = document.createElement("p");
          messageP.setAttribute("id", "message");
          cssjs("add", messageP, "fix");
          var messageText1 = document.createTextNode("Please fix the ");
          var messageText2 = document.createTextNode(" and try again.");

          // For <span class="stop">
          var errorSpan = document.createElement("span");
          var errorText = document.createTextNode("errors");
          //errorSpan.setAttribute("class", "stop");
          cssjs("add", errorSpan, "stop");                              // For IE (the above setAttribute() won't work)
          errorSpan.appendChild(errorText);

          // Make the inside of <p id="message">
          messageP.appendChild(messageText1);
          messageP.appendChild(errorSpan);
          messageP.appendChild(messageText2);

          // Insert <p id="message"> before <form id="feedback">
          parent.insertBefore(messageP, feedbackForm);

        }

      } else {

        // Submit server-side-style (without AJAX)
        target.submit();

      }
    }
  }


  //-----------------------------------------------------------------------------------------------
  // Send the POST request as name-value pairs
  //-----------------------------------------------------------------------------------------------

  // Construct the name-value string to send
  posts  = "name=" + feedbackForm.elements["name"].value;
  posts += "&phone=" + feedbackForm.elements["phone"].value;
  posts += "&email=" + feedbackForm.elements["email"].value;
  posts += "&comments=" + feedbackForm.elements["comments"].value;

  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xmlhttp.send(posts);


}



//=================================================================================================
// Submit the form when the Enter key is pressed (not used/needed)
//=================================================================================================
function ifEnterKey(e) {

  var key = e.which;
  if (key == 13) {
    processForm(e);
  } else {
    return true;
  }

}



//=================================================================================================
// Clear form with the "Clear" button
//=================================================================================================
function clearFeedback() {

  var feedback = document.getElementById("feedback");
  for (var i = 0; i < feedback.length; i++) {

    // Clear input and make available
    feedback.elements[i].disabled = false;                              // Because the AJAX part seems to keep it disabled after submission (even after refresh) unless the page is navigated after and then back
    if (feedback.elements[i].type == "text" || feedback.elements[i].type == "textarea") {     // Because of things like the buttons with "fixed" values
      feedback.elements[i].value = "";
    }

    // Remove any previously-place error-indicators
    if (document.getElementById(feedback.elements[i].id + "_label")) {
      var label = document.getElementById(feedback.elements[i].id + "_label");      // One <label> may be used for more than one <input>
      if (cssjs("check", label, "stop") == true) {
        cssjs("remove", label, "stop");
      }
    }

  }

  // Remove <p id="message"> if it is there
  if (document.getElementById("message")) {
    var messageP = document.getElementById("message");
    messageP.parentNode.removeChild(messageP);
  }

  document.getElementById("name").focus();

}