var gCrossfadeGroups = {};

function cf_add(group, id, duration) {
  var ms = parseInt(duration) * 1000;
  if (!gCrossfadeGroups[group]) {
    gCrossfadeGroups[group] = { lastId: id, items: [] };
    setTimeout("cf_wait_timer('"+group+"')", ms);
  } else {
    // This is not the first item to be added, so it should be hidden for now
    cf_setOpacity(id, 0);
  }
  gCrossfadeGroups[group].items.push({ id: id, time: ms });
}

function cf_wait_timer(group) {
  var lastId = gCrossfadeGroups[group].lastId;
  var items = gCrossfadeGroups[group].items;
  for (var i = 0; i < items.length; i++) {
    if (items[i].id == lastId) {
      nextIdx = (i+1 < items.length) ? i + 1 : 0;
      cf_fade(lastId, items[nextIdx].id, 0);
      gCrossfadeGroups[group].lastId = items[nextIdx].id;
      setTimeout("cf_wait_timer('"+group+"')", items[nextIdx].time);
      break;
    }
  }
}

function cf_fade(fromId, toId, pct) {
  cf_setOpacity(fromId, 100 - pct);
  cf_setOpacity(toId, pct);
  if (pct >= 100) return;
  setTimeout("cf_fade('"+fromId+"','"+toId+"',"+(pct+10)+")", 100);
}

function cf_setOpacity(id, opacity) {
  var styleObj = document.getElementById(id).style;
  styleObj.opacity = (opacity / 100);
  styleObj.MozOpacity = (opacity / 101);
  styleObj.KhtmlOpacity = (opacity / 100);
  styleObj.filter = "alpha(opacity="+opacity+")";
}