Rewrote most of it.. to accomplish asciidisco#52

(also the old code been a lil dirty imo :))

Returns now a "meta" field instead of two - height and maxheight - fields.
The meta object contains these fields:
```
{
  maxHeight: int,
  maxWidth: int,
  images: [{
      height: int,
      offsetY: int,
      totalHeight: int,
      width: int
    },...]
}
```

lib/phantomspriter.js

@@ -17,35 +17,51 @@ page.onConsoleMessage = function (msg) {
 
 page.evaluate(function () {
     var testdraw = function () {
-        var maxwidth = 0;
-        var maxheight = 0;
-        var allHeight = 0;
-        var heights = [];
-        var canvas = null;
-
-        for (var i = 0; i < document.images.length; i++) {
-            maxheight += document.images[i].height;
-            if (maxwidth < document.images[i].width) {
-                maxwidth = document.images[i].width;
-            }
-        }
-        maxheight = maxheight + (document.images.length * parseInt(document.getElementById('test').getAttribute('rel'), 10));
-        // Create canvas element
-        canvas = document.getElementById('test');
-        canvas.setAttribute('width', maxwidth);
-        canvas.setAttribute('height', maxheight);
-        // Loop through all images
-        for (var j = 0; j < document.images.length; j++) {
-            // Insert before the image
-            var ctx = canvas.getContext('2d');
-
-            // Draw image to canvas
-            var beforeHeight = (j - 1 === -1) ? 0 : document.images[j - 1].height;
-            allHeight += (beforeHeight + parseInt(canvas.getAttribute('rel'), 10));
-            heights.push(allHeight);
-            ctx.drawImage(document.images[j], 0, allHeight);
+        var images = document.images,
+            canvas = document.getElementById('test'),
+            ctx = canvas.getContext('2d'),
+            spriteCache = document.createElement('canvas'),
+            cacheCtx = spriteCache.getContext('2d'),
+            imgHeight = 0,
+            imgWidth = 0,
+            imgTotalHeight = 0,
+            spriteHeight = 0,
+            spriteWidth = 0,
+            spacing = parseInt(canvas.getAttribute('rel'), 10) || 0,
+            meta = { images: [] };
+
+        // loop all images
+        for (var i = 0, l = images.length; i < l; i += 1) {
+            imgHeight = images[i].height;
+            imgWidth = images[i].width;
+            imgTotalHeight = imgHeight + (i === l - 1 ? 0 : spacing);
+
+            spriteHeight += imgTotalHeight;
+            spriteWidth = spriteWidth < imgWidth ? imgWidth : spriteWidth;
+
+            // paint to cache
+            spriteCache.setAttribute('height', spriteHeight);
+            spriteCache.setAttribute('width', spriteWidth);
+            cacheCtx.drawImage(canvas, 0, 0);
+
+            // draw the real canvas
+            canvas.setAttribute('height', spriteHeight);
+            canvas.setAttribute('width', spriteWidth);
+            ctx.drawImage(spriteCache, 0, 0);
+            ctx.drawImage(images[i], 0, spriteHeight - imgTotalHeight);
+
+            meta.images.push({
+                height: imgHeight,
+                width: imgWidth,
+                totalHeight: imgTotalHeight,
+                offsetY: spriteHeight - imgTotalHeight
+            });
         }
-        return JSON.stringify({image: canvas.toDataURL(), heights: heights, maxheight: maxheight}) + '<<<<ENDIMAGE';
+
+        meta.maxHeight = spriteHeight;
+        meta.maxWidth = spriteWidth;
+
+        return JSON.stringify({image: canvas.toDataURL(), meta: meta}) + '<<<<ENDIMAGE';
     };
     setTimeout(function () {
         console.log(testdraw());