var AttachmentFuImageSwap = Class.create({
  initialize: function(imageTargetId, thumbnailContainerId, options) {
    //set options
    defaultOptions = $H({
      imageThumbString: '_small',
      imageLargeString: '_normal',
      fadeDuration: 1,
      appearDuration: 1
    });
    defaultOptions.update(options).each(function(option){
      this[option[0]] = option[1];
    }.bind(this));
    
    this.imageTarget = $(imageTargetId);
    this.thumbnailContainer = $(thumbnailContainerId);
    this.thumbnailImgs = $$('#' + thumbnailContainerId + ' img');
    
    if (!(this.imageTarget && this.thumbnailContainer && this.thumbnailImgs)) return;
    
    //disable thumbnail links while images are being preloaded
    this.disable = true;
    this.thumbnailContainer.setStyle({opacity: '.25'});
    
    //expecting src to look like this /system/dmfkvbz_50gcvk8sg4_b_small.jpeg?1220625677
    // this.imageThumbString = '_' + this.thumbnailImgs[0].readAttribute('src').split('_').pop().split('.')[0];
    
    this.preloadImages();
    document.observe('window:loaded', this.windowLoaded.bind(this));
  },
  
  preloadImages: function() {
    for (var i = this.thumbnailImgs.length - 1; i >= 0; i--){
      var src = this.thumbnailImgs[i].src.gsub(this.imageThumbString, this.imageLargeString);
      new Image().src = src;
    };
    document.fire('ImageSwap:preloaded');
  },
  
  windowLoaded: function(e) { 
    //setup listener to handle the image swap
    this.thumbnailContainer.observe('click', this.click_handler.bind(this));
    this.imageTarget.observe('load', function(e) {
      e.target.appear({duration: this.appearDuration});
      document.fire('ImageSwap:image_change');
    }.bind(this));
    
    //enable thumbnails
    this.thumbnailContainer.morph('opacity: 1');
    this.disable = false;
  },
  
  click_handler: function(e) {
    e.stop();
    // image thumbnail not clicked on
    if (!e.target.match('img') || this.disable) return;
    var target = e.target;
    target.up().blur(); 
    this.imageTarget.morph('opacity: 0', {
      duration: this.fadeDuration, 
      afterFinish: function(e){
        this.imageTarget.writeAttribute({
          alt: target.readAttribute('alt')
        });
        this.imageTarget.src = target.src.gsub(this.imageThumbString, this.imageLargeString);
      }.bind(this)
    });
  }
});