// JavaScript Document
//first we apply some DOM manipulation using jquery for user interaction with the form
$(document) .ready(function() {
  $('.error').hide();//This hides all elements with a class of 'error'
  
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#bfddf7"});
  });
  
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });
  
  $('textarea.text-input').css({backgroundColor:"#FFFFFF"});
  
  $('textarea.text-input').focus(function(){
    $(this).css({backgroundColor:"#bfddf7"});
  });
  
  $('textarea.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });
  
  $("input#name").select().focus();//when the page loads the first form field gains focus
});

function checkform(){//This is our validation of the contact form during user submittal
	
		$('.error').hide();//hides all elements with a class or 'error'
	
	  var name = $("input#name").val();//Gathers the value of the name for field
	  
		if (name == "") {//if the name form field is empty ajax reveals the error code
      $("label#name_error").show();
      $("input#name").focus();//name form field gains focus to guide the user
      return false;
    }
		var email = $("input#email").val();//see name form field validation
		
		if (email == "") {
      $("label#email_error").show();
      $("input#email").focus();
      return false;
    }
		var message = $("textarea#message").val();//see name form field validation
		
		if (message == "") {
      $("label#message_error").show();
      $("textarea#message").focus();
      return false;
    }
		var code = $("input#code").val();//see name form field validation
		
		if (code == "") {
      $("label#code_error").show();
      $("input#code").focus();
      return false;
    }
	checkcode(code);//see line 113
          return false;//stay on this page
}

//The following limits the number of characters that are allowed in each form field, and displays the remaining number of characters in an optional div or span or whatever as you type!

function textCounter(limitField, limitNum){
	if (limitField.value.length > limitNum) {
		limitField.value = limitField.value.substring(0,limitNum);
	/*}else{
		limitCount.value = (limitNum - limitField.value.length);
	}*/
}}

function inputCounter(limitField, limitNum){
	if (limitField.value.length > limitNum) {
		limitField.value = limitField.value.substring(0,limitNum);
	/*}else{
		limitCount.value = (limitNum - limitField.value.length);
	}*/
}}

//declare some variables

var url = '/Scripts/captcheck.php?code=';//specify the URL for the server-side script variable used again on line 114.  This URL will then have the Code appended to it so that the code is passed as an HTTP GET parameter named code. This means that if a user types in the code of 17534, the resulting URL would be captcheck.php?code=17534.
var captchaOK = 2;  // 2 - not yet checked, 1 - correct, 0 - failed.  lines 124,125

//The best way to create the XMLHttpRequest object is to use a function named getHTTPObject(). This function has precompiled directives which make it pretty cross-browser compatible.

var http = getHTTPObject(); // We create the HTTP Object        

function getHTTPObject(){
        try {
        req = new XMLHttpRequest();
          } catch (err1)
          {
          try {
          req = new ActiveXObject("Msxml12.XMLHTTP");
          } catch (err2)
          {
          try {
            req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (err3)
            {
	req = false;
            }
          }
	}
        return req;//same as return false;
}

//Check the code to see if it matches the special code string currently in the session
function checkcode(thecode) {//thecode holds the value of the code field in the form
        http.open("GET", url + escape(thecode), true);//url = 'captcheck.php?code=input from user' open(mode, url, boolean) mode: type of request, GET or POST; url: the location of the file, with a path; boolean: true (asynchronous) / false (synchronous)

        http.onreadystatechange = handleHttpResponse;//function on line 123
		//Before we send the HTTP request, we specify the onreadystatechange property to be the name of our new function handleHttpResponse(). This means that every time the HTTP ready state has changed, our function handleHttpResponse() is called. 
        http.send(null);//null for a get command, 'string' for a post
}

//Our new function handleHttpResponse() sits there waiting to be called and when it does get called, it check to see if the readyState is equal to 4. If it is equal to 4 this means that the request is complete. Since the request is complete, it is now fair game to grab the response text (responseText), unpack it, and perform the rest of the actions in the function.

function handleHttpResponse() {
        if (http.readyState == 4) {
            captchaOK = http.responseText;//holds loaded data as a string of characters
            if(captchaOK != 1) {
              //alert('The entered code was not correct. Please try again');
			  	$("label#wrong_code").show();
      			$("input#code").focus();
              //document.myform.code.value='';
              //document.myform.code.focus();
              return false;
              }
              //document.myform.submit();
			  $.get('/Scripts/result.php',{name:$('#name').val(), email:$('#email').val(), message:$('#message').val()},
		//return the data
		function(data){
			//hide the graphic
			$('#style').html("<div id='response'></div>");
			$('#response').html(data)
		});	
	
		//stay on the page					
		return false;	
  	}
}