window.onload = function() {

// preload the arrow image
help_arrow = new Image(8, 12);
help_arrow.src = "http://dev.tamewhale.com/tamewhale/images/help_arrow.png";
help_arrow_tag = '<img src="'+help_arrow.src+'" width="8" height="12" alt="&lt;" />';

function validateRegEx(regex, input, helpText, helpMessage) {
	// See if the input data validates OK
	if (!regex.test(input)) {
        // The data is invalid, so set the help message and return false
		if (helpText !== '') {
			helpText.style.display = "block";
			helpText.innerHTML = help_arrow_tag+helpMessage;
		}
	    return false;
	}
	else {
        // The data is OK, so confirm and return true
        if (helpText !== '') {
			helpText.style.display = "block";            
            helpText.innerHTML = help_arrow_tag+"Thanks!";
		}
        return true;
	}
}

function validateNotEmpty(inputField, helpText) {
	// check if field is empty
	if(inputField.value.length === 0 || inputField.value === 'Your message') {
		if (helpText !== '') {
			// if so display error message
			helpText.style.display = "block";            
			helpText.innerHTML = help_arrow_tag+"Please enter your " + inputField.name + ".";
		}
		return false;
	}
	else {
		// otherwise indicate correct
		if (helpText !== '') {
			helpText.style.display = "block";            
			helpText.innerHTML = help_arrow_tag+"Thanks!";
		}
		return true;
	}
}

function validateName(inputField, helpText) {
	return validateRegEx(/^[A-Za-z\s'-]+$/, inputField.value, helpText, "This name doesn't look right.");
}

function validateEmail(inputField, helpText) {
	return validateRegEx(/^[\w\.-_\+]+@[\w\-]+(\.\w{2,4})+$/, inputField.value, helpText, "This email looks weird to me.");
}

function submitForm(form) {	
	if (validateNotEmpty(form['name'],  document.getElementById('validate_name')) && 
		validateNotEmpty(form['email'], document.getElementById('validate_email')) && 
		validateNotEmpty(form['message'], '')) {
		form.submit();
	}
	else {
		alert('You\'ve left some parts of the form empty. Please try again.');
        return false;
	}
}

// remove and add text from textarea
document.getElementById("message").onfocus = function() {
    if (this.value == 'Your message') {
        this.value = '';
        this.className = 'focus';
    }
};

document.getElementById("message").onblur = function() {
    if (this.value === '') {
        this.className = '';
        this.value = 'Your message';
    }
};
    
// tie onblur events of each field to corresponding validation function
document.getElementById("name").onblur = function() {
    helptext = document.getElementById('validate_name');
    if (this.value.length === 0 || this.value === null) {
        helptext.style.display = "none";            
        helptext.innerHTML = '';
    }
    else {
        validateName(this, helptext);
    }
};

document.getElementById("email").onblur = function() { 
    helptext = document.getElementById("validate_email");
    if (this.value.length === 0 || this.value === null) {
        helptext.style.display = "none";            
        helptext.innerHTML = '';
    }
    else {
        validateEmail(this, helptext);        
    }
};

// validate form on submission
document.getElementById("submit").onclick = function() {
    submitForm(this.form);
    return false; // prevents form from being submitted by PHP
};

// set focus to first input field
document.getElementById("name").focus();
};