var ImageTransitioner = Class.create();
ImageTransitioner.prototype = {
  initialize: function(div, img, tr, speed) {
    this.div = $(div);
    this.img = $(img);
    this.tr = $(tr);
    this.speed = speed;
    this.active = false;
    this.scrolling = false;
    this.eventClick = this.clickList.bindAsEventListener(this);
    this.currSrc = "";
    this.intervalID = 0;
    Event.observe(this.tr, 'click', this.eventClick);
  },
  destroy: function() {
    Event.stopObserving(this.tr, 'click', this.eventClick);
  },
  clickList: function(event) {
      if(!this.img)return;
      if(!Event.element(event))return;
      if(Event.element(event).tagName != "IMG")return;
      this.currSrc = Event.element(event).src.replace("http://" + location.hostname, "");
      this.img.className = "fade10";
      this.div.style.backgroundImage = "url(" + this.currSrc + ")";
      this.intervalID = setInterval(this.fadeImage.bind(this), this.speed);       
      Event.stop(event);
  },
  fadeImage: function() {
      if(!this.img)
      {
        clearInterval(this.intervalID);
        return;
      }
      var i = parseInt(this.img.className.replace("fade",""),10);
      if(i==0)
      {
        this.img.src = this.currSrc;            
        if(!document.all)
            this.img.style.opacity = "1";                 
        clearInterval(this.intervalID);
        return;
      }
      i--;
      this.img.className = "fade" + i;
      if(!document.all)
        this.img.style.opacity = (i * 0.1) + "";
  }
}