index.js

var WrApp = function()
{

var delay = null,
  musicLoopFlag = 0,
  frameNumber = 0,
  afterFirstLoop = 0,
//  introAudio = null,
//  loopAudio = null,
  self = this;

//window.onload = setup;

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
    console.log("asset loaded", this, assetCount);
    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.addEventListener("load", onAssetLoaded, true);
  }

  var introAudio = new Audio();
  introAudio.src = "resources/audio/titlethemeintro.mp3";
  introAudio.addEventListener("canplaythrough", onAssetLoaded, true);
//  introAudio.addEventListener("ended", function() { self.audioEnded() }, true);
  
  var loopAudio  = new Audio();
  loopAudio.src = "resources/audio/titlethemeloop.mp3";
  loopAudio.addEventListener("canplaythrough", onAssetLoaded, true);
  
/*  for(var i = 0; i <= 1; i++)       // Creates two new Audio objects for the purpose of pre-loading their
  {                                   //   srcs
    var audioTemp = new Audio();
    audioTemp.addEventListener("canplaythrough", onAssetLoaded, true);  // Attaches an event listener
    if(!i)
    {
      audioTemp.src = "resources/audio/titlethemeintro.mp3";
    } else
    {
      audioTemp.src = "resources/audio/titlethemeloop.mp3";
    }
    audioTemp.onload = "onAssetLoaded";
    console.log("loading audio " + i);
  }*/
}

this.displayCurrentFrame = function()
{  
/*  document.getElementById("imageSrcDebug").innerHTML = "animation.src = " + // Just a few quick debugs
    document.getElementById("animation").src;
  document.getElementById("frameNumberDebug").innerHTML = "frameNumber = " + frameNumber;
  document.getElementById("audioSrc1Debug").innerHTML = "musicIntro.src = " +
    document.getElementById("musicIntro").src;
  document.getElementById("audioSrc2Debug").innerHTML = "musicLoop1.src = " +
    document.getElementById("musicLoop1").src;
  document.getElementById("audioSrc3Debug").innerHTML = "musicLoop2.src = " +
    document.getElementById("musicLoop2").src;
*/  
  var introEnded = 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.currentTime = 0;
    this.pause();
    document.getElementById("musicLoop1").play();
  }

  var loop1Ended = function()
  {
    this.currentTime = 0;
    this.pause();
    document.getElementById("musicLoop2").play();
  }

  var loop2Ended = function()
  {
    this.currentTime = 0;
    this.pause();
    document.getElementById("musicLoop1").play();
  }

  document.getElementById("musicIntro").addEventListener("ended", introEnded, true);
  document.getElementById("musicLoop1").addEventListener("ended", loop1Ended, true);
  document.getElementById("musicLoop2").addEventListener("ended", loop2Ended, true);
  
  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 frame of
    document.getElementById("musicIntro").play();  //   the animation, but only
    afterFirstLoop = true;                         //   on the first time
  }                                                //   through

  var timer = window.setTimeout(function() { self.displayCurrentFrame(); }, delay);  // Here's where the delay
                                                                                     //   actually begins
  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.setup();

}

window.onload = function() {
  var wrapp = new WrApp();
}