index.js

var App = function() {
  var musicLoopFlag = 0,
      delay = null,
      frameNumber = 0,
      afterFirstLoop = 0,
      self = this;
  
  this.setup = function() {
    var assetCount = 59;           // One for each image in the animation, plus one for the intro and one
                                   //   for the loop of the song
    var onAssetLoaded = function() // This function is called every time an image or audio resource's onload
    {                              //   event occurs
      assetCount--;
      if (!assetCount)
      {
        self.displayCurrentFrame();     // When assetCount hits zero, i.e. when everything is loaded, the
      }                            //   animation begins
    }

    for(var i = 0; i <= 56; i++)   // Creates 57 new Image objects for the purpose of pre-loading their srcs
    {
      var imageTemp = new Image();
      if(i < 10)
      {
        imageTemp.src = "resources/animation/0" + i + ".png";
      } else
      {
        imageTemp.src = "resources/animation/"  + i + ".png";
      }
      imageTemp.onload = onAssetLoaded;
    }
    
    var introAudio = new Audio();
    introAudio.addEventListener("canplaythrough", onAssetLoaded, true);
    introAudio.addEventListener("ended", function() { self.audioEnded(); }, true);

    var loopAudio = new Audio();
    loopAudio.addEventListener("canplaythrough", onAssetLoaded, true);
  };
  
  this.displayCurrentFrame = function() {
    document.getElementById("imageSrcDebug").innerHTML = "animation.src = " + // Just a couple quick debugs
      document.getElementById("animation").src;
    document.getElementById("frameNumberDebug").innerHTML = "frameNumber = " + frameNumber;

    if(frameNumber ==  4 || frameNumber ==  8 || frameNumber == 12)
    {                             // Certain frames have strategically-timed delays. Others are simply
      delay = 4000;       //   animation transitions and so have only a brief 0.1 second delay
    } else
    if(frameNumber == 27 || frameNumber == 40 || frameNumber == 53)
    {
      delay = 6000;
    } else
    if(frameNumber == 13)
    {
      delay = 15000;
    } else
    if(frameNumber ==  0 || frameNumber == 17 || frameNumber == 18 ||
       frameNumber == 31 || frameNumber == 44)
    {
      delay = 2000;
    } else
    if(frameNumber == 22 || frameNumber == 23 || frameNumber == 24 ||
       frameNumber == 25 || frameNumber == 26 || frameNumber == 35 ||
       frameNumber == 36 || frameNumber == 37 || frameNumber == 38 ||
       frameNumber == 39 || frameNumber == 48 || frameNumber == 49 ||
       frameNumber == 50 || frameNumber == 51 || frameNumber == 52)
    {
      delay = 1000;
    } else
    {
      delay = 100;
    }

    if(frameNumber ==  9 && !afterFirstLoop)                        // titlethemeintro.mp3
    {                                                                               //   begins on the ninth
      document.getElementById("music").src = "resources/audio/titlethemeintro.mp3"; //   frame of the
      afterFirstLoop = true;                                                //   animation, but only
    }                                                                               //   the first time
                                                                                    //   through
    var timer = window.setTimeout(function() { self.displayCurrentFrame(); }, delay);   // Here's where the delay
                                                                             //   actually occurs
    if(frameNumber < 10)  // The newly-incremented frame number becomes the filename of
    {                             // the src for the next frame (with a leading 0 if less than 10)
      document.getElementById("animation").src = "resources/animation/0" + frameNumber + ".png";
    } else
    {
      document.getElementById("animation").src = "resources/animation/"  + frameNumber + ".png";
    }

    if(frameNumber != 56)  // If the animation isn't on the last frame, then it increments.
    {
      frameNumber++;
    } else                         // Otherwise, it loops back to frame eight.
    {
      frameNumber = 8;
    }    
  };
  
  this.audioEnded = function() {
    if(!musicLoopFlag)     // If the audio that just ended is not the loop, i.e. it's
    {                              // the intro, then the loop's URL becomes the new src
      document.getElementById("music").src  = "resources/audio/titlethemeloop.mp3";
      document.getElementById("music").loop = "true";
      musicLoopFlag = 1;
    }
  }
  
  this.setup();
};

window.onload = function() {
  var app = new App();
}