function returnObjById(id) {
  if (document.getElementById)
    var returnVar = document.getElementById(id);
  else if (document.all)
    var returnVar = document.all[id];
  else if (document.layers)
    var returnVar = document.layers[id];
  return returnVar;
}

function setOpacity(el, level) {
   el.style.opacity = level/100;
   el.style.MozOpacity = level/100;
   el.style.KhtmlOpacity = level/100;
   el.style.filter = "alpha(opacity=" + level + ");";
}

var steptime = 100; //ms
var waittime = 3000; //ms
var step = 10;

function opacityTick(id) {
  var item = returnObjById(id);
  var fade = item.getAttribute('fadelevel');
  var fadedir = item.getAttribute('fadedir');

  setOpacity(item, fade);

  if(fade == 0 && fadedir == 'down') {
    // end of the line - go to long wait
    item.setAttribute('fadelevel', step);
    item.setAttribute('fadedir', 'up');
    setTimeout("opacityTick('"+id+"')", waittime);
    return;
  }

  if(fade == 100 && fadedir == 'up') {
    // end of the line - go to long wait
    item.setAttribute('fadelevel', 100-step);
    item.setAttribute('fadedir', 'down');
    setTimeout("opacityTick('"+id+"')", waittime);
    return;
  }

  // set next fade level
  var newfade;
  if(fadedir == 'up') {
    newfade = fade*1 + step;
  }else{
    newfade = fade*1 - step;
  }
  if(newfade > 100) { newfade = 100; }
  if(newfade < 0) { newfade = 0; }

  item.setAttribute('fadelevel', newfade);
  setTimeout("opacityTick('"+id+"')", steptime);
  return;
}

function startfader(id) {
  var item = returnObjById(id);
  item.setAttribute('fadelevel', 100);
  item.setAttribute('fadedir', 'up');
  opacityTick(id);
}


