/**
 * Play the timeline.
 */
function play(button) {function play(button) {
  button.title = 'pause';.title = 'pause';
  button.className = 'fa fa-pause';.className = 'fa fa-pause';
  chart.sequenceTimer = setInterval(function() {.sequenceTimer = setInterval(function() {
    update(1);(1);
  }, 500);}, 500);
}}

/** /** 
 * Pause the timeline, either when the range is ended, or when clicking the pause button.
 * Pausing stops the timer and resets the button to play mode.
 */
function pause(button) {function pause(button) {
  button.title = 'play';.title = 'play';
  button.className = 'fa fa-play';.className = 'fa fa-play';
  clearTimeout(chart.sequenceTimer);(chart.sequenceTimer);
  chart.sequenceTimer = undefined;.sequenceTimer = undefined;
}}

btn.addEventListener('click', function() {.addEventListener('click', function() {
  if (chart.sequenceTimer) {if (chart.sequenceTimer) {
    pause(this)(this)
  } else {} else {
    play(this)(this)
  }}
})})

/** /** 
 * Trigger the update on the range bar click.
 */
input.addEventListener('click', function() {.addEventListener('click', function() {
  update()()
})})

/**
 * Animate dataLabels functionality
 */
(function(H) {(function(H) {
  const FLOAT = /^-?\d+\.?\d*$/;const FLOAT = /^-?\d+\.?\d*$/;
  // Add animated textSetter, just like fill/strokeSetters// Add animated textSetter, just like fill/strokeSetters
  H.Fx.prototype.textSetter = function(proceed) {.Fx.prototype.textSetter = function(proceed) {
    var startValue = this.start.replace(/ /g, ''),var startValue = this.start.replace(/ /g, ''),
      endValue = this.end.replace(/ /g, ''),= this.end.replace(/ /g, ''),
      currentValue = this.end.replace(/ /g, '');= this.end.replace(/ /g, '');
    if ((startValue || '').match(FLOAT)) {if ((startValue || '').match(FLOAT)) {
      startValue = parseInt(startValue, 10);= parseInt(startValue, 10);
      endValue = parseInt(endValue, 10);

      // No support for float
      currentValue = Highcharts.numberFormat(
        Math.round(startValue + (endValue - startValue) * this.pos), 0);
    }
    this.elem.endText = this.end;
    this.elem.attr(
      this.prop,
      currentValue,
      null,
      true
    );
  };

  // Add textGetter, not supported at all at this moment:
  H.SVGElement.prototype.textGetter = function(hash, elem) {
    var ct = this.text.element.textContent || '';
    return this.endText ? this.endText : ct.substring(0, ct.length / 2);
  }

  // Temporary change label.attr() with label.animate():
  // In core it's simple change attr(...) => animate(...) for text prop
  H.wrap(H.Series.prototype, 'drawDataLabels', function(proceed) {
    var ret,
      attr = H.SVGElement.prototype.attr,
      chart = this.chart;

    if (chart.sequenceTimer) {
      this.points.forEach(
        point => (point.dataLabels || []).forEach(
          label => label.attr = function(hash, val) {
            if (hash && hash.text !== undefined) {
              var text = hash.text;
              delete hash.text;
              this.attr(hash);
              this.animate({
                text: text
              });
              return this;
            } else {
              return attr.apply(this, arguments);
            }
          }
        )
      );
    }
    ret = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    this.points.forEach(
      p => (p.dataLabels || []).forEach(d => d.attr = attr)
    );
    return ret;
  });
})(Highcharts);