//references to image files
var pathTo = "../images/";
var selected_true = pathTo + "selected_true_small.png";
var selected_false = pathTo + "selected_false_small.png";

function prepareInputs() {
	//make sure client supports functionality otherwise we'd end up removing it completely
	if (!document.getElementsByTagName) return;
	if (!document.getElementsByTagName("teacherSubFormCBoxes")) return;
	
	//grab all input elements on page
	var parentElement = document.getElementById("teacherSubFormCBoxes");
	var elements = parentElement.getElementsByTagName("input");
	for (var x=0; x < elements.length; x++) {
		if (elements[x].getAttribute("type") == "checkbox") {
			//create new markup element and assign unique id
			var image = document.createElement("img");
			image.setAttribute("id", "checkbox" + x);
			image.onclick = function () {
				if (this.checked) {
					this.setAttribute("src", selected_false);
					this.checked = false;
				}
				else {
					this.setAttribute("src", selected_true);
					this.checked = true;
				}
			}
			//manually align the damn box cause it's pissing me off
			image.setAttribute("class", "checkboxImage");
			
			//assign images based on state respectively
			if (elements[x].checked) {
				image.setAttribute("src", selected_true);
			}
			else {
				image.setAttribute("src", selected_false);
			}
			
			//grab the parent node and use the dom's insertBefore to inject this in place of the checkbox,
            elements[x].parentNode.insertBefore(image, elements[x]);
			
			//hide the checkbox now
            elements[x].style.display = "none";
        }
    }
}

addLoadEvent(prepareInputs);