/* only do this for some stylesheets. NOT all - think about.*/
var fps = 10;

function addClass(element,value) {
  if (!element.className) {
    element.className = value;
  } else {
    newClassName = element.className;
    newClassName+= " ";
    newClassName+= value;
    element.className = newClassName;
  }
}

function fade(img, img2, time, dir)
{
  img = document.getElementById(img);
  img2 = document.getElementById(img2);
/* should create the function below and use that instead  */ 
//  img = document.getElementsByClass(class_name)[0];
  var steps = time * fps;

  if (typeof img.style.opacity != 'undefined')
  {
    var otype = 'w3c';
  }
  else if (typeof img.style.MozOpacity != 'undefined')
  {
    otype = 'moz';
  }
  else if (typeof img.style.KhtmlOpacity != 'undefined')
  {
    otype = 'khtml';
  }
  else if (typeof img.filters == 'object')
  {
    otype = (img.filters.length > 0
        && typeof img.filters.alpha == 'object'
        && typeof img.filters.alpha.opacity == 'number')
        ? 'ie' : 'none';
  }
  else { otype = 'none'; }

  if (otype != 'none')
  {
    if (dir == 'out') { dofade(steps, img, img2, 1, false, otype); }
    else { dofade(steps, img, img2, 0, true, otype); }
  }
}

function dofade(steps, img, img2, value, targetvisibility, otype)
{
  targetvisibility2 = !targetvisibility;
  value2 = 1 - value;

  value += (targetvisibility ? 1 : -1) / steps;
  value2 += (targetvisibility2 ? 1 : -1) / steps;
  if (targetvisibility ? value > 1 : value < 0)
      value = targetvisibility ? 1 : 0;
  if (targetvisibility2 ? value2 > 1 : value2 < 0)
      value2 = targetvisibility2 ? 1 : 0;
	  
  setfade(img, value, otype);
//  setzindex(img, value);
  setfade(img2, value2, otype);
//  setzindex(img2, value2);

  if (targetvisibility ? value < 1 : value > 0)
  {
    setTimeout(function()
    {
      dofade(steps, img, img2, value, targetvisibility, otype);
    }, 1000 / fps);
  } else {
    if(targetvisibility) {
      setTimeout("fade('"+img.getAttribute('id')+"', '"+img2.getAttribute('id')+"', 2, 'out')",10000);
	  setzindex(img, img2);
    } else {
      setTimeout("fade('"+img.getAttribute('id')+"', '"+img2.getAttribute('id')+"', 2, 'in')",10000);
	  setzindex(img2, img);
    }
  }
}

function setzindex(img, img2)
{
    img.style.zIndex = 10;
    img2.style.zIndex = 0;
}

function setfade(img, value, otype)
{
  switch(otype)
  {
    case 'ie':
      img.filters.alpha.opacity = value * 100;
      break;

    case 'khtml':
      img.style.KhtmlOpacity = value;
      break;

    case 'moz':
      img.style.MozOpacity = (value == 1 ? 0.9999999 : value);
      break;

    default:
      img.style.opacity = (value == 1 ? 0.9999999 : value);
  }
}

addLoadListener(function()
{
  addClass(document.getElementById('fader'), "javascript");
// do the following to set the correct z-index
  setzindex(document.getElementById('before'), document.getElementById('after'));
// PROBLEM: this assumes that one is "off" and the other is "on". This is not the
//case at the beginning, when both are "on". Here it should fade the one out without
//trying to fade the other one in (or it should know that it is already faded fully in
//and not just have them as "opposite" in opacity value)
  setTimeout("fade('before','after', 2, 'out')",5000);
});

function addLoadListener(fn)
{
  if (typeof window.addEventListener != 'undefined')
  {
    window.addEventListener('load', fn, false);
  }
  else if (typeof document.addEventListener != 'undefined')
  {
    document.addEventListener('load', fn, false);
  }
  else if (typeof window.attachEvent != 'undefined')
  {
    window.attachEvent('onload', fn);
  }
  else
  {
    var oldfn = window.onload;
    if (typeof window.onload != 'function')
    {
      window.onload = fn;
    }
    else
    {
      window.onload = function()
      {
        oldfn();
        fn();
      };
    }
  }
}