diff --git a/examples/Animated/animatedStar.html b/examples/Animated/animatedStar.html
index be04a53a..82bc5c5c 100644
--- a/examples/Animated/animatedStar.html
+++ b/examples/Animated/animatedStar.html
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script>
 		var canvas, doc;
 		var count = 0;
@@ -25,7 +27,7 @@
 
 		function draw() {
 			count++;
-			doc.children = [];
+			doc.activeLayer.children = [];
 			var point = new Point(1024, 768).divide(2);
 			for(var i = 0; i < 35; i++) {
 				var vector = new Point(20 + 10 * i, 0).rotate(i * (360 / 35 * 2) * Math.sin(count / 150));
@@ -40,9 +42,9 @@
 					path.add(newPoint);
 				}
 				path.smooth();
-				doc.children.push(path);
+				doc.activeLayer.appendTop(path);
 			}
-			doc.children.reverse();
+			doc.activeLayer.children.reverse();
 			doc.redraw();
 		}
 	</script>
diff --git a/examples/Scripts/arcTo.html b/examples/Scripts/arcTo.html
index 6d950065..e4e0d9b4 100644
--- a/examples/Scripts/arcTo.html
+++ b/examples/Scripts/arcTo.html
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
@@ -34,9 +36,9 @@
 						path.arcTo(point.add(vector), true);
 					}
 				}
-				doc.children.push(path);
+				doc.activeLayer.appendTop(path);
 			}
-			doc.children.reverse();
+			doc.activeLayer.children.reverse();
 
 			doc.redraw();
 		}
diff --git a/examples/Scripts/circle.html b/examples/Scripts/circle.html
index 57ca63bb..ec1655e5 100644
--- a/examples/Scripts/circle.html
+++ b/examples/Scripts/circle.html
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script>
 		var count = 0;
 		var doc;
@@ -24,7 +26,7 @@
 			for(var i = 0; i < 70; i++) {
 				var path = new Path.Circle(center, i * 5);
 				path.strokeColor = 'black';
-				doc.children.push(path);
+				doc.activeLayer.appendTop(path);
 			}
 			doc.redraw();
 		}
diff --git a/examples/Scripts/letter.html b/examples/Scripts/letter.html
index 55fc4516..79d1d835 100644
--- a/examples/Scripts/letter.html
+++ b/examples/Scripts/letter.html
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
@@ -36,7 +38,7 @@
 				new Segment(new Point(56.984375, 286.0546875), new Point(10.03076171875, 6.6875))
 			);
 			letterPath.fillColor = 'black';
-			doc.children.push(letterPath);
+			doc.activeLayer.appendTop(letterPath);
 			doc.redraw();
 		}
 	</script>
diff --git a/examples/Scripts/lines.html b/examples/Scripts/lines.html
index 486d29f4..32ab7e98 100644
--- a/examples/Scripts/lines.html
+++ b/examples/Scripts/lines.html
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script>
 		var count = 0;
 		var doc;
@@ -25,13 +27,13 @@
 		
 		function draw() {
 			count++;
-			doc.children = [];
+			doc.activeLayer.children = [];
 			var point = new Point(1024, 768).divide(2);
 			var vector = new Point(100, 0);
 			for(var i = 0; i < 180; i++) {
 				var path = new Path.Line(point.add(vector.rotate(i * 2).normalize(30)), point.add(vector.rotate(i * 2).normalize(30 + Math.abs(Math.sin((i + count / 20)) * 300))));
 				path.strokeColor = i % 4 ? 'black' : 'red';
-				doc.children.push(path);
+				doc.activeLayer.appendTop(path);
 			}
 			doc.redraw();
 		}
diff --git a/examples/Scripts/rectangle.html b/examples/Scripts/rectangle.html
index de79499f..95707d4d 100644
--- a/examples/Scripts/rectangle.html
+++ b/examples/Scripts/rectangle.html
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script>
 		var count = 0;
 		var doc;
@@ -23,7 +25,7 @@
 			var path = new Path.Rectangle([50, 50], [100, 100]);
 			path.strokeColor = 'black';
 			console.log(path);
-			doc.children.push(path);
+			doc.activeLayer.appendTop(path);
 			doc.redraw();
 		}
 	</script>
diff --git a/examples/Scripts/roundRectangle.html b/examples/Scripts/roundRectangle.html
index 8f71d3fc..0f555d71 100644
--- a/examples/Scripts/roundRectangle.html
+++ b/examples/Scripts/roundRectangle.html
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script>
 		var count = 0;
 		var doc;
