Make JX.Aphlict a real singleton with a more sensible initialization order

Summary:
Ref T5373. The control flow between `aphlict-listener` and `JX.Aphlict` is pretty weird right now, where the listener (which is the highest-level component) has intimate knowledge of how to put the SWF on the page.

Instead:

  - Make `JX.Aphlict` a real singleton.
  - Instantiate it sooner.
  - Have it handle the flash setup handshake.

Test Plan: Loaded page in debug mode, saw normal flow take place.

Reviewers: joshuaspence

Reviewed By: joshuaspence

Subscribers: epriestley

Maniphest Tasks: T5373

Differential Revision: https://secure.phabricator.com/D9699

webroot/rsrc/js/application/aphlict/Aphlict.js

@@ -25,51 +25,87 @@
  */
 JX.install('Aphlict', {
 
-  construct : function(id, server, port, subscriptions) {
+  construct: function(id, server, port, subscriptions) {
     if (__DEV__) {
       if (JX.Aphlict._instance) {
-        JX.$E('Aphlict object is sort of a singleton..!');
+        JX.$E('Aphlict object is a singleton!');
       }
     }
 
-    JX.Aphlict._instance = this;
-
+    this._id = id;
     this._server = server;
     this._port = port;
     this._subscriptions = subscriptions;
 
-    // Flash puts its "objects" into global scope in an inconsistent way,
-    // because it was written in like 1816 when globals were awesome and IE4
-    // didn't support other scopes since global scope is the best anyway.
-    var container = document[id] || window[id];
-
-    this._flashContainer = container;
+    JX.Aphlict._instance = this;
   },
 
-  members : {
-    _server : null,
-    _port : null,
-    _subscriptions : null,
-    start : function() {
+  members: {
+    _id: null,
+    _server: null,
+    _port: null,
+    _subscriptions: null,
+
+    start: function(node, uri) {
+      // NOTE: This is grotesque, but seems to work everywhere.
+      node.innerHTML =
+        '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">' +
+          '<param name="movie" value="' + uri + '" />' +
+          '<param name="allowScriptAccess" value="always" />' +
+          '<param name="wmode" value="opaque" />' +
+          '<embed src="' + uri + '" wmode="opaque"' +
+            'width="0" height="0" id="' + this._id + '">' +
+          '</embed>' +
+        '</object>';
+    },
+
+    _didStartFlash: function() {
+      var id = this._id;
+
+      // Flash puts its "objects" into global scope in an inconsistent way,
+      // because it was written in like 1816 when globals were awesome and IE4
+      // didn't support other scopes since global scope is the best anyway.
+      var container = document[id] || window[id];
+
+      this._flashContainer = container;
       this._flashContainer.connect(
         this._server,
         this._port,
         this._subscriptions);
     }
+
   },
 
-  properties : {
-    handler : null
+  properties: {
+    handler: null
   },
 
-  statics : {
-    _instance : null,
-    didReceiveEvent : function(type, message) {
-      if (!JX.Aphlict._instance) {
+  statics: {
+    _instance: null,
+
+    getInstance: function() {
+      var self = JX.Aphlict;
+      if (!self._instance) {
+        return null;
+      }
+      return self._instance;
+    },
+
+    didReceiveEvent: function(type, message) {
+      var client = JX.Aphlict.getInstance();
+      if (!client) {
         return;
       }
 
-      var handler = JX.Aphlict._instance.getHandler();
+      if (type == 'status') {
+        switch (message.type) {
+          case 'ready':
+            client._didStartFlash();
+            break;
+        }
+      }
+
+      var handler = client.getHandler();
       if (handler) {
         handler(type, message);
       }