/**
 * Counts the number of characters that have been used 
 * in the message field. If the number of characters is 
 * over the max of 1000, it alerts the user and changes the 
 * value of the textAraa back to the first 1000 characters
 * 
 * @return void
 */
function countCharacters()
{
    textArea = document.getElementById('message');
    addText  = textArea.value;
    strLen   = addText.length;
    
    // Check if the message is over the limit
    if (strLen > 1000) {
        textArea.value = addText.substring(0, 1000);
        alert('The maximum length for online submission is 1000 characters!');
        strLen = 1000;
    }
    
    // Set the inner HTML of the div stating the number of currently used characters 
    document.getElementById('charactersUsed').innerHTML = 'currently '+strLen+' characters';
}

/**
 * Validates that the required fields of the contact form have been filled out.
 * If validation passes, it will submit the form, else it will alert the user
 * what fields are missing.
 * 
 * the section parameter tells the function if it came from chamber, visitors or community,
 * and colors the background of each missing fields to the section's color schema.
 * 
 * @param string section
 * @return void
 */
function submitContactForm(section)
{
	// Gether the form elements into variables for quicker processing
	var captchaVal = document.getElementById('captchaValue').value;
	var captcha	   = document.getElementById('captcha');
    var mailForm   = document.getElementById('contactUs');
    var fname      = document.getElementById('fname');
    var lname      = document.getElementById('lname');
    var email      = document.getElementById('email');
    var textArea   = document.getElementById('message');
    var textValue  = textArea.value;

    // instantiate the error variable
    var error = '';
    
    // Assign the background color of empty required fields according to section
    switch (section) {
    	case 'Chamber':
    		var bgColor= '#DCEDF6';
    		break;
    	case 'Visitors':
    		var bgColor = '#FFEDD3';
    		break;
    	case 'Community':
    	default:
    		var bgColor = '#E4CABE';
    		break;
    }

    // Begin required fields validation
    if (fname.value == '') {
        error += "- First name\n";
        fname.style.backgroundColor = bgColor;
    } else {
        fname.style.backgroundColor = "#FFFFFF";
    }

    if (lname.value == "") {
        error += "- Last Name\n";
        lname.style.backgroundColor = bgColor;
    } else {
        lname.style.backgroundColor = "#FFFFFF";
    }

    if (email.value == '') {
        error += "- Email\n";
        email.style.backgroundColor = bgColor;
    } else {
        email.style.backgroundColor = "#FFFFFF";
    }
    
    if (textValue.length == 0) {
    	error += "- Message\n";
    	textArea.style.backgroundColor = bgColor;
    } else {
    	textArea.style.backgroundColor = "#FFFFFF";
    }
    
    if (captchaVal != captcha.value) {
    	error += "- Captcha field does not equal the text on the image"
    	captcha.style.backgroundColor = bgColor;
    }
    // End of field validation
    

    // If there is an error message, output an alert listing the required fields, else submit the form.
    if (error != '') {
        error = "Please fill out the required fields:\n\n" + error;
        alert(error);
        return false;
    } else {
    	//document.getElementById('contactUs').submit();
    	//$('#contactUs').submit();
    	return true;
    }
}

// Add select instance methods and reset background color to white on the focus of the contact form's input fields
$(document).ready(function() {
	$('.contactField').focus(function(){
		this.select();
		this.style.backgroundColor = '#FFFFFF';
	});
});