window.addEvent('domready', function(){
  var reference_frame = $('references');
  var references = reference_frame.getElements("LI");
  var time = 0;
  var offset = 1;
  var line_size = 247;
  var lignes = (Math.ceil(references.length/3)).toInt();
  var up = $('flechehaut');
  var down = $('flechebas');


  references.fade('hide');
  references.setStyle('display', 'block');
  references.each(function(elem){
    (function () {
      elem.fade('in');
    }).delay(time);
    time += 200;
  });

  down.addEvent('click', function(e){
    e.stop();
    if (offset < lignes - 1)
    {
      offset ++;
      new Fx.Scroll(reference_frame).start(0, (offset - 1) * 247);
    }
  });

  up.addEvent('click', function(e){
    e.stop();
    if (offset > 1)
    {
      offset --;
      new Fx.Scroll(reference_frame).start(0, (offset - 1) * 247);
    }
  });

});