// contacto_user.js

/*  This page does all the magic for applying
 *  Ajax to an "add an user" form.
 *  The form data is sent to a PHP 
 *  script using the POST method.
 *  The PHP script sends back a response in XML format.
 */
 
// Have a function run after the page loads:
window.onload = init;
var xmail = '';
// Function that adds the Ajax layer:
function init() {

  // Get an XMLHttpRequest object:
  var ajax = getXMLHttpRequestObject();
  
  // Attach the function call to the form submission, if supported:
  if (ajax) {

    // Check for DOM support:
    if (document.getElementById('results')) {
  	
      // Add an onsubmit event handler to the form:
      document.getElementById('frm').onsubmit = function() {
		// Open the connection:
        ajax.open('post', '../Scripts/contacto_user_xml.php');
        
        // Function that handles the response:
        ajax.onreadystatechange = function() {
          // Pass it this request object:
          handleResponse(ajax);
        }
		
		// Assemble all the form data:
		var fields = ['nombre', 'asunto', 'email','fecha_nacimiento','observaciones'];
				
		for (var i = 0; i < fields.length; i++) {
		  	fields[i] = fields[i] + '=' + (document.getElementById(fields[i]).value);
        }
        var values = fields.join('&');
				
        // Set the request headers:
        ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        
        // Send the request along with the data:
        ajax.send(values);
      
        return false; // So form isn't submitted.

      } // End of anonymous function.
      
    } // End of DOM check.
    
  } // End of ajax IF.

} // End of init() function.

// Function that handles the response from the PHP script:
function handleResponse(ajax) {
  // Clear attribute 
  document.getElementById('nombre').setAttribute("class", "");
  document.getElementById('nombre').setAttribute("className", "");
   
 /* document.getElementById('observaciones').setAttribute("class", "");
  document.getElementById('observaciones').setAttribute("className", "");*/
  
  document.getElementById('email').setAttribute("class", "");
  document.getElementById('email').setAttribute("className", "");
  
  document.getElementById('fecha_nacimiento').setAttribute("class", "");
  document.getElementById('fecha_nacimiento').setAttribute("className", "");
   
  // Check that the transaction is complete:
  if (ajax.readyState == 4) {
	 
	// Check for a valid HTTP status code:
    if ((ajax.status == 200) || (ajax.status == 304) ) {
    
      var results = document.getElementById('results');
      	
      // Get the XML data:
      var data = ajax.responseXML;
      
      // Get the main response:
      var message = data.getElementsByTagName('result');
   	  
      // Get all the errors:
      var errors = data.getElementsByTagName('error');
      
      // Loop through each error:
      for (var i = 0; i < errors.length; i++) {
		// Change the value depending on error values:
		document.getElementById(errors[i].firstChild.nodeValue).setAttribute("class", "invalid");
		document.getElementById(errors[i].firstChild.nodeValue).setAttribute("className", "invalid");
      } // End of FOR loop.
	  
      // Put the received response in the DOM:
      results.innerHTML = message[0].firstChild.nodeValue;
     
      // Make the results box visible:
      results.style.display = 'block';
	  
    } else { // Bad status code, submit the form.
      document.getElementById('frm').submit();
    }
    
  } // End of readyState IF.
  
} // End of handleResponse() function.