//global variables that can be used by ALL the function son this page. 
var inputs; 
var imgCheckboxFalse = '~/media/images/pageelements/checkbox_unchecked.ashx'; 
var imgCheckboxTrue = '~/media/images/pageelements/checkbox_checked.ashx'; 
var imgCheckboxFalseDisabled = '~/media/images/pageelements/checkbox_unchecked_disabled.ashx'; 
var imgCheckboxTrueDisabled = '~/media/images/pageelements/checkbox_checked_disabled.ashx'; 
var imgRadioFalse = '~/media/images/pageelements/radio_unchecked.ashx'; 
var imgRadioTrue = '~/media/images/pageelements/radio_checked.ashx'; 
var imgRadioFalseDisabled = '~/media/images/pageelements/radio_unchecked_disabled.ashx'; 
var imgRadioTrueDisabled = '~/media/images/pageelements/radio_checked_disabled.ashx'; 

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

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 
	if(inputs[i].getAttribute('type') == 'checkbox') { 

	    //create a new image 
	    var img = document.createElement('img'); 

	    //check if the checkbox is checked 
	    if(inputs[i].checked) { 
				if(inputs[i].disabled)
				{
					img.src = imgCheckboxTrueDisabled; 
				} else {
					img.src = imgCheckboxTrue; 
				}
	    } else { 
		if(inputs[i].disabled)
				{
					img.src = imgCheckboxFalseDisabled; 
				} else {
					img.src = imgCheckboxFalse; 
				}
	    } 

	    //set image ID and onclick action 
	    img.id = 'checkImage'+i; 
	    //set image 
	    if(!inputs[i].disabled) 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'; 
	} 
    } 
} 

function replaceRadios() { 

    //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') == 'radio') { 

	    //create a new image 
	    var img = document.createElement('img'); 

	    //check if the checkbox is checked 
	    if(inputs[i].checked) { 
				if(inputs[i].disabled)
				{
					img.src = imgRadioTrueDisabled; 
				} else {
					img.src = imgRadioTrue; 
				}
	    } else { 
		if(inputs[i].disabled)
				{
					img.src = imgRadioFalseDisabled; 
				} else {
					img.src = imgRadioFalse; 
				}
	    } 

	    //set image ID and onclick action 
	    img.id = 'radioImage'+inputs[i].value; 
		
	    //set image click event if button not disabled
	    if(!inputs[i].disabled) 
		{
			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'; 
	} 
    } 
} 

//change the checkbox status and the replacement image 
function checkChange(i) { 

    if(inputs[i].checked) { 
	inputs[i].checked = ''; 
	document.getElementById('checkImage'+i).src=imgCheckboxFalse; 
    } else { 
	inputs[i].checked = 'checked'; 
	document.getElementById('checkImage'+i).src=imgCheckboxTrue; 
    } 
} 

//change the checkbox status and the replacement image of checked and all in same group
function radioChange(i) { 
	var radios=new Array();
	var tmpradios;

	// load all the inputs into tmp array
	tmpradios = document.getElementsByTagName('input'); 

	for(var j=0; j < tmpradios.length; j++) { 
		// Add only the radios in this group to the array
		if(tmpradios[j].getAttribute('name') == inputs[i].getAttribute('name'))
		{
			radios.push(tmpradios[j]);
		}
	}

    if(inputs[i].checked) { 
		// already checked so do nothing as radio does not uncheck like a checkbox
    } else { 
		// make all other group items unchecked
	for(var j=0; j < radios.length; j++) { 
			document.getElementById('radioImage'+radios[j].value).src=imgRadioFalse; 
			document.getElementById('radioImage'+radios[j].value).checked=''; 
		}
		// make the selected item checked
	inputs[i].checked = 'checked'; 
	document.getElementById('radioImage'+inputs[i].value).src = imgRadioTrue;       
    } 
} 

window.onload = init;

/*
END OF RADIO BUTTON /CHECKBOX CODE
*/