--- a/index.html	Tue May 04 22:45:46 2010 -0700
+++ b/index.html	Tue May 04 23:52:45 2010 -0700
@@ -161,19 +161,12 @@
 
 $.fn.init.prototype = $.fn;
 
-function makeDraggable(node, matrix) {
+function makeDraggable(node, matrix, event) {
   var startX = 0;
   var startY = 0;
   var currX = 0;
   var currY = 0;
 
-  function updateInfo() {
-    var msg = "";
-    if (isMouseDown)
-      msg = "x: " + matrix.e + "\ny: " + matrix.f;
-    $(node).find(".info").text(msg);
-  }
-
   function move() {
     matrix = matrix.translate(currX - startX, currY - startY);
     node.style.webkitTransform = matrix;
@@ -181,9 +174,21 @@
 
   updateInfo();
 
+  function onDragEnd(event) {
+    event.preventDefault();
+    $(node).removeClass("active");
+  }
+
   if (!isTouchSupported) {
     var isMouseDown;
 
+    function updateInfo() {
+      var msg = "";
+      if (isMouseDown)
+        msg = "x: " + matrix.e + "\ny: " + matrix.f;
+      $(node).find(".info").text(msg);
+    }
+
     function onMouseDown(event) {
       event.preventDefault();
       startX = event.clientX;
@@ -193,7 +198,8 @@
       updateInfo();
     }
 
-    onMouseDown(event);
+    if (event)
+      onMouseDown(event);
 
     $(node).bind("mousedown", onMouseDown);
 
@@ -210,9 +216,8 @@
 
     $(node.ownerDocument).bind("mouseup", function(event) {
       if (isMouseDown) {
-        event.preventDefault();
         isMouseDown = false;
-        $(node).removeClass("active");
+        onDragEnd(event);
         updateInfo();
       }
     });
@@ -221,7 +226,6 @@
       event.preventDefault();
       startX = event.targetTouches[0].pageX;
       startY = event.targetTouches[0].pageY;
-      updateInfo();
       $(this).addClass("active");
     });
 
@@ -232,18 +236,10 @@
       move(this);
       startX = currX;
       startY = currY;
-      updateInfo();
     });
 
-    $(node).bind("touchend", function(event) {
-      event.preventDefault();
-      $(this).removeClass("active");
-    });
-
-    $(node).bind("touchcancel", function(event) {
-      event.preventDefault();
-      $(this).removeClass("active");
-    });
+    $(node).bind("touchend", onDragEnd);
+    $(node).bind("touchcancel", onDragEnd);
   }
 }
 
@@ -273,7 +269,7 @@
       accelerate(event.wheelDelta);
     });
 
-    $(node).find(".letter-prototype").bind("mousedown", makeLetter);
+    $(node).find(".letter-prototype").bind("mousedown", letterFromPalette);
   } else {
     $(node).bind("touchstart", function(event) {
       $(node).removeClass("decelerating");
@@ -305,27 +301,36 @@
         var target = event.changedTouches[0].target;
         if (target.nodeType == target.TEXT_NODE)
           target = target.parentNode;
-        makeLetter.call(target);
+        letterFromPalette.call(target);
       }
     });
   }
 }
 
-function makeLetter(event) {
-  if (event)
-    event.preventDefault();
-
-  var node = this;
-  var doc = this.ownerDocument;
-
+function makeLetter(text, matrix, doc, event) {
   var letter = doc.createElement("div");
-  var char = doc.createTextNode(this.textContent);
+  var char = doc.createTextNode(text);
   var info = doc.createElement("div");
 
   letter.className = "letter";
   info.className = "info";
   letter.appendChild(char);
   letter.appendChild(info);
+  letter.style.webkitTransform = matrix;
+
+  doc.body.appendChild(letter);
+
+  makeDraggable(letter, matrix, event);
+
+  return letter;
+}
+
+function letterFromPalette(event) {
+  if (event)
+    event.preventDefault();
+
+  var node = this;
+  var doc = this.ownerDocument;
 
   // TODO: This assumes things about the DOM structure that
   // we don't want to have to assume.
@@ -338,16 +343,40 @@
     this.offsetTop + parentMatrix.f
   );
 
-  letter.style.webkitTransform = matrix;
-  doc.body.appendChild(letter);
+  var letter = makeLetter(this.textContent, matrix, doc, event);
 
   // Apply a new transform to make the letter animate.
   if (isTouchSupported) {
     matrix = matrix.translate(-this.offsetWidth, 0);
     letter.style.webkitTransform = matrix;
   }
+}
 
-  makeDraggable(letter, matrix);
+function serializeLetters() {
+  var stack = [];
+  $(".letter").each(function() {
+    var letter = this.firstChild.textContent;
+    var matrix = new WebKitCSSMatrix();
+    matrix.setMatrixValue(this.style.webkitTransform);
+    var x = matrix.e;
+    var y = matrix.f;
+    stack = stack.concat([y, x, letter]);
+  });
+  return stack.join("_");
+}
+
+function deserializeLetters(serialized) {
+  var stack = serialized.split("_");
+
+  while (stack.length) {
+    var letter = stack.pop();
+    var x = stack.pop();
+    var y = stack.pop();
+
+    var matrix = new WebKitCSSMatrix();
+    matrix = matrix.translate(x, y);
+    makeLetter(letter, matrix, document);
+  }
 }
 
 function addLetters() {