--- a/cropper.html	Fri Nov 27 13:53:35 2009 -0500
+++ b/cropper.html	Fri Nov 27 14:20:38 2009 -0500
@@ -19,25 +19,38 @@
 <script src="cropper.js"></script>
 <script>
 $(window).ready(function() {
+  var iface;
+
   function newInterface() {
     if (!$("#url").val())
       return;
 
     $("#pics").empty();
     $("#thumbnails").empty();
-    var iface = new CropperInterface({url: $("#url").val(),
-                                      selectableContainer: "#pics",
-                                      thumbnailContainer: "#thumbnails"});
+    iface = new CropperInterface({url: $("#url").val(),
+                                  selectableContainer: "#pics",
+                                  thumbnailContainer: "#thumbnails"});
     iface.selectableImage.addObserver("selection-changed", function() {
-      var selection = iface.selectableImage.getNormalizedSelection();
+      var selection = iface.selectableImage.getSelection();
       $("#json").val(JSON.stringify(selection));
     });
   }
 
+  function newSelection() {
+    if (!$("#json").val())
+      return;
+
+    var sel = JSON.parse($("#json").val());
+    iface.selectableImage.setSelection(sel);
+  }
+
   $("#thumbnails").width($("#form").height());
   $("#form").submit(function(evt) { evt.preventDefault(); });
   $("#url").change(newInterface);
+  $("#json").change(newSelection);
+
   newInterface();
+  newSelection();
 });
 </script>
 </html>

--- a/cropper.js	Fri Nov 27 13:53:35 2009 -0500
+++ b/cropper.js	Fri Nov 27 14:20:38 2009 -0500
@@ -37,7 +37,7 @@
 
 Thumbnail.prototype = {
   observe: function observe(subject, topic) {
-    var selection = this.selectableImage.getNormalizedSelection();
+    var selection = this.selectableImage.getSelection();
     var ctx = this.canvas.getContext("2d");
     ctx.drawImage(
       this.selectableImage.img,
@@ -55,7 +55,6 @@
 
 function SelectableImage(url, canvas) {
   var img = new Image();
-  var ctx = canvas.getContext("2d");
 
   img._parent = this;
   img.onload = this.onImgLoad;
@@ -67,13 +66,12 @@
   $(canvas).mouseup(this.onDragStop);
 
   this.isDirty = false;
-  this.ctx = ctx;
   this.canvas = canvas;
   this.img = img;
-  this.selection = {top: 0,
-                    left: 0,
-                    width: 0,
-                    height: 0};
+  this._selection = {top: 0,
+                     left: 0,
+                     width: 0,
+                     height: 0};
   this._observers = new ObserverManager(this);
 }
 
@@ -90,10 +88,10 @@
     var self = evt.target._parent;
     var point = self._getCanvasPoint(evt);
 
-    self.selection = {top: point.y,
-                      left: point.x,
-                      width: 0,
-                      height: 0};
+    self._selection = {top: point.y,
+                       left: point.x,
+                       width: 0,
+                       height: 0};
     $(self.canvas).bind("mousemove", self.onDragging);
   },
 
@@ -101,8 +99,8 @@
     var self = evt.target._parent;
     var point = self._getCanvasPoint(evt);
 
-    var width = point.x - self.selection.left;
-    var height = point.y - self.selection.top;
+    var width = point.x - self._selection.left;
+    var height = point.y - self._selection.top;
 
     if (evt.shiftKey) {
       // Constrain dimensions to square.
@@ -119,8 +117,8 @@
         height = -maxDiff;
     }
 
-    self.selection.width = width;
-    self.selection.height = height;
+    self._selection.width = width;
+    self._selection.height = height;
     self._markDirty();
   },
 
@@ -132,11 +130,17 @@
     self._observers.notify("selection-changed");
   },
 
-  getNormalizedSelection: function getNormalizedSelection() {
-    var x = this.selection.left;
-    var y = this.selection.top;
-    var width = this.selection.width;
-    var height = this.selection.height;
+  setSelection: function setSelection(selection) {
+    this._selection = selection;
+    this._markDirty();
+    this._observers.notify("selection-changed");
+  },
+
+  getSelection: function getSelection() {
+    var x = this._selection.left;
+    var y = this._selection.top;
+    var width = this._selection.width;
+    var height = this._selection.height;
 
     if (width < 0) {
       x = x + width;
@@ -155,8 +159,8 @@
 
   _getCanvasPoint: function _getCanvasPoint(evt) {
     var ofs = $(this.canvas).offset();
-    return {x: evt.pageX - ofs.left,
-            y: evt.pageY - ofs.top};
+    return {x: Math.floor(evt.pageX - ofs.left),
+            y: Math.floor(evt.pageY - ofs.top)};
   },
 
   _markDirty: function _markDirty() {
@@ -169,19 +173,21 @@
   },
 
   _render: function _render() {
+    var ctx = this.canvas.getContext("2d");
+
     this._isDirty = false;
-    this.ctx.drawImage(this.img, 0, 0);
+    ctx.drawImage(this.img, 0, 0);
 
-    var norm = this.getNormalizedSelection();
+    var norm = this.getSelection();
 
-    this.ctx.fillStyle = "rgba(0,0,0,0.75)";
-    this.ctx.strokeStyle = "rgb(255,255,255)";
-    this.ctx.lineWidth = 1.0;
-    this.ctx.lineJoin = "bevel";
-    this.ctx.fillRect(norm.left, norm.top,
-                      norm.width, norm.height);
-    this.ctx.strokeRect(norm.left, norm.top,
-                        norm.width, norm.height);
+    ctx.fillStyle = "rgba(0,0,0,0.75)";
+    ctx.strokeStyle = "rgb(255,255,255)";
+    ctx.lineWidth = 1.0;
+    ctx.lineJoin = "bevel";
+    ctx.fillRect(norm.left, norm.top,
+                 norm.width, norm.height);
+    ctx.strokeRect(norm.left, norm.top,
+                   norm.width, norm.height);
   }
 };