--- a/index.html	Sat May 01 17:39:57 2010 -0700
+++ b/index.html	Sun May 02 04:23:55 2010 -0700
@@ -9,9 +9,9 @@
   -webkit-transition-property: -webkit-transform, color;
   -webkit-transition-duration: 0.1s, 0.2s;
   -webkit-transition-timing-function: linear;
+  position: absolute;
   cursor: pointer;
   font-size: 144pt;
-  width: 1em;
 }
 
 div.letter .info {
@@ -140,8 +140,10 @@
   var matrix = new WebKitCSSMatrix();
 
   function updateInfo() {
-    //query.find(".info").text("curr: " + currX + ", " + currY + "\n" +
-    //                         "start: " + startX + ", " + startY);
+    var msg = "";
+    if (isMouseDown)
+      msg = "x: " + matrix.e + "\ny: " + matrix.f;
+    $(node).find(".info").text(msg);
   }
 
   function move() {
@@ -151,30 +153,77 @@
 
   updateInfo();
 
-  $(node).bind("touchstart", function(event) {
-    event.preventDefault();
-    startX = event.targetTouches[0].pageX;
-    startY = event.targetTouches[0].pageY;
-    updateInfo();
-    $(this).addClass("active");
-  });
+  if (!isTouchSupported) {
+    var isMouseDown = false;
+
+    $(node).bind("mousedown", function(event) {
+      event.preventDefault();
+      startX = event.clientX;
+      startY = event.clientY;
+      isMouseDown = true;
+      $(this).addClass("active");
+      updateInfo();
+    });
+
+    $(node).bind("mousemove", function(event) {
+      if (isMouseDown) {
+        currX = event.clientX;
+        currY = event.clientY;
+        move(this);
+        startX = currX;
+        startY = currY;
+        updateInfo();
+      }
+    });
+
+    function maybeDeactivate(event) {
+      if (isMouseDown) {
+        event.preventDefault();
+        isMouseDown = false;
+        $(this).removeClass("active");
+        updateInfo();
+      }
+    }
 
-  $(node).bind("touchmove", function(event) {
-    event.preventDefault();
-    currX = event.targetTouches[0].pageX;
-    currY = event.targetTouches[0].pageY;
-    move(this);
-    startX = currX;
-    startY = currY;
-    updateInfo();
-  });
+    $(node).bind("mouseout", maybeDeactivate);
+    $(node).bind("mouseup", maybeDeactivate);
+  } else {
+    $(node).bind("touchstart", function(event) {
+      event.preventDefault();
+      startX = event.targetTouches[0].pageX;
+      startY = event.targetTouches[0].pageY;
+      updateInfo();
+      $(this).addClass("active");
+    });
 
-  $(node).bind("touchend", function(event) {
-    event.preventDefault();
-    $(this).removeClass("active");
-  });
+    $(node).bind("touchmove", function(event) {
+      event.preventDefault();
+      currX = event.targetTouches[0].pageX;
+      currY = event.targetTouches[0].pageY;
+      move(this);
+      startX = currX;
+      startY = currY;
+      updateInfo();
+    });
+
+    $(node).bind("touchend", function(event) {
+      event.preventDefault();
+      $(this).removeClass("active");
+    });
+  }
 }
 
+var isTouchSupported = (function isTouchSupported() {
+  try {
+    document.createEvent("TouchEvent");
+    return true;
+  } catch (e) {
+    if (e.code != e.NOT_SUPPORTED_ERR)
+      throw e;
+    return false;
+  }
+})();
+
 $(window).bind("DOMContentLoaded", function() {
   $(".letter").each(makeDraggable);
 });