gistfile1.js

var InteractiveRadioField = Class.create({
  initialize: function(name, pairs, activateFunction, inactivateFunction){
    this.name = name;
    this.fields = $$('input[type=radio][name=' + this.name + ']');
    this.pairs = $H(pairs);
    this.activateFunction = activateFunction;
    this.inactivateFunction = inactivateFunction;
    this.changed = false;
    this.elementsToBeShown = $$(this.pairs.map(function(pair){
      return '#' + pair.key;
    }).join(','));
    
    // if no elements, return
    if (this.fields.size() <= 0 || this.elementsToBeShown.size() != this.pairs.size()) {
      return false;
    }
    
    // periodically observe state of field
    // var t = new PeriodicalExecuter(this.check.bind(this), .6);
    
    // this.fields.each(function(input){
    //   input.observe('change', this.check.bind(this));
    // });
    
    this.fields.invoke('observe', 'change', this.check.bind(this));
  },
  
  check: function(){
    this.getValue();
    if (!this.changed) return;
    var pair = this.pairs.any(function(pair){
      if (pair.value == this.value){
        this.match = $(pair.key);
        return true;
      } else {
        return false;
      }
    }.bind(this));
    
    if (pair && this.match){
      this.elementsToBeShown.each(this.inactivateFunction);
      this.activateFunction(this.match);
    }
  },
  
  getValue: function(){
    var v = $$('input:checked[type="radio"][name="' + this.name + '"]').pluck('value');
    this.changed = (v != this.value);
    this.value = v;
  },
  
});


new InteractiveRadioField('section1', {
  'packages': '1',
  'manual-selections': '2'
}, Element.show, Element.hide);

new InteractiveRadioField('music_packages', {
  'package1': 'autumn-sunset',
  'package2': 'summer-sea',
  'package3': 'evening-tide',
  'package4': 'celtic-shores',
  'package5': 'springtime-surf',
  'package6': 'emerald-coast-serenade',
  'package7': 'sea-winds',
  'package8': 'you-make-my-heart-dance'
}, function(el){
  el.addClassName('selected')
}, function(el){
  el.removeClassName('selected')
});