Javascript (tokbox) only appears below footer?

The issue I am having is that my javascript for tokbox which enables a live video stream only displays below the footer/wrapper regardless of where I place it in the php code.

Are there any solutions to this? I’ve used firebug to try and CSS it back into place with no luck.

The code I am embedding is:

<div id=“JS-Container”>
<script type="text/javascript">
  var apiKey    = "X";
  var sessionId = "Y";
  var token     = "Z";

  function sessionConnectedHandler (event) {
     session.publish( publisher );
     subscribeToStreams(event.streams);
  }
  function subscribeToStreams(streams) {
    for (var i = 0; i < streams.length; i++) {
        var stream = streams[i];
        if (stream.connection.connectionId
               != session.connection.connectionId) {
            session.subscribe(stream);
        }
    }
  }
  function streamCreatedHandler(event) {
    subscribeToStreams(event.streams);
  }

  var publisher = TB.initPublisher(apiKey);
  var session   = TB.initSession(sessionId);

  session.connect(apiKey, token);
  session.addEventListener("sessionConnected",
                           sessionConnectedHandler);

  session.addEventListener("streamCreated",
                           streamCreatedHandler);
</script>
</div>

It works fine where it is, but it looks really bad. See the test page at https://test.yourclass.net/classroom