//global variables that can be used by ALL the function son this page.
var inputs;
var imgFalse = 'images/checkout.png';
var imgTrue = 'images/checkin.png';

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

function replaceChecks() {
	
	//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
		// || inputs[i].getAttribute('type') == 'radio'
		//if(inputs[i].getAttribute('type') == 'checkbox'  || inputs[i].getAttribute('type') == 'radio') {
	    if (inputs[i].getAttribute('type') == 'radio') {	
			//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;
			//img.name = 'checkImage'+i;
			//set image 
			
			if(inputs[i].getAttribute('type') == 'checkbox')
			{
			img.onclick = new Function('checkChange('+i+')');
			
			}
			else if(inputs[i].getAttribute('type') == 'radio')
			{
			img.onclick = new Function('radioChange('+i+')');
			
			}
			//place image in front of the checkbox
			
			inputs[i].parentNode.insertBefore(img, inputs[i]);
			
			//hide the checkbox
			inputs[i].style.display='none';
			//alert(inputs[i]);
		}
//		else if(inputs[i].getAttribute('type') == 'radio') 
//		{
//			if(inputs[i].checked) {
//				img.src = imgTrue;
//			} else {
//				img.src = imgFalse;
//			}

//			//set image ID and onclick action
//			img.id = 'checkImage'+i;
//			//img.name = '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';
//		}
	}
}

//change the checkbox status and the replacement image
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;
	}
}
function radioChange(i) {

	
		inputs[i].checked = 'checked';
		document.getElementById('checkImage'+i).src=imgTrue;
		
		if (inputs[i-2]!=null){
		if (inputs[i-2].getAttribute('type')=='radio')
		{
		inputs[i-2].checked = '';
		//alert(inputs[i-2].value);
		document.getElementById('checkImage'+(i-2)).src=imgFalse;
		}
	}
		if (inputs[i+2]!=null){
	    if (inputs[i+2].getAttribute('type')=='radio')
		{
		inputs[i+2].checked = '';
		//alert(inputs[i+2].value);
		document.getElementById('checkImage'+(i+2)).src=imgFalse;
		}
		}
			if (inputs[i+1]!=null){
		if (inputs[i+1].getAttribute('type')=='radio')
		{
		inputs[i+1].checked = '';
		//alert(inputs[i+1].value);
		document.getElementById('checkImage'+(i+1)).src=imgFalse;
		}
			}
			
				if (inputs[i-1]!=null){
		if (inputs[i-1].getAttribute('type')=='radio')
		{
		inputs[i-1].checked = '';
		//alert(inputs[i-1].value);
		document.getElementById('checkImage'+(i-1)).src=imgFalse;
		}
		}
}

window.onload = init;