function setupFancyZoom() {
  FancyZoomBox.directory = '/static/images/fancyzoom';
  $$('a.zoom').each(function (el) {
    el.zoomer = new FancyZoom(el);
    el.observe('click', function (evt) { hijackFZDiv(evt) });
  });
}

function hijackFZDiv(evt) {
  var el = evt.findElement('a');
  var div = $(el.readAttribute('zoom').gsub(/^#/, ''));
  var src = div.readAttribute('src');
  if (src) {
    var w = parseInt(div.readAttribute('imagewidth'));
    var h = parseInt(div.readAttribute('imageheight'));

    // get viewport dimensions and subtract a little padding 
    var vpDims = document.viewport.getDimensions();
    vpDims = {width: vpDims.width - 100, height: vpDims.height - 150};

    // scale image to viewport dimensions if necessary
    if (w > vpDims.width) {
      h = h * (vpDims.width / w);
      w = vpDims.width;
    } 
    if (h > vpDims.height) {
      w = w * (vpDims.height / h);
      h = vpDims.height;
    }

    // Resize or create image
    var img = div.down('img');
    if (img) {
      img.width = w;
      img.height = h;
    } else {
      img = Element('img', {'src': src, 'width': w, 'height': h});
      div.insertBefore(img, div.firstChild);
    }

    el.zoomer.element.zoom_width = w;
    el.zoomer.element.zoom_height = h;
  }

  if (!FancyZoomBox.show(evt)) {
    Event.stop(evt);
  }
}