@@ -24,12 +26,12 @@
 		}
 		function draw() {
 			count++;
-			doc.children = [];
+			doc.activeLayer.children = [];
 			var rect = new Rectangle([150, 150], [300, 300]);
 			var size = Math.abs(Math.sin(count / 40)) * 150 + 10;
 			var path = new Path.RoundRectangle(rect, size);
 			path.fillColor = 'black';
-			doc.children.push(path);
+			doc.activeLayer.appendTop(path);
 			doc.redraw();
 		}
 	</script>
diff --git a/examples/Scripts/star.html b/examples/Scripts/star.html
index f205c346..48ba213b 100644
--- a/examples/Scripts/star.html
+++ b/examples/Scripts/star.html
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script>
 		window.onload = function() {
 			var canvas = document.getElementById('canvas');
@@ -33,9 +35,9 @@
 					path.add(newPoint);
 				}
 				path.smooth();
-				doc.children.push(path);
+				doc.activeLayer.appendTop(path);
 			}
-			doc.children.reverse();
+			doc.activeLayer.children.reverse();
 			doc.redraw();
 		}
 	</script>
diff --git a/examples/Scripts/strokeJoin.html b/examples/Scripts/strokeJoin.html
index b629055c..88d1e20b 100644
--- a/examples/Scripts/strokeJoin.html
+++ b/examples/Scripts/strokeJoin.html
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script>
 		var count = 0;
 		var doc;
@@ -24,7 +26,7 @@
 			path.strokeColor = 'black';
 			path.strokeWidth = 30;
 			path.strokeJoin = 'bevel';
-			doc.children.push(path);
+			doc.activeLayer.appendTop(path);
 			doc.redraw();
 		}
 	</script>
diff --git a/examples/Scripts/temp.html b/examples/Scripts/temp.html
index ef6b1829..b6090ac5 100644
--- a/examples/Scripts/temp.html
+++ b/examples/Scripts/temp.html
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script>
 		var count = 0;
 		var doc;
@@ -27,11 +29,11 @@
 			// var path = new Path.RoundRectangle(rect, 200);
 			// path.strokeColor = 'black';
 			// console.log(path);
-			// doc.children.push(path);
+			// doc.activeLayer.appendTop(path);
 			// 
 			// // var path = new Path.Rectangle(rect);
 			// // path.strokeColor = 'black';
-			// // doc.children.push(path);
+			// // doc.activeLayer.appendTop(path);
 			// doc.redraw();
 		}
 	</script>
diff --git a/examples/Tools/Circles.html b/examples/Tools/Circles.html
index 05b1757d..085cb83e 100644
--- a/examples/Tools/Circles.html
+++ b/examples/Tools/Circles.html
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script type="text/javascript" src="../../src/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/ToolHandler.js"></script>
 	<script type="text/javascript" src="../../src/Tool.js"></script>
@@ -25,12 +27,12 @@
 			var tool = new Tool({
 				onMouseDrag: function(event) {
 					if(event.count != 1)
-						doc.children.pop();
+						doc.activeLayer.children.pop();
 					var distance = event.downPoint.subtract(event.point).length;
 					var path = new Path.Circle(event.downPoint, distance);
 					path.strokeColor = 'black';
 					path.fillColor = 'white';
-					doc.children.push(path);
+					doc.activeLayer.appendTop(path);
 				}
 			});
 			tool.document = doc;
diff --git a/examples/Tools/Clouds.html b/examples/Tools/Clouds.html
index 03b9bc55..6a6bf70b 100644
--- a/examples/Tools/Clouds.html
+++ b/examples/Tools/Clouds.html
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script type="text/javascript" src="../../src/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/ToolHandler.js"></script>
 	<script type="text/javascript" src="../../src/Tool.js"></script>
@@ -30,7 +32,7 @@
 					path.strokeJoin = 'round';
 					path.strokeCap = 'round';
 					path.add(event.point);
-					doc.children.push(path);
+					doc.activeLayer.appendTop(path);
 				},
 				onMouseDrag: function(event) {
 					path.arcTo(event.point, true);
diff --git a/examples/Tools/Dripping Brush.html b/examples/Tools/Dripping Brush.html
index e325b3ad..1877933e 100644
--- a/examples/Tools/Dripping Brush.html	
+++ b/examples/Tools/Dripping Brush.html	
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script type="text/javascript" src="../../src/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/ToolHandler.js"></script>
 	<script type="text/javascript" src="../../src/Tool.js"></script>
@@ -38,7 +40,7 @@
 							path = new Path();
 							path.fillColor = 'black';
 							path.add(event.lastPoint);
-							doc.children.push(path);
+							doc.activeLayer.appendTop(path);
 						}
 
 						var step = event.delta.divide(2);
