var ClProperty = Class.create({
  initialize: function() {
    this.full_images = {}
    this.thumbnails = $$('#cl-images-thumbnails img');
    this.visible = this.thumbnails.first();
    this.full_images[this.visible.getAttribute('src')] = $$('#full-image img').first();
    this.in_process = false;
    this.thumbnails.each((function(thumb) {
      Event.observe(thumb, 'mouseover', this.show.bindAsEventListener(this));

      if(thumb == this.visible) return;

      path = thumb.getAttribute('src').replace(/small/, 'full');
      var img = $(new Image());
      img.setAttribute('src', path);
      img.setStyle({display: 'none'});
      img.onload = function() {$('full-image').appendChild(img)}
      this.full_images[thumb.getAttribute('src')] = img;
    }).bind(this))
  },

  show: function(event) {
    var thumb;
    if(event['show']) {
      thumb = event
    } else {
      thumb = Event.element(event);
    }
    if(thumb == this.visible) return;
    if(this.in_progress) {
      this.last_hold = thumb;
      return;
    }
    this.in_progress = true;

    this.full_images[this.visible.getAttribute('src')].setStyle({zIndex: 1});
    new Effect.Fade(this.full_images[this.visible.getAttribute('src')])
    this.full_images[thumb.getAttribute('src')].setStyle({zIndex: 2});
    new Effect.Appear(this.full_images[thumb.getAttribute('src')], {afterFinish: (function() {
      this.in_progress = false
      var lh = this.last_hold
      this.last_hold = null
      if(lh) this.show.bind(this)(lh);
    }).bind(this)});
    this.visible = thumb;
  }
});
Event.observe(window, 'load', function() {
  if($('cl-images')) new ClProperty()
})