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

var inputs;

var chkFalse = 'images/notchecked.gif';

var chkTrue = 'images/checked.gif';

var radioFalse = 'images/notradio.gif';

var radioTrue = 'images/radio.gif';



//this function runs when the page is loaded, put all your other onload stuff in here too.

function init() {

    replaceChecks();

    replaceInputs();

}



function replaceInputs() {

    //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++) {

		if(inputs[i].getAttribute('type') == 'text' || inputs[i].getAttribute('type') == 'password') inputs[i].className='inputtext';

		else if(inputs[i].getAttribute('type') == 'button' ||

				inputs[i].getAttribute('type') == 'submit' ||

				inputs[i].getAttribute('type') == 'reset'

			) {

			inputs[i].className='button';

			inputs[i].onmouseover=new Function("this.className = 'button-hover';");

			inputs[i].onmouseout=new Function("this.className = 'button';");

		}

		else if(inputs[i].getAttribute('type') == 'file') inputs[i].className='inputtext';

	}

}



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 or radio

        if(inputs[i].getAttribute('type') == 'checkbox' || inputs[i].getAttribute('type') == 'radio') {

            //create a new image

            var img = document.createElement('img');

            //check if the checkbox or radio is checked

			if(inputs[i].getAttribute('type') == 'checkbox') img.src = inputs[i].checked ? chkTrue : chkFalse;

			if(inputs[i].getAttribute('type') == 'radio') img.src = inputs[i].checked ? radioTrue : radioFalse;

            //set image ID and onclick action

            img.id = 'checkImage'+i;

            //set image

            if(inputs[i].getAttribute('type') == 'checkbox') img.onclick = new Function('checkChange('+i+')');

            if(inputs[i].getAttribute('type') == 'radio') img.onclick = new Function('radioChange('+i+')');

            //place image in front of the checkbox or radio

            inputs[i].parentNode.insertBefore(img, inputs[i]);

            //hide the checkbox

            inputs[i].style.display='none';

        }

    }

}



function radioChange(i) {

    inputs = document.getElementsByTagName('input');

    //cycle trough the input fields and set off all radio

    for(var j=0; j < inputs.length; j++) {

        //check if the input is a radio

        if(inputs[j].getAttribute('type') == 'radio') {

			document.getElementById('checkImage'+j).src = radioFalse;

			inputs[j].checked = '';

		}

	}

	//set on selected radio

	document.getElementById('checkImage'+i).src = radioTrue;

    inputs[i].checked = 'checked';

}



//change the checkbox status and the replacement image

function checkChange(i) {

    if(inputs[i].checked) {

        inputs[i].checked = '';

        document.getElementById('checkImage'+i).src=chkFalse;

    } else {

        inputs[i].checked = 'checked';

        document.getElementById('checkImage'+i).src=chkTrue;

    }

}



window.onload = init;