diff --git a/examples/Tools/Fancy Brush.html b/examples/Tools/Fancy Brush.html
index a1f1269f..cb5391eb 100644
--- a/examples/Tools/Fancy Brush.html	
+++ b/examples/Tools/Fancy Brush.html	
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script type="text/javascript" src="../../src/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/ToolHandler.js"></script>
 	<script type="text/javascript" src="../../src/Tool.js"></script>
@@ -34,7 +36,7 @@
 				onMouseDown: function(event) {
 					path = new Path();
 					path.fillColor = event.count % 2 ? 'red' : 'black';
-					doc.children.push(path);
+					doc.activeLayer.appendTop(path);
 				},
 
 				onMouseDrag: function(event) {
diff --git a/examples/Tools/Grid.html b/examples/Tools/Grid.html
index d30c2a6d..0af4981f 100644
--- a/examples/Tools/Grid.html
+++ b/examples/Tools/Grid.html
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script type="text/javascript" src="../../src/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/ToolHandler.js"></script>
 	<script type="text/javascript" src="../../src/Tool.js"></script>
@@ -37,7 +39,7 @@
 					path = new Path();
 					path.strokeColor = 'black';
 					path.add(point);
-					doc.children.push(path);
+					doc.activeLayer.appendTop(path);
 				},
 				onMouseDrag: function(event) {
 					var p = getPos(event.point);
diff --git a/examples/Tools/MultiLines.html b/examples/Tools/MultiLines.html
index 7c383c94..461ba205 100644
--- a/examples/Tools/MultiLines.html
+++ b/examples/Tools/MultiLines.html
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script type="text/javascript" src="../../src/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/ToolHandler.js"></script>
 	<script type="text/javascript" src="../../src/Tool.js"></script>
@@ -35,7 +37,7 @@
 					for (var i = 0; i < values.lines; i++) {
 						var path = new Path();
 						path.strokeColor = '#000000';
-						doc.children.push(path);
+						doc.activeLayer.appendTop(path);
 						paths.push(path);
 					}
 				},
diff --git a/examples/Tools/Wave.html b/examples/Tools/Wave.html
index bd2ffce5..5900d63f 100644
--- a/examples/Tools/Wave.html
+++ b/examples/Tools/Wave.html
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script type="text/javascript" src="../../src/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/ToolHandler.js"></script>
 	<script type="text/javascript" src="../../src/Tool.js"></script>
@@ -35,7 +37,7 @@
 				onMouseDown: function(event) {
 					path = new Path();
 					path.strokeColor = 'black';
-					doc.children.push(path);
+					doc.activeLayer.appendTop(path);
 				},
 
 				onMouseDrag: function(event) {
diff --git a/examples/Tools/Worm Farm.html b/examples/Tools/Worm Farm.html
index 8e8c9aaa..b6da0c7c 100644
--- a/examples/Tools/Worm Farm.html	
+++ b/examples/Tools/Worm Farm.html	
@@ -14,6 +14,8 @@
 	<script type="text/javascript" src="../../src/PathItem.js"></script>
 	<script type="text/javascript" src="../../src/Path.js"></script>
 	<script type="text/javascript" src="../../src/Doc.js"></script>
+	<script type="text/javascript" src="../../src/Layer.js"></script>
+	<script type="text/javascript" src="../../src/Group.js"></script>
 	<script type="text/javascript" src="../../src/ToolEvent.js"></script>
 	<script type="text/javascript" src="../../src/ToolHandler.js"></script>
 	<script type="text/javascript" src="../../src/Tool.js"></script>
@@ -38,7 +40,7 @@
 					worm.fillColor = '#ffffff';
 					worm.strokeColor = '#000000';
 					worm.add(event.point);
-					doc.children.push(worm);
+					doc.activeLayer.appendTop(worm);
 				},
 
 				onMouseDrag: function(event) {
@@ -75,7 +77,7 @@
 					// make a new line path from top to bottom
 					var line = new Path.Line(top, bottom);
 					line.strokeColor = '#000000';
-					doc.children.push(line);
+					doc.activeLayer.appendTop(line);
 
 					// smooth the segments of the path
 					worm.smooth();