var totalFrames = window.cpAPIInterface.getDurationInFrames();
var pauseFrame;
window.cpAPIEventEmitter.addEventListener("CPAPI_TIME_UPDATE", function(evt) {
  if (evt.cpData.frame === pauseFrame) {
    cpCmndPause = 0;
    pauseFrame = null;
    return;
  }
  var courseProgress = (evt.cpData.frame / totalFrames) * 100;
  $("[id^=progress_bar]").width(courseProgress + "%");
  $("[id^=progress_bar]").css("visibility", "visible");
});
window.cpAPIEventEmitter.addEventListener("CPAPI_SLIDEENTER", function(cpEvt) {
  pauseFrame =
    cpEvt.cpData.to === totalFrames ? totalFrames : cpEvt.cpData.to - 1;
  $("[id^=progress_clickarea]").click(function(evt) {
    var barPercent = evt.offsetX / $(this).width();
    cpCmndGotoFrameAndResume = Math.floor(totalFrames * barPercent);
  });
});