crir = {
   init: function() {
      arrLabels = document.getElementById('cr').getElementsByTagName('label');

      searchLabels:
      for (var i=0; i<arrLabels.length; i++) {
         // get the input element based on the for attribute of the label tag
         if (arrLabels[i].getAttributeNode('for') && arrLabels[i].getAttributeNode('for').value != '') {
            labelElementFor = arrLabels[i].getAttributeNode('for').value;
            inputElement = document.getElementById(labelElementFor);
         }
         else {
            continue searchLabels;
         }

         inputElementClass = inputElement.className;

         // if the input is specified to be hidden intiate it
         if (inputElementClass == 'crirHiddenJS') {
            inputElement.className = 'crirHidden';

            inputElementType = inputElement.getAttributeNode('type').value;

            // add the appropriate event listener to the input element
            if (inputElementType == "checkbox") {
               inputElement.onclick = crir.toggleCheckboxLabel;
            }
            else {
               inputElement.onclick = crir.toggleRadioLabel;
            }

            // set the initial label state
            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.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 = document.getElementById('cr').getElementsByTagName('label');

      searchLoop:
      for (var i=0; i<arrLabels.length; i++) {
         if (arrLabels[i].getAttributeNode('for') && arrLabels[i].getAttributeNode('for').value == inputElementID) {
            return arrLabels[i];
            break searchLoop;
         }
      }
   },

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

      if(labelElement.className == '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 = document.getElementById('cr').getElementsByTagName('input');

      // uncheck (label class) all radios in the same group
      for (var i=0; i<arrInputs.length; i++) {
         inputElementType = arrInputs[i].getAttributeNode('type').value;
         inputElementName = arrInputs[i].getAttributeNode('name').value;
         inputElementClass = arrInputs[i].className;
         // find radio buttons with the same 'name' as the one we've changed and have a class of chkHidden
         // and then set them to unchecked
         if (inputElementType == 'radio' &&  inputElementName == clickedInputElementName && inputElementClass == 'crirHidden') {
            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.className == 'crirHidden') {
         clickedLabelElement.className = 'radio_checked';
      }
   },

   addEvent: function(element, eventType, doFunction, useCapture){
      if (element.addEventListener)
      {
         element.addEventListener(eventType, doFunction, useCapture);
         return true;
      } else if (element.attachEvent) {
         var r = element.attachEvent('on' + eventType, doFunction);
         return r;
      } else {
         element['on' + eventType] = doFunction;
      }
   }
}

crir.addEvent(window, 'load', crir.init, false);