window.onload = function() {
	styleCheckboxesAndRadiobuttons();
	//checkForLabels();
}

function styleCheckboxesAndRadiobuttons() {
	var elements = document.getElementsByTagName('input');
	for (i = 0; i < elements.length; i++) {
		if (elements[i].type == 'checkbox' || elements[i].type == 'radio') {	
			switch (elements[i].className) {
				// Add other cases here for other symbols. Just remember 
				// to change in your css too.
				// The case is the same as the class you use when calling on the
				// input.
				case 'box_radio':
					createAlternateCheckboxOrRadiobutton(elements[i], i);
				break;
				case 'brown_radio':
					createAlternateCheckboxOrRadiobutton(elements[i], i);
				break;
			}
		}
	}
}

function createAlternateCheckboxOrRadiobutton(element, num) {
	var defaultClass = element.className + '-default';
	// Hide the original checkbox.
	element.style.display='none';
	// creates the new alternate checkbox
	var altElement = document.createElement('div');
	if (element.checked == true) {
		altElement.className = element.className;
	} else {
		altElement.className = defaultClass;
	}
	altElement.id = 'alt-' + element.id;
	element.parentNode.appendChild(altElement);

	// Handles onclick event.
	altElement.onclick = function(){
		if (element.checked != true) {
			if (element.type == 'radio') {
			  handleOnClickForRadiobuttons(element.name);
			}
			altElement.className = element.className;
			element.checked = true
		} else {
			if (element.type != 'radio') {
				/*
				handleOnClickForRadiobuttons(element.name);
				
			} else {
				*/
				element.checked = false;
				altElement.className = defaultClass;
			}
			
		}
	}
}

function handleOnClickForRadiobuttons(name) {
	var radiobuttons = document.getElementsByName(name);
	for (i = 0; i < radiobuttons.length; i++) {
			if (radiobuttons[i].type == 'radio') {
			var altRadiobutton = document.getElementById('alt-' + radiobuttons[i].id);
			altRadiobutton.className = radiobuttons[i].className + '-default';
		}
	}
}