crir = {
        init: function() {
                arrLabels = $$('label[for]:not([for=""])');

                searchLabels:
                for (var i=0; i<arrLabels.length; i++) {
                        labelElementFor = arrLabels[i].getAttributeNode('for').value;
                        inputElement = document.getElementById(labelElementFor);
                        inputElementClass = inputElement.className;
                        if (inputElementClass == 'crirHiddenJS') {
                                inputElement.className = 'crirHidden';
                                inputElementType = inputElement.getAttributeNode('type').value;
                                if (inputElementType == "checkbox")
                                        inputElement.onclick = crir.toggleCheckboxLabel;
                                else
                                        inputElement.onclick = crir.toggleRadioLabel;
                                if (inputElement.checked) {
                                        if (inputElementType == 'checkbox')
                                          arrLabels[i].className = 'checkbox_checked';
                                        else
                                          arrLabels[i].className = 'radio_checked';
                                } else {
                                        if (inputElementType == 'checkbox')
                                          arrLabels[i].className = 'checkbox_unchecked';
                                        else
                                          arrLabels[i].className = 'radio_unchecked';
                                }
                        } else if (inputElement.nodeName != 'SELECT' && inputElement.getAttributeNode('type').value == 'radio') { // this so even if a radio is not hidden but belongs to a group of hidden radios it will still work.
                                arrLabels[i].onclick = crir.toggleRadioLabel;
                                inputElement.onclick = crir.toggleRadioLabel;
                        }
                }
        },

        findLabel: function (inputElementID) {
                arrLabels = $$('label[for="'+inputElementID+'"]');
                return arrLabels[0];
        },

        toggleCheckboxLabel: function () {
                labelElement = crir.findLabel(this.getAttributeNode('id').value);

                if(labelElement.hasClassName('checkbox_checked')) {
                        labelElement.className = "checkbox_unchecked";
                } else {
                        labelElement.className = "checkbox_checked";
                }
        },

        toggleRadioLabel: function () {
                clickedLabelElement = crir.findLabel(this.getAttributeNode('id').value);

                clickedInputElement = this;
                clickedInputElementName = clickedInputElement.getAttributeNode('name').value;

                arrInputs = $$('input[type="radio"][name="'+clickedInputElementName+'"][class="crirHidden"]');
                for (var i=0; i<arrInputs.length; i++) {
                        inputElementID = arrInputs[i].getAttributeNode('id').value;
                        labelElement = crir.findLabel(inputElementID);
                        labelElement.className = 'radio_unchecked';
                }

                // if the radio clicked is hidden set the label to checked
                if (clickedInputElement.hasClassName('crirHidden')) {
                        clickedLabelElement.className = 'radio_checked';
                }
        }
}

Event.observe(window, 'load', crir.init);