function opacity(id, opacStart, opacEnd, millisec) {
    var speed = Math.round(millisec / 100); //speed for each frame
    var timer = 0;
    if(opacStart > opacEnd) { //determine the direction for the blending
        for(i = opacStart; i >= opacEnd; i--) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++; }
    } else if(opacStart < opacEnd) {
        for(i = opacStart; i <= opacEnd; i++) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++; }
    } // if start and end are the same nothing happens
}

//change the opacity for different browsers
function changeOpac(opacity, id) {
  var object = document.getElementById(id);
  object.style.opacity = (opacity / 100);
  object.style.MozOpacity = (opacity / 100);
  object.style.KhtmlOpacity = (opacity / 100);
  object.style.filter = "alpha(opacity=" + opacity + ")";
} 

// class roll
roll = function(imageidbase) {
  elems = document.getElementsByTagName('div');
  this.imageids = new Array();
  for (i=0;i< elems.length;i++) {
    id = imageidbase + i;
    if (elem = document.getElementById(id)) {
      this.imageids.push(imageidbase + i);
      image = document.getElementById(id);
    }
  }

  this.len = this.imageids.length; 
  this.idnow = 0;

  for (i=0;i<this.len;i++) changeOpac(0, this.imageids[i]); // hide them all
  changeOpac(100, this.imageids[this.idnow]);               // show idnow
  this.rottateon = false;
  this.intervalID;
  var instant = this;  // save this instance

  this.changerottate = function() {
    if (this.rottateon == true) {
      clearInterval(this.intervalID);
      this.rottateon = false;
    } else {
      this.intervalID = setInterval(function() { instant.rotate(); }, 5000);
      this.rottateon = true;
    }
  }; // changerottate

  this.rotate = function() {
    opacity(this.imageids[this.idnow], 100, 0, 1000); 
    elem = document.getElementById(this.imageids[this.idnow]);
    elem.style.zIndex = 1;
    this.idnow++; if (this.idnow==this.len) this.idnow=0;
    opacity(this.imageids[this.idnow], 0, 100, 1000);
    elem = document.getElementById(this.imageids[this.idnow]);
    image = document.getElementById(this.imageids[this.idnow]);
  }; // rotate
} // class roll