pass in Crypto to realtime-input

www/style/main.js

@@ -1,31 +1,34 @@
 define([
     '/api/config?cb=' + Math.random().toString(16).substring(2),
     '/common/realtime-input.js',
-    '/common/messages.js',
     '/common/crypto.js',
+    '/common/TextPatcher.js',
     '/bower_components/jquery/dist/jquery.min.js',
     '/customize/pad.js'
-], function (Config, Realtime, Messages, Crypto) { 
+], function (Config, Realtime, Crypto, TextPatcher) { 
     // TODO consider adding support for less.js
     var $ = window.jQuery;
-    $(window).on('hashchange', function() {
-        window.location.reload();
-    });
 
-    var userName = Crypto.rand64(8);
+    var module = window.APP = {};
 
-    if (window.location.href.indexOf('#') === -1) {
-        window.location.href = window.location.href + '#' + Crypto.genKey();
-        return;
+    var key;
+    var channel = '';
+    if (!/#/.test(window.location.href)) {
+        key = Crypto.genKey();    
+    } else {
+        var hash = window.location.hash.slice(1);
+        channel = hash.slice(0, 32);
+        key = hash.slice(32);
     }
 
-    var key = Crypto.parseKey(window.location.hash.slice(1));
+    var config = {
+        websocketURL: Config.websocketURL,
+        channel: channel,
+        cryptKey: key,
+        crypto: Crypto,
+    };
 
-    var $style = $('style').first(),
-        $css = $('#css'),
-        $edit = $('#edit');
-
-    $edit.attr('href', '/text/'+ window.location.hash);
+    var userName = module.userName = config.userName = Crypto.rand64(8);
 
     var lazyDraw = (function () {
         var to,
@@ -38,29 +41,47 @@ define([
         };
     }());
 
-    var draw = function () {
-        lazyDraw($css.val());
+    var draw = function (content) { lazyDraw(content); };
+
+    var initializing = true;
+
+    var onInit = config.onInit = function (info) {
+        window.location.hash = info.channel + key;
+        var realtime = module.realtime = info.realtime;
+        module.patchText = TextPatcher.create({
+            realtime: realtime,
+            logging: true,
+        });
+
+        $(window).on('hashchange', function() {
+            window.location.reload();
+        });
     };
 
-    $css // set the initial value
-        .val($style.text())
-        .on('change', draw);
+    var onReady = config.onReady = function (info) {
+        var userDoc = module.realtime.getUserDoc();
+        draw(userDoc);
+        console.log("Ready");
+        initializing = false;
+    };
 
-    var rts = $('textarea').toArray().map(function (e, i) {
+    var onRemote = config.onRemote = function () {
+        draw(module.realtime.getUserDoc());
+    };
 
-        var config = {
-            onRemote: draw,
-            onInit: draw,
-            onReady: draw,
+    var onAbort = config.onAbort = function (info) {
+        // notify the user of the abort
+        window.alert("Network Connection Lost");
+    };
 
-            textarea: e,
-            websocketURL: Config.websocketURL,
-            userName: userName,
-            channel: key.channel,
-            cryptKey: key.cryptKey
-        };
+    var onLocal = config.onLocal = function () {
+        // nope
+    };
 
-        var rt = Realtime.start(config);
-        return rt;
-    });
+    var $style = $('style').first(),
+        $edit = $('#edit');
+
+    $edit.attr('href', '/text/'+ window.location.hash);
+
+    var rt = Realtime.start(config);
 });