Event.observe(window,'load', function(){
  $$('#statesChecklist input[type=checkbox]').each(function(checkbox){
    checkbox.observe('click', toggleHighlight);
  });
});

function toggleHighlight(event){
  var label = event.element().up();
  label.hasClassName('unchecked') ? label.removeClassName('unchecked') : label.addClassName('unchecked');
  updateCount();
}

function updateCount(){
  numStates = $$('#statesChecklist label').length - $$('#statesChecklist label.unchecked').length
  $('counter').update(numStates + ' State' + (numStates==1?'':'s') + ' Selected');
}

function checkboxesFromFlash(region) {
  $$('label.' + region).each(function(stateLabel) {stateLabel.removeClassName('unchecked').down().checked = true; });
  updateCount();
}

Event.observe(window,'load', function(){
  var counter = new Element('span', { 'id': 'counter' }).update("0 States Selected");
  Element.extend(counter);
  var resetStatesChecklist = new Element('span', { 'id':'resetStatesChecklist' }).update("Clear");
  $('statesChecklist').up().appendChild(counter);
  $('statesChecklist').up().appendChild(resetStatesChecklist);
  $('resetStatesChecklist').observe('click', clearStates);
  //If the user uses the browser's Back button, we can highlight the checked boxes and update the count.
  $$('#statesChecklist input[type=checkbox]').each(function(checkbox){
    if(checkbox.getValue()) {
      checkbox.click();
      checkbox.setValue(1);
    }
  });
});

function clearStates(){
  $$('#statesChecklist input[type=checkbox]').each(function(cbox){
    cbox.setValue(false);
    cbox.up().addClassName('unchecked');
  });
  updateCount();
}