//global variables that can be used by ALL the functions on this page.
var inputs;
var imgDisabled = 'img/disabled.gif';
var imgFalse = 'img/unchecked.gif';
var imgTrue = 'img/checked.gif';
var radioGroup;				// TODO: Audun - virker ikke med mer en en gruppe radiobuttons på en side... javascript ville ikke ha en global array med arrayer ser det ut som

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) {
                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';
        }
    }
}

//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 replaceRadios() {
    //get all the form fields on the page
    var forms = document.getElementsByTagName('form');
	var num = 0;
	radioGroup = new Array();
	for(var t=0; t < forms.length; t++) {
		inputsRadio = forms[t].getElementsByTagName('input');
		for(var i=0; i < inputsRadio.length; i++) {
			// create this array
			//check if the input is a radio
			if(inputsRadio[i].getAttribute('type') == 'radio') {
				//create a new image
				var img = document.createElement('img');
				//check if the checkbox is checked
				if (inputsRadio[i].disabled) {
					img.src = imgDisabled;
				} else {
					img.onclick = new Function('radioClick('+t+','+num+')');
					img.id = 'group'+t+'radio'+num;
					// save it in array
					radioGroup[num] = inputsRadio[i];
					num++;
					if(inputsRadio[i].checked) {
						img.src = imgTrue;
					} else {
						img.src = imgFalse;
					}
				}

				//place image in front of the radio
				inputsRadio[i].parentNode.insertBefore(img, inputsRadio[i]);
			
				//hide the radio
				inputsRadio[i].style.display='none';
			}
        }
    }
}

function radioClick(g, num) {
	// set all in this group to not selected
	var i = 0;
	for (var i = 0; i < radioGroup.length; i++) {
		if (radioGroup[i] != null) {
			radioGroup[i].checked = '';
		}
		if (document.getElementById('group'+g+'radio'+i) != null) {
			document.getElementById('group'+g+'radio'+i).src=imgFalse;
		}
	}
	// set this to selected
	radioGroup[num].checked = 'checked';
	document.getElementById('group'+g+'radio'+num).src=imgTrue;
}