// this is after a day's looking at JQuery, it may not be as efficient
// as it could, but it's probably better than what I was using
$(document).ready(function(){
  // event handler for the expand/collapse all buttons
  $("span")
    .filter("#expandAll")
      .click(function(){
        $("li > ul").each(function() {
        var parent_li = $(this).parent("li");
        var this_ul = $(this);
        this_ul.show();
        parent_li.removeClass("compact");
        parent_li.addClass("expanded"); // TODO make sure this doesn't add it twice
        });
      })
    .end()
    .filter("#collapseAll")
      .click(function(){
        $("li > ul").each(function() {
        var parent_li = $(this).parent("li");
        var this_ul = $(this);
        this_ul.hide();
        parent_li.removeClass("expanded");
        parent_li.addClass("compact"); // TODO make sure this doesn't add it twice
        });
      })
    .end();

  // this approach courtesy: http://homework.nwsnet.de/news/view/31
  // basically, toggle visibility for each child of the clicked container item
  $("li > ul").each(function() {
    var parent_li = $(this).parent("li");
    var this_ul = $(this);
    parent_li.click(function(event) {
      // don't interfere with clicks on links or dead areas
      // unfortunately, this also prevents clicking on the little triangles to
      // expand/collapse...
      if ("ul;li;a".indexOf(event.target.tagName.toLowerCase()) != -1) {
        return;
      }
      this_ul.toggle();
      parent_li.toggleClass("compact");
      parent_li.toggleClass("expanded");
      // returning false prevents the event from bubbling up
      return false;
    });
  });

});