var spotCount = 15;

var colorTable = new Array(
  "#FFFFFF",
//  "#FFE6E6",
//  "#FFCCCC",
//  "#FFB2B2",
//  "#FF9999",
//  "#FF8080",
//  "#FF6666",
//  "#FF4D4D",
//  "#FF3333",
//  "#FF1919",
  "#FF0000");

var spotIdx = -1;
var colorIdx = 1;
var cell = null;

function setNewCell() {
  spotIdx += 1;
  if (spotIdx >= spotCount) {
    spotIdx = 0;
  }

  var r = 2 * (spotIdx % 5);
  if (r > 4) {
    r = r - 5;
  }
  var c = spotIdx % 3;

  var table = document.getElementById('spots');
  var row = table.rows[r];
  cell = row.cells[c];
}

function changeSpot() {
  setNewCell();
  fadeSpot(-1);
}

function fadeSpot(change) {
  var color;
  colorIdx += change;
  color = colorIdx;
  if (color > -1 && color < colorTable.length) {
    cell.style.color = colorTable[color];

    setTimeout("fadeSpot(" + change + ");", 300 / colorTable.length);
  } else if (change < 0) {
    setNewCell();
    setTimeout("fadeSpot(" + -change + ");", 300 / colorTable.length);
  } else {
    setTimeout("fadeSpot(-1);", 500);
  }
}

changeSpot();