From fcb7a746109d20747815e697219174baa7607480 Mon Sep 17 00:00:00 2001
From: Jonathan Puckey <me@jonathanpuckey.com>
Date: Sun, 19 Jun 2011 15:01:53 +0200
Subject: [PATCH] Clean up DivisionRaster example.

---
 examples/Scripts/DivisionRaster.html | 61 +++++++++++++++-------------
 1 file changed, 32 insertions(+), 29 deletions(-)
diff --git a/examples/Scripts/DivisionRaster.html b/examples/Scripts/DivisionRaster.html
index f05add3b..e5de093d 100644
--- a/examples/Scripts/DivisionRaster.html
+++ b/examples/Scripts/DivisionRaster.html
@@ -8,46 +8,33 @@
 	<script type="text/paperscript" canvas="canvas">
 	// Based on 'JPEG Raster' by Jonathan Puckey:
 	// http://www.flickr.com/photos/puckey/3179779686/in/photostream/
-	
+
 	// Create a raster item using the image with id='lenna'
 	var raster = new Raster('lenna');
-	var group = new Group();
-
-	function onResize(event) {
-		// Transform the raster so that it fills the bounding rectangle
-		// of the view:
-		raster.fitBounds(view.bounds, true);
-		
-		// Create a path that fills the view, and fill it with
-		// the average color of the raster:
-		var path = new Path.Rectangle(view.bounds);
-		path.fillColor = raster.getAverageColor(path);
-		group.children = [path];
-	}
-
-	// Call onResize directly:
-	onResize();
 
 	// Make the raster invisible:
 	raster.visible = false;
-	
-	// The mouse has to drag at least 30pt until the next onMouseDrag
+
+	// Create a seperate layer that the paths will be placed on:
+	var layer = new Layer();
+
+	// The mouse has to drag at least 5pt until the next onMouseDrag
 	// event is fired:
 	tool.minDistance = 5;
-	
+
 	function onMouseMove(event) {
 		// Each drag event, iterate through the children of group:
-		for (var i = 0; i < group.children.length; i++) {
-	 			var child = group.children[i];
+		for (var i = 0; i < layer.children.length; i++) {
+	 			var child = layer.children[i];
 	 			var bounds = child.bounds;
-	
+
 	 			if (bounds.contains(event.point)) {
 				// If the mouse position intersects with the bounding
 				// box of the path, we're going to split it into two paths:
-	
+
 				var size = bounds.size;
 				var isLandscape = size.width > size.height;
-	
+
 				// If the path is in landscape orientation, we're going to
 				// split the path horizontally, otherwise vertically:
 				if (isLandscape) {
@@ -55,12 +42,12 @@
 				} else {
 					size.height /= 2;
 				}
-	
+
 				var topLeft = bounds.topLeft.floor();
 				var path = new Path.Rectangle(topLeft, size.ceil());
 				path.fillColor = raster.getAverageColor(path);
 				path.moveBelow(child);
-	
+
 				var secondPath = path.clone();
 				size = size.floor();
 				secondPath.position += isLandscape
@@ -68,15 +55,31 @@
 						: [0, size.height];				
 				secondPath.fillColor = raster.getAverageColor(secondPath);
 				secondPath.moveBelow(path);
-	
+
 				// Remove the path which was split:
 				child.remove();
-				
+
 				// Avoid continuing looping through the rest of the items:
 				return;
 	        }
 	    }
 	}
+
+	function onResize(event) {
+		layer.removeChildren();
+
+		// Transform the raster so that it fills the bounding rectangle
+		// of the view:
+		raster.fitBounds(view.bounds, true);
+
+		// Create a path that fills the view, and fill it with
+		// the average color of the raster:
+		var path = new Path.Rectangle(view.bounds);
+		path.fillColor = raster.getAverageColor(path);
+	}
+
+	// Call onResize directly:
+	onResize();
 	</script>
 </head>
 <body>
