(function($){
  var collapse = function(event){
    var $this = $(this);
    $this.removeClass('expanded').addClass('collapsed').unbind('click').click(expand);
    $this.nextUntilSimilar().hide('fast');
  };
  var expand = function(event){
    var $this = $(this);
    $this.removeClass('collapsed').addClass('expanded').unbind('click').click(collapse);
    $this.nextUntilSimilar().show('fast');
  };
  var expandAll = function(event){
    $('dl.shortlist > dt').each(expand);
  };
  // returns all the sibling elements from this until the next one with the same tag
  $.fn.nextUntilSimilar = function(){
    var ret = $([]);
    this.each(function(){
      var tag = this.nodeName;
      for (var e = this.nextSibling; e && e.nodeName != tag; e = e.nextSibling){
        if (e.nodeType == 1) ret = ret.add(e);
      }
    });
    return ret;
  }
  
  $(function(){
    $('dl.infolist > dt , dl.infolist > dd > dl > dt , .reference h2').each(expand).hover(
      function(){$(this).css('text-decoration','underline');},
      function(){$(this).css('text-decoration','none');}
    );
    $('dl.shortlist > dt').each(expand).each(collapse).hover(
      function(){$(this).css('text-decoration','underline');},
      function(){$(this).css('text-decoration','none');}
    ); // why IE needs expand then collapse is beyond me
    $(location.hash).filter('.collapsed').each(expand); // if we're targeting a specific thing, expand it
    $('<input type="button">').prependTo($('#content')).css('display', 'inline').
      val('Toggle Humor').click(function(){$('.humor').toggle()});
    $('<input type="button">').insertBefore($('dl.shortlist')).css('display', 'inline').
      val('Expand All').click(expandAll);
  });
})(jQuery);