anchor.diff:        param.wasIndex = index;
       }
       refresh();
  -  };
  -
  -  //-----------------------------------------
  -  // refresh diff? [x]
  -  //-----------------------------------------
  -
  -  const refreshDiffCheckBox = () => {
  -    diffCheckBox()
  -      .attr('checked', param.wasIndex !== param.nowIndex)
  -      .unbind('click')
  -      .bind('click', () => show(param.nowIndex));
  -  };
  -
  -  const diffCheckBox = () => $('#diff-checkbox');
  -
  -  const inDiffMode = () => diffCheckBox().is(':checked');
  -
  -  $('#diff-checkbox-title').click(() => {
  -    diffCheckBox().attr('checked', !diffCheckBox().is(':checked'));
  -    show(param.nowIndex);
  -  });
  -
  -  //-----------------------------------------
  -  // refresh avatar navigator
  -  //    [<]avatar[>]
  -  //-----------------------------------------
  -
  -  const refreshAvatarNavigator = () => {
  -    if (param.avatarName === '') {
  -      $('#avatar-navigator').hide();
  -    } else {
  -      refreshAvatar($('#prev-avatar'), param.prevAvatarId);
  -      $('#review-avatar-image-box').html(makeAvatarImageHtml());
  -      refreshAvatar($('#next-avatar'), param.nextAvatarId);
  -    }
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const makeAvatarImageHtml = () => {
  -    return `<img class="avatar-image" src="/avatar/image/${param.avatarIndex}"/>`;
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const refreshAvatar = (button, id) => {
  -    const on = (id !== '');
  -    button
  -      .attr('disabled', !on)
  -      .unbind('click')
  -      .bind('click', () => {
  -        param.id = id;
  -        show(1);
  -      });
  -  };
  -
  -  //-----------------------------------------
  -  // refresh traffic-light navigator
  -  //    [<]index[>] traffic-lights...
  -  //-----------------------------------------
  -
  -  const refreshIndexNavigator = () => {
  -    refreshIndex($('#prev-index'), prevEventIndex(param.nowIndex));
  -    $('#review-index-box').html(makeIndexHtml());
  -    refreshIndex($('#next-index'), nextEventIndex(param.nowIndex));
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const makeIndexHtml = () => {
  -    const index = param.nowIndex;
  -    const colour = param.events[index].colour;
  -    return `<div id="index-number" class="${colour}">${index}</div>`;
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const refreshIndex = (button, index) => {
  -    const on = (index !== null);
  -    button
  -      .attr('disabled', !on)
  -      .unbind('click')
  -      .bind('click', () => show(index));
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const prevEventIndex = (n) => {
  -    // index==0 is the kata creation event
  -    const firstIndex = 1;
  -    if (n === null || n === firstIndex) {
  -      return null; // signals disabled-button in refreshIndex()
  -    } else {
  -      return n - 1; // Note: assumes only test events
  -    }
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const nextEventIndex = (n) => {
  -    const lastIndex = param.events.length - 1;
  -    if (n === null || n === lastIndex) {
  -      return null; // signals disabled-button in refreshIndex()
  -    } else {
  -      return n + 1; // Note: assumes only test events
  -    }
  -  };
  -
  -  //-----------------------------------------
  -  // refresh traffic-lights
  -  //-----------------------------------------
  -
  -  const refreshTrafficLights = () => {
  -    const trafficLights = $('#review-traffic-lights');
  -    trafficLights.html(makeTrafficLightsHtml());
  -    $.each($('.diff-traffic-light', trafficLights), (_, light) => {
  -      const $light = $(light);
  -      const nowIndex = $light.data('index');
  -      $light.click(() => show(nowIndex));
  -      // Show full tool-tip even if diff[x] is off
  -      // otherwise you end up with odd tool-tip such as
  -      //    (RED) 12 -> (RED) 12
  -      const wasIndex = prevEventIndex(nowIndex);
  -      cd.setupTrafficLightTip($light, param.version, param.id, param.avatarIndex, wasIndex, nowIndex);
  -    });
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const makeTrafficLightsHtml = () => {
  -    let html = '';
  -    let wasIndex = 0;
  -    $.each(param.events, (_n, event) => {
  -      const colour = event.colour;
  -      if (colour !== '') {
  -        const nowIndex = event.index;
  -        const barOrGap = (param.nowIndex === nowIndex) ? 'bar' : 'gap';
  -        html += makeTrafficLightHtml(colour, wasIndex, nowIndex, barOrGap);
  -        wasIndex = nowIndex;
  -      }
  -    });
  -    return html;
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const makeTrafficLightHtml = (colour, wasIndex, nowIndex, barOrGap) => {
  -    return [
  -      "<div class='diff-traffic-light'",
  -        ` data-id='${param.id}'`,
  -        ` data-colour='${colour}'`,
  -        ` data-index='${nowIndex}'>`,
  -        `<img class='with-bar-gap' src='/traffic-light/image/${colour}_${barOrGap}.png'/>`,
  -      '</div>'
  -    ].join('');
  -  };
  -
  -  //-----------------------------------------
  -  // refresh files
  -  //-----------------------------------------
  -
  -  const refreshFiles = () => {
  -    const diffContent = $('#diff-content');
  -    const diffFilenames = $('#diff-filenames');
  -    diffFilenames.html(makeDiffFilenames(param.diffs));
  -    resetFilenameAddedDeletedLineCountHandlers();
  -    diffContent.html(makeDiffContent(param.diffs));
  -    buildDiffFilenameHandlers(param.idsAndSectionCounts);
  -    showFile(param.currentFilenameId);
  -  };
  -
  -  const showFile = (filenameId) => {
  -    const filename =  $(`#radio_${filenameId}`);
  -    filename.click()
  -            .scrollIntoView({ direction: 'vertical' });
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const makeDiffFilenames = (diffs) => {
  -    let html = '';
  -    $.each(sortedDiffs(diffs), (_, diff) => {
  -      html += '<div class="diff-filename-box">';
  -      html += makeDiffDeletedCount(diff);
  -      html += makeDiffAddedCount(diff);
  -      html += makeDiffFilename(diff);
  -      html += '</div>';
  -    });
  -    return html;
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const makeDiffFilename = (diff) => {
  -    return outerHTML($('<div>', {
  -      'class': 'filename',
  -      'data-filename': diff.filename,
  -      'id': `radio_${diff.id}`,
  -      'text': diff.filename
  -    }));
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const makeDiffDeletedCount = (diff) => {
  -    return makeDiffCount(diff, 'deleted_line_count', 'deleted');
  -  };
  -
  -  const makeDiffAddedCount = (diff) => {
  -    return makeDiffCount(diff, 'added_line_count', 'added');
  -  };
  -
  -  const makeDiffCount = (diff, propertyName, cssName) => {
  -    let html = '';
  -    if (!diffCheckBox().is(':checked')) {
  -      return html;
  -    }
  -    const div = $('<div>', {
  -      'class': `diff-${cssName}-line-count button`,
  -      'data-filename': diff.filename
  -    });
  -    const count = diff[propertyName];
  -    if (count !== 0) {
  -      div.append(count);
  -    }
  -    return outerHTML(div);
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const outerHTML = (element) => {
  -    return element.get(0).outerHTML;
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const sortedDiffs = (diffs) => {
  -    let filenames = [];
  -    $.each(diffs, (_, diff) => {
  -      filenames.push(diff.filename);
  -    });
  -    // ensure filenames appear in the same order as kata/edit page
  -    const sorted = cd.sortedFilenames(filenames);
  -    const diffFor = (filename) => {
  -      for (let i = 0; i !== diffs.length; i++) {
  -        if (diffs[i].filename === filename) {
  -          return diffs[i];
  -        }
  -      }
  -    };
  -    let result = [];
  -    $.each(sorted, (_, filename) => {
  -      result.push(diffFor(filename));
  -    });
  -    return result;
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const resetFilenameAddedDeletedLineCountHandlers = () => {
  -
  -    const display = (node, name, value) => {
  -      // only [+][-] counts for current filename are live
  -      if ($(node).attr('disabled') !== 'disabled') {
  -        const filename = $(node).data('filename');
  -        const selector = `[id="${filename}_diff_div"] ${name}`;
  -        $(selector).css('display', value);
  -        if (value === 'none') {
  -          $(node).removeClass('on');
  -          $(node).addClass('off');
  -        } else {
  -          $(node).removeClass('off');
  -          $(node).addClass('on');
  -        }
  -      }
  -    };
  -
  -    $('.diff-deleted-line-count')
  -      .clickToggle(
  -        function() { display(this, 'deleted', 'none' ); },
  -        function() { display(this, 'deleted', 'block'); }
  -      );
  -
  -    $('.diff-added-line-count')
  -      .clickToggle(
  -        function() { display(this, 'added', 'none' ); },
  -        function() { display(this, 'added', 'block'); }
  -      );
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const buildDiffFilenameHandlers = (diffs) => {
  -    // Builds click handlers for all filenames for a given
  -    // [ kata-id, was-index, now-index] tuple.
  -    // When you open a new filename it auto-scrolls its first diff-chunk.
  -    // When you reclick a filename it auto-scrolls to its *next* diff-chunk.
  -    const getFilename = (node) => $.trim(node.text());
  -    const id = (name) => $(`[id="${name}"]`);
  -    const diffFileContentFor = (filename) => id(`diff_file_content_for_${filename}`);
  -    const diffFileDiv = (filename) => id(`${filename}_diff_div`);
  -
  -    let previousFilenameNode;
  -    let alreadyOpened = [];
  -
  -    const loadFrom = (diff) => {
  -      const id = diff.id;
  -      const filenameNode = $(`#radio_${id}`);
  -      const filename = getFilename(filenameNode);
  -      const sectionCount = diff.section_count;
  -      const diffSheet = diffFileContentFor(filename);
  -      let sectionIndex = 0;
  -
  -      if (sectionCount > 0) {
  -        filenameNode.attr('title', 'Auto-scroll through diffs');
  -      }
  -
  -      return () => {
  -
  -        const reselected =
  -          previousFilenameNode !== undefined &&
  -            getFilename(previousFilenameNode) === filename;
  -
  -        $('.diff-deleted-line-count, .diff-added-line-count').attr('disabled', true);
  -        $(`.diff-deleted-line-count[data-filename="${filename}"]`).attr('disabled', false);
  -        $(`.diff-added-line-count[data-filename="${filename}"]`).attr('disabled', false);
  -
  -        cd.radioEntrySwitch(previousFilenameNode, filenameNode);
  -
  -        if (previousFilenameNode !== undefined) {
  -          diffFileDiv(getFilename(previousFilenameNode)).hide();
  -        }
  -        diffFileDiv(getFilename(filenameNode)).show();
  -        previousFilenameNode = filenameNode;
  -        param.filename = filename;
  -
  -        if (sectionCount > 0 && (reselected || !cd.inArray(filename, alreadyOpened))) {
  -          const section = $(`#${id}_section_${sectionIndex}`);
  -          const downFromTop = 250;
  -          const halfSecond = 500;
  -          diffSheet.animate({
  -            scrollTop: '+=' + (section.offset().top - downFromTop) + 'px'
  -          }, halfSecond);
  -          sectionIndex += 1;
  -          sectionIndex %= sectionCount;
  -        }
  -        alreadyOpened.push(filename);
  -      };
  -    }; // loadFrom()
  -
  -    $.each(diffs, (_n, diff) => {
  -      const filename = $(`#radio_${diff.id}`);
  -      filename.click(loadFrom(diff));
  -    });
  -  }; // buildDiffFilenameHandlers()
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const makeDiffContent = (diffs) => {
  -    const holder = $('<span>');
  -    $.each(diffs, (_, diff) => {
  -      const table = $('' +
  -        `<div id="${diff.filename}_diff_div" class="filename_div">` +
  -        '<table>' +
  -          '<tr class="valign-top">' +
  -            makeTd('<div class="diff-line-numbers"></div>') +
  -            makeTd(`<div id="diff_file_content_for_${diff.filename}"` +
  -                   ' class="diff-sheet"></div>') +
  -          '</tr>' +
  -        '</table>' +
  -        '</div>'
  -        );
  -      const content = $('.diff-sheet', table);
  -      const numbers = $('.diff-line-numbers', table);
  -      content.html(diff.content);
  -      numbers.html(diff.line_numbers);
  -      bindLineNumberScrolling(content, numbers);
  -      holder.append(table);
  -    });
  -    return holder;
  -  };
  -
  -  // - - - - - - - - - - - - - - - - - - - - - - - -
  -
  -  const bindLineNumberScrolling = ($content, $numbers) => {
  -    const synchScroll = () => {
  -      $numbers.scrollTop($content.scrollTop());
  -    };
  -    $content.bind({
  -      keydown   : synchScroll,
  -      scroll    : synchScroll,
  -      mousewheel: synchScroll,
  -      mousemove : synchScroll,
  -      mousedown : synchScroll,
  -      mouseup   : synchScroll
  -    });
     };
   
     // - - - - - - - - - - - - - - - - - - - - - - - -
  
positive.code: 
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const show = (index) => {
      param.nowIndex = index;
      if (inDiffMode()) {
        param.wasIndex = (prevEventIndex(param.nowIndex) || 0);
  
negative.code:   };
  
    //-----------------------------------------
    // refresh diff? [x]
    //-----------------------------------------
  
    const refreshDiffCheckBox = () => {
      diffCheckBox()
        .attr('checked', param.wasIndex !== param.nowIndex)
        .unbind('click')
        .bind('click', () => moveToTrafficLight(param.nowIndex));
    };
  
    const diffCheckBox = () => $('#diff-checkbox');
  
    const inDiffMode = () => diffCheckBox().is(':checked');
  
    $('#diff-checkbox-title').click(() => {
      diffCheckBox().attr('checked', !diffCheckBox().is(':checked'));
      moveToTrafficLight(param.nowIndex);
    });
  
    //-----------------------------------------
    // refresh avatar navigator
    //    [<]avatar[>]
    //-----------------------------------------
  
    const refreshAvatarNavigator = () => {
      if (param.avatarName === '') {
        $('#avatar-navigator').hide();
      } else {
        refreshAvatar($('#prev-avatar'), param.prevAvatarId);
        $('#review-avatar-image-box').html(makeAvatarImageHtml());
        refreshAvatar($('#next-avatar'), param.nextAvatarId);
      }
    };
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const makeAvatarImageHtml = () => {
      return `<img class="avatar-image" src="/avatar/image/${param.avatarIndex}"/>`;
    };
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const refreshAvatar = (button, id) => {
      const on = (id !== '');
      button
        .attr('disabled', !on)
        .unbind('click')
        .bind('click', () => moveToAvatar(id));
    };
  
    //-----------------------------------------
    // refresh traffic-light navigator
    //    [<]index[>] traffic-lights...
    //-----------------------------------------
  
    const refreshIndexNavigator = () => {
      refreshIndex($('#prev-index'), prevEventIndex(param.nowIndex));
      $('#review-index-box').html(makeIndexHtml());
      refreshIndex($('#next-index'), nextEventIndex(param.nowIndex));
    };
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const makeIndexHtml = () => {
      const index = param.nowIndex;
      const colour = param.events[index].colour;
      return `<div id="index-number" class="${colour}">${index}</div>`;
    };
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const refreshIndex = (button, index) => {
      const on = (index !== null);
      button
        .attr('disabled', !on)
        .unbind('click')
        .bind('click', () => moveToTrafficLight(index));
    };
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const prevEventIndex = (n) => {
      // index==0 is the kata creation event
      const firstIndex = 1;
      if (n === null || n === firstIndex) {
        return null; // signals disabled-button in refreshIndex()
      } else {
        return n - 1; // Note: assumes only test events
      }
    };
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const nextEventIndex = (n) => {
      const lastIndex = param.events.length - 1;
      if (n === null || n === lastIndex) {
        return null; // signals disabled-button in refreshIndex()
      } else {
        return n + 1; // Note: assumes only test events
      }
    };
  
    //-----------------------------------------
    // refresh traffic-lights
    //-----------------------------------------
  
    const refreshTrafficLights = () => {
      const trafficLights = $('#review-traffic-lights');
      trafficLights.html(makeTrafficLightsHtml());
      $.each($('.diff-traffic-light', trafficLights), (_, light) => {
        const $light = $(light);
        const nowIndex = $light.data('index');
        $light.click(() => moveToTrafficLight(nowIndex));
        // Show full tool-tip even if diff[x] is off
        // otherwise you end up with odd tool-tip such as
        //    (RED) 12 -> (RED) 12
        const wasIndex = prevEventIndex(nowIndex);
        cd.setupTrafficLightTip($light, param.version, param.id, param.avatarIndex, wasIndex, nowIndex);
      });
    };
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const makeTrafficLightsHtml = () => {
      let html = '';
      let wasIndex = 0;
      $.each(param.events, (_n, event) => {
        const colour = event.colour;
        if (colour !== '') {
          const nowIndex = event.index;
          const barOrGap = (param.nowIndex === nowIndex) ? 'bar' : 'gap';
          html += makeTrafficLightHtml(colour, wasIndex, nowIndex, barOrGap);
          wasIndex = nowIndex;
        }
      });
      return html;
    };
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const makeTrafficLightHtml = (colour, wasIndex, nowIndex, barOrGap) => {
      return [
        "<div class='diff-traffic-light'",
          ` data-id='${param.id}'`,
          ` data-colour='${colour}'`,
          ` data-index='${nowIndex}'>`,
          `<img class='with-bar-gap' src='/traffic-light/image/${colour}_${barOrGap}.png'/>`,
        '</div>'
      ].join('');
    };
  
    //-----------------------------------------
    // refresh files
    //-----------------------------------------
  
    const refreshFiles = () => {
      const diffContent = $('#diff-content');
      const diffFilenames = $('#diff-filenames');
      diffFilenames.html(makeDiffFilenames(param.diffs));
      resetFilenameAddedDeletedLineCountHandlers();
      diffContent.html(makeDiffContent(param.diffs));
      buildDiffFilenameHandlers(param.idsAndSectionCounts);
      showFile(param.currentFilenameId);
    };
  
    const showFile = (filenameId) => {
      const filename =  $(`#radio_${filenameId}`);
      filename.click()
              .scrollIntoView({ direction: 'vertical' });
    };
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const makeDiffFilenames = (diffs) => {
      let html = '';
      $.each(sortedDiffs(diffs), (_, diff) => {
        html += '<div class="diff-filename-box">';
        html += makeDiffDeletedCount(diff);
        html += makeDiffAddedCount(diff);
        html += makeDiffFilename(diff);
        html += '</div>';
      });
      return html;
    };
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const makeDiffFilename = (diff) => {
      return outerHTML($('<div>', {
        'class': 'filename',
        'data-filename': diff.filename,
        'id': `radio_${diff.id}`,
        'text': diff.filename
      }));
    };
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const makeDiffDeletedCount = (diff) => {
      return makeDiffCount(diff, 'deleted_line_count', 'deleted');
    };
  
    const makeDiffAddedCount = (diff) => {
      return makeDiffCount(diff, 'added_line_count', 'added');
    };
  
    const makeDiffCount = (diff, propertyName, cssName) => {
      let html = '';
      if (!diffCheckBox().is(':checked')) {
        return html;
      }
      const div = $('<div>', {
        'class': `diff-${cssName}-line-count button`,
        'data-filename': diff.filename
      });
      const count = diff[propertyName];
      if (count !== 0) {
        div.append(count);
      }
      return outerHTML(div);
    };
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const outerHTML = (element) => {
      return element.get(0).outerHTML;
    };
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const sortedDiffs = (diffs) => {
      let filenames = [];
      $.each(diffs, (_, diff) => {
        filenames.push(diff.filename);
      });
      // ensure filenames appear in the same order as kata/edit page
      const sorted = cd.sortedFilenames(filenames);
      const diffFor = (filename) => {
        for (let i = 0; i !== diffs.length; i++) {
          if (diffs[i].filename === filename) {
            return diffs[i];
          }
        }
      };
      let result = [];
      $.each(sorted, (_, filename) => {
        result.push(diffFor(filename));
      });
      return result;
    };
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const resetFilenameAddedDeletedLineCountHandlers = () => {
  
      const display = (node, name, value) => {
        // only [+][-] counts for current filename are live
        if ($(node).attr('disabled') !== 'disabled') {
          const filename = $(node).data('filename');
          const selector = `[id="${filename}_diff_div"] ${name}`;
          $(selector).css('display', value);
          if (value === 'none') {
            $(node).removeClass('on');
            $(node).addClass('off');
          } else {
            $(node).removeClass('off');
            $(node).addClass('on');
          }
        }
      };
  
      $('.diff-deleted-line-count')
        .clickToggle(
          function() { display(this, 'deleted', 'none' ); },
          function() { display(this, 'deleted', 'block'); }
        );
  
      $('.diff-added-line-count')
        .clickToggle(
          function() { display(this, 'added', 'none' ); },
          function() { display(this, 'added', 'block'); }
        );
    };
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const buildDiffFilenameHandlers = (diffs) => {
      // Builds click handlers for all filenames for a given
      // [ kata-id, was-index, now-index] tuple.
      // When you open a new filename it auto-scrolls its first diff-chunk.
      // When you reclick a filename it auto-scrolls to its *next* diff-chunk.
      const getFilename = (node) => $.trim(node.text());
      const id = (name) => $(`[id="${name}"]`);
      const diffFileContentFor = (filename) => id(`diff_file_content_for_${filename}`);
      const diffFileDiv = (filename) => id(`${filename}_diff_div`);
  
      let previousFilenameNode;
      let alreadyOpened = [];
  
      const loadFrom = (diff) => {
        const id = diff.id;
        const filenameNode = $(`#radio_${id}`);
        const filename = getFilename(filenameNode);
        const sectionCount = diff.section_count;
        const diffSheet = diffFileContentFor(filename);
        let sectionIndex = 0;
  
        if (sectionCount > 0) {
          filenameNode.attr('title', 'Auto-scroll through diffs');
        }
  
        return () => {
  
          const reselected =
            previousFilenameNode !== undefined &&
              getFilename(previousFilenameNode) === filename;
  
          $('.diff-deleted-line-count, .diff-added-line-count').attr('disabled', true);
          $(`.diff-deleted-line-count[data-filename="${filename}"]`).attr('disabled', false);
          $(`.diff-added-line-count[data-filename="${filename}"]`).attr('disabled', false);
  
          cd.radioEntrySwitch(previousFilenameNode, filenameNode);
  
          if (previousFilenameNode !== undefined) {
            diffFileDiv(getFilename(previousFilenameNode)).hide();
          }
          diffFileDiv(getFilename(filenameNode)).show();
          previousFilenameNode = filenameNode;
          param.filename = filename;
  
          if (sectionCount > 0 && (reselected || !cd.inArray(filename, alreadyOpened))) {
            const section = $(`#${id}_section_${sectionIndex}`);
            const downFromTop = 250;
            const halfSecond = 500;
            diffSheet.animate({
              scrollTop: '+=' + (section.offset().top - downFromTop) + 'px'
            }, halfSecond);
            sectionIndex += 1;
            sectionIndex %= sectionCount;
          }
          alreadyOpened.push(filename);
        };
      }; // loadFrom()
  
      $.each(diffs, (_n, diff) => {
        const filename = $(`#radio_${diff.id}`);
        filename.click(loadFrom(diff));
      });
    }; // buildDiffFilenameHandlers()
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const makeDiffContent = (diffs) => {
      const holder = $('<span>');
      $.each(diffs, (_, diff) => {
        const table = $('' +
          `<div id="${diff.filename}_diff_div" class="filename_div">` +
          '<table>' +
            '<tr class="valign-top">' +
              makeTd('<div class="diff-line-numbers"></div>') +
              makeTd(`<div id="diff_file_content_for_${diff.filename}"` +
                     ' class="diff-sheet"></div>') +
            '</tr>' +
          '</table>' +
          '</div>'
          );
        const content = $('.diff-sheet', table);
        const numbers = $('.diff-line-numbers', table);
        content.html(diff.content);
        numbers.html(diff.line_numbers);
        bindLineNumberScrolling(content, numbers);
        holder.append(table);
      });
      return holder;
    };
  
    // - - - - - - - - - - - - - - - - - - - - - - - -
  
    const bindLineNumberScrolling = ($content, $numbers) => {
      const synchScroll = () => {
        $numbers.scrollTop($content.scrollTop());
      };
      $content.bind({
        keydown   : synchScroll,
        scroll    : synchScroll,
        mousewheel: synchScroll,
        mousemove : synchScroll,
        mousedown : synchScroll,
        mouseup   : synchScroll
      });
    };
  
    //-----------------------------------------
    // refresh [fork]
    //-----------------------------------------
  
  