Popcorn.js setting multiple cue()

Question

When I run the following, I immediately see "Five" in the area I've designated for overlaying text. (I expected to see "One" for a while, then "Two", etc.) What am I missing?

document.addEventListener("DOMContentLoaded", function () {
  putHere = document.getElementById("putHere");
  pop = Popcorn("#side1");   // Create a popcorn instance

  var states = function() {
    var rdy = pop.readyState();
    if (rdy !== 4) setTimeout(states, 10);
    else {
      pop.cue( 12, layover("One"));
      pop.cue(168, layover("Two"));
      pop.cue(336, layover("Three"));
      pop.cue(506, layover("Four"));
      pop.cue(703, layover("Five"));
    }
  }
  states();
}, false);

Answer 1

Seeking help on IRC, the suggestion to change the pop.cue lines to:

pop.cue( 12, function() {layover("One");   });
pop.cue(168, function() {layover("Two");   });
pop.cue(336, function() {layover("Three"); });
pop.cue(506, function() {layover("Four");  });
pop.cue(703, function() {layover("Five");  });

worked.

(Now to see why they work in Chrome but not Firefox...)