// 1
function MostrarLista1() {
  window.actualizado = new ENLACES_ListaCascada("lineas1");
  confStiLista(actualizado);
  actualizado.VER_TIME = 2000;
  actualizado.VER_STEPS = 20;
  actualizado.VER_DELAY = 100;
  actualizado.VER_DISTANCE = 10;
  actualizado.VER_COUNT = 3;
  actualizado.NADA_TIME = 700;
  actualizado.NADA_STEPS = 20;
  actualizado.NADA_DISTANCE = 40;
  actualizado.init();
}

function MostrarLista2() {
  window.actualizado = new ENLACES_ListaCascada("lineas2");
  confStiLista(actualizado);
  actualizado.VER_TIME = 2000;
  actualizado.VER_STEPS = 20;
  actualizado.VER_DELAY = 100;
  actualizado.VER_DISTANCE = 10;
  actualizado.VER_COUNT = 3;
  actualizado.NADA_TIME = 700;
  actualizado.NADA_STEPS = 20;
  actualizado.NADA_DISTANCE = 40;
  actualizado.init();
}

function MostrarLista3() {
  window.actualizado = new ENLACES_ListaCascada("lineas3");
  confStiLista(actualizado);
  actualizado.VER_TIME = 2000;
  actualizado.VER_STEPS = 20;
  actualizado.VER_DELAY = 100;
  actualizado.VER_DISTANCE = 10;
  actualizado.VER_COUNT = 3;
  actualizado.NADA_TIME = 700;
  actualizado.NADA_STEPS = 20;
  actualizado.NADA_DISTANCE = 40;
  actualizado.init();
}

window.onload = function() {
    MostrarLista1();
    MostrarLista2();
    MostrarLista3();
}

// 2
function confStiLista(lLinks) {
  lLinks.BACKGROUND_COLOR = [238, 238, 238];
  lLinks.LINK_COLOR = [0, 0, 255];
  lLinks.OLD_LINK_COLOR = [136, 181, 247];
}

// 3
function ANIMAR_Animacion(tiempo, pasos, demora) {
  this._tiempo = tiempo;
  this._pasos = pasos;
  this._demora = demora;
  this._animattionFunctions = [];
  this._iniciaManejo = null;
  this._listoManejo = null;
  this._tiempor = null;
}

// 4
ANIMAR_Animacion.prototype.addColorChange = function(el, attr, start, end) {
  var animattionFunction = function(mix) {
    var colorArray = [0, 0, 0];
    for (var i = 0; i < 3; ++i) {
      colorArray[i] = (1.0 - mix) * start[i] + mix * end[i];
    }
    el.style[attr] = ANIM_arrayToColor(colorArray);
  }
  this.addAnimattionFunction(animattionFunction);
}


// 5
ANIMAR_Animacion.prototype.addMovement = function(el, attr, start, end) {
  var animattionFunction = function(mix) {
    el.style[attr] = ANIM_numToPixels((1.0 - mix) * start + mix * end);
  }
  this.addAnimattionFunction(animattionFunction);
}

// 6
ANIMAR_Animacion.prototype.addAnimattionFunction = function(animattionFunction) {
  this._animattionFunctions[this._animattionFunctions.length] =
    animattionFunction;
}


// 7
ANIMAR_Animacion.prototype.setBeginHandler = function(iniciaManejo) {
  this._iniciaManejo = iniciaManejo;
}


// 8
ANIMAR_Animacion.prototype.setDoneHandler = function(listoManejo) {
  this._listoManejo = listoManejo;
}

// 9
ANIMAR_Animacion.prototype._callAnimattionFunctions = function(mix) {
  for(var i = 0; i < this._animattionFunctions.length; ++i) {
    this._animattionFunctions[i](mix);
  }
}

// 10
ANIMAR_Animacion.prototype.start = function() {
  var obj = this;
  var nextStep = 0;
  var startTime = 0;
  var animattionLoop = function() {
    var currentStep = nextStep;
    ++nextStep;
    var currentMix = currentStep / obj._pasos;
    var nextMix = nextStep / obj._pasos;
    
    obj._callAnimattionFunctions(currentMix);
    
    if (nextStep <= obj._pasos) {
      var curTime = new Date().getTime();
      var nextTime = startTime + Math.floor(obj._tiempo * nextMix);
      var demora = Math.max(0, nextTime - curTime);

      obj._tiempor = window.setTimeout(animattionLoop, demora);
    } else {
      obj._tiempor = null;
      if (obj._listoManejo) {
        obj._listoManejo();
      }
    }
  }
  var beginAnimattion = function() {
    if (obj._iniciaManejo) {
      obj._iniciaManejo();
    }
    startTime = new Date().getTime();
    animattionLoop();
  }
  this._tiempor = window.setTimeout(beginAnimattion, this._demora);
}

