(function($) {

$.fn.extend({

//TODO: make it be a jQuery UI widget thingy.
zoomable: function() {
  return $(this).each(function() {
    //TODO: make zoom be a parameter
    var zoom = 'zoom';
    if (!$(this).attr(zoom)) return;
    $(this).addClass('clickable')
           .click(function () {
      var $this = $(this);
      $this.addClass('working').show();//.show() forces Firefox 2.0 to redisplay the element with the added styling
      setTimeout(function() {
        var array = $this.attr(zoom).split(/ /);
        var image = {src: array[0], zoom: (array.length > 0) ? array.slice(1).join(' ') : undefined,
                     width: ($this.width() * 2), height: ($this.height() * 2)};
        if ($this.attr('dialog')) $this.parent().dialog('destroy').hide();
        var $img = $('<img>').attr('src', image.src).attr(zoom, image.zoom).zoomable(zoom);
        var $dialog = $('<div/>').html($img);
        $img.attr('dialog', $dialog);
        var $overlay = $.browser.msie ? {} : {opacity:0.5, background:'black'};
        if (!image.zoom) $dialog.click(function() {$dialog.dialog('destroy').hide();});
        $this.removeClass('working');
        $dialog.dialog({modal:true, overlay:$overlay, width:image.width, height:image.height});
      }, 0);
    });
  });
},


//TODO: use jquery.ScrollTo
scrollTo: function(offset) {
  if (this == window) {
     if (this.scrollTo) this.scrollTo(offset.top, offset.left);
  } else if (this.each) {
//TODO: learn why this is a jQuery object and how to make it not be
     this.each(function() {
       this.scrollTop = offset.top;
       this.scrollLeft = offset.left;
     });
  } else {
     if (this.scrollTop) this.scrollTop = offset.top;
     if (this.scrollLeft) this.scrollLeft = offset.left;
  }
}

});

})(jQuery);