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.SHOW_TIME = (typeof(show_time) != 'undefined' ? show_time : 5) * 1000;
  this.response_url = typeof(response_url) != 'undefined' ? response_url : 'getRandomXMLImageData.xml';

  this.container = document.getElementById(this.container_id)

  if (this.container) {
    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;
    setTimeout(function() { tmp.change(); }, this.SHOW_TIME);
  }
}

/*
   (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;
    
    xmlhttp.open('GET', this.response_url + '?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;
        
        // 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 + ')');
        if (document.getElementById('image-caption')) {
            setTimeout("document.getElementById('image-caption').innerHTML = '" + (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)
          }
        }*/
        
        tmp.onloadIEHandler.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);
    setTimeout(function() { tmp.change(); }, this.SHOW_TIME);
  },
  
  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);

/*  */