//global variables that can be used by ALL the function son this page.
var inputs;
var imgFalse = 'images/false.jpg';
var imgTrue = 'images/true.jpg';

//this function runs when the page is loaded, put all your other onload stuff in here too.
function init() {
    replaceChecks('englevel');
    replaceChecks('travel');
    replaceChecks('telecom');
    replaceChecks('crm');
    replaceChecks('db');
	replaceChecks('troubleshooting');
}

function replaceChecks(idOfElement) {
    
    //get all the input fields on the page
	var element = document.getElementById(idOfElement);
    inputs = element.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) {
                img.src = imgTrue;
            } else {
                img.src = imgFalse;
            }

            //set image ID and onclick action
            img.id = idOfElement+'checkImage'+i;
            //set image
            img.onclick = new Function('checkChange('+i+', "'+idOfElement+'")');
			
			//document.getElementById('checkImage'+i).src=imgFalse;
            //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, idOfElement) {
	var element = document.getElementById(idOfElement);
    inputs = element.getElementsByTagName('input');

    //cycle trough the input fields
    for(var k=0; k < inputs.length; k++) {
		if(inputs[k].getAttribute('type') == 'radio') {
			inputs[k].checked = '';
			document.getElementById(idOfElement+'checkImage'+k).src=imgFalse;
			document.getElementById(idOfElement+'checkImage'+k).className = '';
		}
	}

    if(inputs[i].checked) {
        inputs[i].checked = '';
        document.getElementById(idOfElement+'checkImage'+i).src=imgFalse;
		document.getElementById(idOfElement+'checkImage'+i).className = '';
    } else {
        inputs[i].checked = 'checked';
        document.getElementById(idOfElement+'checkImage'+i).src=imgTrue;
		document.getElementById(idOfElement+'checkImage'+i).className = 'check';
    }
}

window.onload = init;