//global variables that can be used by ALL the function son this page.
var inputs;

//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++) {
		replaceByIndex(i);	
    }
}

function replaceByIndex(i){
	var fieldType = inputs[i].getAttribute('type');
        //check if the input is a checkbox
        if(fieldType == 'checkbox' || fieldType == "radio") {
            //create a new image
            var img = document.createElement('img');
            
            //check if the checkbox is checked
            
			if(inputs[i].checked) {
				img.src = imagePath + "" + fieldType + "_on.png";
			}else{
				img.src = imagePath + "" + fieldType + "_off.png";
			}

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

function replaceCheckByID(elementID){
	var j = -1;
	inputs = document.getElementsByTagName('input');
	for(i=0; i < inputs.length; i++)
		if(inputs[i].id == elementID)
			j = i;

			
	if(j != -1){
		replaceByIndex(j);
	}
}


//change the checkbox status and the replacement image
function checkChange(i, fieldType) {
	inputs = document.getElementsByTagName('input');
	
	if(fieldType == 'radio'){
		inputs[i].checked = 'checked';
		document.getElementById('checkImage'+i).src = imagePath + "radio_on.png";
		
		for(j=0; j < inputs.length ; j++){
			if(j != i && inputs[j].name == inputs[i].name){
				inputs[j].checked = '';
				document.getElementById('checkImage'+j).src = imagePath + "radio_off.png";
			}
		}
	}else if(fieldType == 'checkbox'){
    	if(inputs[i].checked) {
        	inputs[i].checked = '';
        	document.getElementById('checkImage'+i).src = imagePath + "" + fieldType + "_off.png";
    	} else {
	        inputs[i].checked = 'checked';
    	    document.getElementById('checkImage'+i).src = imagePath + "" + fieldType + "_on.png";
    	}
	}
}

window.onload = init;