1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74
75. 75
76. 76
77. 77
78. 78
79. 79
80. 80
81. 81
82. 82
83. 83
84. 84
85. 85

if (document.querySelector('.instruction-wrapper')) {
  if (!window.requestAnimationFrame) {

    window.requestAnimationFrame = (function() {

      return window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame

    })();
  }

  var animator = {
    stageArray: [
      [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
      [14, 15, 16, 17, 18, 19, 20, 21, 22, 23]
    ],
    // min:16,max:25,
    element: document.querySelector('.instruction-wrapper'),
    originalClassName: 'instruction-wrapper',
    currentStage: 1,
    currentStep: 0,
    oldTime: new Date().getTime(),
    timeStep: 1200,
    addStateClass: 'state-', //+stateRange.currentStep
    chaning: true,
    repeat: true,
    debug: true,
    autoplay: true,
    animate: function() {
      requestAnimationFrame(animator.animate);
      if (animator.autoplay) {
        animator.draw();
      }
    },
    classCheckUpdate: function(arg1) {
      this.element.className = this.originalClassName;
      for (var i = 0; i <= arg1; i++) {
        this.element.classList.add(this.addStateClass + '' + i);
      }
    },
    draw: function(arg) {

      var time = new Date().getTime();
      // console.log(time - oldTime);
      if (time > this.oldTime + this.timeStep) {


        if (this.debug) {
          console.log(this.currentStep)
        };
        this.oldTime = time;

        if (!arg && !!this.stageArray[this.currentStage][this.currentStep + 1]) {
          console.log('instr-' + 1 + '_' + this.stageArray[this.currentStage][this.currentStep + 1]);
          this.currentStep += 1;
          this.classCheckUpdate(this.stageArray[this.currentStage][this.currentStep])
            // this.element.classList.add(this.addStateClass + '' + this.stageArray[this.currentStage][this.currentStep]);
        } else if (!arg && !this.stageArray[this.currentStage][this.currentStep + 1] && !!this.repeat) {
          this.currentStep = 0;
          console.log('instr-' + 2);
          this.classCheckUpdate(this.stageArray[this.currentStage][this.currentStep])
            // this.element.className = this.originalClassName;
            // this.element.classList.add(this.addStateClass + '' + this.stageArray[this.currentStage][this.currentStep]);
        } else if (!this.stageArray[this.currentStage][this.currentStep + 1] &&
          !this.repeat &&
          this.stageArray[this.currentStage + 1]) {
          this.currentStage += 1;
          console.log('instr-' + 3);
          this.currentStep = this.stageArray[this.currentStage + 1][0];
        } else if (arg > 1) {
          console.log('instr-' + 4);
          this.element.className = this.originalClassName;
          for (var i = 0; i <= arg; i++) {
            this.element.classList.add(this.addStateClass + '' + i);
            this.element.classList.add(this.addStateClass + '' + this.stageArray[this.currentStage][this.currentStep]);
          }
        }
      }
    }

  }
  animator.animate();
}