# HG changeset patch
# User Atul Varma <avarma@mozilla.com>
# Date 1272838908 25200
# Node ID d2f7b69ac3191fe93cf99ed3c850f1b30cbd2508
# Parent  9c7ae0ae72409007e0b5ad274b02f3ea12985b10
animation for letter sliding out of palette on spawn

diff -r 9c7ae0ae7240 -r d2f7b69ac319 index.html
--- a/index.html	Sun May 02 14:40:37 2010 -0700
+++ b/index.html	Sun May 02 15:21:48 2010 -0700
@@ -146,13 +146,11 @@
 
 $.fn.init.prototype = $.fn;
 
-function makeDraggable() {
-  var node = this;
+function makeDraggable(node, matrix) {
   var startX = 0;
   var startY = 0;
   var currX = 0;
   var currY = 0;
-  var matrix = new WebKitCSSMatrix();
 
   function updateInfo() {
     var msg = "";
@@ -288,8 +286,25 @@
   letter.appendChild(char);
   letter.appendChild(info);
 
+  var matrix = new WebKitCSSMatrix();
+
+  console.log(this.offsetLeft + " " + this.offsetTop);
+
+  // TODO: This assumes things about the DOM structure that
+  // we don't want to have to assume.
+  matrix = matrix.translate(
+    this.offsetLeft,
+    this.offsetTop - this.parentNode.scrollTop
+  );
+  letter.style.webkitTransform = matrix;
+
   doc.body.appendChild(letter);
-  makeDraggable.call(letter);
+
+  // Apply a new transform to make the letter animate.
+  matrix = matrix.translate(-this.offsetWidth, 0);
+  letter.style.webkitTransform = matrix;
+
+  makeDraggable(letter, matrix);
 }
 
 function addLetters() {