// Sketchfab Viewer API: Start/Stop/Control Animation
var version = '1.12.1';
var uid = '510d109ccce34292b1c590fad0af5fc1';
var iframe = document.getElementById('api-frame');
var client = new window.Sketchfab(version, iframe);
var error = function error() {
  console.error('Sketchfab API error');
};
var _pollTime, duration;
var timeSlider;
var isSeeking;
var animationsList;
var current_anim;
var apiSkfb;
_pollTime = function pollTime() {
  apiSkfb.getCurrentTime(function (err, time) {
    if (!isSeeking) {
      var percentage = 100 * time / duration;
      timeSlider.value = percentage;
    }
    requestAnimationFrame(_pollTime);
  });
};
var pingpong = false;
var timeFactor = 1.0;
var success = function success(api) {
  apiSkfb = api;
  api.start(function () {
    api.addEventListener('viewerready', function () {
      ////////////////////////////////////////////
      // ANIMATION: WAIT FOR LOADING ////////////
      //////////////////////////////////////////
      api.getAnimations(function (err, animations) {
        console.log(animations);
        animationsList = animations;
        if (animations.length > 0) {
          current_anim = 0;
          api.setCurrentAnimationByUID(animations[current_anim][0]);
          duration = animations[current_anim][2];
          isSeeking = false;
          timeSlider = document.getElementById('timeSlider');
          _pollTime();
          timeSlider.addEventListener('change', function () {
            isSeeking = false;
            api.play();
          });
          timeSlider.addEventListener('input', function () {
            isSeeking = true;
            var time = duration * timeSlider.value / 100;
            api.pause();
            api.seekTo(time, function () {
              api.play();
            });
          });
        }
      });
      document.getElementById('play').addEventListener('click', function () {
        api.play();
      });
      document.getElementById('pingpong').addEventListener('click', function () {
        pingpong = !pingpong;
      });
      document.getElementById('pause').addEventListener('click', function () {
        api.pause();
      });
      document.getElementById('previous').addEventListener('click', function () {
        if (current_anim === 0) current_anim = animationsList.length;
        current_anim--;
        api.setCurrentAnimationByUID(animationsList[current_anim][0]);
        api.seekTo(0);
        duration = animationsList[current_anim][2];
        console.log(duration);
      });
      document.getElementById('next').addEventListener('click', function () {
        current_anim++;
        if (current_anim === animationsList.length) current_anim = 0;
        api.setCurrentAnimationByUID(animationsList[current_anim][0]);
        api.seekTo(0);
        duration = animationsList[current_anim][2];
        console.log(duration);
      });
      api.addEventListener('animationChange', function (a) {
        current_anim = 0;
        for (var i = 0; i < animationsList.length; i++) {
          if (animationsList[i][0] === a) {
            duration = animationsList[i][2];
            current_anim = i;
            break;
          }
        }
        console.log('animationChange', a);
      });
      api.addEventListener('animationEnded', function () {
        if (pingpong) timeFactor *= -1;
        api.setSpeed(timeFactor);
        console.log('animationEnded', timeFactor);
      });
      api.addEventListener('animationPlay', function () {
        console.log('animationPlay');
      });
      api.addEventListener('animationStop', function () {
        console.log('animationStop');
      });

      //api.setCycleMode('all');

      ////////////////
      // ANIMATION END
      ////////////////
    });
  });
};
//////////////////////////////////
// GUI Code
//////////////////////////////////
function initGui() {
  var controls = document.getElementById('controls');
  var buttonsText = "\n    <button id=\"play\">Play</button>\n    <button id=\"pause\">Pause</button>\n    <button id=\"previous\">Previous</button>\n    <button id=\"next\">Next</button>\n    <button id=\"pingpong\">Forward then reverse at End</button>\n    <input id=\"timeSlider\" class=\"slider timeSlider\" style=\"width:100%\" type=\"range\" min=\"0\" max=\"100\" step=\"0.1\" value=\"0\">\n";
  controls.innerHTML = buttonsText;
}
initGui();

//////////////////////////////////
// GUI Code end
//////////////////////////////////
client.init(uid, {
  success: success,
  error: error,
  autostart: 1,
  preload: 1
});