var fader = {

  durationTime: 800,
  transitionInterval: 85,

  fade: function(element, startRGB, endRGB) {
    this.nextTransition(element, this.rgbToPercents(startRGB),
                        this.rgbToPercents(endRGB),0);
  },

  nextTransition: function(element, startColor, endColor, timeSoFar) {
    var proportionSoFar = timeSoFar/this.durationTime;
    var currentColor = "rgb(";
    for (component=0; component<3; component++) {
      var currentComponent = Math.round(startColor[component] +
         proportionSoFar * (endColor[component] - startColor[component]));
      currentColor+=currentComponent + "%" + (component<2 ? "," : ")");
    }
    element.style.backgroundColor = currentColor;
    timeSoFar+=this.transitionInterval;
    if (timeSoFar>=this.durationTime) {
      this.durationTime+ "\n";
      element.style.backgroundColor = 
        "rgb("+endColor[0]+"%,"+endColor[1]+"%,"+endColor[2]+"%)";
      return;
    }
    var nextCall = function() {
      fader.nextTransition(element, startColor, endColor, timeSoFar);
    }
    setTimeout(nextCall, this.transitionInterval);
  },

  rgbToPercents: function (rgb) {
    if (rgb.substring(0,1)=="#") {
      rgb = rgb.substring(1,rgb.length);
    }
    var percentArray = new Array(3);
    count = 0;
    for (component = 0; component<3; component++) {
      rgbComponent = rgb.substring(component*2,(component*2)+2);
      percentArray[component] =
        Math.round(100 * (parseInt("0x" + rgbComponent)/255));
    }
    return percentArray;
  }

}