var ThumbnailViewer = Behavior.create({
  effectOptions: {duration: 0.25},
  initialize: function(){
    this.large_image = $(this.element.href.split("#").last());
    this.large_image.absolutize();
    Event.observe(document, 'click', this.hideLargeView.bindAsEventListener(this));
  },
  
  onclick: function(e){
    Event.stop(e);
    if(!this.visible) {
      this.centerWindowInView();
      this.showLargeView();
      this.visible = true;
    }
  },
  
  showLargeView: function() {
    if(!this.visible){
      new Effect.Appear(this.large_image, this.effectOptions);
    }
  },
  
  hideLargeView: function(e) {
    if(Event.element(e) != this.large_image && this.visible) {
      this.visible = false;
      new Effect.Fade(this.large_image, this.effectOptions);
    }
  },

  centerWindowInView: function() {
    var offsets = document.viewport.getScrollOffsets();
    this.large_image.setStyle({
      left: parseInt(offsets.left + (document.viewport.getWidth() - this.large_image.getWidth()) / 2) + 'px',
      top: parseInt(offsets.top + (document.viewport.getHeight() - this.large_image.getHeight()) / 2.2) + 'px'
    });
  }
});

Event.addBehavior({
  "#thumbnail a[href*=#]": ThumbnailViewer
});