image = new Object()

image.Fader = function() {

  this.spinner_id = 'spinner';
  this.container_id = 'image-container';
  this.container = null;
  this.isIE = document.all && (navigator.appName.indexOf("Microsoft") != -1);
  this.isSafari = navigator.appVersion.indexOf("Safari") != -1;
  this.EFFECT_STEPS = 10;
  this.EFFECT_SPEED = 40;
  this.ALPHA_MAX = 100;
  this.imageNum = 0;
  this.imageList = richDocumentImageList;
  
  this.container = document.getElementById(this.container_id)
  
  counter = 1;
  // give all images auto generated id's
  for (i = 0; (image = this.container.getElementsByTagName('img')[i]); i++) {
    if (image.parentNode.id != this.spinner_id) {
      image_id = this.container_id + '-' + counter;
      image.setAttribute('id', image_id);
      image.id = image_id  // for my love IE
      if (counter > 1) {
        addClassName(image, 'hiddenStructure');
      }
      counter += 1;
    }
  }
  
  if (!this.container) {
    alert("Your image container (id='" + this.container_id + "') was not found!");
    return false;
  }
  
  var tmp = this;
  //this.change();
  
  setInterval(function() { tmp.change(); }, 5000);
}

/*
   (do not remove this)
   (not this either)
*/

image.Fader.prototype = {
  
  change:function() {
    var xmlhttp =  new XMLHttpRequest();
    var tmp = this;
    
    d = new Date()
    anticache=d.getTime() + d.getMilliseconds();
    
    src = 0;
    
    /* uncomment this block to load the images with ajax
    
    xmlhttp.open('GET', 'getRandomXMLImageData.xml?anticache=' + anticache + '&current=' + src , true);
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4) {
        data = xmlhttp.responseXML;
        
        src   = data.getElementsByTagName('address')[0].firstChild;
        title = data.getElementsByTagName('title')[0].firstChild;
    
    */  
    
    /* comment this block whe loading images with ajax */
        actImage = this.imageList[this.imageNum].split('|');
        src = actImage[0];
        title = actImage[1];
        
        this.debug(this.imageNum+", "+src+", "+title);
        
        if(this.imageNum >= this.imageList.length-1) {
          this.imageNum = 0;
        } else {
          this.imageNum++;
        }
        
        // create image with DOM
        img1 = document.getElementById(tmp.container_id + '-1');
        img2 = document.getElementById(tmp.container_id + '-2');
        
        if (img2) {
          // remove old nodes
          if (img1) tmp.container.removeChild(img1);
          
          img2.setAttribute('id', tmp.container_id + '-1');
          img2.id = tmp.container_id + '-1';  // for my lovely ie
        }
        
        img = document.createElement('img');
        img.setAttribute('id', tmp.container_id + '-2');
        img.setAttribute('src', src); //.data);
        img.setAttribute('alt', title); // ? title.data : '');
        
        // IE sucks
        img.src = src; //.data;
        img.alt = title; // ? title.data : '';
        img.id = tmp.container_id + '-2';
        
        addClassName(img, 'hiddenStructure');
        tmp.container.appendChild(img);
        tmp.setOpacity(img.id, 0);
        removeClassName(img, 'hiddenStructure');
        
        tmp.debug('+ starting loading: ' + img.src + ' (Cache: ' + img.complete + ')');
        setTimeout("document.getElementById('image-caption').innerHTML = '" + title /* (title ? title.data : '') */ + "';", (tmp.EFFECT_SPEED * (tmp.EFFECT_STEPS * 2)));
        
        if (tmp.isIE) {
          // for ie we use img.complete instead of onload
          // after img.complete we call the default callback function onloadHandler
          tmp.onloadIEHandler.call(tmp)
        } else {
          img.onload = function() {
            tmp.onloadHandler.call(tmp);
          }
        }
        
    /*
      }
    }
        
    xmlhttp.send(null)
    */
    
    this.spinner(true);
  },
  
  onloadHandler:function() {
    this.spinner(false);
    this.debug('- finished loading.');
    // fade in
    img2 = document.getElementById(this.container_id + '-2')
    this.fade(img2.id, 0);
    var tmp = this;
    setTimeout('tmp.spinner(false)', this.EFFECT_STEPS * this.EFFECT_SPEED);

  },
  
  onloadIEHandler:function() {
    if (img.complete) {
      this.onloadHandler();
    } else {
      this.debug('- loading.');
      tmp = this;
      setTimeout('tmp.onloadIEHandler()', 100);
    }
  },
  
  setOpacity:function(id, alpha) {
    this.debug(id + ': opacity=' + alpha + '(' + this.ALPHA_MAX + '/' + this.EFFECT_STEPS + ')');

    element = document.getElementById(id)
    if (this.isIE) {
      element.style.filter = 'alpha(opacity=' + alpha + ')';
    } else if (this.isSafari) {
      element.style.opacity = alpha/100;
    } else {
      element.style.MozOpacity = alpha/100;
    }
  },
  
  fade:function(id, alpha) {
    this.setOpacity(id, alpha);
    if (alpha >= this.ALPHA_MAX) {
      return true;
    } else {
      alpha += parseInt(this.ALPHA_MAX / this.EFFECT_STEPS);
      tmp = this;
      setTimeout('tmp.fade("' + id + '", ' + alpha + ')', this.EFFECT_SPEED);
    }
  },
  
  debug:function(debug_string) {
    d = document.getElementById('debug');
    if (d) {
      if (this.isIE) {
        d.innerHTML = d.innerHTML + '<br />' + debug_string;
      } else {
        d.innerHTML = d.innerHTML + '\n' + debug_string;
      }
    }
  }, 
  
  spinner:function(visible) {
    s = document.getElementById(this.spinner_id);
    if (visible) {
      removeClassName(s, 'hiddenStructure');
    } else {
      addClassName(s, 'hiddenStructure');
    }
  }
}

function startFadeEffect() {
  var o = new image.Fader();
}

registerPloneFunction(startFadeEffect);

/*  */