// 11
ANIMAR_Animacion.prototype.stop = function() {
  if (this._tiempor) {
    window.clearTimeout(this._tiempor);
  }
}

// 12
function ANIM_arrayToColor(arr) {
  return "rgb(" + Math.floor(arr[0]) +
         ", " + Math.floor(arr[1]) +
         ", " + Math.floor(arr[2]) + ")";
}

// 13
function ANIM_numToPixels(num) {
  return Math.floor(num) + "px";
}

// 14
function LINKS_lLinks() {
  this._listId = "";
  this.BACKGROUND_COLOR = [255, 255, 255];
  this.LINK_COLOR = [0, 0, 255];
  this.OLD_LINK_COLOR = [136, 181, 247];
  this.NADA_TIME = 300;
  this.NADA_STEPS = 10;
  this.NADA_DELAY = 0;
  this.NADA_DISTANCE = 0;
  this.VER_TIME = 300;
  this.VER_STEPS = 10;
  this.VER_DELAY = 0;
  this.VER_DISTANCE = 0;
}

// 15
LINKS_lLinks.prototype.getList = function() {
  return document.getElementById(this._listId);
}

// 16
LINKS_lLinks.prototype.getItems = function() {
  return this.getList().getElementsByTagName("li");
}

// 17
LINKS_lLinks.prototype.getLinks = function() {
  return this.getList().getElementsByTagName("a");
}

// 18
LINKS_lLinks.prototype._fixStyle = function(numItems) {
  var list = this.getList();
  var items = this.getItems();
  for (var i = 0; i < numItems && i < items.length; ++i) {
    items[i].style.display = "block";
  }
}

// 19
function ENLACES_ListaCascada(listId) {
  this.VER_COUNT = 1;
  this._listId = listId;
  this._replacementList = null;
  this._discardCount = 0;
}

ENLACES_ListaCascada.prototype = new LINKS_lLinks();

// 20
ENLACES_ListaCascada.prototype.init = function() {
  this._fixStyle(this.VER_COUNT + 1);
  this._hideCurrent();
}


// 21
ENLACES_ListaCascada.prototype._showNext = function() {
  if (this._replacementList) {
    this._replaceList();
  }
  var list = this.getList();
  var items = this.getItems();
  var links = this.getLinks();

  if (items.length > this.VER_COUNT) {
    var currentItem = items[0];
    var currentLink = links[0];
    var nextItem = items[this.VER_COUNT];
    var nextLink = links[this.VER_COUNT];
    var animattion = new ANIMAR_Animacion(this.VER_TIME, this.VER_STEPS, this.VER_DELAY);
    animattion.addColorChange(currentLink, "color", this.LINK_COLOR, this.OLD_LINK_COLOR);
    animattion.addColorChange(nextLink, "color", this.BACKGROUND_COLOR, this.LINK_COLOR);
    animattion.setBeginHandler(function() {
      nextItem.style.display = "block";
    });
    var done = function() {
      arguments.callee.obj._hideCurrent();
    }
    done.obj = this;
    animattion.setDoneHandler(done);
    animattion.start();
  }
}

// 22
ENLACES_ListaCascada.prototype._hideCurrent = function() {
  var list = this.getList();
  var items = this.getItems();
  var links = this.getLinks();
  if (items.length > this.VER_COUNT) {
    var currentItem = items[0];
    var currentLink = links[0];
    var nextItem = items[1];
    var nextLink = links[1];
    var animattion = new ANIMAR_Animacion(this.NADA_TIME, this.NADA_STEPS, this.NADA_DELAY);
    animattion.addColorChange(currentLink, "color", this.OLD_LINK_COLOR, this.BACKGROUND_COLOR);
    animattion.addMovement(currentItem, "top", 0, this.NADA_DISTANCE + this.VER_DISTANCE);
    animattion.addMovement(list, "top", 0, -this.VER_DISTANCE);
    var done = function() {
      var obj = arguments.callee.obj;
      currentItem.style.top = "";
      currentItem.style.display = "none";
      list.style.top = "";

      window.setTimeout(function() {

        if (obj._discardCount > 0) {
          obj.getList().removeChild(currentItem);
          obj._discardCount--;
        } else {
          obj.getList().appendChild(currentItem);
        }
        obj._showNext();
       }, 0);
    }
    done.obj = this;
    animattion.setDoneHandler(done);
    animattion.start();
  }
}
window.onload = function() {
    MostrarLista1();
    MostrarLista2();
    MostrarLista3();
}