//global variables inputs, imgFalse, imgTrue, radioFalse, radioTrue are defined in checkboxStyles_(template_name).js

//this function runs when the page is loaded, put all your other onload stuff in here too.
function inputboxes_init() {
	replaceInputBoxes();
}

function replaceInputBoxes() {
	
	//get all the input fields on the page
	inputs = document.getElementsByTagName('input');

	//cycle trough the input fields
	for(var i=0; i < inputs.length; i++) {

		//check if the input is a checkbox
		if((inputs[i].getAttribute('type') == 'checkbox') || (inputs[i].getAttribute('type') == 'CHECKBOX')) {
			
			//create a new image
			var img = document.createElement('img');
			
			//check if the checkbox is checked
			if(inputs[i].checked) {
				img.src = imgTrue;
			} else {
				img.src = imgFalse;
			}

			//set image ID and onclick action
			img.id = 'checkImage'+i;
			//set image 
			img.onclick = new Function('checkChange('+i+')');
			//place image in front of the checkbox
			inputs[i].parentNode.insertBefore(img, inputs[i]);
			
			//hide the checkbox
			inputs[i].style.display='none';

		} else if((inputs[i].getAttribute('type') == 'radio') || (inputs[i].getAttribute('type') == 'RADIO')) {
			
			//create a new image
			var img = document.createElement('img');
			
			//check if the radio button is checked
			if(inputs[i].checked) {
				img.src = radioTrue;
			} else {
				img.src = radioFalse;
			}

			//set image ID and onclick action
			img.id = 'radioImage'+i;
			//set image 
			img.onclick = new Function('checkRadioChange('+i+')');
			//place image in front of the checkbox
			inputs[i].parentNode.insertBefore(img, inputs[i]);
			
			//hide the radio button
			inputs[i].style.display='none';
		}

	}
}

//change the checkbox status and the replacement image, and does any other onClick action assigned to the checkbox
function checkChange(i) {

	if(inputs[i].checked) {
		inputs[i].checked = '';
		document.getElementById('checkImage'+i).src=imgFalse;
	} else {
		inputs[i].checked = 'checked';
		document.getElementById('checkImage'+i).src=imgTrue;
	}
	
	try {
		inputs[i].onclick();
	} catch(e) {
		//if no onclick() function exists, do nothing
	}

}

//change the radio status and the replacement image, and does any other onClick action assigned to the radio button
function checkRadioChange(i) {

	if(!inputs[i].checked) {
		inputs[i].checked = 'checked';
		document.getElementById('radioImage'+i).src=radioTrue;
		//uncheck all the other radio buttons in the group
		group = inputs[i].name;
		//alert(group);
		temp = document.getElementsByTagName("input");
		for(a = 0; a < temp.length; a++) {
			if(temp[a].name == group && temp[a] != inputs[i]) {
				temp[a].checked = '';
				document.getElementById('radioImage'+a).src=radioFalse;
			}
		}

	}
	
	try {
		inputs[i].onclick();
	} catch(e) {
		//if no onclick() function exists, do nothing
	}
}

//sets a checkbox's status to true(checked) or false(unchecked), given the checkbox's id, and without firing its onclick() event
function setCheckboxStatus(checkboxID, status){
	for (var i = 0; i < inputs.length; i++){
		if (inputs[i].id == checkboxID){
			inputs[i].checked = status;
			document.getElementById('checkImage'+i).src = status ? imgTrue : imgFalse;
			return;
		}
	}
}

//sets a radio button's status to true(checked) or false(unchecked), given the radio button's id, and without firing its onclick() event
function setRadioStatus(radioID, status){
	for (i = 0; i < inputs.length; i++){
		if (inputs[i].id == radioID){
			inputs[i].checked = status;
			document.getElementById('radioImage'+i).src = status ? radioTrue : radioFalse;
			return;
		}
	}
}


//window.onload = init;
addEvent(window, 'load', inputboxes_init)