var collapseButtonImgURL   = 'images/collapse.gif';
var uncollapseButtonImgURL = 'images/uncollapse.gif';
var collapseDuration = 0.2; // seconds

function initCollapseButtons(eltsAndTargets) {  
  $H(eltsAndTargets).each(function(pair) {
    var eltID = pair[0];
    var targetID = pair[1];
    
    var elt = $(eltID);
    var target = $(targetID);
    var button = new Element('span');
    
    elt.insert({ top: button });
    
    var collapseButtonImg =
      new Element('img', { src: collapseButtonImgURL });
    var uncollapseButtonImg =
      new Element('img', { src: uncollapseButtonImgURL });
    
    button.insert(collapseButtonImg);
    button.insert(uncollapseButtonImg);
    
    if(elt.hasClassName('collapsed')) {
      verticallyCollapse(target);
      elt.removeClassName('collapsed');
    }
    
    setButtonState(isVerticallyCollapsed(target), target, elt, button,
      collapseButtonImg, uncollapseButtonImg);
  });
}

function setButtonState(collapsed, target, elt, button,
  collapseButtonImg, uncollapseButtonImg)
{
  (collapsed ? collapseButtonImg : uncollapseButtonImg).hide();
  (collapsed ? uncollapseButtonImg : collapseButtonImg).show();
  
  var collapseOrExpand = collapsed ? verticallyExpand : verticallyCollapse;
  elt.onclick = function() {
    collapseOrExpand(target);
    setButtonState(!collapsed, target, elt, button,
      collapseButtonImg, uncollapseButtonImg);
  };
}