//global variables that can be used by ALL the functions on this page.

var inputs;
var imgFalse = "/_images/checkbox-cross.gif";
var imgTrue = "/_images/checkbox-tick.gif";

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

function checkboxesInit() {
    
    //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') 
        {
            // since this might be called as part of an async ajax postback,
            // only do it if it hasn't already been done!    
            if(getElement("checkImage" + i) == null)
            {
              //create a new image
              var img = document.createElement('img');
              img.className = "checkbox";
              
              //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
              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';
            }
        }
    }
}

//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;
    }
    
    if(inputs[i].onchange != null) inputs[i].onchange();
    if(inputs[i].onclick != null) inputs[i].onclick();
}