// opacity stuff
function makevisible(id) {
  document.getElementById(id).style.visibility = "visible";
}

function makehidden(idbase) {
  elems = document.getElementsByTagName('div');
  for (i=0;i< elems.length;i++) {
    id = idbase + i;
    if (elem = document.getElementById(id)) elem.style.visibility = 'hidden';
  }
}

function posTop() { return typeof window.pageYOffset != 'undefined' ?
  window.pageYOffset : document.documentElement && document.documentElement.scrollTop ?
  document.documentElement.scrollTop : document.body.scrollTop ?
  document.body.scrollTop : 0; }

function opacity(id, opacStart, opacEnd, millisec) {
    //speed for each frame
    var speed = Math.round(millisec / 100);
    var timer = 0;
    //determine the direction for the blending, if start and end are the same nothing happens
    if(opacStart > opacEnd) {
        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++; }
    }
}

//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 + ")";
} 

// button style commands
function over(id) {
  elem = document.getElementById(id);
  elem.style.backgroundColor = '#de3139';
  elem.style.color = '#fff';
  elem.style.cursor = 'pointer';
  return;
}
function out(id) {
  elem = document.getElementById(id);
  elem.style.backgroundColor = '#181873';
  elem.style.color = '#fff';
  elem.style.cursor = 'pointer';
  return;
}

// class roll
roll = function(thumbidbase, imageidbase) {
  this.thumbidbase = thumbidbase;
  this.imageidbase = imageidbase;
  elems = document.getElementsByTagName('div'); // get all divs
  this.ids      = new Array();                // thumbids
  this.imageids = new Array();                // image ids
  for (i=0;i< elems.length;i++) {             // for all divs
    id = this.thumbidbase + i;
    if (elem = document.getElementById(id)) { // if this div is a thumb
      this.ids.push(id);
      this.imageids.push(this.imageidbase + i);
    }
  }

  this.highz = 5;
  this.lowz = 1;
  this.len = this.ids.length;
  this.idnow = 0;
  for (i=0;i<this.len;i++) changeOpac(0, this.ids[i]); // thumbs go transparent
  changeOpac(100, this.ids[this.idnow]);               // this one goes opaque
  elem = document.getElementById(this.ids[this.idnow]);
  elem.style.zIndex = this.highz;
  this.rottateon = false;
  this.intervalID;
  var instant = this;

  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.ids[this.idnow], 100, 0, 1000);
    elem = document.getElementById(this.ids[this.idnow]);
    elem.style.zIndex = 1;
    
    //if (buttons) out(this.butids[this.idnow]);
    this.idnow++; if (this.idnow==this.len) this.idnow=0;
    opacity(this.ids[this.idnow], 0, 100, 1000);
    elem = document.getElementById(this.ids[this.idnow]);
    elem.style.zIndex = this.highz;
    
    image = document.getElementById(this.imageids[this.idnow]);
  }; // rotate

  this.changestate = function() {
    if (this.rottateon) {
      clearInterval(this.intervalID);
      for (i=0;i<this.len;i++) changeOpac(0, this.ids[i]);
      this.rottateon = false; }
    else {
      this.rottateon = false;
      for (i=0;i<this.len;i++) changeOpac(0, this.ids[i]);
      this.idnow = 0;
      changeOpac(100, this.ids[this.idnow]);
      this.changerottate(); }
  } // changestate
  
  this.stop = function() {
    clearInterval(this.intervalID);
    this.rottateon = false; 
  }

  this.start = function() {
      this.rottateon = false;
      this.changerottate(); 
  }
  
  this.show = function(id) {
    this.stop();
    for (i=0;i<this.len;i++) {
      changeOpac(0, this.ids[i]);
      document.getElementById(this.ids[i]).style.zIndex = 1;
    }
    if (buttons) {
      for (i=0;i<this.len;i++) out(this.butids[i]);
      var mybutid = id + 'butid';
    }
    changeOpac(100, id);
    document.getElementById(id).style.zIndex = this.highz;
  }

} // roll