addLoadEvent(prepareFields);
addLoadEvent(prepareTextarea);

/* when called, it will change the input fields with class='field' 
	to different colors on focus and on blur */
function prepareFields() {
	//checkpoints
	if (!document.getElementsByTagName) return false;
	if (!document.getElementsByTagName("input")) return false;

	//create array with all input tags
	var fields = document.getElementsByTagName("input");	
	//loop through array
	for (var i=0; i < fields.length; i++) {
		//if input tag has class='field'
		if (fields[i].className == "field") {
			fields[i].onfocus = function() { //on focus
				//check that the field is not currently assigned the error class
				if (this.className.indexOf("error") == -1) {
					//set another class "highlighted" to inherit, changes background
					this.className = "field highlighted";
				}
			}
			fields[i].onblur = function() { //on blur
				//check that the field is not currently assigned the error class
				if (this.className.indexOf("error") == -1) {
					//remove inherited class "highlighted" to remove bg
					this.className = "field";
				}
			}
		}
	}
}

function prepareTextarea() {
	//checkpoints
	if (!document.getElementById) return false;
	if (!document.getElementById("message")) return false;

	//get textarea box with id "message"
	var textarea = document.getElementById("message");
	textarea.onfocus = function() { //on focus
		//check that the field is not currently assigned the error class
		if (this.className.indexOf("error") == -1) {
			//set class to "highlighted"  to inherit its properties
			this.className = "highlighted";
		}
	}
	textarea.onblur = function() { //on blur
		//check that the field is not currently assigned the error class
		if (this.className.indexOf("error") == -1) {
			//remove class name to remove inherited properties
			this.className ="";
		}
	}
}