﻿//global variables that can be used by ALL the function son this page.
var inputs;
var imgFalse = "/images/false.png";
var imgTrue = "/images/true.png";
var imgFalseDisabled = "/images/false_disabled.png";
var imgTrueDisabled = "/images/true_disabled.png";

//this function runs when the page is loaded, put all your other onload stuff in here too.
function init_checkboxes() {
    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++) {

        //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) {
                if (inputs[i].disabled)
                    img.src = imgTrueDisabled;
                else
                    img.src = imgTrue;
            } else {
                if (inputs[i].disabled)
                    img.src = imgFalseDisabled;
                else
                    img.src = imgFalse;
            }

            //set image ID and onclick action
            img.id = "checkImage" + i;
            img.style.cursor = "pointer";


            if (!inputs[i].disabled) {
                //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;
    }
}

window.onload = init_checkboxes;
