window.onload = init;
var maxedOutText = "No more, sorry."; // What text to input whenever you have no more characters to type

function init() {
	document.getElementById('countArea').innerHTML = 50-document.getElementById('text').value.length;
	if(document.getElementById('text').value.length >= 50) {
		document.getElementById('warning').innerHTML = maxedOutText;
	}
	else {
		document.getElementById('warning').innerHTML = "";
	}	
	colorCheck();
}

function updateCounter(field,maxlength,id,counter) {
	var totalLength = field.value.length;
	if(totalLength >= maxlength) {
		field.value = field.value.substring(0, maxlength);
		document.getElementById('warning').innerHTML = maxedOutText;
	}
	else {
		document.getElementById('warning').innerHTML = "";
	}	
	document.getElementById(counter).innerHTML = maxlength-field.value.length; // update the HTML to show the new number
	colorCheck(); // run a color check
}

function colorCheck() {
	// define some variables
	var textfield = document.getElementById('text');
	var countfield = document.getElementById('countArea');
	
	// check color codes
	if(textfield.value.length < 25) {
		countfield.style.color = "#cde1c7";	// color for good
	}
	else if(textfield.value.length > 45) {
		countfield.style.color = "#ff0000"; // color for bad
	}
	else {
		countfield.style.color = "#cde1c7"; // color for okay
	}	
}