$(function() {

  var ACE_FILES_PATH = '/assets/ace/';
  var THEME = 'ace/theme/textmate';

  var currentSubmission = 0;
  var active_file = undefined;
  var fileTrees = []
  var editor = undefined;
  var fileTypeById = {}

  var showActiveFile = function() {
    var session = editor.getSession();
    var fileType = fileTypeById[active_file.file_type_id]
    session.setMode(fileType.editor_mode);
    session.setTabSize(fileType.indent_size);
    session.setValue(active_file.content);
    session.setUseSoftTabs(true);
    session.setUseWrapMode(true);

    showFileTree(currentSubmission);
    filetree = $(fileTrees[currentSubmission])
    filetree.jstree("deselect_all");
    filetree.jstree().select_node(active_file.file_id);
  };

  var initializeFileTree = function() {
    $('.files').each(function(index, element) {
      fileTree = $(element).jstree($(element).data('entries'));
      fileTree.on('click', 'li.jstree-leaf', function() {
        var id = parseInt($(this).attr('id'))
        _.each(files[currentSubmission], function(file) {
          if (file.file_id === id) {
            active_file = file;
          }
        });
        showActiveFile();
      });
      fileTrees.push(fileTree);
    });
  };

  var showFileTree = function(index) {
    $('.files').hide();
    $(fileTrees[index].context).show();
  }

  if ($.isController('exercises') && $('#timeline').isPresent()) {

    _.each(['modePath', 'themePath', 'workerPath'], function(attribute) {
      ace.config.set(attribute, ACE_FILES_PATH);
    });

    var slider = $('#submissions-slider>input');
    var submissions = $('#data').data('submissions');
    var files = $('#data').data('files');
    var filetypes = $('#data').data('file-types');

    editor = ace.edit('current-file');
    editor.setShowPrintMargin(false);
    editor.setTheme(THEME);
    editor.$blockScrolling = Infinity;
    editor.setReadOnly(true);

    _.each(filetypes, function (filetype) {
      filetype = JSON.parse(filetype);
      fileTypeById[filetype.id] = filetype;
    });

    $('tr[data-id]>.clickable').each(function(index, element) {
      element = $(element);
      element.click(function() {
        slider.val(index);
        slider.change()
      });
    });

    slider.on('change', function(event) {
      currentSubmission = slider.val();
      var currentFiles = files[currentSubmission];
      var fileIndex = 0;
      _.each(currentFiles, function(file, index) {
        if (file.name === active_file.name) {
          fileIndex = index;
        }
      })
      active_file = currentFiles[fileIndex];
      showActiveFile();
    });

    active_file = files[0][0]
    initializeFileTree();
    showActiveFile();
  }

});

@@ -1726,16 +1726,90 @@
 types');
+%0A    var playButton = $('#play-button');%0A    var playInterval = undefined;
 %0A%0A    ed
@@ -2685,24 +2685,711 @@
 );%0A    %7D);%0A%0A
+    playButton.on('click', function(event) %7B%0A      if (playInterval == undefined) %7B%0A        playInterval = setInterval(function() %7B%0A          if ($.isController('exercises') && $('#timeline').isPresent() && slider.val() %3C submissions.length - 1) %7B%0A            slider.val(parseInt(slider.val()) + 1);%0A            slider.change()%0A          %7D else %7B%0A            clearInterval(playInterval);%0A          %7D%0A        %7D, 5000);%0A        playButton.find('span.glyphicon').removeClass('glyphicon-play').addClass('glyphicon-pause')%0A      %7D else %7B%0A        clearInterval(playInterval);%0A        playButton.find('span.glyphicon').removeClass('glyphicon-pause').addClass('glyphicon-play')%0A      %7D%0A    %7D);%0A%0A
     active_f

Implement play button behavior