$(function(){

  var materialList = $('#materials'),
      lastMaterial = materialList.find('li:last'),
      listContents = materialList.html();
  materialList.append(listContents);
  lastMaterial.css({'margin-bottom': '2em', 'width': '80%'});
  var startOfSecondSet = lastMaterial.next('li').css({'clear': 'left'}),
      finalOffset = startOfSecondSet[0].offsetTop,
      timeout,
      interval = setInterval(function(){
          if (materialList[0].scrollTop > finalOffset)
            materialList[0].scrollTop -= finalOffset;
        }, 1000),
      pause = function(){
        if(timeout) clearTimeout(timeout);
        timeout = undefined;
        materialList.stop();
        timeout = setTimeout(play, 4*1000);
      },
      stop = function(){
        pause();
        clearInterval(interval);
        materialList.html(listContents);
      },
      play  = function(delay){
        if (isNaN(parseInt(delay))) delay = 4;
        var percentage = materialList[0].scrollTop / finalOffset,
            duration  = 30*1000 * (1 - percentage);
        timeout = setTimeout(function(){
          materialList.animate({
            'scrollTop': finalOffset
          }, duration, 'linear', function(){
            timeout = undefined;
            materialList[0].scrollTop = 0;
            play(0);
          });
        }, delay*1000);
      };
  play();
  materialList.click(pause);

});