/* call init function on page load */
addLoadListener(init);

function init() {
  var ajax = getXMLHttpRequestObject();
  
  if (ajax) {
    // if the contact response div is present
    if (document.getElementById('contactresponse')) { 
     
      //bind this funtion to the onsubmit of contactForm
      document.getElementById('contactForm').onsubmit = function() {
      
        //grab all values from the form
        var fn = document.getElementById('firstname').value;
        var ln = document.getElementById('surname').value;
        var ph = document.getElementById('phonenumber').value;
        var em = document.getElementById('email2').value;
        var cem = document.getElementById('confirmemail').value;
        var ty = document.getElementById('type').value;
        var de = document.getElementById('details').value;
		var si = document.getElementById('securityimage').value;
        
        //url and parameters past through to the page
        var url = "contact_submit_ajax.cfm";
        var params = "securityimage=" + si + "&firstname=" + fn + "&surname=" + ln + "&phonenumber=" + ph + "&email2=" + em + "&confirmemail=" + cem + "&type=" + ty +"&details=" + de;
        
        //POST the values to the page contact_submit_ajax.cfm
        ajax.open('POST', url, true);
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		ajax.setRequestHeader("Content-length", params.length);
		ajax.setRequestHeader("Connection", "close");

        ajax.onreadystatechange = function() {
          handleResponse(ajax);
        }

        ajax.send(params); 
        return false; 
      }     
    }    
  } 
} 

//handles the response from the contact_submit_ajax.cfm page
function handleResponse(ajax) {
  if (ajax.readyState == 4) {
  
    //if all is ok output all response text from contact_submit_ajax.cfm to the contactreponse div on the page
    if ((ajax.status == 200) || (ajax.status == 304) ) {
    
	  //get the contactresponse div, change the inner content of it to the reponse text from the contact_submit_ajax.cfm page
      var contactresponse = document.getElementById('contactresponse');
      contactresponse.innerHTML = ajax.responseText;    
      //get the contact area div, display the contact reponse, hide the contact form
      var contactarea = document.getElementById('contactarea');
      contactresponse.style.display = 'block';
      contactarea.style.display = 'none';       
       
       //if there is a problem with the ajax reponse then submit the page as normal    
    } else { 
      document.getElementById('contactForm').submit();
    }   
  }   
} 

// show the form again if errors are displayed, simply hides the contactresponse and shows the form again
function showform(){
	  var contactresponse = document.getElementById('contactresponse');
	  var contactarea = document.getElementById('contactarea');
	  var spacerelement = document.getElementById('spacerelement');
	  
	  contactresponse.style.display = 'none';
      contactarea.style.display = 'block';      
}