var ImgLoader = Class.create({
  initialize: function(options) {
    this.options = { onLoad: this.dummy, onError: this.dummy, delay: 50, timeout: 10000 };
    Object.extend(this.options, options || { });

    this.iscomplete = new Array();
    for(i=0; i<this.options.path.length; i++){
      this.loadImage(this.options.path[i].match(RegExp("^(file|http|https):\/\/")) ? this.options.path[i] : this.getAbsolutePath(this.options.path[i]),
                       this.options.onLoad, this.options.onError, this.options.delay, this.options.timeout, this.iscomplete, this.options.path.length);
    };
  },
  loadImage: function(abspath, onLoad, onError, delay, timeout, iscomplete, count) {
    var img = new Image(), tick = 0;

    img.finish = false;
    img.onabort = img.onerror = function() {
      if (img.finish) { return; }
      img.finish = true;
      onError(abspath);
    };
    img.onload  = function() {
      img.finish = true;
      if (window.opera && !img.complete) {
        onError(abspath);
        return;
      }
      iscomplete.push(abspath);
      if(iscomplete.length == count)
        onLoad(abspath);
    };
    img.src = abspath;
    if (!img.finish && timeout) {
      setTimeout(function() {
        if (img.finish) { return; }
        if (img.complete) {
          img.finish = true;
          if (img.width) { return; }
          onError(abspath);
          return;
        }
        if ((tick += delay) > timeout) {
          img.finish = true;
          onError(abspath);
          return;
        }
        setTimeout(arguments.callee, delay);
      }, 0);
    }
  },
  getAbsolutePath: function(path) {
    var e = document.createElement("div");
    e.innerHTML = '<a href=\"' + path + '\" />';
    return e.firstChild.href;
  }
});

Animator = Class.create({
  initialize: function(elem, options) {
    this.options = {
      imagepaths:  new Array(),
      width:       90,
      height:      68,
      duration:    400,
      delay:       50,
      loadingimg: 'img/ajax-loader.gif'
    };
    Object.extend(this.options, options || { });
    
    this.elem = elem;
    this.isfirst = true;
    this.isloading = false;
    this.currentindex = 0;
    this.baseimgsrc = this.elem.src;

    this.overelem = document.createElement('img');
    this.overelem.src = this.options.loadingimg;
    this.overelem.style.position = 'absolute'; 
    this.overelem.style.left = (this.options.width/2-8)+'px'; 
    this.overelem.style.top  = (this.options.height/2-8)+'px'; 
    
    Event.observe(this.elem, 'mouseover', this.animateStart.bind(this));
    Event.observe(this.elem, 'mouseout', this.animateStop.bind(this));
  },
  animateStart: function(){
    if(this.currentindex>0)
      return;
    if(this.options.imagepaths.length > 0 && this.options.imagepaths[0] == this.baseimgsrc)
      this.currentindex = 2;
    else
      this.currentindex = 1;
    if(this.isfirst){
      this.isfirst = false;

      this.elem.parentNode.appendChild(this.overelem);
	  
	  this.isloading = true;
      var ldr = new ImgLoader({path: this.options.imagepaths, onLoad: this.loadFinish.bind(this), onError: this.loadError.bind(this) });
      
    }
    else{
      if(this.isloading)
        return;
      this.timer=setTimeout(this.changeImage.bind(this),this.options.delay);
    }
  },
  animateStop: function(){
    clearTimeout(this.timer);
    this.currentindex = 0;
    this.elem.src = this.baseimgsrc;
  },
  loadFinish: function(){
	this.isloading = false;
    this.elem.parentNode.removeChild(this.overelem);
    if(this.currentindex == 0)
    	return;
    this.timer=setTimeout(this.changeImage.bind(this),this.options.delay);
  },
  loadError: function(){
	this.isloading = false;
    this.elem.parentNode.removeChild(this.overelem);
    this.isfirst = true;
  },
  changeImage: function(){
    if(this.currentindex==0){
      this.animateStop();
      return;
    }
    this.elem.src = this.options.imagepaths[this.currentindex-1];
    this.currentindex++;
    if(this.currentindex > this.options.imagepaths.length)
      this.currentindex = 1;
    this.timer=setTimeout(this.changeImage.bind(this),this.options.duration);
  }
});