From 1ccd5199b5d7c00f5dec7bdf3a753edeff5fb805 Mon Sep 17 00:00:00 2001
From: Jt Whissel <admin@pharaohservers.com>
Date: Thu, 13 Sep 2012 20:45:27 -0400
Subject: [PATCH 01/51] Added the new classes to work with, that also have the
 method stubs inside.

---
 src/paper.js         |  3 ++
 src/svg/ExportSVG.js | 90 ++++++++++++++++++++++++++++++++++++++++++++
 src/svg/ImportSVG.js | 55 +++++++++++++++++++++++++++
 3 files changed, 148 insertions(+)
 create mode 100644 src/svg/ExportSVG.js
 create mode 100644 src/svg/ImportSVG.js

diff --git a/src/paper.js b/src/paper.js
index 3052ee61..757274f8 100644
--- a/src/paper.js
+++ b/src/paper.js
@@ -93,6 +93,9 @@ var paper = new function() {
 /*#*/ include('text/TextItem.js');
 /*#*/ include('text/PointText.js');
 
+/*#*/ include('svg/ExportSVG.js');
+/*#*/ include('svg/ImportSVG.js');
+
 /*#*/ include('style/Style.js');
 /*#*/ include('style/PathStyle.js');
 /*#*/ include('style/ParagraphStyle.js');
diff --git a/src/svg/ExportSVG.js b/src/svg/ExportSVG.js
new file mode 100644
index 00000000..79d88b78
--- /dev/null
+++ b/src/svg/ExportSVG.js
@@ -0,0 +1,90 @@
+/**
+ *  Exports items, layers or whole projects as a svg
+ *  Stetson Alpha - Paper.js
+ *  
+ *  var NS="http://www.w3.org/2000/svg";
+ *  var svg=document.createElementNS(NS,"svg");
+ */
+
+
+var ExportSVG = function()
+{
+	var svgObj = null; // xml dom object (svg typed)
+	
+	//initialize the svgObj and what ever else.
+	function initialize()
+	{
+		
+	};
+	
+	/**
+	 * 
+	 * Takes the whole project and parses
+	 * all the layers to be put into svg groups and 
+	 * groups into svg groups making all the projects 
+	 * items into one svg.
+	 * 
+	 * takes in a Paper.js Project
+	 * returns svg object (xml dom)
+	 */
+    this.exportProject = function(project)
+    {
+    	return svgObj;
+    };
+	
+    
+	/**
+	 * 
+	 * Takes the layer and then parses all groups
+	 * and items into one svg
+	 * 
+	 * takes in a Paper.js Layer
+	 * returns svg object (xml dom)
+	 */
+    this.exportLayer = function(layer)
+    {
+    	return svgObj;
+    };
+	
+    
+	/**
+	 * 
+	 * Takes the group and puts it's items 
+	 * in a svg file.
+	 * 
+	 * takes in a Paper.js Group
+	 * returns svg object (xml dom)
+	 */
+    this.exportGroup = function(group)
+    {
+    	return svgObj;
+    };
+	
+	/**
+	 * 
+	 * Takes the item and puts it in
+	 * a svg file.
+	 * 
+	 * takes in a Paper.js Item
+	 * returns svg object (xml dom)
+	 */
+    this.exportItem = function(item)
+    {
+    	return svgObj;
+    };
+    
+	/**
+	 * 
+	 * Takes the path and puts it in
+	 * a svg file.
+	 * 
+	 * takes in a Paper.js Path
+	 * returns svg object (xml dom)
+	 */
+    this.exportPath = function(path)
+    {
+    	return svgObj;
+    };
+
+    initialize(); // calls the init function after class is loaded
+};
\ No newline at end of file
diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
new file mode 100644
index 00000000..08f6f557
--- /dev/null
+++ b/src/svg/ImportSVG.js
@@ -0,0 +1,55 @@
+/**
+ *  Imports svg into items with groups
+ *  Stetson Alpha - Paper.js
+ *  
+ */
+
+var ImportSVG = function()
+{
+	//initialize
+	function initialize()
+	{
+		
+	};
+	
+	/**
+	 * 
+	 * Takes the svg dom obj and parses the data
+	 * to create a layer with groups (if needed) with
+	 * items inside. Should support nested groups.
+	 * 
+	 * takes in a svg object (xml dom)
+	 * returns Paper.js Layer 
+	 */
+    this.importSVG = function(svg)
+    {
+    	return layer;
+    };
+	
+	/**
+	 * Creates a Paper.js Group by parsing
+	 * a specific svg g node
+	 * 
+	 * takes in a svg object (xml dom)
+	 * returns Paper.js Group
+	 */
+    function importGroup(svg)
+    {
+    	return group;
+    };
+    
+	/**
+	 * Creates a Paper.js Path by parsing
+	 * a specific svg node (rect, path, circle, polygon, etc)
+	 * and creating the right path object based on the svg type.
+	 * 
+	 * takes in a svg object (xml dom)
+	 * returns Paper.js Group
+	 */
+    function importPath(svg)
+    {
+    	return path;
+    };
+	
+    initialize(); // calls the init function after class is loaded
+};
\ No newline at end of file

From 1efd36c179ab470fdec49904e0a3cc7546b7ffcc Mon Sep 17 00:00:00 2001
From: Justin Ridgewell <justin@ridgewell.name>
Date: Sat, 15 Sep 2012 19:58:44 -0400
Subject: [PATCH 02/51] Strip trailing whitespace

---
 src/svg/ImportSVG.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index 08f6f557..d1dfa3a3 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -1,7 +1,7 @@
 /**
  *  Imports svg into items with groups
  *  Stetson Alpha - Paper.js
- *  
+ *
  */
 
 var ImportSVG = function()
@@ -9,27 +9,27 @@ var ImportSVG = function()
 	//initialize
 	function initialize()
 	{
-		
+
 	};
-	
+
 	/**
-	 * 
+	 *
 	 * Takes the svg dom obj and parses the data
 	 * to create a layer with groups (if needed) with
 	 * items inside. Should support nested groups.
-	 * 
+	 *
 	 * takes in a svg object (xml dom)
-	 * returns Paper.js Layer 
+	 * returns Paper.js Layer
 	 */
     this.importSVG = function(svg)
     {
     	return layer;
     };
-	
+
 	/**
 	 * Creates a Paper.js Group by parsing
 	 * a specific svg g node
-	 * 
+	 *
 	 * takes in a svg object (xml dom)
 	 * returns Paper.js Group
 	 */
@@ -37,12 +37,12 @@ var ImportSVG = function()
     {
     	return group;
     };
-    
+
 	/**
 	 * Creates a Paper.js Path by parsing
 	 * a specific svg node (rect, path, circle, polygon, etc)
 	 * and creating the right path object based on the svg type.
-	 * 
+	 *
 	 * takes in a svg object (xml dom)
 	 * returns Paper.js Group
 	 */
@@ -50,6 +50,6 @@ var ImportSVG = function()
     {
     	return path;
     };
-	
+
     initialize(); // calls the init function after class is loaded
 };
\ No newline at end of file

From 24f0535bb6444ffd701680375bf254906cc9c7f3 Mon Sep 17 00:00:00 2001
From: Justin Ridgewell <justin@ridgewell.name>
Date: Sat, 15 Sep 2012 19:59:53 -0400
Subject: [PATCH 03/51] Convert tabs to 4 spaces

---
 src/svg/ImportSVG.js | 62 ++++++++++++++++++++++----------------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index d1dfa3a3..6951f521 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -6,49 +6,49 @@
 
 var ImportSVG = function()
 {
-	//initialize
-	function initialize()
-	{
+    //initialize
+    function initialize()
+    {
 
-	};
+    };
 
-	/**
-	 *
-	 * Takes the svg dom obj and parses the data
-	 * to create a layer with groups (if needed) with
-	 * items inside. Should support nested groups.
-	 *
-	 * takes in a svg object (xml dom)
-	 * returns Paper.js Layer
-	 */
+    /**
+     *
+     * Takes the svg dom obj and parses the data
+     * to create a layer with groups (if needed) with
+     * items inside. Should support nested groups.
+     *
+     * takes in a svg object (xml dom)
+     * returns Paper.js Layer
+     */
     this.importSVG = function(svg)
     {
-    	return layer;
+        return layer;
     };
 
-	/**
-	 * Creates a Paper.js Group by parsing
-	 * a specific svg g node
-	 *
-	 * takes in a svg object (xml dom)
-	 * returns Paper.js Group
-	 */
+    /**
+     * Creates a Paper.js Group by parsing
+     * a specific svg g node
+     *
+     * takes in a svg object (xml dom)
+     * returns Paper.js Group
+     */
     function importGroup(svg)
     {
-    	return group;
+        return group;
     };
 
-	/**
-	 * Creates a Paper.js Path by parsing
-	 * a specific svg node (rect, path, circle, polygon, etc)
-	 * and creating the right path object based on the svg type.
-	 *
-	 * takes in a svg object (xml dom)
-	 * returns Paper.js Group
-	 */
+    /**
+     * Creates a Paper.js Path by parsing
+     * a specific svg node (rect, path, circle, polygon, etc)
+     * and creating the right path object based on the svg type.
+     *
+     * takes in a svg object (xml dom)
+     * returns Paper.js Group
+     */
     function importPath(svg)
     {
-    	return path;
+        return path;
     };
 
     initialize(); // calls the init function after class is loaded

From d978520ba30cf5fe863c411ae437e62f40ecc05b Mon Sep 17 00:00:00 2001
From: Justin Ridgewell <justin@ridgewell.name>
Date: Sat, 15 Sep 2012 22:16:07 -0400
Subject: [PATCH 04/51] Reformat code to match the rest of Paper.js

---
 src/svg/ImportSVG.js | 123 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 107 insertions(+), 16 deletions(-)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index 6951f521..a4a1c496 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -4,13 +4,12 @@
  *
  */
 
-var ImportSVG = function()
-{
+var ImportSVG = this.ImportSVG = Base.extend({
     //initialize
-    function initialize()
+    initialize: function()
     {
-
-    };
+    
+    },
 
     /**
      *
@@ -21,10 +20,10 @@ var ImportSVG = function()
      * takes in a svg object (xml dom)
      * returns Paper.js Layer
      */
-    this.importSVG = function(svg)
+    importSVG: function(svg)
     {
-        return layer;
-    };
+        // return layer;
+    },
 
     /**
      * Creates a Paper.js Group by parsing
@@ -33,10 +32,10 @@ var ImportSVG = function()
      * takes in a svg object (xml dom)
      * returns Paper.js Group
      */
-    function importGroup(svg)
+    importGroup: function(svg)
     {
-        return group;
-    };
+        // return group;
+    },
 
     /**
      * Creates a Paper.js Path by parsing
@@ -46,10 +45,102 @@ var ImportSVG = function()
      * takes in a svg object (xml dom)
      * returns Paper.js Group
      */
-    function importPath(svg)
+    importPath: function(svg)
     {
-        return path;
-    };
+        // return path;
+    },
 
-    initialize(); // calls the init function after class is loaded
-};
\ No newline at end of file
+    /**
+     * Creates a Path.Circle Paper.js item
+     *
+     * takes a svg circle node (xml dom)
+     * returns Paper.js Path.Circle item
+     */
+    createCircle: function(svgCircle)
+    {
+        var cx      = svgCircle.cx.baseVal.value || 0;
+        var cy      = svgCircle.cy.baseVal.value || 0;
+        var r       = svgCircle.r.baseVal.value || 0;
+        var center  = new Point(cx, cy);
+        var circle  = new Path.Circle(center, r);
+
+        return circle;
+    },
+
+    /**
+     * Creates a Path.Oval Paper.js item
+     *
+     * takes a svg ellipse node (xml dom)
+     * returns Paper.js Path.Oval item
+     */
+    createOval: function(svgOval)
+    {
+        var cx          = svgOval.cx.baseVal.value || 0;
+        var cy          = svgOval.cy.baseVal.value || 0;
+        var rx          = svgOval.rx.baseVal.value || 0;
+        var ry          = svgOval.ry.baseVal.value || 0;
+
+        var center      = new Point(cx, cy);
+        var offset      = new Point(rx, ry);
+        var topLeft     = center.subtract(offset);
+        var bottomRight = center.add(offset);
+
+        var rect        = new Rectangle(topLeft, bottomRight);
+        var oval        = new Path.Oval(rect);
+
+        return oval;
+    },
+
+    /**
+     * Creates a "rectangle" Paper.js item
+     *
+     * takes a svg rect node (xml dom)
+     * returns either a
+     *   - Path.Rectangle item
+     *   - Path.RoundRectangle item (if the rectangle has rounded corners)
+     */
+    createRectangle: function(svgRectangle)
+    {
+        var x           = svgRectangle.x.baseVal.value || 0;
+        var y           = svgRectangle.y.baseVal.value || 0;
+        var rx          = svgRectangle.rx.baseVal.value || 0;
+        var ry          = svgRectangle.ry.baseVal.value || 0;
+        var width       = svgRectangle.width.baseVal.value || 0;
+        var height      = svgRectangle.height.baseVal.value || 0;
+
+        var topLeft     = new Point(x, y);
+        var size        = new Size(width, height);
+        var rectangle   = new Rectangle(topLeft, size);
+
+        if (rx > 0 || ry > 0) {
+            var cornerSize = new Size(rx, ry);
+            rectangle = new Path.RoundRectangle(rectangle, cornerSize);
+        } else {
+        	rectangle = new Path.Rectangle(rectangle);
+        }
+
+        return rectangle;
+    },
+
+    /**
+     * Creates a Path.Line Paper.js item
+     *
+     * takes a svg line node (xml dom)
+     * returns a Path.Line item
+     */
+    createLine: function(svgLine)
+    {
+        var x1      = svgLine.x1.baseVal.value || 0;
+        var y1      = svgLine.y1.baseVal.value || 0;
+        var x2      = svgLine.x2.baseVal.value || 0;
+        var y2      = svgLine.y2.baseVal.value || 0;
+
+        var from  = new Point(x1, y1);
+        var to  = new Point(x2, y2);
+        var line = new Path.Line(from, to);
+
+        return line;
+    }
+	
+    // initialize(); // calls the init function after class is loaded
+});
\ No newline at end of file

From 9f1d840ada27964f4f104d98c0693d5ada62dee8 Mon Sep 17 00:00:00 2001
From: Justin Ridgewell <justin@ridgewell.name>
Date: Sat, 15 Sep 2012 22:17:06 -0400
Subject: [PATCH 05/51] Todos

---
 src/svg/ImportSVG.js | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index a4a1c496..29e1f120 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -8,7 +8,7 @@ var ImportSVG = this.ImportSVG = Base.extend({
     //initialize
     initialize: function()
     {
-    
+
     },
 
     /**
@@ -22,7 +22,7 @@ var ImportSVG = this.ImportSVG = Base.extend({
      */
     importSVG: function(svg)
     {
-        // return layer;
+        //TODO: return layer;
     },
 
     /**
@@ -34,7 +34,7 @@ var ImportSVG = this.ImportSVG = Base.extend({
      */
     importGroup: function(svg)
     {
-        // return group;
+        //TODO: return group;
     },
 
     /**
@@ -47,7 +47,7 @@ var ImportSVG = this.ImportSVG = Base.extend({
      */
     importPath: function(svg)
     {
-        // return path;
+        //TODO: return path;
     },
 
     /**
@@ -141,6 +141,4 @@ var ImportSVG = this.ImportSVG = Base.extend({
 
         return line;
     }
-	
-    // initialize(); // calls the init function after class is loaded
 });
\ No newline at end of file

From 8659c6b44c1b5247ec0793df742e784d5a409402 Mon Sep 17 00:00:00 2001
From: Justin Ridgewell <justin@ridgewell.name>
Date: Sat, 15 Sep 2012 22:25:19 -0400
Subject: [PATCH 06/51] Reformat the code to match the rest of Paper.js

---
 src/svg/ImportSVG.js | 28 +++++++++++++---------------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index 6951f521..3a25c6fa 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -4,13 +4,13 @@
  *
  */
 
-var ImportSVG = function()
+var ImportSVG = this.ImportSVG = Base.extend({
 {
     //initialize
-    function initialize()
+    initialize: function()
     {
 
-    };
+    },
 
     /**
      *
@@ -21,10 +21,10 @@ var ImportSVG = function()
      * takes in a svg object (xml dom)
      * returns Paper.js Layer
      */
-    this.importSVG = function(svg)
+    importSVG: function(svg)
     {
-        return layer;
-    };
+        //TODO: return layer;
+    },
 
     /**
      * Creates a Paper.js Group by parsing
@@ -33,10 +33,10 @@ var ImportSVG = function()
      * takes in a svg object (xml dom)
      * returns Paper.js Group
      */
-    function importGroup(svg)
+    importGroup: function(svg)
     {
-        return group;
-    };
+        //TODO: return group;
+    },
 
     /**
      * Creates a Paper.js Path by parsing
@@ -46,10 +46,8 @@ var ImportSVG = function()
      * takes in a svg object (xml dom)
      * returns Paper.js Group
      */
-    function importPath(svg)
+    importPath: function(svg)
     {
-        return path;
-    };
-
-    initialize(); // calls the init function after class is loaded
-};
\ No newline at end of file
+        //TODO: return path;
+    }
+});
\ No newline at end of file

From bbef9a9594aed2fd47224200bf9e00bdcbe752c4 Mon Sep 17 00:00:00 2001
From: Justin Ridgewell <justin@ridgewell.name>
Date: Sat, 15 Sep 2012 22:26:43 -0400
Subject: [PATCH 07/51] Add a few helper functions

These will convert directly from SVG objects to Paper.js equivalents.
---
 src/svg/ImportSVG.js | 92 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 92 insertions(+)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index 3a25c6fa..6b15f02c 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -49,5 +49,97 @@ var ImportSVG = this.ImportSVG = Base.extend({
     importPath: function(svg)
     {
         //TODO: return path;
+    },
+
+    /**
+     * Creates a Path.Circle Paper.js item
+     *
+     * takes a svg circle node (xml dom)
+     * returns Paper.js Path.Circle item
+     */
+    createCircle: function(svgCircle)
+    {
+        var cx      = svgCircle.cx.baseVal.value || 0;
+        var cy      = svgCircle.cy.baseVal.value || 0;
+        var r       = svgCircle.r.baseVal.value || 0;
+        var center  = new Point(cx, cy);
+        var circle  = new Path.Circle(center, r);
+
+        return circle;
+    },
+
+    /**
+     * Creates a Path.Oval Paper.js item
+     *
+     * takes a svg ellipse node (xml dom)
+     * returns Paper.js Path.Oval item
+     */
+    createOval: function(svgOval)
+    {
+        var cx          = svgOval.cx.baseVal.value || 0;
+        var cy          = svgOval.cy.baseVal.value || 0;
+        var rx          = svgOval.rx.baseVal.value || 0;
+        var ry          = svgOval.ry.baseVal.value || 0;
+
+        var center      = new Point(cx, cy);
+        var offset      = new Point(rx, ry);
+        var topLeft     = center.subtract(offset);
+        var bottomRight = center.add(offset);
+
+        var rect        = new Rectangle(topLeft, bottomRight);
+        var oval        = new Path.Oval(rect);
+
+        return oval;
+    },
+
+    /**
+     * Creates a "rectangle" Paper.js item
+     *
+     * takes a svg rect node (xml dom)
+     * returns either a
+     *   - Path.Rectangle item
+     *   - Path.RoundRectangle item (if the rectangle has rounded corners)
+     */
+    createRectangle: function(svgRectangle)
+    {
+        var x           = svgRectangle.x.baseVal.value || 0;
+        var y           = svgRectangle.y.baseVal.value || 0;
+        var rx          = svgRectangle.rx.baseVal.value || 0;
+        var ry          = svgRectangle.ry.baseVal.value || 0;
+        var width       = svgRectangle.width.baseVal.value || 0;
+        var height      = svgRectangle.height.baseVal.value || 0;
+
+        var topLeft     = new Point(x, y);
+        var size        = new Size(width, height);
+        var rectangle   = new Rectangle(topLeft, size);
+
+        if (rx > 0 || ry > 0) {
+            var cornerSize = new Size(rx, ry);
+            rectangle = new Path.RoundRectangle(rectangle, cornerSize);
+        } else {
+        	rectangle = new Path.Rectangle(rectangle);
+        }
+
+        return rectangle;
+    },
+
+    /**
+     * Creates a Path.Line Paper.js item
+     *
+     * takes a svg line node (xml dom)
+     * returns a Path.Line item
+     */
+    createLine: function(svgLine)
+    {
+        var x1      = svgLine.x1.baseVal.value || 0;
+        var y1      = svgLine.y1.baseVal.value || 0;
+        var x2      = svgLine.x2.baseVal.value || 0;
+        var y2      = svgLine.y2.baseVal.value || 0;
+
+        var from  = new Point(x1, y1);
+        var to  = new Point(x2, y2);
+        var line = new Path.Line(from, to);
+
+        return line;
     }
 });
\ No newline at end of file

From 7879b4b61b462036ce85d5c3740547d8cc38c12c Mon Sep 17 00:00:00 2001
From: Justin Ridgewell <justin@ridgewell.name>
Date: Sat, 15 Sep 2012 23:58:39 -0400
Subject: [PATCH 08/51] Convert from 4 spaces to tabs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Oops. Paper.js uses tabs…
---
 src/svg/ImportSVG.js | 238 +++++++++++++++++++++----------------------
 1 file changed, 119 insertions(+), 119 deletions(-)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index 6b15f02c..268c4a75 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -6,140 +6,140 @@
 
 var ImportSVG = this.ImportSVG = Base.extend({
 {
-    //initialize
-    initialize: function()
-    {
+	//initialize
+	initialize: function()
+	{
 
-    },
+	},
 
-    /**
-     *
-     * Takes the svg dom obj and parses the data
-     * to create a layer with groups (if needed) with
-     * items inside. Should support nested groups.
-     *
-     * takes in a svg object (xml dom)
-     * returns Paper.js Layer
-     */
-    importSVG: function(svg)
-    {
-        //TODO: return layer;
-    },
+	/**
+	 *
+	 * Takes the svg dom obj and parses the data
+	 * to create a layer with groups (if needed) with
+	 * items inside. Should support nested groups.
+	 *
+	 * takes in a svg object (xml dom)
+	 * returns Paper.js Layer
+	 */
+	importSVG: function(svg)
+	{
+		//TODO: return layer;
+	},
 
-    /**
-     * Creates a Paper.js Group by parsing
-     * a specific svg g node
-     *
-     * takes in a svg object (xml dom)
-     * returns Paper.js Group
-     */
-    importGroup: function(svg)
-    {
-        //TODO: return group;
-    },
+	/**
+	 * Creates a Paper.js Group by parsing
+	 * a specific svg g node
+	 *
+	 * takes in a svg object (xml dom)
+	 * returns Paper.js Group
+	 */
+	importGroup: function(svg)
+	{
+		//TODO: return group;
+	},
 
-    /**
-     * Creates a Paper.js Path by parsing
-     * a specific svg node (rect, path, circle, polygon, etc)
-     * and creating the right path object based on the svg type.
-     *
-     * takes in a svg object (xml dom)
-     * returns Paper.js Group
-     */
-    importPath: function(svg)
-    {
-        //TODO: return path;
-    },
+	/**
+	 * Creates a Paper.js Path by parsing
+	 * a specific svg node (rect, path, circle, polygon, etc)
+	 * and creating the right path object based on the svg type.
+	 *
+	 * takes in a svg object (xml dom)
+	 * returns Paper.js Group
+	 */
+	importPath: function(svg)
+	{
+		//TODO: return path;
+	},
 
-    /**
-     * Creates a Path.Circle Paper.js item
-     *
-     * takes a svg circle node (xml dom)
-     * returns Paper.js Path.Circle item
-     */
-    createCircle: function(svgCircle)
-    {
-        var cx      = svgCircle.cx.baseVal.value || 0;
-        var cy      = svgCircle.cy.baseVal.value || 0;
-        var r       = svgCircle.r.baseVal.value || 0;
-        var center  = new Point(cx, cy);
-        var circle  = new Path.Circle(center, r);
+	/**
+	 * Creates a Path.Circle Paper.js item
+	 *
+	 * takes a svg circle node (xml dom)
+	 * returns Paper.js Path.Circle item
+	 */
+	createCircle: function(svgCircle)
+	{
+		var cx		= svgCircle.cx.baseVal.value || 0;
+		var cy		= svgCircle.cy.baseVal.value || 0;
+		var r		= svgCircle.r.baseVal.value || 0;
+		var center	= new Point(cx, cy);
+		var circle	= new Path.Circle(center, r);
 
-        return circle;
-    },
+		return circle;
+	},
 
-    /**
-     * Creates a Path.Oval Paper.js item
-     *
-     * takes a svg ellipse node (xml dom)
-     * returns Paper.js Path.Oval item
-     */
-    createOval: function(svgOval)
-    {
-        var cx          = svgOval.cx.baseVal.value || 0;
-        var cy          = svgOval.cy.baseVal.value || 0;
-        var rx          = svgOval.rx.baseVal.value || 0;
-        var ry          = svgOval.ry.baseVal.value || 0;
+	/**
+	 * Creates a Path.Oval Paper.js item
+	 *
+	 * takes a svg ellipse node (xml dom)
+	 * returns Paper.js Path.Oval item
+	 */
+	createOval: function(svgOval)
+	{
+		var cx			= svgOval.cx.baseVal.value || 0;
+		var cy			= svgOval.cy.baseVal.value || 0;
+		var rx			= svgOval.rx.baseVal.value || 0;
+		var ry			= svgOval.ry.baseVal.value || 0;
 
-        var center      = new Point(cx, cy);
-        var offset      = new Point(rx, ry);
-        var topLeft     = center.subtract(offset);
-        var bottomRight = center.add(offset);
+		var center		= new Point(cx, cy);
+		var offset		= new Point(rx, ry);
+		var topLeft		= center.subtract(offset);
+		var bottomRight	= center.add(offset);
 
-        var rect        = new Rectangle(topLeft, bottomRight);
-        var oval        = new Path.Oval(rect);
+		var rect		= new Rectangle(topLeft, bottomRight);
+		var oval		= new Path.Oval(rect);
 
-        return oval;
-    },
+		return oval;
+	},
 
-    /**
-     * Creates a "rectangle" Paper.js item
-     *
-     * takes a svg rect node (xml dom)
-     * returns either a
-     *   - Path.Rectangle item
-     *   - Path.RoundRectangle item (if the rectangle has rounded corners)
-     */
-    createRectangle: function(svgRectangle)
-    {
-        var x           = svgRectangle.x.baseVal.value || 0;
-        var y           = svgRectangle.y.baseVal.value || 0;
-        var rx          = svgRectangle.rx.baseVal.value || 0;
-        var ry          = svgRectangle.ry.baseVal.value || 0;
-        var width       = svgRectangle.width.baseVal.value || 0;
-        var height      = svgRectangle.height.baseVal.value || 0;
+	/**
+	 * Creates a "rectangle" Paper.js item
+	 *
+	 * takes a svg rect node (xml dom)
+	 * returns either a
+	 *   - Path.Rectangle item
+	 *   - Path.RoundRectangle item (if the rectangle has rounded corners)
+	 */
+	createRectangle: function(svgRectangle)
+	{
+		var x			= svgRectangle.x.baseVal.value || 0;
+		var y			= svgRectangle.y.baseVal.value || 0;
+		var rx			= svgRectangle.rx.baseVal.value || 0;
+		var ry			= svgRectangle.ry.baseVal.value || 0;
+		var width		= svgRectangle.width.baseVal.value || 0;
+		var height		= svgRectangle.height.baseVal.value || 0;
 
-        var topLeft     = new Point(x, y);
-        var size        = new Size(width, height);
-        var rectangle   = new Rectangle(topLeft, size);
+		var topLeft		= new Point(x, y);
+		var size		= new Size(width, height);
+		var rectangle	= new Rectangle(topLeft, size);
 
-        if (rx > 0 || ry > 0) {
-            var cornerSize = new Size(rx, ry);
-            rectangle = new Path.RoundRectangle(rectangle, cornerSize);
-        } else {
-        	rectangle = new Path.Rectangle(rectangle);
-        }
+		if (rx > 0 || ry > 0) {
+			var cornerSize = new Size(rx, ry);
+			rectangle = new Path.RoundRectangle(rectangle, cornerSize);
+		} else {
+			rectangle = new Path.Rectangle(rectangle);
+		}
 
-        return rectangle;
-    },
+		return rectangle;
+	},
 
-    /**
-     * Creates a Path.Line Paper.js item
-     *
-     * takes a svg line node (xml dom)
-     * returns a Path.Line item
-     */
-    createLine: function(svgLine)
-    {
-        var x1      = svgLine.x1.baseVal.value || 0;
-        var y1      = svgLine.y1.baseVal.value || 0;
-        var x2      = svgLine.x2.baseVal.value || 0;
-        var y2      = svgLine.y2.baseVal.value || 0;
+	/**
+	 * Creates a Path.Line Paper.js item
+	 *
+	 * takes a svg line node (xml dom)
+	 * returns a Path.Line item
+	 */
+	createLine: function(svgLine)
+	{
+		var x1		= svgLine.x1.baseVal.value || 0;
+		var y1		= svgLine.y1.baseVal.value || 0;
+		var x2		= svgLine.x2.baseVal.value || 0;
+		var y2		= svgLine.y2.baseVal.value || 0;
 
-        var from  = new Point(x1, y1);
-        var to  = new Point(x2, y2);
-        var line = new Path.Line(from, to);
+		var from	= new Point(x1, y1);
+		var to		= new Point(x2, y2);
+		var line	= new Path.Line(from, to);
 
-        return line;
-    }
+		return line;
+	}
 });
\ No newline at end of file

From edd8f67f8dc1493f5908f6aefe7f21e3e316f08b Mon Sep 17 00:00:00 2001
From: Justin Ridgewell <justin@ridgewell.name>
Date: Sun, 16 Sep 2012 00:09:02 -0400
Subject: [PATCH 09/51] Fix error

Shouldn't have two of these...
---
 src/svg/ImportSVG.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index 268c4a75..4793faae 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -5,7 +5,6 @@
  */
 
 var ImportSVG = this.ImportSVG = Base.extend({
-{
 	//initialize
 	initialize: function()
 	{
@@ -13,7 +12,6 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	},
 
 	/**
-	 *
 	 * Takes the svg dom obj and parses the data
 	 * to create a layer with groups (if needed) with
 	 * items inside. Should support nested groups.

From 8cf70ca6e1f73e6fe43c64487aa91efe9edb8d44 Mon Sep 17 00:00:00 2001
From: Justin Ridgewell <justin@ridgewell.name>
Date: Sun, 16 Sep 2012 00:09:39 -0400
Subject: [PATCH 10/51] Rename the create* functions to import*

Keeps in line with the naming of the other functions
---
 src/svg/ImportSVG.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index 4793faae..2e2b74e0 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -55,7 +55,7 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	 * takes a svg circle node (xml dom)
 	 * returns Paper.js Path.Circle item
 	 */
-	createCircle: function(svgCircle)
+	importCircle: function(svgCircle)
 	{
 		var cx		= svgCircle.cx.baseVal.value || 0;
 		var cy		= svgCircle.cy.baseVal.value || 0;
@@ -72,7 +72,7 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	 * takes a svg ellipse node (xml dom)
 	 * returns Paper.js Path.Oval item
 	 */
-	createOval: function(svgOval)
+	importOval: function(svgOval)
 	{
 		var cx			= svgOval.cx.baseVal.value || 0;
 		var cy			= svgOval.cy.baseVal.value || 0;
@@ -98,7 +98,7 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	 *   - Path.Rectangle item
 	 *   - Path.RoundRectangle item (if the rectangle has rounded corners)
 	 */
-	createRectangle: function(svgRectangle)
+	importRectangle: function(svgRectangle)
 	{
 		var x			= svgRectangle.x.baseVal.value || 0;
 		var y			= svgRectangle.y.baseVal.value || 0;
@@ -127,7 +127,7 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	 * takes a svg line node (xml dom)
 	 * returns a Path.Line item
 	 */
-	createLine: function(svgLine)
+	importLine: function(svgLine)
 	{
 		var x1		= svgLine.x1.baseVal.value || 0;
 		var y1		= svgLine.y1.baseVal.value || 0;

From 2ce23aacc2f4e5c9788ef0370932ee80e7cb9fac Mon Sep 17 00:00:00 2001
From: Justin Ridgewell <justin@ridgewell.name>
Date: Sun, 16 Sep 2012 00:10:14 -0400
Subject: [PATCH 11/51] Implement importSVG, importGroup, and importPath

---
 src/svg/ImportSVG.js | 40 ++++++++++++++++++++++++++++++++++++----
 1 file changed, 36 insertions(+), 4 deletions(-)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index 2e2b74e0..d7c09643 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -21,7 +21,11 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	 */
 	importSVG: function(svg)
 	{
-		//TODO: return layer;
+		var layer = new Layer();
+		groups = this.importGroup(svg);
+		layer.addChild(groups);
+
+		return layer;
 	},
 
 	/**
@@ -33,7 +37,18 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	 */
 	importGroup: function(svg)
 	{
-		//TODO: return group;
+		var group = new Group();
+		var child;
+		for (var i in svg.childNodes) {
+			child = svg.childNodes[i];
+			if (child.nodeType != 1) {
+				continue;
+			}
+			item = this.importPath(child);
+			group.addChild(item);
+		}
+		
+		return group;
 	},
 
 	/**
@@ -42,11 +57,28 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	 * and creating the right path object based on the svg type.
 	 *
 	 * takes in a svg object (xml dom)
-	 * returns Paper.js Group
+	 * returns Paper.js Item
 	 */
 	importPath: function(svg)
 	{
-		//TODO: return path;
+		switch (svg.nodeName.toLowerCase()) {
+			case 'line':
+				item = this.importLine(svg);
+				break;
+			case 'rect':
+				item = this.importRectangle(svg);
+				break;
+			case 'ellipse':
+				item = this.importOval(svg);
+				break;
+			case 'g':
+				item = this.importGroup(svg);
+				break;
+			default:
+			break;
+		}
+		
+		return item;
 	},
 
 	/**

From 2f5dcce61d81c7bb159d9824a225530cacd8c41a Mon Sep 17 00:00:00 2001
From: skierons <skierons@stetson.edu>
Date: Sun, 16 Sep 2012 00:13:14 -0400
Subject: [PATCH 12/51] Jacob and I added a bit to the exportPath class. The
 initialize function was not working correctly and JT said he would fix that.
 So we initialized svgObj in the function for the meantime. We added svgRect
 and svgPoint objects for testing purposes to figure out the xml svg format.
 Recovered points, strokecolor, fillcolor, and stroke width from the input
 path. The last thing we need to do for extracting path data is to find the
 point definitions for each point in the path. Waiting on response from head
 coders to find out what type of path is passed in for simple conversions
 (such as: Rectangle path, Circle path, etc.). We added a method called
 RGBConverter to covnert colors into hexadecimal format for xml.

---
 examples/Tools/SVGCircles.html | 35 +++++++++++++
 examples/Tools/SVGStars.html   | 34 +++++++++++++
 src/svg/ExportSVG.js           | 89 ++++++++++++++++++++++++++++++++--
 3 files changed, 153 insertions(+), 5 deletions(-)
 create mode 100644 examples/Tools/SVGCircles.html
 create mode 100644 examples/Tools/SVGStars.html

diff --git a/examples/Tools/SVGCircles.html b/examples/Tools/SVGCircles.html
new file mode 100644
index 00000000..1878f18a
--- /dev/null
+++ b/examples/Tools/SVGCircles.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Circles</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+	<script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+			// All newly created items will receive
+			// these style properties:
+			project.currentStyle = {
+				fillColor: 'white',
+				strokeColor: 'black'
+			};
+
+			var path;
+			function onMouseDrag(event) {
+				// The radius is the distance between the position
+				// where the user clicked and the current position
+				// of the mouse.
+				var radius = (event.downPoint - event.point).length;
+				path = new Path.Circle(event.downPoint, radius);
+				var svg = new ExportSVG();
+				var svgout = svg.exportPath(path);
+				console.log(svgout);
+				path.removeOnDrag();
+
+			};
+	</script>
+</head>
+<body>
+	<canvas id="canvas" resize></canvas>
+</body>
+</html>
diff --git a/examples/Tools/SVGStars.html b/examples/Tools/SVGStars.html
new file mode 100644
index 00000000..b0550020
--- /dev/null
+++ b/examples/Tools/SVGStars.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Stars</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+        <script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+			function onMouseDown(event) {
+				var hue = Math.random() * 360;
+				project.currentStyle.fillColor = new HsbColor(hue, 1, 1);
+			}
+
+			function onMouseDrag(event) {
+				var delta = event.point - event.downPoint;
+				var radius = delta.length;
+				var points = 5 + Math.round(radius / 50);
+				var position = event.downPoint;
+				var path = new Path.Star(position, points, radius / 2, radius);
+                                var svg = new ExportSVG();
+                                var svgout = svg.exportPath(path);
+                                console.log(svgout);
+				path.rotate(delta.angle);
+				// Remove the path automatically before the next mouse drag
+				// event:
+				path.removeOnDrag();
+			}
+	</script>
+</head>
+<body>
+	<canvas id="canvas" resize></canvas>
+</body>
+</html>
diff --git a/src/svg/ExportSVG.js b/src/svg/ExportSVG.js
index 79d88b78..064caead 100644
--- a/src/svg/ExportSVG.js
+++ b/src/svg/ExportSVG.js
@@ -6,16 +6,23 @@
  *  var svg=document.createElementNS(NS,"svg");
  */
 
+ 
+
 
 var ExportSVG = function()
 {
 	var svgObj = null; // xml dom object (svg typed)
+	//var blarg = this;
 	
 	//initialize the svgObj and what ever else.
-	function initialize()
+	/*function initialize()
 	{
+		var NS = "http://www.w3.org/2000/svg";
+		svgObj = document.createElementNS(NS,"svg");
 		
-	};
+		console.log(svgObj);
+
+	};*/
 	
 	/**
 	 * 
@@ -83,8 +90,80 @@ var ExportSVG = function()
 	 */
     this.exportPath = function(path)
     {
-    	return svgObj;
+    	//this.initialize();
+    	//console.log(blarg.svgObj);
+	var NS = "http://www.w3.org/2000/svg";
+	svgObj = document.createElementNS(NS,"svg");
+	svgRect = document.createElementNS(NS,"rect");
+	svgRect.height.baseVal.value = 50;
+	svgRect.width.baseVal.value = 60;
+	svgRect.x.baseVal.value = 50;
+	svgObj.appendChild(svgRect);
+
+	svgPoint = document.createElementNS(NS,"point");
+	svgPoint.setAttribute("x",50);
+	svgPoint.setAttribute("y",100);
+	svgObj.appendChild(svgPoint);
+
+	svgPath = document.createElementNS(NS, "path");
+		
+    	console.log(svgObj);
+	var pathClone = path.clone();
+	var segArray = pathClone.getSegments();
+
+	var pointArray = new Array();
+	for(i = 0; i < segArray.length; i++)
+	{		
+		pointArray[i] = segArray[i].getPoint();
+	}
+	var pointString = "";
+	for(i = 0; i < pointArray.length; i++)
+	{
+		var x = pointArray[i].getX();
+		x = x - (x % 1);
+		var y = pointArray[i].getY();
+		y = y - (y % 1);
+		if(i === 0)
+		{
+			pointString+= "M " + x + " " + y + " ";
+		}
+		else
+		{
+			pointString+= "L " + x + " " + y + " ";
+		}
+	}
+	if(pathClone.getClosed())
+	{
+		pointString += "z";
+	}
+	
+	var strokeRed = RGBconverter(pathClone.strokeColor.red);
+	var strokeGreen = RGBconverter(pathClone.strokeColor.green);
+	var strokeBlue = RGBconverter(pathClone.strokeColor.blue);
+	var strokeRGB = "#" + strokeRed + strokeGreen + strokeBlue;
+	
+	var fillRed = RGBconverter(pathClone.fillColor.red);
+	var fillGreen = RGBconverter(pathClone.fillColor.green);
+	var fillBlue = RGBconverter(pathClone.fillColor.blue);
+	var fillRGB = "#" + fillRed + fillGreen + fillBlue;
+
+	svgPath.setAttribute("d", pointString);
+	svgPath.setAttribute("stroke", strokeRGB);
+	svgPath.setAttribute("fill", fillRGB);
+	svgPath.setAttribute("stroke-width",pathClone.strokeWidth);
+	svgObj.appendChild(svgPath);i
+
+	console.log(svgObj);
+	return svgObj;
     };
 
-    initialize(); // calls the init function after class is loaded
-};
\ No newline at end of file
+    function RGBconverter(deciColor)
+    {
+	var decColor = Math.round(deciColor * 255);
+	var hexColor = decColor.toString(16);
+	hexColor = hexColor.length > 1? hexColor : "0" + hexColor;
+	return hexColor;
+    };
+
+    //initialize(); // calls the init function after class is loaded
+};

From 9218664a67edd224a4dabd1ce909da42ed827f5a Mon Sep 17 00:00:00 2001
From: Justin Ridgewell <justin@ridgewell.name>
Date: Sun, 16 Sep 2012 01:01:28 -0400
Subject: [PATCH 13/51] Remove the initialize function

I'm not using it for anything
---
 src/svg/ImportSVG.js | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index d7c09643..2c583e54 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -5,12 +5,6 @@
  */
 
 var ImportSVG = this.ImportSVG = Base.extend({
-	//initialize
-	initialize: function()
-	{
-
-	},
-
 	/**
 	 * Takes the svg dom obj and parses the data
 	 * to create a layer with groups (if needed) with

From 2952e01fc596618fd45f69fa39fd1f5e97fd8178 Mon Sep 17 00:00:00 2001
From: Justin Ridgewell <justin@ridgewell.name>
Date: Sun, 16 Sep 2012 01:02:00 -0400
Subject: [PATCH 14/51] Change the import* functions to private

---
 src/svg/ImportSVG.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index 2c583e54..6b92b44f 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -57,13 +57,13 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	{
 		switch (svg.nodeName.toLowerCase()) {
 			case 'line':
-				item = this.importLine(svg);
+				item = this._importLine(svg);
 				break;
 			case 'rect':
-				item = this.importRectangle(svg);
+				item = this._importRectangle(svg);
 				break;
 			case 'ellipse':
-				item = this.importOval(svg);
+				item = this._importOval(svg);
 				break;
 			case 'g':
 				item = this.importGroup(svg);
@@ -81,7 +81,7 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	 * takes a svg circle node (xml dom)
 	 * returns Paper.js Path.Circle item
 	 */
-	importCircle: function(svgCircle)
+	_importCircle: function(svgCircle)
 	{
 		var cx		= svgCircle.cx.baseVal.value || 0;
 		var cy		= svgCircle.cy.baseVal.value || 0;
@@ -98,7 +98,7 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	 * takes a svg ellipse node (xml dom)
 	 * returns Paper.js Path.Oval item
 	 */
-	importOval: function(svgOval)
+	_importOval: function(svgOval)
 	{
 		var cx			= svgOval.cx.baseVal.value || 0;
 		var cy			= svgOval.cy.baseVal.value || 0;
@@ -124,7 +124,7 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	 *   - Path.Rectangle item
 	 *   - Path.RoundRectangle item (if the rectangle has rounded corners)
 	 */
-	importRectangle: function(svgRectangle)
+	_importRectangle: function(svgRectangle)
 	{
 		var x			= svgRectangle.x.baseVal.value || 0;
 		var y			= svgRectangle.y.baseVal.value || 0;
@@ -153,7 +153,7 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	 * takes a svg line node (xml dom)
 	 * returns a Path.Line item
 	 */
-	importLine: function(svgLine)
+	_importLine: function(svgLine)
 	{
 		var x1		= svgLine.x1.baseVal.value || 0;
 		var y1		= svgLine.y1.baseVal.value || 0;

From 64f34e6dfd4e8935a0c49c85957042e2349de438 Mon Sep 17 00:00:00 2001
From: Justin Ridgewell <justin@ridgewell.name>
Date: Sun, 16 Sep 2012 01:02:23 -0400
Subject: [PATCH 15/51] Add _importText

---
 src/svg/ImportSVG.js | 29 +++++++++++++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index 6b92b44f..7653034a 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -68,6 +68,9 @@ var ImportSVG = this.ImportSVG = Base.extend({
 			case 'g':
 				item = this.importGroup(svg);
 				break;
+			case 'text':
+				item = this._importText(svg);
+				break;
 			default:
 			break;
 		}
@@ -165,5 +168,31 @@ var ImportSVG = this.ImportSVG = Base.extend({
 		var line	= new Path.Line(from, to);
 
 		return line;
+	},
+
+	/**
+	 * Creates a PointText Paper.js item
+	 *
+	 * takes a svg text node (xml dom)
+	 * returns a PointText item
+	 */
+	_importText: function(svgText)
+	{
+		//TODO: Extend this for multiple values
+		var x	= svgText.x.baseVal.getItem(0).value || 0;
+		var y	= svgText.y.baseVal.getItem(0).value || 0;
+		//END:Todo
+		
+		var dx; //character kerning
+		var dy; //character baseline
+		var rotate; //character rotation
+		var textLength; //the width of the containing box
+		var lengthAdjust; //
+		var textContent = svgText.textContent || "";
+		
+		var topLeft = new Point(x, y);
+		var text = new PointText(topLeft);
+		text.content = textContent;
+		return text;
 	}
 });
\ No newline at end of file

From 0b8e9407989f6608466ecd0dfadcc7c868ac4605 Mon Sep 17 00:00:00 2001
From: Justin Ridgewell <justin@ridgewell.name>
Date: Sun, 16 Sep 2012 01:02:40 -0400
Subject: [PATCH 16/51] Create an example page for ImportSVG

---
 examples/Scripts/ImportSVG.html | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 examples/Scripts/ImportSVG.html

diff --git a/examples/Scripts/ImportSVG.html b/examples/Scripts/ImportSVG.html
new file mode 100644
index 00000000..da8d79cc
--- /dev/null
+++ b/examples/Scripts/ImportSVG.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Stroke Bounds</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		project.currentStyle = {
+		    strokeColor: 'black',
+		    strokeWidth: 2,
+		    strokeCap: 'round'
+		};
+		var isvg = new ImportSVG;
+		isvg.importSVG(document.getElementById('svg'));
+	</script>
+</head>
+<body>	
+	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:500px; background:black;" id="svg">
+		<g>
+  			<line x1="4" y1="20" x2="200" y2="200" style="stroke:red;stroke-width:1" id="line" />
+  			<rect x="200" y="20" rx="20" ry="10" width="150" height="150" style="fill:green" id="round" />
+		</g>
+		<g>
+			<rect x="250" y="180" width="150" height="150" style="fill:blue" id="rect" />
+			<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;" id="oval" />
+		</g>
+		<text x="20" y="15" fill="green">I love SVG</text>
+	</svg>
+	<canvas id="canvas" width="500" height="500"></canvas>
+</body>
+</html>
\ No newline at end of file

From f43abe2f32311125c54c6b18a86043d323cabf2a Mon Sep 17 00:00:00 2001
From: jnighlight <jlites@stetson.edu>
Date: Sun, 16 Sep 2012 15:38:22 -0400
Subject: [PATCH 17/51] Mostly more Experimenting, commiting it for practicing
 across computers. Noticed that curveto and quadratic bezier curveto can be
 differentiated by format of the handleIn/handleOut variables in each segment
 (we think) If either handleIn.x and handleOut.x = 0 OR handleIn.y and
 handleOut.y = 0, then that means the curve is a simple curveTo tag in SVG. If
 handleIn.x = -handleOut.x AND handleIn.y = -handleOut.y, then you have a
 quadriatic Bezier Curveto in SVG (using the Q tag). We *HOPE* and think that
 that curveTo(through, to) (a method creating an arc that passes through the
 "through" point and ends at the "to" point) simply creates 2 segments, each
 with a handleIn and Out, which can be read and put into SVG seperately,
 making our lives a lot easier. Created more SVG test files. Made RGBConverter
 more efficient with another method to help reduce copied lines of code.

---
 examples/Tools/SVGBezierTool.html | 89 +++++++++++++++++++++++++++++++
 examples/Tools/SVGGrid.html       | 48 +++++++++++++++++
 src/svg/ExportSVG.js              | 53 +++++++++++++-----
 3 files changed, 177 insertions(+), 13 deletions(-)
 create mode 100644 examples/Tools/SVGBezierTool.html
 create mode 100644 examples/Tools/SVGGrid.html

diff --git a/examples/Tools/SVGBezierTool.html b/examples/Tools/SVGBezierTool.html
new file mode 100644
index 00000000..e09541a1
--- /dev/null
+++ b/examples/Tools/SVGBezierTool.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Bezier Tool</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+	<script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		var path;
+		var types = ['point', 'handleIn', 'handleOut'];
+		function findHandle(point) {
+			for (var i = 0, l = path.segments.length; i < l; i++) {
+				for (var j = 0; j < 3; j++) {
+					var type = types[j];
+					var segment = path.segments[i];
+					var segmentPoint = type == 'point'
+							? segment.point
+							: segment.point + segment[type];
+					var distance = (point - segmentPoint).length;
+					if (distance < 3) {
+						return {
+							type: type,
+							segment: segment
+						};
+					}
+				}
+			}
+			return null;
+		}
+
+		var currentSegment, mode, type;
+		function onMouseDown(event) {
+			if (currentSegment)
+				currentSegment.selected = false;
+			mode = type = currentSegment = null;
+
+			if (!path) {
+				path = new Path();
+				path.fillColor = new HsbColor(360 * Math.random(), 1, 1, 0.5);
+			}
+
+			var result = findHandle(event.point);
+			if (result) {
+				currentSegment = result.segment;
+				type = result.type;
+				if (path.segments.length > 1 && result.type == 'point'
+						&& result.segment.index == 0) {
+					mode = 'close';
+					path.closed = true;
+						var svg = new ExportSVG();
+						var svgout = svg.exportPath(path);
+						console.log(svgout);
+					path.selected = false;
+					path = null;
+				}
+			}
+
+			if (mode != 'close') {
+				mode = currentSegment ? 'move' : 'add';
+				if (!currentSegment)
+					currentSegment = path.add(event.point);
+				currentSegment.selected = true;
+			}
+		}
+
+		function onMouseDrag(event) {
+			if (mode == 'move' && type == 'point') {
+				currentSegment.point = event.point;
+			} else if (mode != 'close') {
+				var delta = event.delta.clone();
+				if (type == 'handleOut' || mode == 'add')
+					delta = -delta;
+				currentSegment.handleIn += delta;
+				currentSegment.handleOut -= delta;
+			}
+		}
+	</script>
+</head>
+<body>
+	<p>
+	An emulation of a vector pen tool.
+	Click and drag to add a points.<br/>
+	Drag segment handles and points to manipulate them.
+	Close the path to start a new one.
+	</p>
+	<canvas id="canvas" resize></canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/Tools/SVGGrid.html b/examples/Tools/SVGGrid.html
new file mode 100644
index 00000000..0fd8e5a9
--- /dev/null
+++ b/examples/Tools/SVGGrid.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Grid</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+	<script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		/////////////////////////////////////////////////////////////////////
+		// Values
+
+		tool.fixedDistance = 10;
+
+		var values = { size: tool.fixedDistance };
+
+		/////////////////////////////////////////////////////////////////////
+		// Mouse handling
+
+		var point, path;
+
+		function getPos(pt) {
+			return (pt / values.size).round() * values.size;
+		}
+
+		function onMouseDown(event) {
+			point = getPos(event.point);
+			path = new Path();
+			path.strokeColor = 'black';
+			path.add(point);
+		}
+
+		function onMouseDrag(event) {
+			var p = getPos(event.point);
+			if (point != p) {
+				path.add(p);
+				point = p;
+			}
+				var svg = new ExportSVG();
+				var svgout = svg.exportPath(path);
+				console.log(svgout);
+		}
+	</script>
+</head>
+<body>
+	<canvas id="canvas" resize></canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/svg/ExportSVG.js b/src/svg/ExportSVG.js
index 064caead..20b36802 100644
--- a/src/svg/ExportSVG.js
+++ b/src/svg/ExportSVG.js
@@ -112,9 +112,17 @@ var ExportSVG = function()
 	var segArray = pathClone.getSegments();
 
 	var pointArray = new Array();
+	var handleInArray = new Array();
+	var handleOutArray = new Array();
 	for(i = 0; i < segArray.length; i++)
 	{		
 		pointArray[i] = segArray[i].getPoint();
+		handleInArray[i] = segArray[i].getHandleIn();
+		handleOutArray[i] = segArray[i].getHandleOut();
+
+		console.log("point " + i + ": " + pointArray[i]);
+		console.log("HI " + i + ": " + handleInArray[i]);
+		console.log("HO " + i + ": " + handleOutArray[i]);
 	}
 	var pointString = "";
 	for(i = 0; i < pointArray.length; i++)
@@ -137,19 +145,29 @@ var ExportSVG = function()
 		pointString += "z";
 	}
 	
-	var strokeRed = RGBconverter(pathClone.strokeColor.red);
-	var strokeGreen = RGBconverter(pathClone.strokeColor.green);
-	var strokeBlue = RGBconverter(pathClone.strokeColor.blue);
-	var strokeRGB = "#" + strokeRed + strokeGreen + strokeBlue;
-	
-	var fillRed = RGBconverter(pathClone.fillColor.red);
-	var fillGreen = RGBconverter(pathClone.fillColor.green);
-	var fillBlue = RGBconverter(pathClone.fillColor.blue);
-	var fillRGB = "#" + fillRed + fillGreen + fillBlue;
+	svgPath.setAttribute("d",pointString);
 
-	svgPath.setAttribute("d", pointString);
-	svgPath.setAttribute("stroke", strokeRGB);
-	svgPath.setAttribute("fill", fillRGB);
+	if(pathClone.strokeColor != undefined)
+	{
+		var strokeRed = pathClone.strokeColor.red;
+		var strokeGreen = pathClone.strokeColor.green;
+		var strokeBlue = pathClone.strokeColor.blue;
+		var strokeRGB = RGBtoHex(strokeRed, strokeGreen, strokeBlue);
+		svgPath.setAttribute("stroke", strokeRGB);
+	}
+	
+	if(pathClone.fillColor != undefined)
+	{
+		var fillRed = pathClone.fillColor.red;
+		var fillGreen = pathClone.fillColor.green;
+		var fillBlue = pathClone.fillColor.blue;
+		var fillRGB = RGBtoHex(fillRed, fillGreen, fillBlue);
+		svgPath.setAttribute("fill", fillRGB);
+	}
+
+	//svgPath.setAttribute("d", pointString);
+	//svgPath.setAttribute("stroke", strokeRGB);
+	//svgPath.setAttribute("fill", fillRGB);
 	svgPath.setAttribute("stroke-width",pathClone.strokeWidth);
 	svgObj.appendChild(svgPath);i
 
@@ -157,7 +175,7 @@ var ExportSVG = function()
 	return svgObj;
     };
 
-    function RGBconverter(deciColor)
+    function RGBConverter(deciColor)
     {
 	var decColor = Math.round(deciColor * 255);
 	var hexColor = decColor.toString(16);
@@ -165,5 +183,14 @@ var ExportSVG = function()
 	return hexColor;
     };
 
+    function RGBtoHex(red, green, blue)
+    {
+    	var redVal = RGBConverter(red);
+	var greenVal = RGBConverter(green);
+	var blueVal = RGBConverter(blue);
+	return "#" + redVal + greenVal + blueVal;
+    }
+
+
     //initialize(); // calls the init function after class is loaded
 };

From b582e96d76973921de990116645ca4895e269da0 Mon Sep 17 00:00:00 2001
From: skierons <skierons@stetson.edu>
Date: Sun, 16 Sep 2012 23:52:09 -0400
Subject: [PATCH 18/51] Made changes to SVGCircles to be able to have an easier
 time reading the data from the circle. Also, made an SVGRect html to test
 rectangles. No other changes than that. Still working on telling the types of
 points from Paths that we make. The curveTo's and arcTo's are giving us the
 most trouble. LineTo's are points with 0 values for the handles. Jacob will
 clean up the code for the walkthrough tomorrow. There we can figure out how
 to solve this problem and hopefully finish up the exportPath method.

---
 src/svg/ExportSVG.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/svg/ExportSVG.js b/src/svg/ExportSVG.js
index 20b36802..68d35811 100644
--- a/src/svg/ExportSVG.js
+++ b/src/svg/ExportSVG.js
@@ -115,7 +115,8 @@ var ExportSVG = function()
 	var handleInArray = new Array();
 	var handleOutArray = new Array();
 	for(i = 0; i < segArray.length; i++)
-	{		
+	{	
+		console.log(segArray[i].toString());
 		pointArray[i] = segArray[i].getPoint();
 		handleInArray[i] = segArray[i].getHandleIn();
 		handleOutArray[i] = segArray[i].getHandleOut();
@@ -128,9 +129,9 @@ var ExportSVG = function()
 	for(i = 0; i < pointArray.length; i++)
 	{
 		var x = pointArray[i].getX();
-		x = x - (x % 1);
+		//x = x - (x % 1);
 		var y = pointArray[i].getY();
-		y = y - (y % 1);
+		//y = y - (x % 1);
 		if(i === 0)
 		{
 			pointString+= "M " + x + " " + y + " ";
@@ -169,7 +170,7 @@ var ExportSVG = function()
 	//svgPath.setAttribute("stroke", strokeRGB);
 	//svgPath.setAttribute("fill", fillRGB);
 	svgPath.setAttribute("stroke-width",pathClone.strokeWidth);
-	svgObj.appendChild(svgPath);i
+	svgObj.appendChild(svgPath);
 
 	console.log(svgObj);
 	return svgObj;

From aca3ed67a2411b5c87203a768ab156661beab238 Mon Sep 17 00:00:00 2001
From: jnighlight <jlites@stetson.edu>
Date: Mon, 17 Sep 2012 00:34:55 -0400
Subject: [PATCH 19/51] Cleaned up ExportSVG for general purpose. Removed all
 lines written for testing purposes, saved them in a text document for
 possible future reference. Code should look a lot more clean and linear with
 all the stuff removed.

---
 src/svg/ExportSVG.js | 26 ++------------------------
 1 file changed, 2 insertions(+), 24 deletions(-)

diff --git a/src/svg/ExportSVG.js b/src/svg/ExportSVG.js
index 68d35811..26168ee9 100644
--- a/src/svg/ExportSVG.js
+++ b/src/svg/ExportSVG.js
@@ -92,23 +92,11 @@ var ExportSVG = function()
     {
     	//this.initialize();
     	//console.log(blarg.svgObj);
+	var pathClone = path.clone();
 	var NS = "http://www.w3.org/2000/svg";
 	svgObj = document.createElementNS(NS,"svg");
-	svgRect = document.createElementNS(NS,"rect");
-	svgRect.height.baseVal.value = 50;
-	svgRect.width.baseVal.value = 60;
-	svgRect.x.baseVal.value = 50;
-	svgObj.appendChild(svgRect);
-
-	svgPoint = document.createElementNS(NS,"point");
-	svgPoint.setAttribute("x",50);
-	svgPoint.setAttribute("y",100);
-	svgObj.appendChild(svgPoint);
-
 	svgPath = document.createElementNS(NS, "path");
-		
-    	console.log(svgObj);
-	var pathClone = path.clone();
+	
 	var segArray = pathClone.getSegments();
 
 	var pointArray = new Array();
@@ -120,10 +108,6 @@ var ExportSVG = function()
 		pointArray[i] = segArray[i].getPoint();
 		handleInArray[i] = segArray[i].getHandleIn();
 		handleOutArray[i] = segArray[i].getHandleOut();
-
-		console.log("point " + i + ": " + pointArray[i]);
-		console.log("HI " + i + ": " + handleInArray[i]);
-		console.log("HO " + i + ": " + handleOutArray[i]);
 	}
 	var pointString = "";
 	for(i = 0; i < pointArray.length; i++)
@@ -165,14 +149,8 @@ var ExportSVG = function()
 		var fillRGB = RGBtoHex(fillRed, fillGreen, fillBlue);
 		svgPath.setAttribute("fill", fillRGB);
 	}
-
-	//svgPath.setAttribute("d", pointString);
-	//svgPath.setAttribute("stroke", strokeRGB);
-	//svgPath.setAttribute("fill", fillRGB);
 	svgPath.setAttribute("stroke-width",pathClone.strokeWidth);
 	svgObj.appendChild(svgPath);
-
-	console.log(svgObj);
 	return svgObj;
     };
 

From 67f7ece09e999be716a2aa3a4560c74d494635c8 Mon Sep 17 00:00:00 2001
From: jnighlight <jlites@stetson.edu>
Date: Mon, 17 Sep 2012 01:30:51 -0400
Subject: [PATCH 20/51] Added comments Code should be easier to understand.

---
 src/svg/ExportSVG.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/svg/ExportSVG.js b/src/svg/ExportSVG.js
index 26168ee9..e4906664 100644
--- a/src/svg/ExportSVG.js
+++ b/src/svg/ExportSVG.js
@@ -97,6 +97,7 @@ var ExportSVG = function()
 	svgObj = document.createElementNS(NS,"svg");
 	svgPath = document.createElementNS(NS, "path");
 	
+	//Getting all of the segments(a point, a HandleIn and a HandleOut) in the path
 	var segArray = pathClone.getSegments();
 
 	var pointArray = new Array();
@@ -104,36 +105,44 @@ var ExportSVG = function()
 	var handleOutArray = new Array();
 	for(i = 0; i < segArray.length; i++)
 	{	
+		
 		console.log(segArray[i].toString());
 		pointArray[i] = segArray[i].getPoint();
 		handleInArray[i] = segArray[i].getHandleIn();
 		handleOutArray[i] = segArray[i].getHandleOut();
 	}
+	//pointstring is formatted in the way the SVG XML will be reading
+	//Namely, a point and the way to traverse to that point
 	var pointString = "";
 	for(i = 0; i < pointArray.length; i++)
 	{
 		var x = pointArray[i].getX();
-		//x = x - (x % 1);
+		//x = x - (x % 1); //Possible for simplifying  
 		var y = pointArray[i].getY();
 		//y = y - (x % 1);
 		if(i === 0)
 		{
+			//M is moveto, moving to a point without drawing
 			pointString+= "M " + x + " " + y + " ";
 		}
 		else
 		{
+			//L is lineto, moving to a point with drawing
 			pointString+= "L " + x + " " + y + " ";
 		}
 	}
 	if(pathClone.getClosed())
 	{
+		//Z implies a closed path, connecting the first and last points
 		pointString += "z";
 	}
 	
 	svgPath.setAttribute("d",pointString);
 
+	//If the stroke doesn't have a color, there's no attribute for it
 	if(pathClone.strokeColor != undefined)
 	{
+		//Using rgb, each value between 0 and 1
 		var strokeRed = pathClone.strokeColor.red;
 		var strokeGreen = pathClone.strokeColor.green;
 		var strokeBlue = pathClone.strokeColor.blue;
@@ -141,6 +150,7 @@ var ExportSVG = function()
 		svgPath.setAttribute("stroke", strokeRGB);
 	}
 	
+	//If the fill doesn't have a color, there's no attribute for it
 	if(pathClone.fillColor != undefined)
 	{
 		var fillRed = pathClone.fillColor.red;
@@ -150,14 +160,17 @@ var ExportSVG = function()
 		svgPath.setAttribute("fill", fillRGB);
 	}
 	svgPath.setAttribute("stroke-width",pathClone.strokeWidth);
-	svgObj.appendChild(svgPath);
+	svgObj.appendChild(svgPath); //appends path to svgObj
 	return svgObj;
     };
 
     function RGBConverter(deciColor)
     {
+    	//since value is scaled from 0 to 1, must round the
+	//multiplication by 255
 	var decColor = Math.round(deciColor * 255);
-	var hexColor = decColor.toString(16);
+	var hexColor = decColor.toString(16); //to hex
+	//R, G, and B need to take up at 2 characters
 	hexColor = hexColor.length > 1? hexColor : "0" + hexColor;
 	return hexColor;
     };
@@ -167,6 +180,7 @@ var ExportSVG = function()
     	var redVal = RGBConverter(red);
 	var greenVal = RGBConverter(green);
 	var blueVal = RGBConverter(blue);
+	//Returns hex for colors
 	return "#" + redVal + greenVal + blueVal;
     }
 

From 091170cb7c8badbb16a6223d5c2859cca789607a Mon Sep 17 00:00:00 2001
From: Jt Whissel <jtwhissel@gmail.com>
Date: Mon, 17 Sep 2012 15:03:41 -0300
Subject: [PATCH 21/51] Update AUTHORS.md

---
 AUTHORS.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/AUTHORS.md b/AUTHORS.md
index 23eae2a7..5ec30511 100644
--- a/AUTHORS.md
+++ b/AUTHORS.md
@@ -2,3 +2,5 @@
 
 - Juerg Lehni <juerg@lehni.org>
 - Jonathan Puckey <me@jonathanpuckey.com>
+- Jt WHissel <jtwhissel@gmail.com>
+- Andrew Roles <jaroles58@gmail.com>
\ No newline at end of file

From 2750b07189581c373d4cac4ef32b0f034af7e194 Mon Sep 17 00:00:00 2001
From: Jt Whissel <jtwhissel@gmail.com>
Date: Mon, 17 Sep 2012 15:03:59 -0300
Subject: [PATCH 22/51] Update AUTHORS.md

---
 AUTHORS.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/AUTHORS.md b/AUTHORS.md
index 5ec30511..2d94a5c7 100644
--- a/AUTHORS.md
+++ b/AUTHORS.md
@@ -2,5 +2,5 @@
 
 - Juerg Lehni <juerg@lehni.org>
 - Jonathan Puckey <me@jonathanpuckey.com>
-- Jt WHissel <jtwhissel@gmail.com>
+- Jt Whissel <jtwhissel@gmail.com>
 - Andrew Roles <jaroles58@gmail.com>
\ No newline at end of file

From 6c1c6bc2d5e5d9085981ada7073be37ed9cccb85 Mon Sep 17 00:00:00 2001
From: skierons <skierons@stetson.edu>
Date: Mon, 17 Sep 2012 19:34:46 -0400
Subject: [PATCH 23/51] Created an SVGRect.html to test exporting and modified
 SVGCircles.html for easier testing.

---
 examples/Tools/.SVGCircles.html.swp | Bin 0 -> 12288 bytes
 examples/Tools/.SVGRect.html.swp    | Bin 0 -> 12288 bytes
 examples/Tools/SVGCircles.html      |  33 ++++++++++++++++++++++------
 examples/Tools/SVGRect.html         |  32 +++++++++++++++++++++++++++
 src/path/.Path.Constructors.js.swp  | Bin 0 -> 16384 bytes
 5 files changed, 58 insertions(+), 7 deletions(-)
 create mode 100644 examples/Tools/.SVGCircles.html.swp
 create mode 100644 examples/Tools/.SVGRect.html.swp
 create mode 100644 examples/Tools/SVGRect.html
 create mode 100644 src/path/.Path.Constructors.js.swp

diff --git a/examples/Tools/.SVGCircles.html.swp b/examples/Tools/.SVGCircles.html.swp
new file mode 100644
index 0000000000000000000000000000000000000000..56100d522b699739475fdbbd8ad66a657478d5f1
GIT binary patch
literal 12288
zcmeI2Pj4GV7>6g^0<<7{<1}4V;tG4$aT8inJ5uCS1wj>~xRDSS#_QMiCgYuDX4Xks
z;J_!~!e7BB-~e|{aNrAYg$oBHZb)$AK>5wC?Ica56mg4Yl}Fypyz}lm&v^EbOs~H4
z+8us9yvA@n%b5Ohr{iwr3S--`vex}_#<ktv>UL|L_8DO;UW@J;(k3brN14b-hr1@C
z12N7dnW(FjMDNb+cA{f6gd;naXJz&M-hemocm^)AYmMdl3&CZ6>AAa)H^fJI1Kxl)
z;0<^K-hemY4R{0Iz_~GCvjz45vv~r%3>K!~!(ZNjH{cC;1Kxl);0<^K-hemY4R{0I
zfH!bX42V8suRO`vm8UQv{Quwm4d9Pw82cUk3cdm#f;Yhh@WVyMJ^}=8gO|W1@b?AA
z{sMo3-@uRHd+;^52i^f2;CZkB82IUF#=ZsLfDgbM;C1jKxB?!arhmXM;Aik1_yT+m
zJ_DbEPr%3EJ#Zi7U>Eej+h7&cKrz2_vSxl7-hemY4R{0IfH&X`cmw~-Kr?d3OxIa6
z>ZxP*kG@s?!*#aUj72&Th9~`2P~HYylS%H;dNV2;kgrz+BM*tb8x)yXCz-|V;^O-^
znfqAGgdK&N#%e-a>82LL%2o8ZYu4Kcg^s(bVpY~rNouRy>YNZY58y4H(mwAXRYlUk
z7GW-pi<k|Y1-TTJ<&~A{^;tv@r+n487<4MAQJ;tDWH>5QpNMK8)$&o)L}>16=&G*D
zUKMFyQsYE?y~=B=t6`&YV>*RLjCg238NM>FWIo3eaq~LdtfOcw_L6kSHwrazah{k9
z%LR`~TalzZb0$hhu}Y1S6iPL$n8{G(_E>FY10IE&kPb4XZDHE2+{v(MIk$=!oMLuM
z>53`V*pQ^yQXfHX{f>HOlW<>z^4xQUCY0K+D6q=4=qI^3_N1}_!<OsyBF%mGltG@x
zHc=^8=^d3D+En{#ndmBa{Z6whr2Jao>*p#nR;xW~E2;DvU+PH_?=2M_gG9<%^ZqEY
zv{ZHNnO3`)MHuH=qr`1{C<%oW1w;|IBQnHI(TY$U@3sk<H8&Ey8&bN(kcT|hB%BK5
z9UH!nXJPlmluQV_q}(Lj9%j@EEFIYLpm^CF@N##}x1HNpr$_7x?9O7d1>ESk6@+1g
zAKXS*#b~}lIDH;q$Cjc0DOEo))51>WkV(3S`N&pKm@p$E8}N~)K~YC+OjLA)xC`7v
zZDJ*@A02ydMr8}S#$*K_S)0}9-8`AJg0@O6%-6cm0~zISQ%~+Sc9X{=p$*wqZU?m+
Z$lokqKh5b&?(*hVyZct>7P7jR-oLlv#(e+)

literal 0
HcmV?d00001

diff --git a/examples/Tools/.SVGRect.html.swp b/examples/Tools/.SVGRect.html.swp
new file mode 100644
index 0000000000000000000000000000000000000000..0e8ea1331f14726d24e8667d7e0c64bc6dbbb5b0
GIT binary patch
literal 12288
zcmeI2J#W)M7{{+n1f)_?Ay(H6O{>ICTUDUu1wmR>9jZnot;B>J=aM*ae8zW4Ur+~z
zegRlm5E2psAz0Y>0DJ)W2yBRjjS>E5r>&q!EfXSoto-8h-E(K(Prb)#d-dGb+PZPw
zT3|RP82j{StD=i<))=e0LMeT5%26$E)N0vE`IIo`F4>!sN79Z5wnHc6k=2nl-*I}O
z&!t@x!bj`Y>K*PXtF3zeX+u&w86X2^HZZ=qFh7^OW=<KCmp9Mcivr0286X2>fDDiU
zGC&5%02vq!11cP2KQNVZU<Qm0!HEtsKnBPF86X2>fDDiUGC&5%02v?yWMD)LI1R>L
zpJ%L|!i4bufBiRrZ<iSR0zQMM-~iOX1o$w{*kiB<2H+l81-HR1un4Y#Nl?7VSPFc-
zfPUaDcm-a7=imT51a)u|Tmj$l93R1Z@D98L&%hH9fewhDbwvErG{^uMAOmE843L3Q
zG*GbhM#d5=*mcp^EwNO=b%KE-4X;r&lcH%vTzY%FRIrl@L?^-M%$<hrWJ@>lLWN>#
zKR;{ZlyXHNh0iTtw9<0W5`8t3*YyJ@GLmbfs0$X~2}PtTj%ueveEkxIkbrL+D{%<6
zUZ#^)9XD*!{VcsB(+OHWPlv(_R7OAU@i=kaVYqHj&*yR(a2%pL3?r&2rWbRW#iaQG
zp4pyl_5)XWA~1SRmmlA4293#QKc3sanKK{oKv@m39aR1>``@QFhq(hfk%Is3ryyRi
zdPN?sM-i-xzU0f1(@MwdKrcz1Vswhg<2O9yBYdT#ibR)}g)gEdW4i7;Zg*POH$C4!
ztle&Vice=yt#1)VqN6u@yZtD_`l_m3A1MO4E=hHU+6{TpRD4Gzd&QG#(@1jUQS#K;
z@nnyVgB%;DOw*8&TQn`p#s@_kDbYU4ci4b#BJU=le>GIYlfwr)F^2C2UF3AXXi7aP
z+2&lCMmyro_&HoD?YO~0$<#Mhp7MEVxbwYWCzq)2apf3orNS(~-}eSZvn&DySJ@ie
tz(jI2l%(G?dBbfxk>sk_SIz7V3|>gyAcf&uXli+*T)SIY!KnJJ^b>)_^o;-j

literal 0
HcmV?d00001

diff --git a/examples/Tools/SVGCircles.html b/examples/Tools/SVGCircles.html
index 1878f18a..9468bed8 100644
--- a/examples/Tools/SVGCircles.html
+++ b/examples/Tools/SVGCircles.html
@@ -2,7 +2,7 @@
 <html>
 <head>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<title>Circles</title>
+	<title>SVGCircles</title>
 	<link rel="stylesheet" href="../css/style.css">
 	<script type="text/javascript" src="../../dist/paper.js"></script>
 	<script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
@@ -15,15 +15,34 @@
 			};
 
 			var path;
-			function onMouseDrag(event) {
-				// The radius is the distance between the position
-				// where the user clicked and the current position
-				// of the mouse.
-				var radius = (event.downPoint - event.point).length;
-				path = new Path.Circle(event.downPoint, radius);
+			function onMouseDown(event) 
+			{
+				var radius = 100;
+				path = new Path.Circle(event.point, radius);
+				path.selected = true;
 				var svg = new ExportSVG();
 				var svgout = svg.exportPath(path);
 				console.log(svgout);
+
+				//making A new circle at a certain point
+				leftPoint = new Point(44,107);
+
+				var leftToTopHandle = new Point(0,55.22847);
+				var leftToTopHandle2 = new Point(0, -55.228);
+
+				rightPoint = new Point(244,107);
+
+				bottomPoint = new Point(144,207);
+
+				topPoint = new Point(144,7);
+
+				path2 = new Path(leftPoint);
+				path2.arcTo(topPoint, true);
+
+
+
+
+
 				path.removeOnDrag();
 
 			};
diff --git a/examples/Tools/SVGRect.html b/examples/Tools/SVGRect.html
new file mode 100644
index 00000000..becba17d
--- /dev/null
+++ b/examples/Tools/SVGRect.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>SVGRect</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+	<script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		project.currentStyle =
+		{
+			fillColor: 'white',
+			strokeColor: 'black'
+		};
+
+		var path;
+		function onMouseDown(event)
+		{
+			var size = new Size(100,100);
+			path = new Path.Rectangle(event.point,size);
+			var svg = new ExportSVG();
+			var svgout = svg.exportPath(path);
+			console.log(svgout);
+		};
+		
+		
+	</script>
+</head>
+<body>
+	<canvas id="canvas" resize></canvas>
+</body>
+</html>
diff --git a/src/path/.Path.Constructors.js.swp b/src/path/.Path.Constructors.js.swp
new file mode 100644
index 0000000000000000000000000000000000000000..f5c885e4cb553ac42c8aea2854fec711af57b665
GIT binary patch
literal 16384
zcmeI2ZHOdC8OQrBFJ?TAAqi1DF?A;KW_I^_Ue?PU8`s-qbH-bC<B-|AL)JC+^wiAs
zZclfox@R|=btK>i^-B&8&7lMl-w1vXMea*f40uS8n0z@2h;M;FAj0V(sE9HCpQ`Gf
zo_)F9J2q&v2Yxf%)%DcNQ%^nhR87}Qr%ueWBj%`q&n<@W^5<(+x@=DyM$Pu4h;Fv|
z)TTZ@H+QHywM{m|9xI*<xd@B0;9_6}T$qbtF%&j#qIR*0FLTQG!bo)O$QL1=ZdYjb
zJkvm?fgNh#W@EHcF5UHk1MIe2Pwr4A%a&;%(?F(yOaqw)G7V%J$TW~?Ak)DAiUy+K
zI^zv=W-oXQ?9se|Pk`$+eSaN(Yv7Oi9zWS9(?F(yOaqw)G7V%J$TW~?Ak#pmflLFL
z1~Ls~8hDFnz-k!Ad(hU~=>P!#|I-=3>+dp*%it3D4)`QE4i195!Jlq6jGusKz%mHI
zJU9(b0TbK+t_PRiX&65OUjQe;UEogeey|t(^Bsoq8}Jf12hM`iU_bctKAbmz--2hr
zIpBd=@BpZQz2MT@4dXfRb?{a2W$-2N1h^j@1NVS^;4eAk1wRAl!5Odw#=t)C+D(S>
z3ius313m_B1be`%Z!?T<gE}|@D&TJLuN%>R@GbB;&;u*rL*RYj-QXWL7{-g>7vRU>
zNg%)^xD{N!9(@JB1W$vr;BjDqNiYQVgG)Gwxd6TbT)@FB7zane5l{wy#dux@7r|5D
z5#WMPfun%N`!=xICzoSGY}pblbROeuoOyhO)o__Fmr5fHUxoXOBv0TwUZgWs>3T!1
z3I3?n30y8^l;DKmQCE0ujo$d^v8c_d5_gr^f?E-9FnS$CXALZ2b=Vp;pr=|y*=5uG
zrW6%^*K0t?_JxPnO9tg0;&x<tEf>N9m%0%wH^io7T_LmN1LWzt=rgs5orrjctvI+^
zSGEcH;?R(RpWX<*a=IhbUQ$YqF3g8**ALO4afTOJxJ+M=I?LsxE_tiNp(v>?Q*}8n
zoK`y;VRgK6<97-LDr?)!kslNavKd=vb$JuT?mTDQ09mZ+jn!!6=VgQFJ|1ga=5?o(
z40YEJ*sxTm+2*oCQcU&@kEt#3^A)ENwN=|mYFtUJ$`rCanOCPiDpP6rkS`ff6XVy&
zTcXt^ZHBTf$-^<$?0R<O_+Fmm3TzE6VM9gvEzQfsTSop8pYmN_pxA?T*Rq!m(qL)p
zU)NbPDO;8(Z7Mwxs2Z7w!f2HH+2s@&ktUlK_-~qBNn;0Q329<&!gai*es6j-1(3dB
z_PCgoZM@ReNKK)p@H=vf23AND!m2~*mYjt&i*|2Bw2I|VC9PzYqKBj^{Zoa!*yw-8
zi^&%Bm~Pb^IWlhh9vq%@qYd74JjZJ(w-y_eQuu^+gy|y6jEZPFB8+xYf@gKO9G$)`
z%d%AkXh;0w9g1vq1rM3ujab`X!Nf*V)OVE_>^hHDIQOWj9c>dHw|N*^!ht9EIK~@d
zbuK$Yb6ieo3!T;eLb(O)wc(@MYKgcu(~=4dO;Sk6S;J?ZPtJaK%`BPYX%kBl--;8z
zzpQR;W%|jLt>>EjfwFos337%T7FVg|T&||p%XR)94mIL|`c}*3R{1d9DXUs3^@2?v
zx=KqJI+v5N4su`sXOU($UEde|mBn<q*TTYAWXiS7I37=}FT1g}P?34^mb6r-jSDkK
zEhlo?Z-}j^<<iNfGgZ*xN)n{)PWTmjov0$Gv-Vn+XScC>s$ta87%iKd+fr1PvdUdu
zQB=wIO^QY;6_iCQK1<7otm%sm`Av&qwUUO!)bfJ$tA!XYh@1#MtJYtj!X7G--a%Ug
zuGs`ex)G`cY^aF;K648c5Tt{)`I31ULGZ!|n_semz#3sCMmLAzy9F}F0f{p5n1?A7
z21e!6H&TWzNXr}$k(HDN%N?k36OnW+y5NB-NrddhU$$I5RYDloJbFpVN@Sc>VCSP)
z;PY}SgpY_QUn#IdtPHcHaWEZk5i3)E4U@`>96KD7;Z726(R45<(n1-NuFIsC4-wws
z)$e8AFp*A=?su@*IQ1??`xL$lX&bXA<}iXb_d;&68s}{0#MJQzYsazrVE8b~tidD8
zal^Qnb`%9;#iGmGo@4r=Rb(GzI&IPS&|J$4y7m%ZHEq8m+cf0|t7_%R+Xc*%GKOcm
z%SDULP$7_?)`F}mC3S;!si7^LAo5$n3fg#movNhn=%@0X_Qfzsu3HrL_#Ufm5Q7Cb
z(3{X{dC5wN4M>Y)@tmxlz;334spQmMm@_JvYdbJ=(gJ=F3PcR^t*T$4AA#XdTg#TJ
zg`L9qKvfS=8!<p^#;FTSAhuSjkEM*_kU{(ZJ=lL**rU?^pZ?>21$+F9;6?BPcn+Kc
zXTfQ32lxZ__UFO(!8gEXz)3I(hQX`Y+g|`b1wQ~^1a&YAj)2S9-#-t24$gokm;q&Q
zJNP~J_0NK*Km?}2o#4HI_WZA5FaK-sD{v9K0G<Zl1fKx6fY-5~|2udVJPvH|QLrD}
z0d4{>V_*L~I1j!C7QjcqQDA_Vu)n_mz6+iJK9~jvz~7*=AA;|JC&6cd2NppSkWN1h
zvQMUgOaqw){x3Dq>rpt{qcDmht{oqkQ5b1HOh-?l3jfssk17NqyIkT-;Ufm&c?$2b
zMmhzv({&>!a98sVy9c4nF(#~r(+w+ZOkb4?1--3^%bj-?bd0T|qCDb{2x~i4PEDq;
zBTpfcgM6j?@bh8jbvrU74skm?thNBTTwJ6sZ&C<rHJ@bF^{S@pEGn$0xUj7DCpp=d
zaW;By34vH5o1BZ0USe5X=9N^Ej}0M$BW34QCy-TEv0?LsDk-AF?kciGYB!_AMp8A$
ziW`Y_x!HyXk%_zWqco~hYk5TN9>TbEL}Pl$Wa}`hr1^Lh$JyZ$HF_Yqj80b4$#OqJ
zvF*L7yoo;K*6&R`seZ8AsdIsYG-Y|JwejiA;KTCf5BsBuGZ7jIlt<y7?w8(ZA^aAD
z@^YkmO!t&z^`#V~5-2T^Q^JmiLv!6&eU77Ap3X1NRan@uT$kgl2_>mKWf{fBqq71d
z&<8%MY#hcg8Ph76wF%pA@L04bWe3tKJ)F8HWzgvpS6x)a^*4mnhYiP#8_o}QdN_Yo
zz6PFU7z${H9H+`d>SSTJTuRNshG0h?Mds8FMKuQI9<>FwOvm6$;O=M(3AM$p5|8_a
zkIA3p)q@@TN9~2w<8gL?+?T8j{&aK;7bTx><Dru2CyjJ#ck~dK|HD*$ceUkvn>!{|
zpSGiQ-l)NCtIZq2_slE%q<+R&HMHUkR-gE&kOn69OdA~&N*M4<GCLB>X|I%Mpg#`l
z|4=Iy_2DP>bE)>}b9FLPH4!#B)4^t1{`;^^uj6cQUY|#=&gZ7PoHTAH9iGs$`zroJ
z9CW_Y84kL-Kv|tuvOaK+rILv-=#<r1Yu~zQ0XuWcY0>rWPN+$N1whV<YxI1Uu;=_d
NX13pLwe>;czX3{Qu~h&7

literal 0
HcmV?d00001


From 449db5de07ecfaadeaa8e1bb2ac51c0dab819a28 Mon Sep 17 00:00:00 2001
From: jaroles <jaroles58@gmail.com>
Date: Mon, 17 Sep 2012 20:36:37 -0300
Subject: [PATCH 24/51] Added Jacob, Justin, Scott, and Andrew

---
 AUTHORS.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/AUTHORS.md b/AUTHORS.md
index 2d94a5c7..6c907bd9 100644
--- a/AUTHORS.md
+++ b/AUTHORS.md
@@ -3,4 +3,8 @@
 - Juerg Lehni <juerg@lehni.org>
 - Jonathan Puckey <me@jonathanpuckey.com>
 - Jt Whissel <jtwhissel@gmail.com>
-- Andrew Roles <jaroles58@gmail.com>
\ No newline at end of file
+- Andrew Roles <jaroles58@gmail.com>
+- Jacob Lites <jnightlight@gmail.com>
+- Justin Ridgewell <justinridgewell@gmail.com>
+- Andrew Wagenheim <abwagenheim@gmail.com>
+- Scott Kieronski <baroes0239@gmail.com>
\ No newline at end of file

From ce7e0cd349d2ff40c1f07a605d65cd47a2b41a59 Mon Sep 17 00:00:00 2001
From: AWagenheim <awagenhe@stetson.edu>
Date: Tue, 18 Sep 2012 21:08:04 -0400
Subject: [PATCH 25/51] Added comments to ImportSVG.js

---
 src/svg/ImportSVG.js | 128 ++++++++++++++++++++++++++++++-------------
 1 file changed, 89 insertions(+), 39 deletions(-)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index 7653034a..fb5ed6df 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -1,33 +1,62 @@
+/*
+* Paper.js
+*
+* This file is part of Paper.js, a JavaScript Vector Graphics Library,
+* based on Scriptographer.org and designed to be largely API compatible.
+* http://paperjs.org/
+* http://scriptographer.org/
+*
+* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+* http://lehni.org/ & http://jonathanpuckey.com/
+*
+* Distributed under the MIT license. See LICENSE file for details.
+*
+* All rights reserved.
+*
+*
+*
+* This class and all methods therein designed by Stetson-Team-Alpha
+*/
+
 /**
- *  Imports svg into items with groups
- *  Stetson Alpha - Paper.js
+ * @name ImportSVG
+ *
+ * @class The ImportSVG object represents an object created using the SVG Canvas * that will be converted into a Paper.js object. The SVG object is imported     * into Paper.js by converting it into items within groups.
  *
  */
 
-var ImportSVG = this.ImportSVG = Base.extend({
+var ImportSVG = this.ImportSVG = Base.extend(/** @Lends ImportSVG# */{
+
 	/**
-	 * Takes the svg dom obj and parses the data
-	 * to create a layer with groups (if needed) with
-	 * items inside. Should support nested groups.
+	 * Creates a Paper.js object using data parsed from the selected SVG
+	 * Document Object Model (DOM). The SVG object is imported, than a layer
+	 * is created (with groups for the items if needed).
 	 *
-	 * takes in a svg object (xml dom)
-	 * returns Paper.js Layer
+	 * Supports nested groups
+	 *
+	 * @param {SVG DOM} svg An SVG DOM object with parameters
+	 * @return {Layer} A Paper.js layer
 	 */
+
 	importSVG: function(svg)
 	{
-		var layer = new Layer();
-		groups = this.importGroup(svg);
-		layer.addChild(groups);
+	var layer = new Layer();
+	groups = this.importGroup(svg);
+	layer.addChild(groups);
 
-		return layer;
+	return layer;
 	},
-
+	
 	/**
-	 * Creates a Paper.js Group by parsing
-	 * a specific svg g node
+	 * Creates a Paper.js group by parsing a specific GNode of the imported
+	 * SVG DOM
+	 * 
+	 * @name ImportSVG#importGroup
+	 * @function
+	 * @param {XML DOM} svg  A node passed in by the imported SVG
+	 * @return {Group} group A Paper.js group
+	 *
 	 *
-	 * takes in a svg object (xml dom)
-	 * returns Paper.js Group
 	 */
 	importGroup: function(svg)
 	{
@@ -47,11 +76,13 @@ var ImportSVG = this.ImportSVG = Base.extend({
 
 	/**
 	 * Creates a Paper.js Path by parsing
-	 * a specific svg node (rect, path, circle, polygon, etc)
-	 * and creating the right path object based on the svg type.
+	 * a specific SVG node (rectangle, path, circle, polygon, etc.)
+	 * and creating the right Path object based on the SVG type.
 	 *
-	 * takes in a svg object (xml dom)
-	 * returns Paper.js Item
+	 * @name ImportSVG#importPath
+	 * @function
+	 * @param {XML DOM} svg An SVG object
+	 * @return {Item} item A Paper.js item
 	 */
 	importPath: function(svg)
 	{
@@ -79,10 +110,13 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	},
 
 	/**
-	 * Creates a Path.Circle Paper.js item
+	 * Creates a Path.Circle item in Paper.js using an imported Circle from
+	 * SVG
 	 *
-	 * takes a svg circle node (xml dom)
-	 * returns Paper.js Path.Circle item
+	 * @name ImportSVG#importCircle
+	 * @function
+	 * @param {XML DOM} svgCircle An SVG circle node
+	 * @return {Path.Circle} circle A Path.Circle item for Paper.js
 	 */
 	_importCircle: function(svgCircle)
 	{
@@ -96,10 +130,12 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	},
 
 	/**
-	 * Creates a Path.Oval Paper.js item
+	 * Creates a Path.Oval item in Paper.js using an imported Oval from SVG
 	 *
-	 * takes a svg ellipse node (xml dom)
-	 * returns Paper.js Path.Oval item
+	 * @name ImportSVG#importOval
+	 * @function
+	 * @param {XML DOM} svgOval An SVG ellipse node
+	 * @return {Path.Oval} oval A Path.Oval item for Paper.js
 	 */
 	_importOval: function(svgOval)
 	{
@@ -120,13 +156,23 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	},
 
 	/**
-	 * Creates a "rectangle" Paper.js item
+	 * Creates a Path.Rectangle item from an imported SVG rectangle
 	 *
-	 * takes a svg rect node (xml dom)
-	 * returns either a
-	 *   - Path.Rectangle item
-	 *   - Path.RoundRectangle item (if the rectangle has rounded corners)
+	 * @name ImportSVG#importRectangle
+	 * @function
+	 * @param {XML DOM} svgRectangle An SVG rectangle node
+	 * @return {Path.Rectangle} rectangle A Path.Rectangle item for Paper.js
 	 */
+	 /**
+	 * Creates a Path.RoundRectangle item from an imported SVG rectangle
+	 * with rounded corners
+	 *
+	 * @name ImportSVG#importRectangle
+	 * @function
+	 * @param {XML DOM} svgRectangle An SVG rectangle node with rounded
+	 * corners
+	 * @return {Path.RoundRectangle} rectangle A Path.Rectangle item for
+	 * Paper.js
 	_importRectangle: function(svgRectangle)
 	{
 		var x			= svgRectangle.x.baseVal.value || 0;
@@ -151,10 +197,12 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	},
 
 	/**
-	 * Creates a Path.Line Paper.js item
+	 * Creates a Path.Line item in Paper.js from an imported SVG line
 	 *
-	 * takes a svg line node (xml dom)
-	 * returns a Path.Line item
+	 * @name ImportSVG#importLine
+	 * @function
+	 * @param {XML DOM} svgLine An SVG line node
+	 * @return {Path.Line} line A Path.Line item for Paper.js
 	 */
 	_importLine: function(svgLine)
 	{
@@ -171,10 +219,12 @@ var ImportSVG = this.ImportSVG = Base.extend({
 	},
 
 	/**
-	 * Creates a PointText Paper.js item
+	 * Creates a PointText item in Paper.js from an imported SVG text node
 	 *
-	 * takes a svg text node (xml dom)
-	 * returns a PointText item
+	 * @name ImportSVG#importText
+	 * @function
+	 * @param {XML DOM} svgText An SVG text node
+	 * @return {Path.Text} text A PointText item for Paper.js
 	 */
 	_importText: function(svgText)
 	{
@@ -195,4 +245,4 @@ var ImportSVG = this.ImportSVG = Base.extend({
 		text.content = textContent;
 		return text;
 	}
-});
\ No newline at end of file
+});

From 555d179978f83e3c4c1311da2ab86260ef2db00f Mon Sep 17 00:00:00 2001
From: AWagenheim <awagenhe@stetson.edu>
Date: Tue, 18 Sep 2012 21:11:01 -0400
Subject: [PATCH 26/51] Added comments to ImportSVG.js

---
 src/svg/ImportSVG.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index fb5ed6df..013ca639 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -20,8 +20,10 @@
 
 /**
  * @name ImportSVG
- *
- * @class The ImportSVG object represents an object created using the SVG Canvas * that will be converted into a Paper.js object. The SVG object is imported     * into Paper.js by converting it into items within groups.
+ * @class The ImportSVG object represents an object created using the SVG
+ * Canvas that will be converted into a Paper.js object. 
+ * The SVG object is imported into Paper.js by converting it into items 
+ * within groups.
  *
  */
 

From ed6007004aa941cdc2b206ab72cbb70e95e2910b Mon Sep 17 00:00:00 2001
From: AWagenheim <awagenhe@stetson.edu>
Date: Tue, 18 Sep 2012 22:12:28 -0300
Subject: [PATCH 27/51] Update src/svg/ImportSVG.js

---
 src/svg/ImportSVG.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index 013ca639..506ac90f 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -175,6 +175,7 @@ var ImportSVG = this.ImportSVG = Base.extend(/** @Lends ImportSVG# */{
 	 * corners
 	 * @return {Path.RoundRectangle} rectangle A Path.Rectangle item for
 	 * Paper.js
+	 */
 	_importRectangle: function(svgRectangle)
 	{
 		var x			= svgRectangle.x.baseVal.value || 0;

From 5f550a9f8a3f731d76f6c69b4b482f3d42fc843b Mon Sep 17 00:00:00 2001
From: AWagenheim <awagenhe@stetson.edu>
Date: Tue, 18 Sep 2012 22:35:48 -0400
Subject: [PATCH 28/51] Added ImportSVG.js Stub

---
 test/tests/ImportSVG.js | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 test/tests/ImportSVG.js

diff --git a/test/tests/ImportSVG.js b/test/tests/ImportSVG.js
new file mode 100644
index 00000000..e9b5cf71
--- /dev/null
+++ b/test/tests/ImportSVG.js
@@ -0,0 +1,21 @@
+/*
+* Paper.js
+*
+* This file is part of Paper.js, a JavaScript Vector Graphics Library,
+* based on Scriptographer.org and designed to be largely API compatible.
+* http://paperjs.org/
+* http://scriptographer.org/
+*
+* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+* http://lehni.org/ & http://jonathanpuckey.com/
+*
+* Distributed under the MIT license. See LICENSE file for details.
+*
+* All rights reserved.
+*/
+
+module('ImportSVG');
+
+/**
+*TODO: Create SVGs utilizing ImportSVG methods
+*/

From c2de6fbd05fb6ac8a5b89cd1c26769f403bb3842 Mon Sep 17 00:00:00 2001
From: AWagenheim <awagenhe@stetson.edu>
Date: Tue, 18 Sep 2012 23:42:50 -0300
Subject: [PATCH 29/51] Update test/tests/ImportSVG.js

---
 test/tests/ImportSVG.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/test/tests/ImportSVG.js b/test/tests/ImportSVG.js
index e9b5cf71..a964224d 100644
--- a/test/tests/ImportSVG.js
+++ b/test/tests/ImportSVG.js
@@ -18,4 +18,5 @@ module('ImportSVG');
 
 /**
 *TODO: Create SVGs utilizing ImportSVG methods
+* WILL ADD MORE AFTER LEARNING SVG
 */

From 3ca96b28509811de7f4783f2f3126a7331f6d9a4 Mon Sep 17 00:00:00 2001
From: AWagenheim <awagenhe@stetson.edu>
Date: Wed, 19 Sep 2012 16:31:49 -0300
Subject: [PATCH 30/51] Update AUTHORS.md

---
 AUTHORS.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/AUTHORS.md b/AUTHORS.md
index 6c907bd9..488ef858 100644
--- a/AUTHORS.md
+++ b/AUTHORS.md
@@ -7,4 +7,5 @@
 - Jacob Lites <jnightlight@gmail.com>
 - Justin Ridgewell <justinridgewell@gmail.com>
 - Andrew Wagenheim <abwagenheim@gmail.com>
-- Scott Kieronski <baroes0239@gmail.com>
\ No newline at end of file
+- Scott Kieronski <baroes0239@gmail.com>
+- Lily the Puppy <scareddoggy@bowwow.bark>
\ No newline at end of file

From bd83a434ff30eb30b84a7e485326eab4b8c69cff Mon Sep 17 00:00:00 2001
From: AWagenheim <awagenhe@stetson.edu>
Date: Wed, 19 Sep 2012 16:41:22 -0300
Subject: [PATCH 31/51] Update src/svg/ImportSVG.js

---
 src/svg/ImportSVG.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index 506ac90f..981f231c 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -16,6 +16,7 @@
 *
 *
 * This class and all methods therein designed by Stetson-Team-Alpha
+* @author Stetson Team Alpha
 */
 
 /**

From 205586bbbdb2065d1b0a41b408fc2bebf4fa1032 Mon Sep 17 00:00:00 2001
From: AWagenheim <awagenhe@stetson.edu>
Date: Wed, 19 Sep 2012 16:42:00 -0300
Subject: [PATCH 32/51] Update src/svg/ImportSVG.js

---
 src/svg/ImportSVG.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index 981f231c..a0d497a9 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -16,7 +16,7 @@
 *
 *
 * This class and all methods therein designed by Stetson-Team-Alpha
-* @author Stetson Team Alpha
+* @author Stetson-Team-Alpha
 */
 
 /**

From c6840a0dbdbbd50377fbf6f4ad199c9a74846863 Mon Sep 17 00:00:00 2001
From: AWagenheim <awagenhe@stetson.edu>
Date: Thu, 20 Sep 2012 21:54:23 -0400
Subject: [PATCH 33/51] Tinkering with Import.svg tests

---
 dist/docs/resources/js/paper.js | 7842 -----------------------------
 dist/paper.js                   | 8237 -------------------------------
 test/tests/ImportSVG.js         |   18 +-
 3 files changed, 14 insertions(+), 16083 deletions(-)

diff --git a/dist/docs/resources/js/paper.js b/dist/docs/resources/js/paper.js
index e963d27f..e69de29b 100644
--- a/dist/docs/resources/js/paper.js
+++ b/dist/docs/resources/js/paper.js
@@ -1,7842 +0,0 @@
-/*!
- * Paper.js v0.22
- *
- * This file is part of Paper.js, a JavaScript Vector Graphics Library,
- * based on Scriptographer.org and designed to be largely API compatible.
- * http://paperjs.org/
- * http://scriptographer.org/
- *
- * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
- * http://lehni.org/ & http://jonathanpuckey.com/
- *
- * Distributed under the MIT license. See LICENSE file for details.
- *
- * All rights reserved.
- *
- * Date: Thu Nov 10 18:30:18 2011 +0100
- *
- ***
- *
- * Bootstrap.js JavaScript Framework.
- * http://bootstrapjs.org/
- *
- * Copyright (c) 2006 - 2011 Juerg Lehni
- * http://lehni.org/
- *
- * Distributed under the MIT license.
- *
- ***
- *
- * Parse-js
- *
- * A JavaScript tokenizer / parser / generator, originally written in Lisp.
- * Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
- * http://marijn.haverbeke.nl/parse-js/
- *
- * Ported by to JavaScript by Mihai Bazon
- * Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
- * http://mihai.bazon.net/blog/
- *
- * Modifications and adaptions to browser (c) 2011, Juerg Lehni
- * http://lehni.org/
- *
- * Distributed under the BSD license.
- */
-
-var paper = new function() {
-
-var Base = new function() { 
-	var fix = !this.__proto__,
-		hidden = /^(statics|generics|preserve|enumerable|prototype|__proto__|toString|valueOf)$/,
-		proto = Object.prototype,
-		has = fix
-			? function(name) {
-				return name !== '__proto__' && this.hasOwnProperty(name);
-			}
-			: proto.hasOwnProperty,
-		toString = proto.toString,
-		proto = Array.prototype,
-		isArray = Array.isArray = Array.isArray || function(obj) {
-			return toString.call(obj) === '[object Array]';
-		},
-		slice = proto.slice,
-		forEach = proto.forEach = proto.forEach || function(iter, bind) {
-			for (var i = 0, l = this.length; i < l; i++)
-				iter.call(bind, this[i], i, this);
-		},
-		forIn = function(iter, bind) {
-			for (var i in this)
-				if (this.hasOwnProperty(i))
-					iter.call(bind, this[i], i, this);
-		},
-		_define = Object.defineProperty,
-		_describe = Object.getOwnPropertyDescriptor;
-
-	function define(obj, name, desc) {
-		if (_define) {
-			try {
-				delete obj[name];
-				return _define(obj, name, desc);
-			} catch (e) {}
-		}
-		if ((desc.get || desc.set) && obj.__defineGetter__) {
-			desc.get && obj.__defineGetter__(name, desc.get);
-			desc.set && obj.__defineSetter__(name, desc.set);
-		} else {
-			obj[name] = desc.value;
-		}
-		return obj;
-	}
-
-	function describe(obj, name) {
-		if (_describe) {
-			try {
-				return _describe(obj, name);
-			} catch (e) {}
-		}
-		var get = obj.__lookupGetter__ && obj.__lookupGetter__(name);
-		return get
-			? { get: get, set: obj.__lookupSetter__(name), enumerable: true,
-					configurable: true }
-			: has.call(obj, name)
-				? { value: obj[name], enumerable: true, configurable: true,
-						writable: true }
-				: null;
-	}
-
-	function inject(dest, src, enumerable, base, preserve, generics) {
-		var beans, bean;
-
-		function field(name, val, dontCheck, generics) {
-			var val = val || (val = describe(src, name))
-					&& (val.get ? val : val.value),
-				func = typeof val === 'function',
-				res = val,
-				prev = preserve || func
-					? (val && val.get ? name in dest : dest[name]) : null;
-			if (generics && func && (!preserve || !generics[name])) {
-				generics[name] = function(bind) {
-					return bind && dest[name].apply(bind,
-							slice.call(arguments, 1));
-				}
-			}
-			if ((dontCheck || val !== undefined && has.call(src, name))
-					&& (!preserve || !prev)) {
-				if (func) {
-					if (prev && /\bthis\.base\b/.test(val)) {
-						var fromBase = base && base[name] == prev;
-						res = function() {
-							var tmp = describe(this, 'base');
-							define(this, 'base', { value: fromBase
-								? base[name] : prev, configurable: true });
-							try {
-								return val.apply(this, arguments);
-							} finally {
-								tmp ? define(this, 'base', tmp)
-									: delete this.base;
-							}
-						};
-						res.toString = function() {
-							return val.toString();
-						}
-						res.valueOf = function() {
-							return val.valueOf();
-						}
-					}
-					if (beans && val.length == 0
-							&& (bean = name.match(/^(get|is)(([A-Z])(.*))$/)))
-						beans.push([ bean[3].toLowerCase() + bean[4], bean[2] ]);
-				}
-				if (!res || func || !res.get && !res.set)
-					res = { value: res, writable: true };
-				if ((describe(dest, name)
-						|| { configurable: true }).configurable) {
-					res.configurable = true;
-					res.enumerable = enumerable;
-				}
-				define(dest, name, res);
-			}
-		}
-		if (src) {
-			beans = [];
-			for (var name in src)
-				if (has.call(src, name) && !hidden.test(name))
-					field(name, null, true, generics);
-			field('toString');
-			field('valueOf');
-			for (var i = 0, l = beans && beans.length; i < l; i++)
-				try {
-					var bean = beans[i], part = bean[1];
-					field(bean[0], {
-						get: dest['get' + part] || dest['is' + part],
-						set: dest['set' + part]
-					}, true);
-				} catch (e) {}
-		}
-		return dest;
-	}
-
-	function extend(obj) {
-		var ctor = function(dont) {
-			if (fix) define(this, '__proto__', { value: obj });
-			if (this.initialize && dont !== ctor.dont)
-				return this.initialize.apply(this, arguments);
-		}
-		ctor.prototype = obj;
-		ctor.toString = function() {
-			return (this.prototype.initialize || function() {}).toString();
-		}
-		return ctor;
-	}
-
-	function iterator(iter) {
-		return !iter
-			? function(val) { return val }
-			: typeof iter !== 'function'
-				? function(val) { return val == iter }
-				: iter;
-	}
-
-	function each(obj, iter, bind, asArray) {
-		try {
-			if (obj)
-				(asArray || asArray === undefined && isArray(obj)
-					? forEach : forIn).call(obj, iterator(iter),
-						bind = bind || obj);
-		} catch (e) {
-			if (e !== Base.stop) throw e;
-		}
-		return bind;
-	}
-
-	function clone(obj) {
-		return each(obj, function(val, i) {
-			this[i] = val;
-		}, new obj.constructor());
-	}
-
-	return inject(function() {}, {
-		inject: function(src) {
-			if (src) {
-				var proto = this.prototype,
-					base = proto.__proto__ && proto.__proto__.constructor,
-					statics = src.statics == true ? src : src.statics;
-				if (statics != src)
-					inject(proto, src, src.enumerable, base && base.prototype,
-							src.preserve, src.generics && this);
-				inject(this, statics, true, base, src.preserve);
-			}
-			for (var i = 1, l = arguments.length; i < l; i++)
-				this.inject(arguments[i]);
-			return this;
-		},
-
-		extend: function(src) {
-			var proto = new this(this.dont),
-				ctor = extend(proto);
-			define(proto, 'constructor',
-					{ value: ctor, writable: true, configurable: true });
-			ctor.dont = {};
-			inject(ctor, this, true);
-			return arguments.length ? this.inject.apply(ctor, arguments) : ctor;
-		}
-	}, true).inject({
-		has: has,
-		each: each,
-
-		inject: function() {
-			for (var i = 0, l = arguments.length; i < l; i++)
-				inject(this, arguments[i]);
-			return this;
-		},
-
-		extend: function() {
-			var res = new (extend(this));
-			return res.inject.apply(res, arguments);
-		},
-
-		each: function(iter, bind) {
-			return each(this, iter, bind);
-		},
-
-		clone: function() {
-			return clone(this);
-		},
-
-		statics: {
-			each: each,
-			clone: clone,
-			define: define,
-			describe: describe,
-			iterator: iterator,
-
-			has: function(obj, name) {
-				return has.call(obj, name);
-			},
-
-			type: function(obj) {
-				return (obj || obj === 0) && (obj._type || typeof obj) || null;
-			},
-
-			check: function(obj) {
-				return !!(obj || obj === 0);
-			},
-
-			pick: function() {
-				for (var i = 0, l = arguments.length; i < l; i++)
-					if (arguments[i] !== undefined)
-						return arguments[i];
-				return null;
-			},
-
-			stop: {}
-		}
-	});
-}
-
-this.Base = Base.inject({
-	generics: true,
-
-	clone: function() {
-		return new this.constructor(this);
-	},
-
-	toString: function() {
-		return '{ ' + Base.each(this, function(value, key) {
-			if (key.charAt(0) != '_') {
-				var type = typeof value;
-				this.push(key + ': ' + (type === 'number'
-						? Base.formatNumber(value)
-						: type === 'string' ? "'" + value + "'" : value));
-			}
-		}, []).join(', ') + ' }';
-	},
-
-	statics: {
-		read: function(list, start, length) {
-			var start = start || 0,
-				length = length || list.length - start;
-			var obj = list[start];
-			if (obj instanceof this
-					|| this.prototype._readNull && obj == null && length <= 1)
-				return obj;
-			obj = new this(this.dont);
-			return obj.initialize.apply(obj, start > 0 || length < list.length
-				? Array.prototype.slice.call(list, start, start + length)
-				: list) || obj;
-		},
-
-		readAll: function(list, start) {
-			var res = [], entry;
-			for (var i = start || 0, l = list.length; i < l; i++) {
-				res.push(Array.isArray(entry = list[i])
-					? this.read(entry, 0)
-					: this.read(list, i, 1));
-			}
-			return res;
-		},
-
-		splice: function(list, items, index, remove) {
-			var amount = items && items.length,
-				append = index === undefined;
-			index = append ? list.length : index;
-			for (var i = 0; i < amount; i++)
-				items[i]._index = index + i;
-			if (append) {
-				list.push.apply(list, items);
-				return [];
-			} else {
-				var args = [index, remove];
-				if (items)
-					args.push.apply(args, items);
-				var removed = list.splice.apply(list, args);
-				for (var i = 0, l = removed.length; i < l; i++)
-					delete removed[i]._index;
-				for (var i = index + amount, l = list.length; i < l; i++)
-					list[i]._index = i;
-				return removed;
-			}
-		},
-
-		merge: function() {
-			return Base.each(arguments, function(hash) {
-				Base.each(hash, function(value, key) {
-					this[key] = value;
-				}, this);
-			}, new Base(), true); 
-		},
-
-		capitalize: function(str) {
-			return str.replace(/\b[a-z]/g, function(match) {
-				return match.toUpperCase();
-			});
-		},
-
-		camelize: function(str) {
-			return str.replace(/-(\w)/g, function(all, chr) {
-				return chr.toUpperCase();
-			});
-		},
-
-		hyphenate: function(str) {
-			return str.replace(/[a-z][A-Z0-9]|[0-9][a-zA-Z]|[A-Z]{2}[a-z]/g,
-				function(match) {
-					return match.charAt(0) + '-' + match.substring(1);
-				}
-			).toLowerCase();
-		},
-
-		formatNumber: function(num) {
-			return (Math.round(num * 100000) / 100000).toString();
-		}
-	}
-});
-
-var PaperScope = this.PaperScope = Base.extend({
-
-	initialize: function(script) {
-		paper = this;
-		this.view = null;
-		this.views = [];
-		this.project = null;
-		this.projects = [];
-		this.tool = null;
-		this.tools = [];
-		this._id = script && (script.getAttribute('id') || script.src)
-				|| ('paperscope-' + (PaperScope._id++));
-		if (script)
-			script.setAttribute('id', this._id);
-		PaperScope._scopes[this._id] = this;
-	},
-
-	version: 0.22,
-
-	evaluate: function(code) {
-		var res = PaperScript.evaluate(code, this);
-		View.updateFocus();
-		return res;
-	},
-
-	install: function(scope) {
-		var that = this;
-		Base.each(['project', 'view', 'tool'], function(key) {
-			Base.define(scope, key, {
-				configurable: true,
-				writable: true,
-				get: function() {
-					return that[key];
-				}
-			});
-		});
-		for (var key in this) {
-			if (!/^(version|_id|load)/.test(key) && !(key in scope))
-				scope[key] = this[key];
-		}
-	},
-
-	setup: function(canvas) {
-		paper = this;
-		this.project = new Project();
-		if (canvas)
-			this.view = new View(canvas);
-	},
-
-	clear: function() {
-		for (var i = this.projects.length - 1; i >= 0; i--)
-			this.projects[i].remove();
-		for (var i = this.views.length - 1; i >= 0; i--)
-			this.views[i].remove();
-		for (var i = this.tools.length - 1; i >= 0; i--)
-			this.tools[i].remove();
-	},
-
-	remove: function() {
-		this.clear();
-		delete PaperScope._scopes[this._id];
-	},
-
-	_needsRedraw: function() {
-		if (!this._redrawNotified) {
-			for (var i = this.views.length - 1; i >= 0; i--)
-				this.views[i]._redrawNeeded = true;
-			this._redrawNotified = true;
-		}
-	},
-
-	statics: {
-		_scopes: {},
-		_id: 0,
-
-		get: function(id) {
-			if (typeof id === 'object')
-				id = id.getAttribute('id');
-			return this._scopes[id] || null;
-		},
-
-		each: function(iter) {
-			Base.each(this._scopes, iter);
-		}
-	}
-});
-
-var PaperScopeItem = Base.extend({
-
-	initialize: function(activate) {
-		this._scope = paper;
-		this._index = this._scope[this._list].push(this) - 1;
-		if (activate || !this._scope[this._reference])
-			this.activate();
-	},
-
-	activate: function() {
-		if (!this._scope)
-			return false;
-		this._scope[this._reference] = this;
-		return true;
-	},
-
-	remove: function() {
-		if (this._index == null)
-			return false;
-		Base.splice(this._scope[this._list], null, this._index, 1);
-		if (this._scope[this._reference] == this)
-			this._scope[this._reference] = null;
-		this._scope = null;
-		return true;
-	}
-});
-
-var Point = this.Point = Base.extend({
-	initialize: function(arg0, arg1) {
-		if (arg1 !== undefined) {
-			this.x = arg0;
-			this.y = arg1;
-		} else if (arg0 !== undefined) {
-			if (arg0 == null) {
-				this.x = this.y = 0;
-			} else if (arg0.x !== undefined) {
-				this.x = arg0.x;
-				this.y = arg0.y;
-			} else if (arg0.width !== undefined) {
-				this.x = arg0.width;
-				this.y = arg0.height;
-			} else if (Array.isArray(arg0)) {
-				this.x = arg0[0];
-				this.y = arg0.length > 1 ? arg0[1] : arg0[0];
-			} else if (arg0.angle !== undefined) {
-				this.x = arg0.length;
-				this.y = 0;
-				this.setAngle(arg0.angle);
-			} else if (typeof arg0 === 'number') {
-				this.x = this.y = arg0;
-			} else {
-				this.x = this.y = 0;
-			}
-		} else {
-			this.x = this.y = 0;
-		}
-	},
-
-	set: function(x, y) {
-		this.x = x;
-		this.y = y;
-		return this;
-	},
-
-	clone: function() {
-		return Point.create(this.x, this.y);
-	},
-
-	toString: function() {
-		var format = Base.formatNumber;
-		return '{ x: ' + format(this.x) + ', y: ' + format(this.y) + ' }';
-	},
-
-	add: function(point) {
-		point = Point.read(arguments);
-		return Point.create(this.x + point.x, this.y + point.y);
-	},
-
-	subtract: function(point) {
-		point = Point.read(arguments);
-		return Point.create(this.x - point.x, this.y - point.y);
-	},
-
-	multiply: function(point) {
-		point = Point.read(arguments);
-		return Point.create(this.x * point.x, this.y * point.y);
-	},
-
-	divide: function(point) {
-		point = Point.read(arguments);
-		return Point.create(this.x / point.x, this.y / point.y);
-	},
-
-	modulo: function(point) {
-		point = Point.read(arguments);
-		return Point.create(this.x % point.x, this.y % point.y);
-	},
-
-	negate: function() {
-		return Point.create(-this.x, -this.y);
-	},
-
-	transform: function(matrix) {
-		return matrix ? matrix._transformPoint(this) : this;
-	},
-
-	getDistance: function(point, squared) {
-		point = Point.read(arguments);
-		var x = point.x - this.x,
-			y = point.y - this.y,
-			d = x * x + y * y;
-		return squared ? d : Math.sqrt(d);
-	},
-
-	getLength: function() {
-		var l = this.x * this.x + this.y * this.y;
-		return arguments[0] ? l : Math.sqrt(l);
-	},
-
-	setLength: function(length) {
-		if (this.isZero()) {
-			var angle = this._angle || 0;
-			this.set(
-				Math.cos(angle) * length,
-				Math.sin(angle) * length
-			);
-		} else {
-			var scale = length / this.getLength();
-			if (scale == 0)
-				this.getAngle();
-			this.set(
-				this.x * scale,
-				this.y * scale
-			);
-		}
-		return this;
-	},
-
-	normalize: function(length) {
-		if (length === undefined)
-			length = 1;
-		var current = this.getLength(),
-			scale = current != 0 ? length / current : 0,
-			point = Point.create(this.x * scale, this.y * scale);
-		point._angle = this._angle;
-		return point;
-	},
-
-	getAngle: function() {
-		return this.getAngleInRadians(arguments[0]) * 180 / Math.PI;
-	},
-
-	setAngle: function(angle) {
-		angle = this._angle = angle * Math.PI / 180;
-		if (!this.isZero()) {
-			var length = this.getLength();
-			this.set(
-				Math.cos(angle) * length,
-				Math.sin(angle) * length
-			);
-		}
-		return this;
-	},
-
-	getAngleInRadians: function() {
-		if (arguments[0] === undefined) {
-			if (this._angle == null)
-				this._angle = Math.atan2(this.y, this.x);
-			return this._angle;
-		} else {
-			var point = Point.read(arguments),
-				div = this.getLength() * point.getLength();
-			if (div == 0) {
-				return NaN;
-			} else {
-				return Math.acos(this.dot(point) / div);
-			}
-		}
-	},
-
-	getAngleInDegrees: function() {
-		return this.getAngle(arguments[0]);
-	},
-
-	getQuadrant: function() {
-		return this.x >= 0 ? this.y >= 0 ? 1 : 4 : this.y >= 0 ? 2 : 3;
-	},
-
-	getDirectedAngle: function(point) {
-		point = Point.read(arguments);
-		return Math.atan2(this.cross(point), this.dot(point)) * 180 / Math.PI;
-	},
-
-	rotate: function(angle, center) {
-		angle = angle * Math.PI / 180;
-		var point = center ? this.subtract(center) : this,
-			s = Math.sin(angle),
-			c = Math.cos(angle);
-		point = Point.create(
-			point.x * c - point.y * s,
-			point.y * c + point.x * s
-		);
-		return center ? point.add(center) : point;
-	},
-
-	equals: function(point) {
-		point = Point.read(arguments);
-		return this.x == point.x && this.y == point.y;
-	},
-
-	isInside: function(rect) {
-		return rect.contains(this);
-	},
-
-	isClose: function(point, tolerance) {
-		return this.getDistance(point) < tolerance;
-	},
-
-	isColinear: function(point) {
-		return this.cross(point) < Numerical.TOLERANCE;
-	},
-
-	isOrthogonal: function(point) {
-		return this.dot(point) < Numerical.TOLERANCE;
-	},
-
-	isZero: function() {
-		return this.x == 0 && this.y == 0;
-	},
-
-	isNaN: function() {
-		return isNaN(this.x) || isNaN(this.y);
-	},
-
-	dot: function(point) {
-		point = Point.read(arguments);
-		return this.x * point.x + this.y * point.y;
-	},
-
-	cross: function(point) {
-		point = Point.read(arguments);
-		return this.x * point.y - this.y * point.x;
-	},
-
-	project: function(point) {
-		point = Point.read(arguments);
-		if (point.isZero()) {
-			return Point.create(0, 0);
-		} else {
-			var scale = this.dot(point) / point.dot(point);
-			return Point.create(
-				point.x * scale,
-				point.y * scale
-			);
-		}
-	},
-
-	statics: {
-		create: function(x, y) {
-			var point = new Point(Point.dont);
-			point.x = x;
-			point.y = y;
-			return point;
-		},
-
-		min: function(point1, point2) {
-			point1 = Point.read(arguments, 0, 1);
-			point2 = Point.read(arguments, 1, 1);
-			return Point.create(
-				Math.min(point1.x, point2.x),
-				Math.min(point1.y, point2.y)
-			);
-		},
-
-		max: function(point1, point2) {
-			point1 = Point.read(arguments, 0, 1);
-			point2 = Point.read(arguments, 1, 1);
-			return Point.create(
-				Math.max(point1.x, point2.x),
-				Math.max(point1.y, point2.y)
-			);
-		},
-
-		random: function() {
-			return Point.create(Math.random(), Math.random());
-		}
-	}
-}, new function() { 
-
-	return Base.each(['round', 'ceil', 'floor', 'abs'], function(name) {
-		var op = Math[name];
-		this[name] = function() {
-			return Point.create(op(this.x), op(this.y));
-		};
-	}, {});
-});
-
-var LinkedPoint = Point.extend({
-	set: function(x, y, dontNotify) {
-		this._x = x;
-		this._y = y;
-		if (!dontNotify)
-			this._owner[this._setter](this);
-		return this;
-	},
-
-	getX: function() {
-		return this._x;
-	},
-
-	setX: function(x) {
-		this._x = x;
-		this._owner[this._setter](this);
-	},
-
-	getY: function() {
-		return this._y;
-	},
-
-	setY: function(y) {
-		this._y = y;
-		this._owner[this._setter](this);
-	},
-
-	statics: {
-		create: function(owner, setter, x, y, dontLink) {
-			if (dontLink)
-				return Point.create(x, y);
-			var point = new LinkedPoint(LinkedPoint.dont);
-			point._x = x;
-			point._y = y;
-			point._owner = owner;
-			point._setter = setter;
-			return point;
-		}
-	}
-});
-
-var Size = this.Size = Base.extend({
-	initialize: function(arg0, arg1) {
-		if (arg1 !== undefined) {
-			this.width = arg0;
-			this.height = arg1;
-		} else if (arg0 !== undefined) {
-			if (arg0 == null) {
-				this.width = this.height = 0;
-			} else if (arg0.width !== undefined) {
-				this.width = arg0.width;
-				this.height = arg0.height;
-			} else if (arg0.x !== undefined) {
-				this.width = arg0.x;
-				this.height = arg0.y;
-			} else if (Array.isArray(arg0)) {
-				this.width = arg0[0];
-				this.height = arg0.length > 1 ? arg0[1] : arg0[0];
-			} else if (typeof arg0 === 'number') {
-				this.width = this.height = arg0;
-			} else {
-				this.width = this.height = 0;
-			}
-		} else {
-			this.width = this.height = 0;
-		}
-	},
-
-	toString: function() {
-		var format = Base.formatNumber;
-		return '{ width: ' + format(this.width)
-				+ ', height: ' + format(this.height) + ' }';
-	},
-
-	set: function(width, height) {
-		this.width = width;
-		this.height = height;
-		return this;
-	},
-
-	clone: function() {
-		return Size.create(this.width, this.height);
-	},
-
-	add: function(size) {
-		size = Size.read(arguments);
-		return Size.create(this.width + size.width, this.height + size.height);
-	},
-
-	subtract: function(size) {
-		size = Size.read(arguments);
-		return Size.create(this.width - size.width, this.height - size.height);
-	},
-
-	multiply: function(size) {
-		size = Size.read(arguments);
-		return Size.create(this.width * size.width, this.height * size.height);
-	},
-
-	divide: function(size) {
-		size = Size.read(arguments);
-		return Size.create(this.width / size.width, this.height / size.height);
-	},
-
-	modulo: function(size) {
-		size = Size.read(arguments);
-		return Size.create(this.width % size.width, this.height % size.height);
-	},
-
-	negate: function() {
-		return Size.create(-this.width, -this.height);
-	},
-
-	equals: function(size) {
-		size = Size.read(arguments);
-		return this.width == size.width && this.height == size.height;
-	},
-
-	isZero: function() {
-		return this.width == 0 && this.height == 0;
-	},
-
-	isNaN: function() {
-		return isNaN(this.width) || isNaN(this.height);
-	},
-
-	statics: {
-		create: function(width, height) {
-			return new Size(Size.dont).set(width, height);
-		},
-
-		min: function(size1, size2) {
-			return Size.create(
-				Math.min(size1.width, size2.width),
-				Math.min(size1.height, size2.height));
-		},
-
-		max: function(size1, size2) {
-			return Size.create(
-				Math.max(size1.width, size2.width),
-				Math.max(size1.height, size2.height));
-		},
-
-		random: function() {
-			return Size.create(Math.random(), Math.random());
-		}
-	}
-}, new function() { 
-
-	return Base.each(['round', 'ceil', 'floor', 'abs'], function(name) {
-		var op = Math[name];
-		this[name] = function() {
-			return Size.create(op(this.width), op(this.height));
-		};
-	}, {});
-});
-
-var LinkedSize = Size.extend({
-	set: function(width, height, dontNotify) {
-		this._width = width;
-		this._height = height;
-		if (!dontNotify)
-			this._owner[this._setter](this);
-		return this;
-	},
-
-	getWidth: function() {
-		return this._width;
-	},
-
-	setWidth: function(width) {
-		this._width = width;
-		this._owner[this._setter](this);
-	},
-
-	getHeight: function() {
-		return this._height;
-	},
-
-	setHeight: function(height) {
-		this._height = height;
-		this._owner[this._setter](this);
-	},
-
-	statics: {
-		create: function(owner, setter, width, height, dontLink) {
-			if (dontLink)
-				return Size.create(width, height);
-			var size = new LinkedSize(LinkedSize.dont);
-			size._width = width;
-			size._height = height;
-			size._owner = owner;
-			size._setter = setter;
-			return size;
-		}
-	}
-});
-
-var Rectangle = this.Rectangle = Base.extend({
-	initialize: function(arg0, arg1, arg2, arg3) {
-		if (arguments.length == 4) {
-			this.x = arg0;
-			this.y = arg1;
-			this.width = arg2;
-			this.height = arg3;
-		} else if (arguments.length == 2) {
-			if (arg1 && arg1.x !== undefined) {
-				var point1 = Point.read(arguments, 0, 1);
-				var point2 = Point.read(arguments, 1, 1);
-				this.x = point1.x;
-				this.y = point1.y;
-				this.width = point2.x - point1.x;
-				this.height = point2.y - point1.y;
-				if (this.width < 0) {
-					this.x = point2.x;
-					this.width = -this.width;
-				}
-				if (this.height < 0) {
-					this.y = point2.y;
-					this.height = -this.height;
-				}
-			} else {
-				var point = Point.read(arguments, 0, 1);
-				var size = Size.read(arguments, 1, 1);
-				this.x = point.x;
-				this.y = point.y;
-				this.width = size.width;
-				this.height = size.height;
-			}
-		} else if (arg0) {
-			this.x = arg0.x || 0;
-			this.y = arg0.y || 0;
-			this.width = arg0.width || 0;
-			this.height = arg0.height || 0;
-		} else {
-			this.x = this.y = this.width = this.height = 0;
-		}
-	},
-
-	set: function(x, y, width, height) {
-		this.x = x;
-		this.y = y;
-		this.width = width;
-		this.height = height;
-		return this;
-	},
-
-	getPoint: function() {
-		return LinkedPoint.create(this, 'setPoint', this.x, this.y,
-				arguments[0]);
-	},
-
-	setPoint: function(point) {
-		point = Point.read(arguments);
-		this.x = point.x;
-		this.y = point.y;
-		return this;
-	},
-
-	getSize: function() {
-		return LinkedSize.create(this, 'setSize', this.width, this.height,
-				arguments[0]);
-	},
-
-	setSize: function(size) {
-		size = Size.read(arguments);
-		this.width = size.width;
-		this.height = size.height;
-		return this;
-	},
-
-	getLeft: function() {
-		return this.x;
-	},
-
-	setLeft: function(left) {
-		this.width -= left - this.x;
-		this.x = left;
-		return this;
-	},
-
-	getTop: function() {
-		return this.y;
-	},
-
-	setTop: function(top) {
-		this.height -= top - this.y;
-		this.y = top;
-		return this;
-	},
-
-	getRight: function() {
-		return this.x + this.width;
-	},
-
-	setRight: function(right) {
-		this.width = right - this.x;
-		return this;
-	},
-
-	getBottom: function() {
-		return this.y + this.height;
-	},
-
-	setBottom: function(bottom) {
-		this.height = bottom - this.y;
-		return this;
-	},
-
-	getCenterX: function() {
-		return this.x + this.width * 0.5;
-	},
-
-	setCenterX: function(x) {
-		this.x = x - this.width * 0.5;
-		return this;
-	},
-
-	getCenterY: function() {
-		return this.y + this.height * 0.5;
-	},
-
-	setCenterY: function(y) {
-		this.y = y - this.height * 0.5;
-		return this;
-	},
-
-	getCenter: function() {
-		return LinkedPoint.create(this, 'setCenter',
-				this.getCenterX(), this.getCenterY(), arguments[0]);
-	},
-
-	setCenter: function(point) {
-		point = Point.read(arguments);
-		return this.setCenterX(point.x).setCenterY(point.y);
-	},
-
-	equals: function(rect) {
-		rect = Rectangle.read(arguments);
-		return this.x == rect.x && this.y == rect.y
-				&& this.width == rect.width && this.height == rect.height;
-	},
-
-	isEmpty: function() {
-		return this.width == 0 || this.height == 0;
-	},
-
-	toString: function() {
-		var format = Base.formatNumber;
-		return '{ x: ' + format(this.x)
-				+ ', y: ' + format(this.y)
-				+ ', width: ' + format(this.width)
-				+ ', height: ' + format(this.height)
-				+ ' }';
-	},
-
-	contains: function(arg) {
-		return arg && arg.width !== undefined
-				|| (Array.isArray(arg) ? arg : arguments).length == 4
-				? this._containsRectangle(Rectangle.read(arguments))
-				: this._containsPoint(Point.read(arguments));
-	},
-
-	_containsPoint: function(point) {
-		var x = point.x,
-			y = point.y;
-		return x >= this.x && y >= this.y
-				&& x <= this.x + this.width
-				&& y <= this.y + this.height;
-	},
-
-	_containsRectangle: function(rect) {
-		var x = rect.x,
-			y = rect.y;
-		return x >= this.x && y >= this.y
-				&& x + rect.width <= this.x + this.width
-				&& y + rect.height <= this.y + this.height;
-	},
-
-	intersects: function(rect) {
-		rect = Rectangle.read(arguments);
-		return rect.x + rect.width > this.x
-				&& rect.y + rect.height > this.y
-				&& rect.x < this.x + this.width
-				&& rect.y < this.y + this.height;
-	},
-
-	intersect: function(rect) {
-		rect = Rectangle.read(arguments);
-		var x1 = Math.max(this.x, rect.x),
-			y1 = Math.max(this.y, rect.y),
-			x2 = Math.min(this.x + this.width, rect.x + rect.width),
-			y2 = Math.min(this.y + this.height, rect.y + rect.height);
-		return Rectangle.create(x1, y1, x2 - x1, y2 - y1);
-	},
-
-	unite: function(rect) {
-		rect = Rectangle.read(arguments);
-		var x1 = Math.min(this.x, rect.x),
-			y1 = Math.min(this.y, rect.y),
-			x2 = Math.max(this.x + this.width, rect.x + rect.width),
-			y2 = Math.max(this.y + this.height, rect.y + rect.height);
-		return Rectangle.create(x1, y1, x2 - x1, y2 - y1);
-	},
-
-	include: function(point) {
-		point = Point.read(arguments);
-		var x1 = Math.min(this.x, point.x),
-			y1 = Math.min(this.y, point.y),
-			x2 = Math.max(this.x + this.width, point.x),
-			y2 = Math.max(this.y + this.height, point.y);
-		return Rectangle.create(x1, y1, x2 - x1, y2 - y1);
-	},
-
-	expand: function(hor, ver) {
-		if (ver === undefined)
-			ver = hor;
-		return Rectangle.create(this.x - hor / 2, this.y - ver / 2,
-				this.width + hor, this.height + ver);
-	},
-
-	scale: function(hor, ver) {
-		return this.expand(this.width * hor - this.width,
-				this.height * (ver === undefined ? hor : ver) - this.height);
-	},
-
-	statics: {
-		create: function(x, y, width, height) {
-			return new Rectangle(Rectangle.dont).set(x, y, width, height);
-		}
-	}
-}, new function() {
-	return Base.each([
-			['Top', 'Left'], ['Top', 'Right'],
-			['Bottom', 'Left'], ['Bottom', 'Right'],
-			['Left', 'Center'], ['Top', 'Center'],
-			['Right', 'Center'], ['Bottom', 'Center']
-		],
-		function(parts, index) {
-			var part = parts.join('');
-			var xFirst = /^[RL]/.test(part);
-			if (index >= 4)
-				parts[1] += xFirst ? 'Y' : 'X';
-			var x = parts[xFirst ? 0 : 1],
-				y = parts[xFirst ? 1 : 0],
-				getX = 'get' + x,
-				getY = 'get' + y,
-				setX = 'set' + x,
-				setY = 'set' + y,
-				get = 'get' + part,
-				set = 'set' + part;
-			this[get] = function() {
-				return LinkedPoint.create(this, set,
-						this[getX](), this[getY](), arguments[0]);
-			};
-			this[set] = function(point) {
-				point = Point.read(arguments);
-				return this[setX](point.x)[setY](point.y);
-			};
-		}, {});
-});
-
-var LinkedRectangle = Rectangle.extend({
-	set: function(x, y, width, height, dontNotify) {
-		this._x = x;
-		this._y = y;
-		this._width = width;
-		this._height = height;
-		if (!dontNotify)
-			this._owner[this._setter](this);
-		return this;
-	},
-
-	statics: {
-		create: function(owner, setter, x, y, width, height) {
-			var rect = new LinkedRectangle(LinkedRectangle.dont).set(
-					x, y, width, height, true);
-			rect._owner = owner;
-			rect._setter = setter;
-			return rect;
-		}
-	}
-}, new function() {
-	var proto = Rectangle.prototype;
-
-	return Base.each(['x', 'y', 'width', 'height'], function(key) {
-		var part = Base.capitalize(key);
-		var internal = '_' + key;
-		this['get' + part] = function() {
-			return this[internal];
-		};
-
-		this['set' + part] = function(value) {
-			this[internal] = value;
-			if (!this._dontNotify)
-				this._owner[this._setter](this);
-		};
-	}, Base.each(['Point', 'Size', 'Center',
-			'Left', 'Top', 'Right', 'Bottom', 'CenterX', 'CenterY',
-			'TopLeft', 'TopRight', 'BottomLeft', 'BottomRight',
-			'LeftCenter', 'TopCenter', 'RightCenter', 'BottomCenter'],
-		function(key) {
-			var name = 'set' + key;
-			this[name] = function(value) {
-				this._dontNotify = true;
-				proto[name].apply(this, arguments);
-				delete this._dontNotify;
-				this._owner[this._setter](this);
-				return this;
-			};
-		}, {})
-	);
-});
-
-var Matrix = this.Matrix = Base.extend({
-	initialize: function(arg) {
-		var count = arguments.length,
-			ok = true;
-		if (count == 6) {
-			this.set.apply(this, arguments);
-		} else if (count == 1) {
-			if (arg instanceof Matrix) {
-				this.set(arg._a, arg._c, arg._b, arg._d, arg._tx, arg._ty);
-			} else if (Array.isArray(arg)) {
-				this.set.apply(this, arg);
-			} else {
-				ok = false;
-			}
-		} else if (count == 0) {
-			this._a = this._d = 1;
-			this._c = this._b = this._tx = this._ty = 0;
-		} else {
-			ok = false;
-		}
-		if (!ok)
-			throw new Error('Unsupported matrix parameters');
-	},
-
-	clone: function() {
-		return Matrix.create(this._a, this._c, this._b, this._d,
-				this._tx, this._ty);
-	},
-
-	set: function(a, c, b, d, tx, ty) {
-		this._a = a;
-		this._c = c;
-		this._b = b;
-		this._d = d;
-		this._tx = tx;
-		this._ty = ty;
-		return this;
-	},
-
-	scale: function( hor, ver, center) {
-		if (arguments.length < 2 || typeof ver === 'object') {
-			center = Point.read(arguments, 1);
-			ver = hor;
-		} else {
-			center = Point.read(arguments, 2);
-		}
-		if (center)
-			this.translate(center);
-		this._a *= hor;
-		this._c *= hor;
-		this._b *= ver;
-		this._d *= ver;
-		if (center)
-			this.translate(center.negate());
-		return this;
-	},
-
-	translate: function(point) {
-		point = Point.read(arguments);
-		var x = point.x, y = point.y;
-		this._tx += x * this._a + y * this._b;
-		this._ty += x * this._c + y * this._d;
-		return this;
-	},
-
-	rotate: function(angle, center) {
-		return this.concatenate(
-				Matrix.getRotateInstance.apply(Matrix, arguments));
-	},
-
-	shear: function( hor, ver, center) {
-		if (arguments.length < 2 || typeof ver === 'object') {
-			center = Point.read(arguments, 1);
-			ver = hor;
-		} else {
-			center = Point.read(arguments, 2);
-		}
-		if (center)
-			this.translate(center);
-		var a = this._a,
-			c = this._c;
-		this._a += ver * this._b;
-		this._c += ver * this._d;
-		this._b += hor * a;
-		this._d += hor * c;
-		if (center)
-			this.translate(center.negate());
-		return this;
-	},
-
-	toString: function() {
-		var format = Base.formatNumber;
-		return '[[' + [format(this._a), format(this._b),
-					format(this._tx)].join(', ') + '], ['
-				+ [format(this._c), format(this._d),
-					format(this._ty)].join(', ') + ']]';
-	},
-
-	getValues: function() {
-		return [ this._a, this._c, this._b, this._d, this._tx, this._ty ];
-	},
-
-	concatenate: function(mx) {
-		var a = this._a,
-			b = this._b,
-			c = this._c,
-			d = this._d;
-		this._a = mx._a * a + mx._c * b;
-		this._b = mx._b * a + mx._d * b;
-		this._tx += mx._tx * a + mx._ty * b;
-		this._c = mx._a * c + mx._c * d;
-		this._d = mx._b * c + mx._d * d;
-		this._ty += mx._tx * c + mx._ty * d;
-		return this;
-	},
-
-	preConcatenate: function(mx) {
-		var a = this._a,
-			b = this._b,
-			c = this._c,
-			d = this._d,
-			tx = this._tx,
-			ty = this._ty;
-		this._a = mx._a * a + mx._b * c;
-		this._c = mx._c * a + mx._d * c;
-		this._b = mx._a * b + mx._b * d;
-		this._d = mx._c * b + mx._d * d;
-		this._tx = mx._a * tx + mx._b * ty + mx._tx;
-		this._ty = mx._c * tx + mx._d * ty + mx._ty;
-		return this;
-	},
-
-	transform: function( src, srcOff, dst, dstOff, numPts) {
-		return arguments.length < 5
-			? this._transformPoint(Point.read(arguments))
-			: this._transformCoordinates(src, srcOff, dst, dstOff, numPts);
-	},
-
-	_transformPoint: function(point, dest, dontNotify) {
-		var x = point.x,
-			y = point.y;
-		if (!dest)
-			dest = new Point(Point.dont);
-		return dest.set(
-			x * this._a + y * this._b + this._tx,
-			x * this._c + y * this._d + this._ty,
-			dontNotify
-		);
-	},
-
-	_transformCoordinates: function(src, srcOff, dst, dstOff, numPts) {
-		var i = srcOff, j = dstOff,
-			srcEnd = srcOff + 2 * numPts;
-		while (i < srcEnd) {
-			var x = src[i++];
-			var y = src[i++];
-			dst[j++] = x * this._a + y * this._b + this._tx;
-			dst[j++] = x * this._c + y * this._d + this._ty;
-		}
-		return dst;
-	},
-
-	_transformCorners: function(rect) {
-		var x1 = rect.x,
-			y1 = rect.y,
-			x2 = x1 + rect.width,
-			y2 = y1 + rect.height,
-			coords = [ x1, y1, x2, y1, x2, y2, x1, y2 ];
-		return this._transformCoordinates(coords, 0, coords, 0, 4);
-	},
-
-	_transformBounds: function(bounds) {
-		var coords = this._transformCorners(bounds),
-			min = coords.slice(0, 2),
-			max = coords.slice(0);
-		for (var i = 2; i < 8; i++) {
-			var val = coords[i],
-				j = i & 1;
-			if (val < min[j])
-				min[j] = val;
-			else if (val > max[j])
-				max[j] = val;
-		}
-		return Rectangle.create(min[0], min[1],
-				max[0] - min[0], max[1] - min[1]);
-	},
-
-	inverseTransform: function(point) {
-		return this._inverseTransform(Point.read(arguments));
-	},
-
-	_getDeterminant: function() {
-		var det = this._a * this._d - this._b * this._c;
-		return isFinite(det) && Math.abs(det) > Numerical.EPSILON
-				&& isFinite(this._tx) && isFinite(this._ty)
-				? det : null;
-	},
-
-	_inverseTransform: function(point, dest, dontNotify) {
-		var det = this._getDeterminant();
-		if (!det)
-			return null;
-		var x = point.x - this._tx,
-			y = point.y - this._ty;
-		if (!dest)
-			dest = new Point(Point.dont);
-		return dest.set(
-			(x * this._d - y * this._b) / det,
-			(y * this._a - x * this._c) / det,
-			dontNotify
-		);
-	},
-
-	getTranslation: function() {
-		return new Point(this._tx, this._ty);
-	},
-
-	getScaling: function() {
-		var hor = Math.sqrt(this._a * this._a + this._c * this._c),
-			ver = Math.sqrt(this._b * this._b + this._d * this._d);
-		return new Point(this._a < 0 ? -hor : hor, this._b < 0 ? -ver : ver);
-	},
-
-	getRotation: function() {
-		var angle1 = -Math.atan2(this._b, this._d),
-			angle2 = Math.atan2(this._c, this._a);
-		return Math.abs(angle1 - angle2) < Numerical.TOLERANCE
-				? angle1 * 180 / Math.PI : undefined;
-	},
-
-	isIdentity: function() {
-		return this._a == 1 && this._c == 0 && this._b == 0 && this._d == 1
-				&& this._tx == 0 && this._ty == 0;
-	},
-
-	isInvertible: function() {
-		return !!this._getDeterminant();
-	},
-
-	isSingular: function() {
-		return !this._getDeterminant();
-	},
-
-	createInverse: function() {
-		var det = this._getDeterminant();
-		return det && Matrix.create(
-				this._d / det,
-				-this._c / det,
-				-this._b / det,
-				this._a / det,
-				(this._b * this._ty - this._d * this._tx) / det,
-				(this._c * this._tx - this._a * this._ty) / det);
-	},
-
-	createShiftless: function() {
-		return Matrix.create(this._a, this._c, this._b, this._d, 0, 0);
-	},
-
-	setToScale: function(hor, ver) {
-		return this.set(hor, 0, 0, ver, 0, 0);
-	},
-
-	setToTranslation: function(delta) {
-		delta = Point.read(arguments);
-		return this.set(1, 0, 0, 1, delta.x, delta.y);
-	},
-
-	setToShear: function(hor, ver) {
-		return this.set(1, ver, hor, 1, 0, 0);
-	},
-
-	setToRotation: function(angle, center) {
-		center = Point.read(arguments, 1);
-		angle = angle * Math.PI / 180;
-		var x = center.x,
-			y = center.y,
-			cos = Math.cos(angle),
-			sin = Math.sin(angle);
-		return this.set(cos, sin, -sin, cos,
-				x - x * cos + y * sin,
-				y - x * sin - y * cos);
-	},
-
-	applyToContext: function(ctx, reset) {
-		ctx[reset ? 'setTransform' : 'transform'](
-				this._a, this._c, this._b, this._d, this._tx, this._ty);
-		return this;
-	},
-
-	statics: {
-		create: function(a, c, b, d, tx, ty) {
-			return new Matrix(Matrix.dont).set(a, c, b, d, tx, ty);
-		},
-
-		getScaleInstance: function(hor, ver) {
-			var mx = new Matrix();
-			return mx.setToScale.apply(mx, arguments);
-		},
-
-		getTranslateInstance: function(delta) {
-			var mx = new Matrix();
-			return mx.setToTranslation.apply(mx, arguments);
-		},
-
-		getShearInstance: function(hor, ver, center) {
-			var mx = new Matrix();
-			return mx.setToShear.apply(mx, arguments);
-		},
-
-		getRotateInstance: function(angle, center) {
-			var mx = new Matrix();
-			return mx.setToRotation.apply(mx, arguments);
-		}
-	}
-}, new function() {
-	return Base.each({
-		scaleX: '_a',
-		scaleY: '_d',
-		translateX: '_tx',
-		translateY: '_ty',
-		shearX: '_b',
-		shearY: '_c'
-	}, function(prop, name) {
-		name = Base.capitalize(name);
-		this['get' + name] = function() {
-			return this[prop];
-		};
-		this['set' + name] = function(value) {
-			this[prop] = value;
-		};
-	}, {});
-});
-
-var Line = this.Line = Base.extend({
-	initialize: function(point1, point2, infinite) {
-		point1 = Point.read(arguments, 0, 1);
-		point2 = Point.read(arguments, 1, 1);
-		if (arguments.length == 3) {
-			this.point = point1;
-			this.vector = point2.subtract(point1);
-			this.infinite = infinite;
-		} else {
-			this.point = point1;
-			this.vector = point2;
-			this.infinite = true;
-		}
-	},
-
-	intersect: function(line) {
-		var cross = this.vector.cross(line.vector);
-		if (Math.abs(cross) <= Numerical.EPSILON)
-			return null;
-		var v = line.point.subtract(this.point),
-			t1 = v.cross(line.vector) / cross,
-			t2 = v.cross(this.vector) / cross;
-		return (this.infinite || 0 <= t1 && t1 <= 1)
-				&& (line.infinite || 0 <= t2 && t2 <= 1)
-			? this.point.add(this.vector.multiply(t1)) : null;
-	},
-
-	getSide: function(point) {
-		var v1 = this.vector,
-			v2 = point.subtract(this.point),
-			ccw = v2.cross(v1);
-		if (ccw == 0) {
-			ccw = v2.dot(v1);
-			if (ccw > 0) {
-				ccw = v2.subtract(v1).dot(v1);
-				if (ccw < 0)
-				    ccw = 0;
-			}
-		}
-		return ccw < 0 ? -1 : ccw > 0 ? 1 : 0;
-	},
-
-	getDistance: function(point) {
-		var m = this.vector.y / this.vector.x, 
-			b = this.point.y - (m * this.point.x); 
-		var dist = Math.abs(point.y - (m * point.x) - b) / Math.sqrt(m * m + 1);
-		return this.infinite ? dist : Math.min(dist,
-				point.getDistance(this.point),
-				point.getDistance(this.point.add(this.vector)));
-	}
-});
-
-var Project = this.Project = PaperScopeItem.extend({
-	_list: 'projects',
-	_reference: 'project',
-
-	initialize: function() {
-		this.base(true);
-		this._currentStyle = new PathStyle();
-		this._selectedItems = {};
-		this._selectedItemCount = 0;
-		this.layers = [];
-		this.symbols = [];
-		this.activeLayer = new Layer();
-	},
-
-	_needsRedraw: function() {
-		if (this._scope)
-			this._scope._needsRedraw();
-	},
-
-	getCurrentStyle: function() {
-		return this._currentStyle;
-	},
-
-	setCurrentStyle: function(style) {
-		this._currentStyle.initialize(style);
-	},
-
-	getIndex: function() {
-		return this._index;
-	},
-
-	getSelectedItems: function() {
-		var items = [];
-		Base.each(this._selectedItems, function(item) {
-			items.push(item);
-		});
-		return items;
-	},
-
-	_updateSelection: function(item) {
-		if (item._selected) {
-			this._selectedItemCount++;
-			this._selectedItems[item.getId()] = item;
-		} else {
-			this._selectedItemCount--;
-			delete this._selectedItems[item.getId()];
-		}
-	},
-
-	selectAll: function() {
-		for (var i = 0, l = this.layers.length; i < l; i++)
-			this.layers[i].setSelected(true);
-	},
-
-	deselectAll: function() {
-		for (var i in this._selectedItems)
-			this._selectedItems[i].setSelected(false);
-	},
-
-	hitTest: function(point, options) {
-		options = HitResult.getOptions(point, options);
-		point = options.point;
-		for (var i = this.layers.length - 1; i >= 0; i--) {
-			var res = this.layers[i].hitTest(point, options);
-			if (res) return res;
-		}
-		return null;
-	},
-
-	draw: function(ctx) {
-		ctx.save();
-		var param = { offset: new Point(0, 0) };
-		for (var i = 0, l = this.layers.length; i < l; i++)
-			Item.draw(this.layers[i], ctx, param);
-		ctx.restore();
-
-		if (this._selectedItemCount > 0) {
-			ctx.save();
-			ctx.strokeWidth = 1;
-			ctx.strokeStyle = ctx.fillStyle = '#009dec';
-			param = { selection: true };
-			Base.each(this._selectedItems, function(item) {
-				item.draw(ctx, param);
-			});
-			ctx.restore();
-		}
-	}
-});
-
-var Symbol = this.Symbol = Base.extend({
-	initialize: function(item) {
-		this.project = paper.project;
-		this.project.symbols.push(this);
-		this.setDefinition(item);
-		this._instances = {};
-	},
-
-	_changed: function(flags) {
-		Base.each(this._instances, function(item) {
-			item._changed(flags);
-		});
-	},
-
-	getDefinition: function() {
-		return this._definition;
-	},
-
-	setDefinition: function(item) {
-		if (item._parentSymbol)
-			item = item.clone();
-		if (this._definition)
-			delete this._definition._parentSymbol;
-		this._definition = item;
-		item.remove();
-		item.setPosition(new Point());
-		item._parentSymbol = this;
-		this._changed(Change.GEOMETRY);
-	},
-
-	place: function(position) {
-		return new PlacedSymbol(this, position);
-	},
-
-	clone: function() {
-	 	return new Symbol(this._definition.clone());
-	}
-});
-
-var ChangeFlag = {
-	APPEARANCE: 1,
-	HIERARCHY: 2,
-	GEOMETRY: 4,
-	STROKE: 8,
-	STYLE: 16,
-	ATTRIBUTE: 32,
-	CONTENT: 64,
-	PIXELS: 128,
-	CLIPPING: 256
-};
-
-var Change = {
-	HIERARCHY: ChangeFlag.HIERARCHY | ChangeFlag.APPEARANCE,
-	GEOMETRY: ChangeFlag.GEOMETRY | ChangeFlag.APPEARANCE,
-	STROKE: ChangeFlag.STROKE | ChangeFlag.STYLE | ChangeFlag.APPEARANCE,
-	STYLE: ChangeFlag.STYLE | ChangeFlag.APPEARANCE,
-	ATTRIBUTE: ChangeFlag.ATTRIBUTE | ChangeFlag.APPEARANCE,
-	CONTENT: ChangeFlag.CONTENT | ChangeFlag.APPEARANCE,
-	PIXELS: ChangeFlag.PIXELS | ChangeFlag.APPEARANCE
-};
-
-var Item = this.Item = Base.extend({
-	initialize: function() {
-		this._id = ++Item._id;
-		if (!this._project)
-			paper.project.activeLayer.addChild(this);
-		this._style = PathStyle.create(this);
-		this.setStyle(this._project.getCurrentStyle());
-	},
-
-	_changed: function(flags) {
-		if (flags & ChangeFlag.GEOMETRY) {
-			delete this._bounds;
-			delete this._position;
-		}
-		if (flags & ChangeFlag.APPEARANCE) {
-			this._project._needsRedraw();
-		}
-		if (this._parentSymbol)
-			this._parentSymbol._changed(flags);
-		if (this._project._changes) {
-			var entry = this._project._changesById[this._id];
-			if (entry) {
-				entry.flags |= flags;
-			} else {
-				entry = { item: this, flags: flags };
-				this._project._changesById[this._id] = entry;
-				this._project._changes.push(entry);
-			}
-		}
-	},
-
-	getId: function() {
-		return this._id;
-	},
-
-	getName: function() {
-		return this._name;
-	},
-
-	setName: function(name) {
-
-		if (this._name)
-			this._removeFromNamed();
-		this._name = name || undefined;
-		if (name) {
-			var children = this._parent._children,
-				namedChildren = this._parent._namedChildren;
-			(namedChildren[name] = namedChildren[name] || []).push(this);
-			children[name] = this;
-		}
-		this._changed(ChangeFlag.ATTRIBUTE);
-	},
-
-	getPosition: function() {
-		var pos = this._position
-				|| (this._position = this.getBounds().getCenter());
-		return LinkedPoint.create(this, 'setPosition', pos._x, pos._y);
-	},
-
-	setPosition: function(point) {
-		this.translate(Point.read(arguments).subtract(this.getPosition()));
-	},
-
-	getStyle: function() {
-		return this._style;
-	},
-
-	setStyle: function(style) {
-		this._style.initialize(style);
-	},
-
-	statics: {
-		_id: 0
-	}
-}, new function() { 
-	return Base.each(['locked', 'visible', 'blendMode', 'opacity', 'guide'],
-		function(name) {
-			var part = Base.capitalize(name),
-				name = '_' + name;
-			this['get' + part] = function() {
-				return this[name];
-			};
-			this['set' + part] = function(value) {
-				if (value != this[name]) {
-					this[name] = value;
-					this._changed(name === '_locked'
-							? ChangeFlag.ATTRIBUTE : Change.ATTRIBUTE);
-				}
-			};
-		}, {});
-}, {
-
-	_locked: false,
-
-	_visible: true,
-
-	_blendMode: 'normal',
-
-	_opacity: 1,
-
-	_guide: false,
-
-	isSelected: function() {
-		if (this._children) {
-			for (var i = 0, l = this._children.length; i < l; i++)
-				if (this._children[i].isSelected())
-					return true;
-		}
-		return this._selected;
-	},
-
-	setSelected: function(selected) {
-		if (this._children) {
-			for (var i = 0, l = this._children.length; i < l; i++) {
-				this._children[i].setSelected(selected);
-			}
-		} else if ((selected = !!selected) != this._selected) {
-			this._selected = selected;
-			this._project._updateSelection(this);
-			this._changed(Change.ATTRIBUTE);
-		}
-	},
-
-	_selected: false,
-
-	isFullySelected: function() {
-		if (this._children && this._selected) {
-			for (var i = 0, l = this._children.length; i < l; i++)
-				if (!this._children[i].isFullySelected())
-					return false;
-			return true;
-		}
-		return this._selected;
-	},
-
-	setFullySelected: function(selected) {
-		if (this._children) {
-			for (var i = 0, l = this._children.length; i < l; i++) {
-				this._children[i].setFullySelected(selected);
-			}
-		}
-		this.setSelected(selected);
-	},
-
-	isClipMask: function() {
-		return this._clipMask;
-	},
-
-	setClipMask: function(clipMask) {
-		if (this._clipMask != (clipMask = !!clipMask)) {
-			this._clipMask = clipMask;
-			if (clipMask) {
-				this.setFillColor(null);
-				this.setStrokeColor(null);
-			}
-			this._changed(Change.ATTRIBUTE);
-			if (this._parent)
-				this._parent._changed(ChangeFlag.CLIPPING);
-		}
-	},
-
-	_clipMask: false,
-
-	getProject: function() {
-		return this._project;
-	},
-
-	_setProject: function(project) {
-		if (this._project != project) {
-			this._project = project;
-			if (this._children) {
-				for (var i = 0, l = this._children.length; i < l; i++) {
-					this._children[i]._setProject(project);
-				}
-			}
-		}
-	},
-
-	getLayer: function() {
-		var parent = this;
-		while (parent = parent._parent) {
-			if (parent instanceof Layer)
-				return parent;
-		}
-		return null;
-	},
-
-	getParent: function() {
-		return this._parent;
-	},
-
-	getChildren: function() {
-		return this._children;
-	},
-
-	setChildren: function(items) {
-		this.removeChildren();
-		this.addChildren(items);
-	},
-
-	getFirstChild: function() {
-		return this._children && this._children[0] || null;
-	},
-
-	getLastChild: function() {
-		return this._children && this._children[this._children.length - 1]
-				|| null;
-	},
-
-	getNextSibling: function() {
-		return this._parent && this._parent._children[this._index + 1] || null;
-	},
-
-	getPreviousSibling: function() {
-		return this._parent && this._parent._children[this._index - 1] || null;
-	},
-
-	getIndex: function() {
-		return this._index;
-	},
-
-	clone: function() {
-		return this._clone(new this.constructor());
-	},
-
-	_clone: function(copy) {
-		copy.setStyle(this._style);
-		if (this._children) {
-			for (var i = 0, l = this._children.length; i < l; i++)
-				copy.addChild(this._children[i].clone());
-		}
-		var keys = ['_locked', '_visible', '_blendMode', '_opacity',
-				'_clipMask', '_guide'];
-		for (var i = 0, l = keys.length; i < l; i++) {
-			var key = keys[i];
-			if (this.hasOwnProperty(key))
-				copy[key] = this[key];
-		}
-		copy.setSelected(this._selected);
-		if (this._name)
-			copy.setName(this._name);
-		return copy;
-	},
-
-	copyTo: function(itemOrProject) {
-		var copy = this.clone();
-		if (itemOrProject.layers) {
-			itemOrProject.activeLayer.addChild(copy);
-		} else {
-			itemOrProject.addChild(copy);
-		}
-		return copy;
-	},
-
-	rasterize: function(resolution) {
-		var bounds = this.getStrokeBounds(),
-			scale = (resolution || 72) / 72,
-			canvas = CanvasProvider.getCanvas(bounds.getSize().multiply(scale)),
-			ctx = canvas.getContext('2d'),
-			matrix = new Matrix().scale(scale).translate(-bounds.x, -bounds.y);
-		matrix.applyToContext(ctx);
-		this.draw(ctx, {});
-		var raster = new Raster(canvas);
-		raster.setBounds(bounds);
-		return raster;
-	},
-
-	hitTest: function(point, options, matrix) {
-		options = HitResult.getOptions(point, options);
-		point = options.point;
-		if (!this._children && !this.getRoughBounds(matrix)
-				.expand(options.tolerance)._containsPoint(point))
-			return null;
-		if ((options.center || options.bounds) &&
-				!(this instanceof Layer && !this._parent)) {
-			var bounds = this.getBounds(),
-				that = this,
-				points = ['TopLeft', 'TopRight', 'BottomLeft', 'BottomRight',
-				'LeftCenter', 'TopCenter', 'RightCenter', 'BottomCenter'],
-				res;
-			function checkBounds(type, part) {
-				var pt = bounds['get' + part]().transform(matrix);
-				if (point.getDistance(pt) < options.tolerance)
-					return new HitResult(type, that,
-							{ name: Base.hyphenate(part), point: pt });
-			}
-			if (options.center && (res = checkBounds('center', 'Center')))
-				return res;
-			if (options.bounds) {
-				for (var i = 0; i < 8; i++)
-					if (res = checkBounds('bounds', points[i]))
-						return res;
-			}
-		}
-
-		return this._children || !(options.guides && !this._guide
-				|| options.selected && !this._selected)
-					? this._hitTest(point, options, matrix) : null;
-	},
-
-	_hitTest: function(point, options, matrix) {
-		if (this._children) {
-			for (var i = this._children.length - 1; i >= 0; i--) {
-				var res = this._children[i].hitTest(point, options, matrix);
-				if (res) return res;
-			}
-		}
-	},
-
-	addChild: function(item) {
-		return this.insertChild(undefined, item);
-	},
-
-	insertChild: function(index, item) {
-		if (this._children) {
-			item._remove(false, true);
-			Base.splice(this._children, [item], index, 0);
-			item._parent = this;
-			item._setProject(this._project);
-			if (item._name)
-				item.setName(item._name);
-			this._changed(Change.HIERARCHY);
-			return true;
-		}
-		return false;
-	},
-
-	addChildren: function(items) {
-		for (var i = 0, l = items && items.length; i < l; i++)
-			this.insertChild(undefined, items[i]);
-	},
-
-	insertChildren: function(index, items) {
-		for (var i = 0, l = items && items.length; i < l; i++) {
-			if (this.insertChild(index, items[i]))
-				index++;
-		}
-	},
-
-	insertAbove: function(item) {
-		return item._parent && item._parent.insertChild(
-				item._index + 1, this);
-	},
-
-	insertBelow: function(item) {
-		return item._parent && item._parent.insertChild(
-				item._index - 1, this);
-	},
-
-	appendTop: function(item) {
-		return this.addChild(item);
-	},
-
-	appendBottom: function(item) {
-		return this.insertChild(0, item);
-	},
-
-	moveAbove: function(item) {
-		return this.insertAbove(item);
-	},
-
-	moveBelow: function(item) {
-		return this.insertBelow(item);
-	},
-
-	_removeFromNamed: function() {
-		var children = this._parent._children,
-			namedChildren = this._parent._namedChildren,
-			name = this._name,
-			namedArray = namedChildren[name],
-			index = namedArray ? namedArray.indexOf(this) : -1;
-		if (index == -1)
-			return;
-		if (children[name] == this)
-			delete children[name];
-		namedArray.splice(index, 1);
-		if (namedArray.length) {
-			children[name] = namedArray[namedArray.length - 1];
-		} else {
-			delete namedChildren[name];
-		}
-	},
-
-	_remove: function(deselect, notify) {
-		if (this._parent) {
-			if (deselect)
-				this.setSelected(false);
-			if (this._name)
-				this._removeFromNamed();
-			Base.splice(this._parent._children, null, this._index, 1);
-			if (notify)
-				this._parent._changed(Change.HIERARCHY);
-			this._parent = null;
-			return true;
-		}
-		return false;
-	},
-
-	remove: function() {
-		return this._remove(true, true);
-	},
-
-	removeChildren: function(from, to) {
-		if (!this._children)
-			return null;
-		from = from || 0;
-	 	to = Base.pick(to, this._children.length);
-		var removed = this._children.splice(from, to - from);
-		for (var i = removed.length - 1; i >= 0; i--)
-			removed[i]._remove(true, false);
-		if (removed.length > 0)
-			this._changed(Change.HIERARCHY);
-		return removed;
-	},
-
-	reverseChildren: function() {
-		if (this._children) {
-			this._children.reverse();
-			for (var i = 0, l = this._children.length; i < l; i++)
-				this._children[i]._index = i;
-			this._changed(Change.HIERARCHY);
-		}
-	},
-
-	isEditable: function() {
-		var item = this;
-		while (item) {
-			if (!item._visible || item._locked)
-				return false;
-			item = item._parent;
-		}
-		return true;
-	},
-
-	_getOrder: function(item) {
-		function getList(item) {
-			var list = [];
-			do {
-				list.unshift(item);
-			} while (item = item._parent)
-			return list;
-		}
-		var list1 = getList(this),
-			list2 = getList(item);
-		for (var i = 0, l = Math.min(list1.length, list2.length); i < l; i++) {
-			if (list1[i] != list2[i]) {
-				return list1[i]._index < list2[i]._index ? 1 : -1;
-			}
-		}
-		return 0;
-	},
-
-	hasChildren: function() {
-		return this._children && this._children.length > 0;
-	},
-
-	isAbove: function(item) {
-		return this._getOrder(item) == -1;
-	},
-
-	isBelow: function(item) {
-		return this._getOrder(item) == 1;
-	},
-
-	isParent: function(item) {
-		return this._parent == item;
-	},
-
-	isChild: function(item) {
-		return item && item._parent == this;
-	},
-
-	isDescendant: function(item) {
-		var parent = this;
-		while (parent = parent._parent) {
-			if (parent == item)
-				return true;
-		}
-		return false;
-	},
-
-	isAncestor: function(item) {
-		return item ? item.isDescendant(this) : false;
-	},
-
-	isGroupedWith: function(item) {
-		var parent = this._parent;
-		while (parent) {
-			if (parent._parent
-				&& (parent instanceof Group || parent instanceof CompoundPath)
-				&& item.isDescendant(parent))
-					return true;
-			parent = parent._parent;
-		}
-		return false;
-	},
-
-	_getBounds: function(getter, cacheName, args) {
-		var children = this._children;
-		if (!children || children.length == 0)
-			return new Rectangle();
-		var x1 = Infinity,
-			x2 = -x1,
-			y1 = x1,
-			y2 = x2;
-		for (var i = 0, l = children.length; i < l; i++) {
-			var child = children[i];
-			if (child._visible) {
-				var rect = child[getter](args[0]);
-				x1 = Math.min(rect.x, x1);
-				y1 = Math.min(rect.y, y1);
-				x2 = Math.max(rect.x + rect.width, x2);
-				y2 = Math.max(rect.y + rect.height, y2);
-			}
-		}
-		var bounds = Rectangle.create(x1, y1, x2 - x1, y2 - y1);
-		return getter == 'getBounds' ? this._createBounds(bounds) : bounds;
-	},
-
-	_createBounds: function(rect) {
-		return LinkedRectangle.create(this, 'setBounds',
-				rect.x, rect.y, rect.width, rect.height);
-	},
-
-	getBounds: function() {
-		return this._getBounds('getBounds', '_bounds', arguments);
-	},
-
-	setBounds: function(rect) {
-		rect = Rectangle.read(arguments);
-		var bounds = this.getBounds(),
-			matrix = new Matrix(),
-			center = rect.getCenter();
-		matrix.translate(center);
-		if (rect.width != bounds.width || rect.height != bounds.height) {
-			matrix.scale(
-					bounds.width != 0 ? rect.width / bounds.width : 1,
-					bounds.height != 0 ? rect.height / bounds.height : 1);
-		}
-		center = bounds.getCenter();
-		matrix.translate(-center.x, -center.y);
-		this.transform(matrix);
-	},
-
-	getStrokeBounds: function() {
-		return this._getBounds('getStrokeBounds', '_strokeBounds', arguments);
-	},
-
-	getHandleBounds: function() {
-		return this._getBounds('getHandleBounds', '_handleBounds', arguments);
-	},
-
-	getRoughBounds: function() {
-		return this._getBounds('getRoughBounds', '_roughBounds', arguments);
-	},
-
-	scale: function(hor, ver , center) {
-		if (arguments.length < 2 || typeof ver === 'object') {
-			center = ver;
-			ver = hor;
-		}
-		return this.transform(new Matrix().scale(hor, ver,
-				center || this.getPosition()));
-	},
-
-	translate: function(delta) {
-		var mx = new Matrix();
-		return this.transform(mx.translate.apply(mx, arguments));
-	},
-
-	rotate: function(angle, center) {
-		return this.transform(new Matrix().rotate(angle,
-				center || this.getPosition()));
-	},
-
-	shear: function(hor, ver, center) {
-		if (arguments.length < 2 || typeof ver === 'object') {
-			center = ver;
-			ver = hor;
-		}
-		return this.transform(new Matrix().shear(hor, ver,
-				center || this.getPosition()));
-	},
-
-	transform: function(matrix, flags) {
-		var bounds = this._bounds,
-			position = this._position,
-			children = this._children;
-		if (this._transform) {
-			this._transform(matrix, flags);
-			this._changed(Change.GEOMETRY);
-		}
-		if (bounds && matrix.getRotation() % 90 === 0) {
-			this._bounds = this._createBounds(
-					matrix._transformBounds(bounds));
-			this._position = this._bounds.getCenter();
-		} else if (position) {
-			this._position = matrix._transformPoint(position, position, true);
-		}
-		for (var i = 0, l = children && children.length; i < l; i++)
-			children[i].transform(matrix, flags);
-		return this;
-	},
-
-	fitBounds: function(rectangle, fill) {
-		rectangle = Rectangle.read(arguments);
-		var bounds = this.getBounds(),
-			itemRatio = bounds.height / bounds.width,
-			rectRatio = rectangle.height / rectangle.width,
-			scale = (fill ? itemRatio > rectRatio : itemRatio < rectRatio)
-					? rectangle.width / bounds.width
-					: rectangle.height / bounds.height,
-			delta = rectangle.getCenter().subtract(bounds.getCenter()),
-			newBounds = new Rectangle(new Point(),
-					new Size(bounds.width * scale, bounds.height * scale));
-		newBounds.setCenter(rectangle.getCenter());
-		this.setBounds(newBounds);
-	},
-
-	toString: function() {
-		return (this.constructor._name || 'Item') + (this._name
-				? " '" + this._name + "'"
-				: ' @' + this._id);
-	},
-
-	statics: {
-		drawSelectedBounds: function(bounds, ctx, matrix) {
-			var coords = matrix._transformCorners(bounds);
-			ctx.beginPath();
-			for (var i = 0; i < 8; i++)
-				ctx[i == 0 ? 'moveTo' : 'lineTo'](coords[i], coords[++i]);
-			ctx.closePath();
-			ctx.stroke();
-			for (var i = 0; i < 8; i++) {
-				ctx.beginPath();
-				ctx.rect(coords[i] - 2, coords[++i] - 2, 4, 4);
-				ctx.fill();
-			}
-		},
-
-		draw: function(item, ctx, param) {
-			if (!item._visible || item._opacity == 0)
-				return;
-
-			var tempCanvas, parentCtx;
-			if (item._blendMode !== 'normal'
-					|| item._opacity < 1
-					&& !(item._segments && (!item.getFillColor()
-							|| !item.getStrokeColor()))) {
-				var bounds = item.getStrokeBounds() || item.getBounds();
-				if (!bounds.width || !bounds.height)
-					return;
-
-				var itemOffset = bounds.getTopLeft().floor(),
-					size = bounds.getSize().ceil().add(new Size(1, 1));
-				tempCanvas = CanvasProvider.getCanvas(size);
-
-				parentCtx = ctx;
-
-				ctx = tempCanvas.getContext('2d');
-				ctx.save();
-
-				ctx.translate(-itemOffset.x, -itemOffset.y);
-			}
-			var savedOffset;
-			if (itemOffset) {
-				savedOffset = param.offset;
-				param.offset = itemOffset;
-			}
-			item.draw(ctx, param);
-			if (itemOffset)
-				param.offset = savedOffset;
-
-			if (tempCanvas) {
-
-				ctx.restore();
-
-				if (item._blendMode !== 'normal') {
-					var pixelOffset = itemOffset.subtract(param.offset);
-					BlendMode.process(item._blendMode, ctx, parentCtx,
-						item._opacity, pixelOffset);
-				} else {
-					parentCtx.save();
-					parentCtx.globalAlpha = item._opacity;
-					parentCtx.drawImage(tempCanvas,
-							itemOffset.x, itemOffset.y);
-					parentCtx.restore();
-				}
-
-				CanvasProvider.returnCanvas(tempCanvas);
-			}
-		}
-	}
-}, new function() {
-
-	var sets = {
-		down: {}, drag: {}, up: {}, move: {}
-	};
-
-	function removeAll(set) {
-		for (var id in set) {
-			var item = set[id];
-			item.remove();
-			for (var type in sets) {
-				var other = sets[type];
-				if (other != set && other[item.getId()])
-					delete other[item.getId()];
-			}
-		}
-	}
-
-	function installHandler(name) {
-		var handler = 'onMouse' + Base.capitalize(name);
-		var func = paper.tool[handler];
-		if (!func || !func._installed) {
-			var hash = {};
-			hash[handler] = function(event) {
-				if (name === 'up')
-					sets.drag = {};
-				removeAll(sets[name]);
-				sets[name] = {};
-				if (this.base)
-					this.base(event);
-			};
-			paper.tool.inject(hash);
-			paper.tool[handler]._installed = true;
-		}
-	}
-
-	return Base.each(['down', 'drag', 'up', 'move'], function(name) {
-		this['removeOn' + Base.capitalize(name)] = function() {
-			var hash = {};
-			hash[name] = true;
-			return this.removeOn(hash);
-		};
-	}, {
-		removeOn: function(obj) {
-			for (var name in obj) {
-				if (obj[name]) {
-					sets[name][this.getId()] = this;
-					if (name === 'drag')
-						installHandler('up');
-					installHandler(name);
-				}
-			}
-			return this;
-		}
-	});
-});
-
-var Group = this.Group = Item.extend({
-	initialize: function(items) {
-		this.base();
-		this._children = [];
-		this._namedChildren = {};
-		this.addChildren(!items || !Array.isArray(items)
-				|| typeof items[0] !== 'object' ? arguments : items);
-	},
-
-	_changed: function(flags) {
-		Item.prototype._changed.call(this, flags);
-		if (flags & (ChangeFlag.HIERARCHY | ChangeFlag.CLIPPING)) {
-			delete this._clipItem;
-		}
-	},
-
-	_getClipItem: function() {
-		if (this._clipItem !== undefined)
-			return this._clipItem;
-		for (var i = 0, l = this._children.length; i < l; i++) {
-			var child = this._children[i];
-			if (child._clipMask)
-				return this._clipItem = child;
-		}
-		return this._clipItem = null;
-	},
-
-	isClipped: function() {
-		return !!this._getClipItem();
-	},
-
-	setClipped: function(clipped) {
-		var child = this.getFirstChild();
-		if (child)
-			child.setClipMask(clipped);
-		return this;
-	},
-
-	draw: function(ctx, param) {
-		var clipItem = this._getClipItem();
-		if (clipItem)
-			Item.draw(clipItem, ctx, param);
-		for (var i = 0, l = this._children.length; i < l; i++) {
-			var item = this._children[i];
-			if (item != clipItem)
-				Item.draw(item, ctx, param);
-		}
-	}
-});
-
-var Layer = this.Layer = Group.extend({
-	initialize: function(items) {
-		this._project = paper.project;
-		this._index = this._project.layers.push(this) - 1;
-		this.base.apply(this, arguments);
-		this.activate();
-	},
-
-	_remove: function(deselect, notify) {
-		if (this._parent)
-			return this.base(deselect, notify);
-		if (this._index != null) {
-			if (deselect)
-				this.setSelected(false);
-			Base.splice(this._project.layers, null, this._index, 1);
-			this._project._needsRedraw();
-			return true;
-		}
-		return false;
-	},
-
-	getNextSibling: function() {
-		return this._parent ? this.base()
-				: this._project.layers[this._index + 1] || null;
-	},
-
-	getPreviousSibling: function() {
-		return this._parent ? this.base()
-				: this._project.layers[this._index - 1] || null;
-	},
-
-	activate: function() {
-		this._project.activeLayer = this;
-	}
-}, new function () {
-	function insert(above) {
-		return function(item) {
-			if (item instanceof Layer && !item._parent
-						&& this._remove(false, true)) {
-				Base.splice(item._project.layers, [this],
-						item._index + (above ? 1 : -1), 0);
-				this._setProject(item._project);
-				return true;
-			}
-			return this.base(item);
-		};
-	}
-
-	return {
-		insertAbove: insert(true),
-
-		insertBelow: insert(false)
-	};
-});
-
-var PlacedItem = this.PlacedItem = Item.extend({
-
-	_transform: function(matrix, flags) {
-		this._matrix.preConcatenate(matrix);
-	},
-
-	_changed: function(flags) {
-		Item.prototype._changed.call(this, flags);
-		if (flags & ChangeFlag.GEOMETRY) {
-			delete this._strokeBounds;
-			delete this._handleBounds;
-			delete this._roughBounds;
-		}
-	},
-
-	getMatrix: function() {
-		return this._matrix;
-	},
-
-	setMatrix: function(matrix) {
-		this._matrix = matrix.clone();
-		this._changed(Change.GEOMETRY);
-	},
-
-	getBounds: function() {
-		var useCache = arguments[0] === undefined;
-		if (useCache && this._bounds)
-			return this._bounds;
-		var bounds = this.getStrokeBounds(arguments[0]);
-		if (useCache)
-			bounds = this._bounds = this._createBounds(bounds);
-		return bounds;
-	},
-
-	_getBounds: function(getter, cacheName, args) {
-		var matrix = args[0],
-			useCache = matrix === undefined;
-		if (useCache && this[cacheName])
-			return this[cacheName];
-		matrix = matrix ? matrix.clone().concatenate(this._matrix)
-				: this._matrix;
-		var bounds = this._calculateBounds(getter, matrix);
-		if (useCache)
-			this[cacheName] = bounds;
-		return bounds;
-	}
-});
-
-var Raster = this.Raster = PlacedItem.extend({
-	initialize: function(object) {
-		this.base();
-		if (object.getContext) {
-			this.setCanvas(object);
-		} else {
-			if (typeof object === 'string')
-				object = document.getElementById(object);
-			this.setImage(object);
-		}
-		this._matrix = new Matrix();
-	},
-
-	clone: function() {
-		var image = this._image;
-		if (!image) {
-			image = CanvasProvider.getCanvas(this._size);
-			image.getContext('2d').drawImage(this._canvas, 0, 0);
-		}
-		var copy = new Raster(image);
-		copy._matrix = this._matrix.clone();
-		return this._clone(copy);
-	},
-
-	getSize: function() {
-		return this._size;
-	},
-
-	setSize: function() {
-		var size = Size.read(arguments),
-			image = this.getImage();
-		this.setCanvas(CanvasProvider.getCanvas(size));
-		this.getContext(true).drawImage(image, 0, 0, size.width, size.height);
-	},
-
-	getWidth: function() {
-		return this._size.width;
-	},
-
-	getHeight: function() {
-		return this._size.height;
-	},
-
-	getPpi: function() {
-		var matrix = this._matrix,
-			orig = new Point(0, 0).transform(matrix),
-			u = new Point(1, 0).transform(matrix).subtract(orig),
-			v = new Point(0, 1).transform(matrix).subtract(orig);
-		return new Size(
-			72 / u.getLength(),
-			72 / v.getLength()
-		);
-	},
-
-	getContext: function() {
-		if (!this._context)
-			this._context = this.getCanvas().getContext('2d');
-		if (arguments[0])
-			this._changed(Change.PIXELS);
-		return this._context;
-	},
-
-	setContext: function(context) {
-		this._context = context;
-	},
-
-	getCanvas: function() {
-		if (!this._canvas) {
-			this._canvas = CanvasProvider.getCanvas(this._size);
-			if (this._image)
-				this.getContext(true).drawImage(this._image, 0, 0);
-		}
-		return this._canvas;
-	},
-
-	setCanvas: function(canvas) {
-		if (this._canvas)
-			CanvasProvider.returnCanvas(this._canvas);
-		this._canvas = canvas;
-		this._size = new Size(canvas.width, canvas.height);
-		this._image = null;
-		this._context = null;
-		this._changed(Change.GEOMETRY);
-	},
-
-	getImage: function() {
-		return this._image || this.getCanvas();
-	},
-
-	setImage: function(image) {
-		if (this._canvas)
-			CanvasProvider.returnCanvas(this._canvas);
-		this._image = image;
-		this._size = new Size(image.naturalWidth, image.naturalHeight);
-		this._canvas = null;
-		this._context = null;
-		this._changed(Change.GEOMETRY);
-	},
-
-	getSubImage: function(rect) {
-		rect = Rectangle.read(arguments);
-		var canvas = CanvasProvider.getCanvas(rect.getSize());
-		canvas.getContext('2d').drawImage(this.getCanvas(), rect.x, rect.y,
-				canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
-		return canvas;
-	},
-
-	drawImage: function(image, point) {
-		point = Point.read(arguments, 1);
-		this.getContext(true).drawImage(image, point.x, point.y);
-	},
-
-	getAverageColor: function(object) {
-		if (!object)
-			object = this.getBounds();
-		var bounds, path;
-		if (object instanceof PathItem) {
-			path = object;
-			bounds = object.getBounds();
-		} else if (object.width) {
-			bounds = new Rectangle(object);
-		} else if (object.x) {
-			bounds = Rectangle.create(object.x - 0.5, object.y - 0.5, 1, 1);
-		}
-		var sampleSize = 32,
-			width = Math.min(bounds.width, sampleSize),
-			height = Math.min(bounds.height, sampleSize);
-		var ctx = Raster._sampleContext;
-		if (!ctx) {
-			ctx = Raster._sampleContext = CanvasProvider.getCanvas(
-					new Size(sampleSize)).getContext('2d');
-		} else {
-			ctx.clearRect(0, 0, sampleSize, sampleSize);
-		}
-		ctx.save();
-		ctx.scale(width / bounds.width, height / bounds.height);
-		ctx.translate(-bounds.x, -bounds.y);
-		if (path)
-			path.draw(ctx, { clip: true });
-		this._matrix.applyToContext(ctx);
-		ctx.drawImage(this._canvas || this._image,
-				-this._size.width / 2, -this._size.height / 2);
-		ctx.restore();
-		var pixels = ctx.getImageData(0.5, 0.5, Math.ceil(width),
-				Math.ceil(height)).data,
-			channels = [0, 0, 0],
-			total = 0;
-		for (var i = 0, l = pixels.length; i < l; i += 4) {
-			var alpha = pixels[i + 3];
-			total += alpha;
-			alpha /= 255;
-			channels[0] += pixels[i] * alpha;
-			channels[1] += pixels[i + 1] * alpha;
-			channels[2] += pixels[i + 2] * alpha;
-		}
-		for (var i = 0; i < 3; i++)
-			channels[i] /= total;
-		return total ? Color.read(channels) : null;
-	},
-
-	getPixel: function(point) {
-		point = Point.read(arguments);
-		var pixels = this.getContext().getImageData(point.x, point.y, 1, 1).data,
-			channels = new Array(4);
-		for (var i = 0; i < 4; i++)
-			channels[i] = pixels[i] / 255;
-		return RgbColor.read(channels);
-	},
-
-	setPixel: function(point, color) {
-		var hasPoint = arguments.length == 2;
-		point = Point.read(arguments, 0, hasPoint ? 1 : 2);
-		color = Color.read(arguments, hasPoint ? 1 : 2);
-		var ctx = this.getContext(true),
-			imageData = ctx.createImageData(1, 1),
-			alpha = color.getAlpha();
-		imageData.data[0] = color.getRed() * 255;
-		imageData.data[1] = color.getGreen() * 255;
-		imageData.data[2] = color.getBlue() * 255;
-		imageData.data[3] = alpha != null ? alpha * 255 : 255;
-		ctx.putImageData(imageData, point.x, point.y);
-	},
-
-	createData: function(size) {
-		size = Size.read(arguments);
-		return this.getContext().createImageData(size.width, size.height);
-	},
-
-	getData: function(rect) {
-		rect = Rectangle.read(arguments);
-		if (rect.isEmpty())
-			rect = new Rectangle(this.getSize());
-		return this.getContext().getImageData(rect.x, rect.y,
-				rect.width, rect.height);
-	},
-
-	setData: function(data, point) {
-		point = Point.read(arguments, 1);
-		this.getContext(true).putImageData(data, point.x, point.y);
-	},
-
-	_calculateBounds: function(getter, matrix) {
-		return matrix._transformBounds(
-				new Rectangle(this._size).setCenter(0, 0));
-	},
-
-	getHandleBounds: function() {
-		return this.getStrokeBounds(arguments[0]);
-	},
-
-	getRoughBounds: function() {
-		return this.getStrokeBounds(arguments[0]);
-	},
-
-	draw: function(ctx, param) {
-		if (param.selection) {
-			var bounds = new Rectangle(this._size).setCenter(0, 0);
-			Item.drawSelectedBounds(bounds, ctx, this._matrix);
-		} else {
-			ctx.save();
-			this._matrix.applyToContext(ctx);
-			ctx.drawImage(this._canvas || this._image,
-					-this._size.width / 2, -this._size.height / 2);
-			ctx.restore();
-		}
-	}
-});
-
-var PlacedSymbol = this.PlacedSymbol = PlacedItem.extend({
-	initialize: function(symbol, matrixOrOffset) {
-		this.base();
-		this.setSymbol(symbol instanceof Symbol ? symbol : new Symbol(symbol));
-		this._matrix = matrixOrOffset !== undefined
-			? matrixOrOffset instanceof Matrix
-				? matrixOrOffset
-				: new Matrix().translate(Point.read(arguments, 1))
-			: new Matrix();
-	},
-
-	getSymbol: function() {
-		return this._symbol;
-	},
-
-	setSymbol: function(symbol) {
-		if (this._symbol)
-			delete this._symbol._instances[this._id];
-		this._symbol = symbol;
-		symbol._instances[this._id] = this;
-	},
-
-	clone: function() {
-		return this._clone(new PlacedSymbol(this.symbol, this._matrix.clone()));
-	},
-
-	_calculateBounds: function(getter, matrix) {
-		return this.symbol._definition[getter](matrix);
-	},
-
-	draw: function(ctx, param) {
-		if (param.selection) {
-			Item.drawSelectedBounds(this.symbol._definition.getStrokeBounds(),
-					ctx, this._matrix);
-		} else {
-			ctx.save();
-			this._matrix.applyToContext(ctx);
-			Item.draw(this.symbol.getDefinition(), ctx, param);
-			ctx.restore();
-		}
-	}
-
-});
-
-HitResult = Base.extend({
-	initialize: function(type, item, values) {
-		this.type = type;
-		this.item = item;
-		if (values) {
-			Base.each(values, function(value, key) {
-				this[key] = value;
-			}, this);
-		}
-	},
-
-	statics: {
-		getOptions: function(point, options) {
-			return options && options._merged ? options : Base.merge({
-				point: Point.read(arguments, 0, 1),
-				type: null,
-				tolerance: 2,
-				fill: !options,
-				stroke: !options,
-				segments: !options,
-				handles: false,
-				ends: false,
-				center: false,
-				bounds: false,
-				guides: false,
-				selected: false,
-				_merged: true
-			}, options);
-		}
-	}
-});
-
-var Segment = this.Segment = Base.extend({
-	initialize: function(arg0, arg1, arg2, arg3, arg4, arg5) {
-		var count = arguments.length,
-			createPoint = SegmentPoint.create,
-			point, handleIn, handleOut;
-		if (count == 0) {
-		} else if (count == 1) {
-			if (arg0.point) {
-				point = arg0.point;
-				handleIn = arg0.handleIn;
-				handleOut = arg0.handleOut;
-			} else {
-				point = arg0;
-			}
-		} else if (count < 6) {
-			if (count == 2 && arg1.x === undefined) {
-				point = [ arg0, arg1 ];
-			} else {
-				point = arg0;
-				handleIn = arg1;
-				handleOut = arg2;
-			}
-		} else if (count == 6) {
-			point = [ arg0, arg1 ];
-			handleIn = [ arg2, arg3 ];
-			handleOut = [ arg4, arg5 ];
-		}
-		createPoint(this, '_point', point);
-		createPoint(this, '_handleIn', handleIn);
-		createPoint(this, '_handleOut', handleOut);
-	},
-
-	_changed: function(point) {
-		if (!this._path)
-			return;
-		var curve = this._path._curves && this.getCurve(), other;
-		if (curve) {
-			curve._changed();
-			if (other = (curve[point == this._point
-					|| point == this._handleIn && curve._segment1 == this
-					? 'getPrevious' : 'getNext']())) {
-				other._changed();
-			}
-		}
-		this._path._changed(Change.GEOMETRY);
-	},
-
-	getPoint: function() {
-		return this._point;
-	},
-
-	setPoint: function(point) {
-		point = Point.read(arguments);
-		this._point.set(point.x, point.y);
-	},
-
-	getHandleIn: function() {
-		return this._handleIn;
-	},
-
-	setHandleIn: function(point) {
-		point = Point.read(arguments);
-		this._handleIn.set(point.x, point.y);
-	},
-
-	getHandleOut: function() {
-		return this._handleOut;
-	},
-
-	setHandleOut: function(point) {
-		point = Point.read(arguments);
-		this._handleOut.set(point.x, point.y);
-	},
-
-	_isSelected: function(point) {
-		var state = this._selectionState;
-		return point == this._point ? !!(state & SelectionState.POINT)
-			: point == this._handleIn ? !!(state & SelectionState.HANDLE_IN)
-			: point == this._handleOut ? !!(state & SelectionState.HANDLE_OUT)
-			: false;
-	},
-
-	_setSelected: function(point, selected) {
-		var path = this._path,
-			selected = !!selected, 
-			state = this._selectionState || 0,
-			selection = [
-				!!(state & SelectionState.POINT),
-				!!(state & SelectionState.HANDLE_IN),
-				!!(state & SelectionState.HANDLE_OUT)
-			];
-		if (point == this._point) {
-			if (selected) {
-				selection[1] = selection[2] = false;
-			} else {
-				var previous = this.getPrevious(),
-					next = this.getNext();
-				selection[1] = previous && (previous._point.isSelected()
-						|| previous._handleOut.isSelected());
-				selection[2] = next && (next._point.isSelected()
-						|| next._handleIn.isSelected());
-			}
-			selection[0] = selected;
-		} else {
-			var index = point == this._handleIn ? 1 : 2;
-			if (selection[index] != selected) {
-				if (selected)
-					selection[0] = false;
-				selection[index] = selected;
-				path._changed(Change.ATTRIBUTE);
-			}
-		}
-		this._selectionState = (selection[0] ? SelectionState.POINT : 0)
-				| (selection[1] ? SelectionState.HANDLE_IN : 0)
-				| (selection[2] ? SelectionState.HANDLE_OUT : 0);
-		if (path && state != this._selectionState)
-			path._updateSelection(this, state, this._selectionState);
-	},
-
-	isSelected: function() {
-		return this._isSelected(this._point);
-	},
-
-	setSelected: function(selected) {
-		this._setSelected(this._point, selected);
-	},
-
-	getIndex: function() {
-		return this._index !== undefined ? this._index : null;
-	},
-
-	getPath: function() {
-		return this._path || null;
-	},
-
-	getCurve: function() {
-		if (this._path) {
-			var index = this._index;
-			if (!this._path._closed && index == this._path._segments.length - 1)
-				index--;
-			return this._path.getCurves()[index] || null;
-		}
-		return null;
-	},
-
-	getNext: function() {
-		var segments = this._path && this._path._segments;
-		return segments && (segments[this._index + 1]
-				|| this._path._closed && segments[0]) || null;
-	},
-
-	getPrevious: function() {
-		var segments = this._path && this._path._segments;
-		return segments && (segments[this._index - 1]
-				|| this._path._closed && segments[segments.length - 1]) || null;
-	},
-
-	reverse: function() {
-		return new Segment(this._point, this._handleOut, this._handleIn);
-	},
-
-	remove: function() {
-		return this._path ? !!this._path.removeSegment(this._index) : false;
-	},
-
-	toString: function() {
-		var parts = [ 'point: ' + this._point ];
-		if (!this._handleIn.isZero())
-			parts.push('handleIn: ' + this._handleIn);
-		if (!this._handleOut.isZero())
-			parts.push('handleOut: ' + this._handleOut);
-		return '{ ' + parts.join(', ') + ' }';
-	},
-
-	_transformCoordinates: function(matrix, coords, change) {
-		var point = this._point,
-			handleIn =  !change || !this._handleIn.isZero()
-					? this._handleIn : null,
-			handleOut = !change || !this._handleOut.isZero()
-					? this._handleOut : null,
-			x = point._x,
-			y = point._y,
-			i = 2;
-		coords[0] = x;
-		coords[1] = y;
-		if (handleIn) {
-			coords[i++] = handleIn._x + x;
-			coords[i++] = handleIn._y + y;
-		}
-		if (handleOut) {
-			coords[i++] = handleOut._x + x;
-			coords[i++] = handleOut._y + y;
-		}
-		if (!matrix)
-			return;
-		matrix._transformCoordinates(coords, 0, coords, 0, i / 2);
-		x = coords[0];
-		y = coords[1];
-		if (change) {
-			point._x = x;
-			point._y = y;
-			i  = 2;
-			if (handleIn) {
-				handleIn._x = coords[i++] - x;
-				handleIn._y = coords[i++] - y;
-			}
-			if (handleOut) {
-				handleOut._x = coords[i++] - x;
-				handleOut._y = coords[i++] - y;
-			}
-		} else {
-			if (!handleIn) {
-				coords[i++] = x;
-				coords[i++] = y;
-			}
-			if (!handleOut) {
-				coords[i++] = x;
-				coords[i++] = y;
-			}
-		}
-	}
-});
-
-var SegmentPoint = Point.extend({
-	set: function(x, y) {
-		this._x = x;
-		this._y = y;
-		this._owner._changed(this);
-		return this;
-	},
-
-	getX: function() {
-		return this._x;
-	},
-
-	setX: function(x) {
-		this._x = x;
-		this._owner._changed(this);
-	},
-
-	getY: function() {
-		return this._y;
-	},
-
-	setY: function(y) {
-		this._y = y;
-		this._owner._changed(this);
-	},
-
-	isZero: function() {
-		return this._x == 0 && this._y == 0;
-	},
-
-	setSelected: function(selected) {
-		this._owner._setSelected(this, selected);
-	},
-
-	isSelected: function() {
-		return this._owner._isSelected(this);
-	},
-
-	statics: {
-		create: function(segment, key, pt) {
-			var point = new SegmentPoint(SegmentPoint.dont),
-				x, y, selected;
-			if (!pt) {
-				x = y = 0;
-			} else if ((x = pt[0]) !== undefined) { 
-				y = pt[1];
-			} else {
-				if ((x = pt.x) === undefined) {
-					pt = Point.read(arguments, 2, 1);
-					x = pt.x;
-				}
-				y = pt.y;
-				selected = pt.selected;
-			}
-			point._x = x;
-			point._y = y;
-			point._owner = segment;
-			segment[key] = point;
-			if (selected)
-				point.setSelected(true);
-			return point;
-		}
-	}
-});
-
-var SelectionState = {
-	HANDLE_IN: 1,
-	HANDLE_OUT: 2,
-	POINT: 4
-};
-
-var Curve = this.Curve = Base.extend({
-	initialize: function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7) {
-		var count = arguments.length;
-		if (count == 0) {
-			this._segment1 = new Segment();
-			this._segment2 = new Segment();
-		} else if (count == 1) {
-			this._segment1 = new Segment(arg0.segment1);
-			this._segment2 = new Segment(arg0.segment2);
-		} else if (count == 2) {
-			this._segment1 = new Segment(arg0);
-			this._segment2 = new Segment(arg1);
-		} else if (count == 4) {
-			this._segment1 = new Segment(arg0, null, arg1);
-			this._segment2 = new Segment(arg3, arg2, null);
-		} else if (count == 8) {
-			var p1 = Point.create(arg0, arg1),
-				p2 = Point.create(arg6, arg7);
-			this._segment1 = new Segment(p1, null,
-					Point.create(arg2, arg3).subtract(p1));
-			this._segment2 = new Segment(p2,
-					Point.create(arg4, arg5).subtract(p2), null);
-		}
-	},
-
-	_changed: function() {
-		delete this._length;
-	},
-
-	getPoint1: function() {
-		return this._segment1._point;
-	},
-
-	setPoint1: function(point) {
-		point = Point.read(arguments);
-		this._segment1._point.set(point.x, point.y);
-	},
-
-	getPoint2: function() {
-		return this._segment2._point;
-	},
-
-	setPoint2: function(point) {
-		point = Point.read(arguments);
-		this._segment2._point.set(point.x, point.y);
-	},
-
-	getHandle1: function() {
-		return this._segment1._handleOut;
-	},
-
-	setHandle1: function(point) {
-		point = Point.read(arguments);
-		this._segment1._handleOut.set(point.x, point.y);
-	},
-
-	getHandle2: function() {
-		return this._segment2._handleIn;
-	},
-
-	setHandle2: function(point) {
-		point = Point.read(arguments);
-		this._segment2._handleIn.set(point.x, point.y);
-	},
-
-	getSegment1: function() {
-		return this._segment1;
-	},
-
-	getSegment2: function() {
-		return this._segment2;
-	},
-
-	getPath: function() {
-		return this._path;
-	},
-
-	getIndex: function() {
-		return this._segment1._index;
-	},
-
-	getNext: function() {
-		var curves = this._path && this._path._curves;
-		return curves && (curves[this._segment1._index + 1]
-				|| this._path._closed && curves[0]) || null;
-	},
-
-	getPrevious: function() {
-		var curves = this._path && this._path._curves;
-		return curves && (curves[this._segment1._index - 1]
-				|| this._path._closed && curves[curves.length - 1]) || null;
-	},
-
-	isSelected: function() {
-		return this.getHandle1().isSelected() && this.getHandle2().isSelected();
-	},
-
-	setSelected: function(selected) {
-		this.getHandle1().setSelected(selected);
-		this.getHandle2().setSelected(selected);
-	},
-
-	getValues: function(matrix) {
-		return Curve.getValues(this._segment1, this._segment2, matrix);
-	},
-
-	getPoints: function(matrix) {
-		var coords = this.getValues(matrix),
-			points = [];
-		for (var i = 0; i < 8; i += 2)
-			points.push(Point.create(coords[i], coords[i + 1]));
-		return points;
-	},
-
-	getLength: function() {
-		var from = arguments[0],
-			to = arguments[1];
-			fullLength = arguments.length == 0 || from == 0 && to == 1;
-		if (fullLength && this._length != null)
-			return this._length;
-		var length = Curve.getLength(this.getValues(), from, to);
-		if (fullLength)
-			this._length = length;
-		return length;
-	},
-
-	getPart: function(from, to) {
-		return new Curve(Curve.getPart(this.getValues(), from, to));
-	},
-
-	isLinear: function() {
-		return this._segment1._handleOut.isZero()
-				&& this._segment2._handleIn.isZero();
-	},
-
-	getParameterAt: function(offset, start) {
-		return Curve.getParameterAt(this.getValues(), offset,
-				start !== undefined ? start : offset < 0 ? 1 : 0);
-	},
-
-	getPoint: function(parameter) {
-		return Curve.evaluate(this.getValues(), parameter, 0);
-	},
-
-	getTangent: function(parameter) {
-		return Curve.evaluate(this.getValues(), parameter, 1);
-	},
-
-	getNormal: function(parameter) {
-		return Curve.evaluate(this.getValues(), parameter, 2);
-	},
-
-	getParameter: function(point) {
-		point = Point.read(point);
-		return Curve.getParameter(this.getValues(), point.x, point.y);
-	},
-
-	getCrossings: function(point, matrix, roots) {
-		var vals = this.getValues(matrix),
-			num = Curve.solveCubic(vals, 1, point.y, roots),
-			crossings = 0;
-		for (var i = 0; i < num; i++) {
-			var t = roots[i];
-			if (t >= 0 && t < 1 && Curve.evaluate(vals, t, 0).x > point.x) {
-				if (t < Numerical.TOLERANCE && Curve.evaluate(
-							this.getPrevious().getValues(matrix), 1, 1).y
-						* Curve.evaluate(vals, t, 1).y >= 0)
-					continue;
-				crossings++;
-			}
-		}
-		return crossings;
-	},
-
-	reverse: function() {
-		return new Curve(this._segment2.reverse(), this._segment1.reverse());
-	},
-
-	clone: function() {
-		return new Curve(this._segment1, this._segment2);
-	},
-
-	toString: function() {
-		var parts = [ 'point1: ' + this._segment1._point ];
-		if (!this._segment1._handleOut.isZero())
-			parts.push('handle1: ' + this._segment1._handleOut);
-		if (!this._segment2._handleIn.isZero())
-			parts.push('handle2: ' + this._segment2._handleIn);
-		parts.push('point2: ' + this._segment2._point);
-		return '{ ' + parts.join(', ') + ' }';
-	},
-
-	statics: {
-		create: function(path, segment1, segment2) {
-			var curve = new Curve(Curve.dont);
-			curve._path = path;
-			curve._segment1 = segment1;
-			curve._segment2 = segment2;
-			return curve;
-		},
-
-		getValues: function(segment1, segment2, matrix) {
-			var p1 = segment1._point,
-				h1 = segment1._handleOut,
-				h2 = segment2._handleIn,
-				p2 = segment2._point,
-				coords = [
-					p1._x, p1._y,
-					p1._x + h1._x, p1._y + h1._y,
-					p2._x + h2._x, p2._y + h2._y,
-					p2._x, p2._y
-				];
-			return matrix
-					? matrix._transformCoordinates(coords, 0, coords, 0, 4)
-					: coords;
-		},
-
-		evaluate: function(v, t, type) {
-			var p1x = v[0], p1y = v[1],
-				c1x = v[2], c1y = v[3],
-				c2x = v[4], c2y = v[5],
-				p2x = v[6], p2y = v[7],
-				x, y;
-
-			if (type == 0 && (t == 0 || t == 1)) {
-				x = t == 0 ? p1x : p2x;
-				y = t == 0 ? p1y : p2y;
-			} else {
-				var tMin = Numerical.TOLERANCE;
-				if (t < tMin && c1x == p1x && c1y == p1y)
-					t = tMin;
-				else if (t > 1 - tMin && c2x == p2x && c2y == p2y)
-					t = 1 - tMin;
-				var cx = 3 * (c1x - p1x),
-					bx = 3 * (c2x - c1x) - cx,
-					ax = p2x - p1x - cx - bx,
-
-					cy = 3 * (c1y - p1y),
-					by = 3 * (c2y - c1y) - cy,
-					ay = p2y - p1y - cy - by;
-
-				switch (type) {
-				case 0: 
-					x = ((ax * t + bx) * t + cx) * t + p1x;
-					y = ((ay * t + by) * t + cy) * t + p1y;
-					break;
-				case 1: 
-				case 2: 
-					x = (3 * ax * t + 2 * bx) * t + cx;
-					y = (3 * ay * t + 2 * by) * t + cy;
-					break;
-				}
-			}
-			return type == 2 ? new Point(y, -x) : new Point(x, y);
-		},
-
-		subdivide: function(v, t) {
-			var p1x = v[0], p1y = v[1],
-				c1x = v[2], c1y = v[3],
-				c2x = v[4], c2y = v[5],
-				p2x = v[6], p2y = v[7];
-			if (t === undefined)
-				t = 0.5;
-			var u = 1 - t,
-				p3x = u * p1x + t * c1x, p3y = u * p1y + t * c1y,
-				p4x = u * c1x + t * c2x, p4y = u * c1y + t * c2y,
-				p5x = u * c2x + t * p2x, p5y = u * c2y + t * p2y,
-				p6x = u * p3x + t * p4x, p6y = u * p3y + t * p4y,
-				p7x = u * p4x + t * p5x, p7y = u * p4y + t * p5y,
-				p8x = u * p6x + t * p7x, p8y = u * p6y + t * p7y;
-			return [
-				[p1x, p1y, p3x, p3y, p6x, p6y, p8x, p8y], 
-				[p8x, p8y, p7x, p7y, p5x, p5y, p2x, p2y] 
-			];
-		},
-
-		solveCubic: function (v, coord, val, roots) {
-			var p1 = v[coord],
-				c1 = v[coord + 2],
-				c2 = v[coord + 4],
-				p2 = v[coord + 6],
-				c = 3 * (c1 - p1),
-				b = 3 * (c2 - c1) - c,
-				a = p2 - p1 - c - b;
-			return Numerical.solveCubic(a, b, c, p1 - val, roots,
-					Numerical.TOLERANCE);
-		},
-
-		getParameter: function(v, x, y) {
-			var txs = [],
-				tys = [],
-				sx = Curve.solveCubic(v, 0, x, txs),
-				sy = Curve.solveCubic(v, 1, y, tys),
-				tx, ty;
-			for (var cx = 0;  sx == -1 || cx < sx;) {
-				if (sx == -1 || (tx = txs[cx++]) >= 0 && tx <= 1) {
-					for (var cy = 0; sy == -1 || cy < sy;) {
-						if (sy == -1 || (ty = tys[cy++]) >= 0 && ty <= 1) {
-							if (sx == -1) tx = ty;
-							else if (sy == -1) ty = tx;
-							if (Math.abs(tx - ty) < Numerical.TOLERANCE)
-								return (tx + ty) * 0.5;
-						}
-					}
-					if (sx == -1)
-						break;
-				}
-			}
-			return null;
-		},
-
-		getPart: function(v, from, to) {
-			if (from > 0)
-				v = Curve.subdivide(v, from)[1]; 
-			if (to < 1)
-				v = Curve.subdivide(v, (to - from) / (1 - from))[0]; 
-			return v;
-		},
-
-		isFlatEnough: function(v) {
-			var p1x = v[0], p1y = v[1],
-				c1x = v[2], c1y = v[3],
-				c2x = v[4], c2y = v[5],
-				p2x = v[6], p2y = v[7],
-
-				a = p1y - p2y,
-				b = p2x - p1x,
-				c = p1x * p2y - p2x * p1y,
-				v1 = a * c1x + b * c1y + c,
-				v2 = a * c2x + b * c2y + c;
-			return Math.abs((v1 * v1 + v2 * v2) / (a * (a * a + b * b))) < 0.005;
-		}
-	}
-}, new function() { 
-
-	function getLengthIntegrand(v) {
-		var p1x = v[0], p1y = v[1],
-			c1x = v[2], c1y = v[3],
-			c2x = v[4], c2y = v[5],
-			p2x = v[6], p2y = v[7],
-
-			ax = 9 * (c1x - c2x) + 3 * (p2x - p1x),
-			bx = 6 * (p1x + c2x) - 12 * c1x,
-			cx = 3 * (c1x - p1x),
-
-			ay = 9 * (c1y - c2y) + 3 * (p2y - p1y),
-			by = 6 * (p1y + c2y) - 12 * c1y,
-			cy = 3 * (c1y - p1y);
-
-		return function(t) {
-			var dx = (ax * t + bx) * t + cx,
-				dy = (ay * t + by) * t + cy;
-			return Math.sqrt(dx * dx + dy * dy);
-		};
-	}
-
-	function getIterations(a, b) {
-		return Math.max(2, Math.min(16, Math.ceil(Math.abs(b - a) * 32)));
-	}
-
-	return {
-		statics: true,
-
-		getLength: function(v, a, b) {
-			if (a === undefined)
-				a = 0;
-			if (b === undefined)
-				b = 1;
-			if (v[0] == v[2] && v[1] == v[3] && v[6] == v[4] && v[7] == v[5]) {
-				var dx = v[6] - v[0], 
-					dy = v[7] - v[1]; 
-				return (b - a) * Math.sqrt(dx * dx + dy * dy);
-			}
-			var ds = getLengthIntegrand(v);
-			return Numerical.integrate(ds, a, b, getIterations(a, b));
-		},
-
-		getParameterAt: function(v, offset, start) {
-			if (offset == 0)
-				return start;
-			var forward = offset > 0,
-				a = forward ? start : 0,
-				b = forward ? 1 : start,
-				offset = Math.abs(offset),
-				ds = getLengthIntegrand(v),
-				rangeLength = Numerical.integrate(ds, a, b,
-						getIterations(a, b));
-			if (offset >= rangeLength)
-				return forward ? b : a;
-			var guess = offset / rangeLength,
-				length = 0;
-			function f(t) {
-				var count = getIterations(start, t);
-				length += start < t
-						? Numerical.integrate(ds, start, t, count)
-						: -Numerical.integrate(ds, t, start, count);
-				start = t;
-				return length - offset;
-			}
-			return Numerical.findRoot(f, ds,
-					forward ? a + guess : b - guess, 
-					a, b, 16, Numerical.TOLERANCE);
-		}
-	};
-}, new function() { 
-
-	var maxDepth = 32,
-		epsilon = Math.pow(2, -maxDepth - 1);
-
-	var zCubic = [
-		[1.0, 0.6, 0.3, 0.1],
-		[0.4, 0.6, 0.6, 0.4],
-		[0.1, 0.3, 0.6, 1.0]
-	];
-
-	var xAxis = new Line(new Point(0, 0), new Point(1, 0));
-
-	function toBezierForm(v, point) {
-		var n = 3, 
-	 		degree = 5, 
-			c = [],
-			d = [],
-			cd = [],
-			w = [];
-		for(var i = 0; i <= n; i++) {
-			c[i] = v[i].subtract(point);
-			if (i < n)
-				d[i] = v[i + 1].subtract(v[i]).multiply(n);
-		}
-
-		for (var row = 0; row < n; row++) {
-			cd[row] = [];
-			for (var column = 0; column <= n; column++)
-				cd[row][column] = d[row].dot(c[column]);
-		}
-
-		for (var i = 0; i <= degree; i++)
-			w[i] = new Point(i / degree, 0);
-
-		for (k = 0; k <= degree; k++) {
-			var lb = Math.max(0, k - n + 1),
-				ub = Math.min(k, n);
-			for (var i = lb; i <= ub; i++) {
-				var j = k - i;
-				w[k].y += cd[j][i] * zCubic[j][i];
-			}
-		}
-
-		return w;
-	}
-
-	function findRoots(w, depth) {
-		switch (countCrossings(w)) {
-		case 0:
-			return [];
-		case 1:
-			if (depth >= maxDepth)
-				return [0.5 * (w[0].x + w[5].x)];
-			if (isFlatEnough(w)) {
-				var line = new Line(w[0], w[5], true);
-				return [ line.vector.getLength(true) <= Numerical.EPSILON
-						? line.point.x
-						: xAxis.intersect(line).x ];
-			}
-		}
-
-		var p = [[]],
-			left = [],
-			right = [];
-		for (var j = 0; j <= 5; j++)
-		 	p[0][j] = new Point(w[j]);
-
-		for (var i = 1; i <= 5; i++) {
-			p[i] = [];
-			for (var j = 0 ; j <= 5 - i; j++)
-				p[i][j] = p[i - 1][j].add(p[i - 1][j + 1]).multiply(0.5);
-		}
-		for (var j = 0; j <= 5; j++) {
-			left[j]  = p[j][0];
-			right[j] = p[5 - j][j];
-		}
-
-		return findRoots(left, depth + 1).concat(findRoots(right, depth + 1));
-	}
-
-	function countCrossings(v) {
-		var crossings = 0,
-			prevSign = null;
-		for (var i = 0, l = v.length; i < l; i++)  {
-			var sign = v[i].y < 0 ? -1 : 1;
-			if (prevSign != null && sign != prevSign)
-				crossings++;
-			prevSign = sign;
-		}
-		return crossings;
-	}
-
-	function isFlatEnough(v) {
-
-		var n = v.length - 1,
-			a = v[0].y - v[n].y,
-			b = v[n].x - v[0].x,
-			c = v[0].x * v[n].y - v[n].x * v[0].y,
-			maxAbove = 0,
-			maxBelow = 0;
-		for (var i = 1; i < n; i++) {
-			var val = a * v[i].x + b * v[i].y + c,
-				dist = val * val;
-			if (val < 0 && dist > maxBelow) {
-				maxBelow = dist;
-			} else if (dist > maxAbove) {
-				maxAbove = dist;
-			}
-		}
-		return Math.abs((maxAbove + maxBelow) / (2 * a * (a * a + b * b)))
-				< epsilon;
-	}
-
-	return {
-		getNearestLocation: function(point, matrix) {
-			var w = toBezierForm(this.getPoints(matrix), point);
-			var roots = findRoots(w, 0).concat([0, 1]);
-			var minDist = Infinity,
-				minT,
-				minPoint;
-			for (var i = 0; i < roots.length; i++) {
-				var pt = this.getPoint(roots[i]),
-					dist = point.getDistance(pt, true);
-				if (dist < minDist) {
-					minDist = dist;
-					minT = roots[i];
-					minPoint = pt;
-				}
-			}
-			return new CurveLocation(this, minT, minPoint, Math.sqrt(minDist));
-		},
-
-		getNearestPoint: function(point, matrix) {
-			return this.getNearestLocation(point, matrix).getPoint();
-		}
-	};
-});
-
-CurveLocation = Base.extend({
-	initialize: function(curve, parameter, point, distance) {
-		this._curve = curve;
-		this._parameter = parameter;
-		this._point = point;
-		this._distance = distance;
-	},
-
-	getSegment: function() {
-		if (!this._segment) {
-			var curve = this._curve,
-				parameter = this.getParameter();
-			if (parameter == 0) {
-				this._segment = curve._segment1;
-			} else if (parameter == 1) {
-				this._segment = curve._segment2;
-			} else if (parameter == null) {
-				return null;
-			} else {
-				this._segment = curve.getLength(0, parameter)
-					< curve.getLength(parameter, 1)
-						? curve._segment1
-						: curve._segment2;
-			}
-		}
-		return this._segment;
-	},
-
-	getCurve: function() {
-		return this._curve;
-	},
-
-	getPath: function() {
-		return this._curve && this._curve._path;
-	},
-
-	getIndex: function() {
-		return this._curve && this._curve.getIndex();
-	},
-
-	getOffset: function() {
-		var path = this._curve && this._curve._path;
-		return path && path._getOffset(this);
-	},
-
-	getCurveOffset: function() {
-		var parameter = this.getParameter();
-		return parameter != null && this._curve
-				&& this._curve.getLength(0, parameter);
-	},
-
-	getParameter: function() {
-		if (this._parameter == null && this._curve && this._point)
-			this._parameter = this._curve.getParameterAt(this._point);
-		return this._parameter;
-	},
-
-	getPoint: function() {
-		if (!this._point && this._curve && this._parameter != null)
-			this._point = this._curve.getPoint(this._parameter);
-		return this._point;
-	},
-
-	getTangent: function() {
-		var parameter = this.getParameter();
-		return parameter != null && this._curve
-				&& this._curve.getTangent(parameter);
-	},
-
-	getNormal: function() {
-		var parameter = this.getParameter();
-		return parameter != null && this._curve
-				&& this._curve.getNormal(parameter);
-	},
-
-	getDistance: function() {
-		return this._distance;
-	},
-
-	toString: function() {
-		var parts = [],
-			point = this.getPoint();
-		if (point)
-			parts.push('point: ' + point);
-		var index = this.getIndex();
-		if (index != null)
-			parts.push('index: ' + index);
-		var parameter = this.getParameter();
-		if (parameter != null)
-			parts.push('parameter: ' + Base.formatNumber(parameter));
-		if (this._distance != null)
-			parts.push('distance: ' + Base.formatNumber(this._distance));
-		return '{ ' + parts.join(', ') + ' }';
-	}
-});
-
-var PathItem = this.PathItem = Item.extend({
-
-});
-
-var Path = this.Path = PathItem.extend({
-	initialize: function(segments) {
-		this.base();
-		this._closed = false;
-		this._selectedSegmentState = 0;
-		this.setSegments(!segments || !Array.isArray(segments)
-				|| typeof segments[0] !== 'object' ? arguments : segments);
-	},
-
-	clone: function() {
-		var copy = this._clone(new Path(this._segments));
-		copy._closed = this._closed;
-		if (this._clockwise !== undefined)
-			copy._clockwise = this._clockwise;
-		return copy;
-	},
-
-	_changed: function(flags) {
-		Item.prototype._changed.call(this, flags);
-		if (flags & ChangeFlag.GEOMETRY) {
-			delete this._strokeBounds;
-			delete this._handleBounds;
-			delete this._roughBounds;
-			delete this._length;
-			delete this._clockwise;
-		} else if (flags & ChangeFlag.STROKE) {
-			delete this._strokeBounds;
-		}
-	},
-
-	getSegments: function() {
-		return this._segments;
-	},
-
-	setSegments: function(segments) {
-		if (!this._segments) {
-			this._segments = [];
-		} else {
-			this._selectedSegmentState = 0;
-			this._segments.length = 0;
-			if (this._curves)
-				delete this._curves;
-		}
-		this._add(Segment.readAll(segments));
-	},
-
-	getFirstSegment: function() {
-		return this._segments[0];
-	},
-
-	getLastSegment: function() {
-		return this._segments[this._segments.length - 1];
-	},
-
-	getCurves: function() {
-		if (!this._curves) {
-			var segments = this._segments,
-				length = segments.length;
-			if (!this._closed && length > 0)
-				length--;
-			this._curves = new Array(length);
-			for (var i = 0; i < length; i++)
-				this._curves[i] = Curve.create(this, segments[i],
-					segments[i + 1] || segments[0]);
-		}
-		return this._curves;
-	},
-
-	getFirstCurve: function() {
-		return this.getCurves()[0];
-	},
-
-	getLastCurve: function() {
-		var curves = this.getCurves();
-		return curves[curves.length - 1];
-	},
-
-	getClosed: function() {
-		return this._closed;
-	},
-
-	setClosed: function(closed) {
-		if (this._closed != (closed = !!closed)) {
-			this._closed = closed;
-			if (this._curves) {
-				var length = this._segments.length,
-					i;
-				if (!closed && length > 0)
-					length--;
-				this._curves.length = length;
-				if (closed)
-					this._curves[i = length - 1] = Curve.create(this,
-						this._segments[i], this._segments[0]);
-			}
-			this._changed(Change.GEOMETRY);
-		}
-	},
-
-	_transform: function(matrix, flags) {
-		if (!matrix.isIdentity()) {
-			var coords = new Array(6);
-			for (var i = 0, l = this._segments.length; i < l; i++) {
-				this._segments[i]._transformCoordinates(matrix, coords, true);
-			}
-			var fillColor = this.getFillColor(),
-				strokeColor = this.getStrokeColor();
-			if (fillColor && fillColor.transform)
-				fillColor.transform(matrix);
-			if (strokeColor && strokeColor.transform)
-				strokeColor.transform(matrix);
-		}
-	},
-
-	_add: function(segs, index) {
-		var segments = this._segments,
-			curves = this._curves,
-			amount = segs.length,
-			append = index == null,
-			index = append ? segments.length : index,
-			fullySelected = this.isFullySelected();
-		for (var i = 0; i < amount; i++) {
-			var segment = segs[i];
-			if (segment._path) {
-				segment = segs[i] = new Segment(segment);
-			}
-			segment._path = this;
-			segment._index = index + i;
-			if (fullySelected)
-				segment._selectionState = SelectionState.POINT;
-			if (segment._selectionState)
-				this._updateSelection(segment, 0, segment._selectionState);
-		}
-		if (append) {
-			segments.push.apply(segments, segs);
-		} else {
-			segments.splice.apply(segments, [index, 0].concat(segs));
-			for (var i = index + amount, l = segments.length; i < l; i++) {
-				segments[i]._index = i;
-			}
-		}
-		if (curves && --index >= 0) {
-			curves.splice(index, 0, Curve.create(this, segments[index],
-				segments[index + 1]));
-			var curve = curves[index + amount];
-			if (curve) {
-				curve._segment1 = segments[index + amount];
-			}
-		}
-		this._changed(Change.GEOMETRY);
-		return segs;
-	},
-
-	add: function(segment1 ) {
-		return arguments.length > 1 && typeof segment1 !== 'number'
-			? this._add(Segment.readAll(arguments))
-			: this._add([ Segment.read(arguments) ])[0];
-	},
-
-	insert: function(index, segment1 ) {
-		return arguments.length > 2 && typeof segment1 !== 'number'
-			? this._add(Segment.readAll(arguments, 1), index)
-			: this._add([ Segment.read(arguments, 1) ], index)[0];
-	},
-
-	addSegment: function(segment) {
-		return this._add([ Segment.read(arguments) ])[0];
-	},
-
-	insertSegment: function(index, segment) {
-		return this._add([ Segment.read(arguments, 1) ], index)[0];
-	},
-
-	addSegments: function(segments) {
-		return this._add(Segment.readAll(segments));
-	},
-
-	insertSegments: function(index, segments) {
-		return this._add(Segment.readAll(segments), index);
-	},
-
-	removeSegment: function(index) {
-		var segments = this.removeSegments(index, index + 1);
-		return segments[0] || null;
-	},
-
-	removeSegments: function(from, to) {
-		from = from || 0;
-	 	to = Base.pick(to, this._segments.length);
-		var segments = this._segments,
-			curves = this._curves,
-			last = to >= segments.length,
-			removed = segments.splice(from, to - from),
-			amount = removed.length;
-		if (!amount)
-			return removed;
-		for (var i = 0; i < amount; i++) {
-			var segment = removed[i];
-			if (segment._selectionState)
-				this._updateSelection(segment, segment._selectionState, 0);
-			removed._index = removed._path = undefined;
-		}
-		for (var i = from, l = segments.length; i < l; i++)
-			segments[i]._index = i;
-		if (curves) {
-			curves.splice(from, amount);
-			var curve;
-			if (curve = curves[from - 1])
-				curve._segment2 = segments[from];
-			if (curve = curves[from])
-				curve._segment1 = segments[from];
-			if (last && this._closed && (curve = curves[curves.length - 1]))
-				curve._segment2 = segments[0];
-		}
-		this._changed(Change.GEOMETRY);
-		return removed;
-	},
-
-	isFullySelected: function() {
-		return this._selected && this._selectedSegmentState
-				== this._segments.length * SelectionState.POINT;
-	},
-
-	setFullySelected: function(selected) {
-		var length = this._segments.length;
-		this._selectedSegmentState = selected
-				? length * SelectionState.POINT : 0;
-		for (var i = 0; i < length; i++)
-			this._segments[i]._selectionState = selected
-					? SelectionState.POINT : 0;
-		this.setSelected(selected);
-	},
-
-	_updateSelection: function(segment, oldState, newState) {
-		segment._selectionState = newState;
-		var total = this._selectedSegmentState += newState - oldState;
-		if (total > 0)
-			this.setSelected(true);
-	},
-
-	flatten: function(maxDistance) {
-		var flattener = new PathFlattener(this),
-			pos = 0,
-			step = flattener.length / Math.ceil(flattener.length / maxDistance),
-			end = flattener.length + (this._closed ? -step : step) / 2;
-		var segments = [];
-		while (pos <= end) {
-			segments.push(new Segment(flattener.evaluate(pos, 0)));
-			pos += step;
-		}
-		this.setSegments(segments);
-	},
-
-	simplify: function(tolerance) {
-		if (this._segments.length > 2) {
-			var fitter = new PathFitter(this, tolerance || 2.5);
-			this.setSegments(fitter.fit());
-		}
-	},
-
-	isClockwise: function() {
-		if (this._clockwise !== undefined)
-			return this._clockwise;
-		var sum = 0,
-			xPre, yPre;
-		function edge(x, y) {
-			if (xPre !== undefined)
-				sum += (xPre - x) * (y + yPre);
-			xPre = x;
-			yPre = y;
-		}
-		for (var i = 0, l = this._segments.length; i < l; i++) {
-			var seg1 = this._segments[i],
-				seg2 = this._segments[i + 1 < l ? i + 1 : 0],
-				point1 = seg1._point,
-				handle1 = seg1._handleOut,
-				handle2 = seg2._handleIn,
-				point2 = seg2._point;
-			edge(point1._x, point1._y);
-			edge(point1._x + handle1._x, point1._y + handle1._y);
-			edge(point2._x + handle2._x, point2._y + handle2._y);
-			edge(point2._x, point2._y);
-		}
-		return sum > 0;
-	},
-
-	setClockwise: function(clockwise) {
-		if (this.isClockwise() != (clockwise = !!clockwise)) {
-			this.reverse();
-			this._clockwise = clockwise;
-		}
-	},
-
-	reverse: function() {
-		this._segments.reverse();
-		for (var i = 0, l = this._segments.length; i < l; i++) {
-			var segment = this._segments[i];
-			var handleIn = segment._handleIn;
-			segment._handleIn = segment._handleOut;
-			segment._handleOut = handleIn;
-		}
-		if (this._clockwise !== undefined)
-			this._clockwise = !this._clockwise;
-	},
-
-	join: function(path) {
-		if (path) {
-			var segments = path._segments,
-				last1 = this.getLastSegment(),
-				last2 = path.getLastSegment();
-			if (last1._point.equals(last2._point))
-				path.reverse();
-			var first2 = path.getFirstSegment();
-			if (last1._point.equals(first2._point)) {
-				last1.setHandleOut(first2._handleOut);
-				this._add(segments.slice(1));
-			} else {
-				var first1 = this.getFirstSegment();
-				if (first1._point.equals(first2._point))
-					path.reverse();
-				last2 = path.getLastSegment();
-				if (first1._point.equals(last2._point)) {
-					first1.setHandleIn(last2._handleIn);
-					this._add(segments.slice(0, segments.length - 1), 0);
-				} else {
-					this._add(segments.slice(0));
-				}
-			}
-			path.remove();
-			var first1 = this.getFirstSegment();
-			last1 = this.getLastSegment();
-			if (last1._point.equals(first1._point)) {
-				first1.setHandleIn(last1._handleIn);
-				last1.remove();
-				this.setClosed(true);
-			}
-			this._changed(Change.GEOMETRY);
-			return true;
-		}
-		return false;
-	},
-
-	getLength: function() {
-		if (this._length == null) {
-			var curves = this.getCurves();
-			this._length = 0;
-			for (var i = 0, l = curves.length; i < l; i++)
-				this._length += curves[i].getLength();
-		}
-		return this._length;
-	},
-
-	_getOffset: function(location) {
-		var index = location && location.getIndex();
-		if (index != null) {
-			var curves = this.getCurves(),
-				offset = 0;
-			for (var i = 0; i < index; i++)
-				offset += curves[i].getLength();
-			var curve = curves[index];
-			return offset + curve.getLength(0, location.getParameter());
-		}
-		return null;
-	},
-
-	getLocation: function(point) {
-		var curves = this.getCurves();
-		for (var i = 0, l = curves.length; i < l; i++) {
-			var curve = curves[i];
-			var t = curve.getParameter(point);
-			if (t != null)
-				return new CurveLocation(curve, t);
-		}
-		return null;
-	},
-
-	getLocationAt: function(offset, isParameter) {
-		var curves = this.getCurves(),
-			length = 0;
-		if (isParameter) {
-			var index = ~~offset; 
-			return new CurveLocation(curves[index], offset - index);
-		}
-		for (var i = 0, l = curves.length; i < l; i++) {
-			var start = length,
-				curve = curves[i];
-			length += curve.getLength();
-			if (length >= offset) {
-				return new CurveLocation(curve,
-						curve.getParameterAt(offset - start));
-			}
-		}
-		if (offset <= this.getLength())
-			return new CurveLocation(curves[curves.length - 1], 1);
-		return null;
-	},
-
-	getPointAt: function(offset, isParameter) {
-		var loc = this.getLocationAt(offset, isParameter);
-		return loc && loc.getPoint();
-	},
-
-	getTangentAt: function(offset, isParameter) {
-		var loc = this.getLocationAt(offset, isParameter);
-		return loc && loc.getTangent();
-	},
-
-	getNormalAt: function(offset, isParameter) {
-		var loc = this.getLocationAt(offset, isParameter);
-		return loc && loc.getNormal();
-	},
-
-	getNearestLocation: function(point, matrix) {
-		var curves = this.getCurves(),
-			minDist = Infinity,
-			minLoc = null;
-		for (var i = 0, l = curves.length; i < l; i++) {
-			var loc = curves[i].getNearestLocation(point, matrix);
-			if (loc._distance < minDist) {
-				minDist = loc._distance;
-				minLoc = loc;
-			}
-		}
-		return minLoc;
-	},
-
-	getNearestPoint: function(point, matrix) {
-		return this.getNearestLocation(point, matrix).getPoint();
-	},
-
-	contains: function(point, matrix) {
-		point = Point.read(arguments);
-		if (!this._closed || !this.getRoughBounds(matrix)._containsPoint(point))
-			return false;
-		var curves = this.getCurves(),
-			crossings = 0,
-			roots = [];
-		for (var i = 0, l = curves.length; i < l; i++)
-			crossings += curves[i].getCrossings(point, matrix, roots);
-		return (crossings & 1) == 1;
-	},
-
-	_hitTest: function(point, options, matrix) {
-		var tolerance = options.tolerance || 0,
-			radius = (options.stroke ? this.getStrokeWidth() / 2 : 0) + tolerance,
-			loc,
-			res;
-		var coords = [],
-			that = this;
-		function checkSegment(segment, ends) {
-			segment._transformCoordinates(matrix, coords);
-			for (var j = ends || options.segments ? 0 : 2,
-					m = !ends && options.handles ? 6 : 2; j < m; j += 2) {
-				if (point.getDistance(coords[j], coords[j + 1]) < tolerance)
-					return new HitResult(j == 0 ? 'segment'
-							: 'handle-' + (j == 2 ? 'in' : 'out'),
-							that, { segment: segment });
-			}
-		}
-		if (options.ends && !options.segments && !this._closed) {
-			if (res = checkSegment(this.getFirstSegment(), true)
-					|| checkSegment(this.getLastSegment(), true))
-				return res;
-		} else if (options.segments || options.handles) {
-			for (var i = 0, l = this._segments.length; i < l; i++) {
-				if (res = checkSegment(this._segments[i]))
-					return res;
-			}
-		}
-		if (options.stroke && radius > 0)
-			loc = this.getNearestLocation(point, matrix);
-		if (!(loc && loc._distance <= radius) && options.fill
-				&& this.getFillColor() && this.contains(point, matrix))
-			return new HitResult('fill', this);
-		if (!loc && options.stroke && radius > 0)
-			loc = this.getNearestLocation(point, matrix);
-		if (loc && loc._distance <= radius)
-			return options.stroke
-					? new HitResult('stroke', this, { location: loc })
-					: new HitResult('fill', this);
-	}
-
-}, new function() { 
-
-	function drawHandles(ctx, segments) {
-		for (var i = 0, l = segments.length; i < l; i++) {
-			var segment = segments[i],
-				point = segment._point,
-				state = segment._selectionState,
-				selected = state & SelectionState.POINT;
-			if (selected || (state & SelectionState.HANDLE_IN))
-				drawHandle(ctx, point, segment._handleIn);
-			if (selected || (state & SelectionState.HANDLE_OUT))
-				drawHandle(ctx, point, segment._handleOut);
-			ctx.save();
-			ctx.beginPath();
-			ctx.rect(point._x - 2, point._y - 2, 4, 4);
-			ctx.fill();
-			if (!selected) {
-				ctx.beginPath();
-				ctx.rect(point._x - 1, point._y - 1, 2, 2);
-				ctx.fillStyle = '#ffffff';
-				ctx.fill();
-			}
-			ctx.restore();
-		}
-	}
-
-	function drawHandle(ctx, point, handle) {
-		if (!handle.isZero()) {
-			var handleX = point._x + handle._x,
-				handleY = point._y + handle._y;
-			ctx.beginPath();
-			ctx.moveTo(point._x, point._y);
-			ctx.lineTo(handleX, handleY);
-			ctx.stroke();
-			ctx.beginPath();
-			ctx.arc(handleX, handleY, 1.75, 0, Math.PI * 2, true);
-			ctx.fill();
-		}
-	}
-
-	function drawSegments(ctx, path) {
-		var segments = path._segments,
-			length = segments.length,
-			handleOut, outX, outY;
-
-		function drawSegment(i) {
-			var segment = segments[i],
-				point = segment._point,
-				x = point._x,
-				y = point._y,
-				handleIn = segment._handleIn;
-			if (!handleOut) {
-				ctx.moveTo(x, y);
-			} else {
-				if (handleIn.isZero() && handleOut.isZero()) {
-					ctx.lineTo(x, y);
-				} else {
-					ctx.bezierCurveTo(outX, outY,
-							handleIn._x + x, handleIn._y + y, x, y);
-				}
-			}
-			handleOut = segment._handleOut;
-			outX = handleOut._x + x;
-			outY = handleOut._y + y;
-		}
-
-		for (var i = 0; i < length; i++)
-			drawSegment(i);
-		if (path._closed && length > 1)
-			drawSegment(0);
-	}
-
-	function drawDashes(ctx, path, dashArray, dashOffset) {
-		var flattener = new PathFlattener(path),
-			from = dashOffset, to,
-			i = 0;
-		while (from < flattener.length) {
-			to = from + dashArray[(i++) % dashArray.length];
-			flattener.drawPart(ctx, from, to);
-			from = to + dashArray[(i++) % dashArray.length];
-		}
-	}
-
-	return {
-		draw: function(ctx, param) {
-			if (!param.compound)
-				ctx.beginPath();
-
-			var fillColor = this.getFillColor(),
-				strokeColor = this.getStrokeColor(),
-				dashArray = this.getDashArray() || [], 
-				hasDash = !!dashArray.length;
-
-			if (param.compound || param.selection || this._clipMask || fillColor
-					|| strokeColor && !hasDash) {
-				drawSegments(ctx, this);
-			}
-
-			if (param.selection) {
-				ctx.stroke();
-				drawHandles(ctx, this._segments);
-			} else if (this._clipMask) {
-				ctx.clip();
-			} else if (!param.compound && (fillColor || strokeColor)) {
-				ctx.save();
-				this._setStyles(ctx);
-				if (!fillColor || !strokeColor)
-					ctx.globalAlpha = this._opacity;
-				if (fillColor) {
-					ctx.fillStyle = fillColor.getCanvasStyle(ctx);
-					ctx.fill();
-				}
-				if (strokeColor) {
-					ctx.strokeStyle = strokeColor.getCanvasStyle(ctx);
-					if (hasDash) {
-						ctx.beginPath();
-						drawDashes(ctx, this, dashArray, this.getDashOffset());
-					}
-					ctx.stroke();
-				}
-				ctx.restore();
-			}
-		}
-	};
-}, new function() { 
-
-	function getFirstControlPoints(rhs) {
-		var n = rhs.length,
-			x = [], 
-			tmp = [], 
-			b = 2;
-		x[0] = rhs[0] / b;
-		for (var i = 1; i < n; i++) {
-			tmp[i] = 1 / b;
-			b = (i < n - 1 ? 4 : 2) - tmp[i];
-			x[i] = (rhs[i] - x[i - 1]) / b;
-		}
-		for (var i = 1; i < n; i++) {
-			x[n - i - 1] -= tmp[n - i] * x[n - i];
-		}
-		return x;
-	};
-
-	var styles = {
-		getStrokeWidth: 'lineWidth',
-		getStrokeJoin: 'lineJoin',
-		getStrokeCap: 'lineCap',
-		getMiterLimit: 'miterLimit'
-	};
-
-	return {
-		_setStyles: function(ctx) {
-			for (var i in styles) {
-				var style = this._style[i]();
-				if (style)
-					ctx[styles[i]] = style;
-			}
-		},
-
-		smooth: function() {
-			var segments = this._segments,
-				size = segments.length,
-				n = size,
-				overlap;
-
-			if (size <= 2)
-				return;
-
-			if (this._closed) {
-				overlap = Math.min(size, 4);
-				n += Math.min(size, overlap) * 2;
-			} else {
-				overlap = 0;
-			}
-			var knots = [];
-			for (var i = 0; i < size; i++)
-				knots[i + overlap] = segments[i]._point;
-			if (this._closed) {
-				for (var i = 0; i < overlap; i++) {
-					knots[i] = segments[i + size - overlap]._point;
-					knots[i + size + overlap] = segments[i]._point;
-				}
-			} else {
-				n--;
-			}
-			var rhs = [];
-
-			for (var i = 1; i < n - 1; i++)
-				rhs[i] = 4 * knots[i]._x + 2 * knots[i + 1]._x;
-			rhs[0] = knots[0]._x + 2 * knots[1]._x;
-			rhs[n - 1] = 3 * knots[n - 1]._x;
-			var x = getFirstControlPoints(rhs);
-
-			for (var i = 1; i < n - 1; i++)
-				rhs[i] = 4 * knots[i]._y + 2 * knots[i + 1]._y;
-			rhs[0] = knots[0]._y + 2 * knots[1]._y;
-			rhs[n - 1] = 3 * knots[n - 1]._y;
-			var y = getFirstControlPoints(rhs);
-
-			if (this._closed) {
-				for (var i = 0, j = size; i < overlap; i++, j++) {
-					var f1 = (i / overlap);
-					var f2 = 1 - f1;
-					x[j] = x[i] * f1 + x[j] * f2;
-					y[j] = y[i] * f1 + y[j] * f2;
-					var ie = i + overlap, je = j + overlap;
-					x[je] = x[ie] * f2 + x[je] * f1;
-					y[je] = y[ie] * f2 + y[je] * f1;
-				}
-				n--;
-			}
-			var handleIn = null;
-			for (var i = overlap; i <= n - overlap; i++) {
-				var segment = segments[i - overlap];
-				if (handleIn)
-					segment.setHandleIn(handleIn.subtract(segment._point));
-				if (i < n) {
-					segment.setHandleOut(
-							new Point(x[i], y[i]).subtract(segment._point));
-					if (i < n - 1)
-						handleIn = new Point(
-								2 * knots[i + 1]._x - x[i + 1],
-								2 * knots[i + 1]._y - y[i + 1]);
-					else
-						handleIn = new Point(
-								(knots[n]._x + x[n - 1]) / 2,
-								(knots[n]._y + y[n - 1]) / 2);
-				}
-			}
-			if (this._closed && handleIn) {
-				var segment = this._segments[0];
-				segment.setHandleIn(handleIn.subtract(segment._point));
-			}
-		}
-	};
-}, new function() { 
-	function getCurrentSegment(that) {
-		var segments = that._segments;
-		if (segments.length == 0)
-			throw new Error('Use a moveTo() command first');
-		return segments[segments.length - 1];
-	}
-
-	return {
-		moveTo: function(point) {
-			if (!this._segments.length)
-				this._add([ new Segment(Point.read(arguments)) ]);
-		},
-
-		moveBy: function(point) {
-			throw new Error('moveBy() is unsupported on Path items.');
-		},
-
-		lineTo: function(point) {
-			this._add([ new Segment(Point.read(arguments)) ]);
-		},
-
-		cubicCurveTo: function(handle1, handle2, to) {
-			handle1 = Point.read(arguments, 0, 1);
-			handle2 = Point.read(arguments, 1, 1);
-			to = Point.read(arguments, 2, 1);
-			var current = getCurrentSegment(this);
-			current.setHandleOut(handle1.subtract(current._point));
-			this._add([ new Segment(to, handle2.subtract(to)) ]);
-		},
-
-		quadraticCurveTo: function(handle, to) {
-			handle = Point.read(arguments, 0, 1);
-			to = Point.read(arguments, 1, 1);
-			var current = getCurrentSegment(this)._point;
-			this.cubicCurveTo(
-				handle.add(current.subtract(handle).multiply(1/3)),
-				handle.add(to.subtract(handle).multiply(1/3)),
-				to
-			);
-		},
-
-		curveTo: function(through, to, parameter) {
-			through = Point.read(arguments, 0, 1);
-			to = Point.read(arguments, 1, 1);
-			var t = Base.pick(parameter, 0.5),
-				t1 = 1 - t,
-				current = getCurrentSegment(this)._point,
-				handle = through.subtract(current.multiply(t1 * t1))
-					.subtract(to.multiply(t * t)).divide(2 * t * t1);
-			if (handle.isNaN())
-				throw new Error(
-					'Cannot put a curve through points with parameter = ' + t);
-			this.quadraticCurveTo(handle, to);
-		},
-
-		arcTo: function(to, clockwise ) {
-			var current = getCurrentSegment(this),
-				from = current._point,
-				through;
-			if (clockwise === undefined)
-				clockwise = true;
-			if (typeof clockwise === 'boolean') {
-				to = Point.read(arguments, 0, 1);
-				var middle = from.add(to).divide(2),
-				through = middle.add(middle.subtract(from).rotate(
-						clockwise ? -90 : 90));
-			} else {
-				through = Point.read(arguments, 0, 1);
-				to = Point.read(arguments, 1, 1);
-			}
-			var l1 = new Line(from.add(through).divide(2),
-					through.subtract(from).rotate(90)),
-			 	l2 = new Line(through.add(to).divide(2),
-					to.subtract(through).rotate(90)),
-				center = l1.intersect(l2),
-				line = new Line(from, to, true),
-				throughSide = line.getSide(through);
-			if (!center) {
-				if (!throughSide)
-					return this.lineTo(to);
-				throw new Error("Cannot put an arc through the given points: "
-					+ [from, through, to]);
-			}
-			var vector = from.subtract(center),
-				radius = vector.getLength(),
-				extent = vector.getDirectedAngle(to.subtract(center)),
-				centerSide = line.getSide(center);
-			if (centerSide == 0) {
-				extent = throughSide * Math.abs(extent);
-			} else if (throughSide == centerSide) {
-				extent -= 360 * (extent < 0 ? -1 : 1);
-			}
-			var ext = Math.abs(extent),
-				count =  ext >= 360 ? 4 : Math.ceil(ext / 90),
-				inc = extent / count,
-				half = inc * Math.PI / 360,
-				z = 4 / 3 * Math.sin(half) / (1 + Math.cos(half)),
-				segments = [];
-			for (var i = 0; i <= count; i++) {
-				var pt = i < count ? center.add(vector) : to;
-				var out = i < count ? vector.rotate(90).multiply(z) : null;
-				if (i == 0) {
-					current.setHandleOut(out);
-				} else {
-					segments.push(
-						new Segment(pt, vector.rotate(-90).multiply(z), out));
-				}
-				vector = vector.rotate(inc);
-			}
-			this._add(segments);
-		},
-
-		lineBy: function(vector) {
-			vector = Point.read(arguments);
-			var current = getCurrentSegment(this);
-			this.lineTo(current._point.add(vector));
-		},
-
-		curveBy: function(throughVector, toVector, parameter) {
-			throughVector = Point.read(throughVector);
-			toVector = Point.read(toVector);
-			var current = getCurrentSegment(this)._point;
-			this.curveTo(current.add(throughVector), current.add(toVector),
-					parameter);
-		},
-
-		arcBy: function(throughVector, toVector) {
-			throughVector = Point.read(throughVector);
-			toVector = Point.read(toVector);
-			var current = getCurrentSegment(this)._point;
-			this.arcBy(current.add(throughVector), current.add(toVector));
-		},
-
-		closePath: function() {
-			this.setClosed(true);
-		}
-	};
-}, new function() { 
-
-	function getBounds(that, matrix, strokePadding) {
-		var segments = that._segments,
-			first = segments[0];
-		if (!first)
-			return null;
-		var coords = new Array(6),
-			prevCoords = new Array(6);
-		if (matrix && matrix.isIdentity())
-			matrix = null;
-		first._transformCoordinates(matrix, prevCoords, false);
-		var min = prevCoords.slice(0, 2),
-			max = min.slice(0), 
-			tMin = Numerical.TOLERANCE,
-			tMax = 1 - tMin;
-		function processSegment(segment) {
-			segment._transformCoordinates(matrix, coords, false);
-
-			for (var i = 0; i < 2; i++) {
-				var v0 = prevCoords[i], 
-					v1 = prevCoords[i + 4], 
-					v2 = coords[i + 2], 
-					v3 = coords[i]; 
-
-				function add(value, t) {
-					var padding = 0;
-					if (value == null) {
-						var u = 1 - t;
-						value = u * u * u * v0
-								+ 3 * u * u * t * v1
-								+ 3 * u * t * t * v2
-								+ t * t * t * v3;
-						padding = strokePadding ? strokePadding[i] : 0;
-					}
-					var left = value - padding,
-						right = value + padding;
-					if (left < min[i])
-						min[i] = left;
-					if (right > max[i])
-						max[i] = right;
-
-				}
-				add(v3, null);
-
-				var a = 3 * (v1 - v2) - v0 + v3,
-					b = 2 * (v0 + v2) - 4 * v1,
-					c = v1 - v0;
-
-				if (a == 0) {
-					if (b == 0)
-					    continue;
-					var t = -c / b;
-					if (tMin < t && t < tMax)
-						add(null, t);
-					continue;
-				}
-
-				var q = b * b - 4 * a * c;
-				if (q < 0)
-					continue;
-				var sqrt = Math.sqrt(q),
-					f = -0.5 / a,
-				 	t1 = (b - sqrt) * f,
-					t2 = (b + sqrt) * f;
-				if (tMin < t1 && t1 < tMax)
-					add(null, t1);
-				if (tMin < t2 && t2 < tMax)
-					add(null, t2);
-			}
-			var tmp = prevCoords;
-			prevCoords = coords;
-			coords = tmp;
-		}
-		for (var i = 1, l = segments.length; i < l; i++)
-			processSegment(segments[i]);
-		if (that._closed)
-			processSegment(first);
-		return Rectangle.create(min[0], min[1],
-					max[0] - min[0], max[1] - min[1]);
-	}
-
-	function getPenPadding(radius, matrix) {
-		if (!matrix)
-			return [radius, radius];
-		var mx = matrix.createShiftless(),
-			hor = mx.transform(new Point(radius, 0)),
-			ver = mx.transform(new Point(0, radius)),
-			phi = hor.getAngleInRadians(),
-			a = hor.getLength(),
-			b = ver.getLength();
-		var tx = - Math.atan(b * Math.tan(phi)),
-			ty = + Math.atan(b / Math.tan(phi)),
-			x = a * Math.cos(tx) * Math.cos(phi)
-				- b * Math.sin(tx) * Math.sin(phi),
-			y = b * Math.sin(ty) * Math.cos(phi)
-				+ a * Math.cos(ty) * Math.sin(phi);
-		return [Math.abs(x), Math.abs(y)];
-	}
-
-	return {
-		getBounds: function() {
-			var useCache = arguments[0] === undefined;
-			if (useCache && this._bounds)
-				return this._bounds;
-			var bounds = this._createBounds(getBounds(this, arguments[0]));
-			if (useCache)
-				this._bounds = bounds;
-			return bounds;
-		},
-
-		getStrokeBounds: function() {
-			if (!this._style._strokeColor || !this._style._strokeWidth)
-				return this.getBounds.apply(this, arguments);
-			var useCache = arguments[0] === undefined;
-			if (useCache && this._strokeBounds)
-				return this._strokeBounds;
-			var matrix = arguments[0], 
-				width = this.getStrokeWidth(),
-				radius = width / 2,
-				padding = getPenPadding(radius, matrix),
-				join = this.getStrokeJoin(),
-				cap = this.getStrokeCap(),
-				miter = this.getMiterLimit() * width / 2,
-				segments = this._segments,
-				length = segments.length,
-				bounds = getBounds(this, matrix, getPenPadding(radius));
-			var joinBounds = new Rectangle(new Size(padding).multiply(2));
-
-			function add(point) {
-				bounds = bounds.include(matrix
-					? matrix.transform(point) : point);
-			}
-
-			function addBevelJoin(curve, t) {
-				var point = curve.getPoint(t),
-					normal = curve.getNormal(t).normalize(radius);
-				add(point.add(normal));
-				add(point.subtract(normal));
-			}
-
-			function addJoin(segment, join) {
-				if (join === 'round' || !segment._handleIn.isZero()
-						&& !segment._handleOut.isZero()) {
-					bounds = bounds.unite(joinBounds.setCenter(matrix
-						? matrix.transform(segment._point) : segment._point));
-				} else if (join == 'bevel') {
-					var curve = segment.getCurve();
-					addBevelJoin(curve, 0);
-					addBevelJoin(curve.getPrevious(), 1);
-				} else if (join == 'miter') {
-					var curve2 = segment.getCurve(),
-						curve1 = curve2.getPrevious(),
-						point = curve2.getPoint(0),
-						normal1 = curve1.getNormal(1).normalize(radius),
-						normal2 = curve2.getNormal(0).normalize(radius),
-						line1 = new Line(point.subtract(normal1),
-								new Point(-normal1.y, normal1.x)),
-						line2 = new Line(point.subtract(normal2),
-								new Point(-normal2.y, normal2.x)),
-						corner = line1.intersect(line2);
-					if (!corner || point.getDistance(corner) > miter) {
-						addJoin(segment, 'bevel');
-					} else {
-						add(corner);
-					}
-				}
-			}
-
-			function addCap(segment, cap, t) {
-				switch (cap) {
-				case 'round':
-					return addJoin(segment, cap);
-				case 'butt':
-				case 'square':
-					var curve = segment.getCurve(),
-						point = curve.getPoint(t),
-						normal = curve.getNormal(t).normalize(radius);
-					if (cap === 'square')
-						point = point.add(normal.y, -normal.x);
-					add(point.add(normal));
-					add(point.subtract(normal));
-					break;
-				}
-			}
-
-			for (var i = 1, l = length - (this._closed ? 0 : 1); i < l; i++) {
-				addJoin(segments[i], join);
-			}
-			if (this._closed) {
-				addJoin(segments[0], join);
-			} else {
-				addCap(segments[0], cap, 0);
-				addCap(segments[length - 1], cap, 1);
-			}
-			if (useCache)
-				this._strokeBounds = bounds;
-			return bounds;
-		},
-
-		getHandleBounds: function() {
-			var matrix = arguments[0],
-				useCache = matrix === undefined;
-			if (useCache && this._handleBounds)
-				return this._handleBounds;
-			var coords = new Array(6),
-				stroke = arguments[1] / 2 || 0, 
-				join = arguments[2] / 2 || 0, 
-				open = !this._closed,
-				x1 = Infinity,
-				x2 = -x1,
-				y1 = x1,
-				y2 = x2;
-			for (var i = 0, l = this._segments.length; i < l; i++) {
-				var segment = this._segments[i];
-				segment._transformCoordinates(matrix, coords, false);
-				for (var j = 0; j < 6; j += 2) {
-					var padding = j == 0 ? join : stroke,
-						x = coords[j],
-						y = coords[j + 1],
-						xn = x - padding,
-						xx = x + padding,
-						yn = y - padding,
-						yx = y + padding;
-					if (xn < x1) x1 = xn;
-					if (xx > x2) x2 = xx;
-					if (yn < y1) y1 = yn;
-					if (yx > y2) y2 = yx;
-				}
-			}
-			var bounds = Rectangle.create(x1, y1, x2 - x1, y2 - y1);
-			if (useCache)
-				this._handleBounds = bounds;
-			return bounds;
-		},
-
-		getRoughBounds: function() {
-			var useCache = arguments[0] === undefined;
-			if (useCache && this._roughBounds)
-				return this._roughBounds;
-			var bounds = this.getHandleBounds(arguments[0], this.strokeWidth,
-					this.getStrokeJoin() == 'miter'
-						? this.strokeWidth * this.getMiterLimit()
-						: this.strokeWidth);
-			if (useCache)
-				this._roughBounds = bounds;
-			return bounds;
-		}
-	};
-});
-
-Path.inject({ statics: new function() {
-	var kappa = 2 / 3 * (Math.sqrt(2) - 1);
-
-	var ovalSegments = [
-		new Segment([0, 0.5], [0, kappa ], [0, -kappa]),
-		new Segment([0.5, 0], [-kappa, 0], [kappa, 0 ]),
-		new Segment([1, 0.5], [0, -kappa], [0, kappa ]),
-		new Segment([0.5, 1], [kappa, 0 ], [-kappa, 0])
-	];
-
-	return {
-		Line: function() {
-			var step = Math.floor(arguments.length / 2);
-			return new Path(
-				Segment.read(arguments, 0, step),
-				Segment.read(arguments, step, step)
-			);
-		},
-
-		Rectangle: function(rect) {
-			rect = Rectangle.read(arguments);
-			var left = rect.x,
-				top = rect.y
-				right = left + rect.width,
-				bottom = top + rect.height,
-				path = new Path();
-			path._add([
-				new Segment(Point.create(left, bottom)),
-				new Segment(Point.create(left, top)),
-				new Segment(Point.create(right, top)),
-				new Segment(Point.create(right, bottom))
-			]);
-			path._closed = true;
-			return path;
-		},
-
-		RoundRectangle: function(rect, size) {
-			if (arguments.length == 2) {
-				rect = Rectangle.read(arguments, 0, 1);
-				size = Size.read(arguments, 1, 1);
-			} else if (arguments.length == 6) {
-				rect = Rectangle.read(arguments, 0, 4);
-				size = Size.read(arguments, 4, 2);
-			}
-			size = Size.min(size, rect.getSize(true).divide(2));
-			var path = new Path(),
-				uSize = size.multiply(kappa * 2),
-				bl = rect.getBottomLeft(true),
-				tl = rect.getTopLeft(true),
-				tr = rect.getTopRight(true),
-				br = rect.getBottomRight(true);
-			path._add([
-				new Segment(bl.add(size.width, 0), null, [-uSize.width, 0]),
-				new Segment(bl.subtract(0, size.height), [0, uSize.height], null),
-
-				new Segment(tl.add(0, size.height), null, [0, -uSize.height]),
-				new Segment(tl.add(size.width, 0), [-uSize.width, 0], null),
-
-				new Segment(tr.subtract(size.width, 0), null, [uSize.width, 0]),
-				new Segment(tr.add(0, size.height), [0, -uSize.height], null),
-
-				new Segment(br.subtract(0, size.height), null, [0, uSize.height]),
-				new Segment(br.subtract(size.width, 0), [uSize.width, 0], null)
-			]);
-			path._closed = true;
-			return path;
-		},
-
-		Oval: function(rect) {
-			rect = Rectangle.read(arguments);
-			var path = new Path(),
-				point = rect.getPoint(true),
-				size = rect.getSize(true),
-				segments = new Array(4);
-			for (var i = 0; i < 4; i++) {
-				var segment = ovalSegments[i];
-				segments[i] = new Segment(
-					segment._point.multiply(size).add(point),
-					segment._handleIn.multiply(size),
-					segment._handleOut.multiply(size)
-				);
-			}
-			path._add(segments);
-			path._closed = true;
-			return path;
-		},
-
-		Circle: function(center, radius) {
-			if (arguments.length == 3) {
-				center = Point.read(arguments, 0, 2);
-				radius = arguments[2];
-			} else {
-				center = Point.read(arguments, 0, 1);
-			}
-			return Path.Oval(new Rectangle(center.subtract(radius),
-					Size.create(radius * 2, radius * 2)));
-		},
-
-		Arc: function(from, through, to) {
-			var path = new Path();
-			path.moveTo(from);
-			path.arcTo(through, to);
-			return path;
-		},
-
-		RegularPolygon: function(center, numSides, radius) {
-			center = Point.read(arguments, 0, 1);
-			var path = new Path(),
-				step = 360 / numSides,
-				three = !(numSides % 3),
-				vector = new Point(0, three ? -radius : radius),
-				offset = three ? -1 : 0.5,
-				segments = new Array(numSides);
-			for (var i = 0; i < numSides; i++) {
-				segments[i] = new Segment(center.add(
-					vector.rotate((i + offset) * step)));
-			}
-			path._add(segments);
-			path._closed = true;
-			return path;
-		},
-
-		Star: function(center, numPoints, radius1, radius2) {
-			center = Point.read(arguments, 0, 1);
-			numPoints *= 2;
-			var path = new Path(),
-				step = 360 / numPoints,
-				vector = new Point(0, -1),
-				segments = new Array(numPoints);
-			for (var i = 0; i < numPoints; i++) {
-				segments[i] = new Segment(center.add(
-					vector.rotate(step * i).multiply(i % 2 ? radius2 : radius1)));
-			}
-			path._add(segments);
-			path._closed = true;
-			return path;
-		}
-	};
-}});
-
-var CompoundPath = this.CompoundPath = PathItem.extend({
-	initialize: function(paths) {
-		this.base();
-		this._children = [];
-		this._namedChildren = {};
-		var items = !paths || !Array.isArray(paths)
-				|| typeof paths[0] !== 'object' ? arguments : paths;
-		this.addChildren(items);
-	},
-
-	insertChild: function(index, item) {
-		this.base(index, item);
-		if (item._clockwise === undefined)
-			item.setClockwise(item._index == 0);
-	},
-
-	simplify: function() {
-		if (this._children.length == 1) {
-			var child = this._children[0];
-			child.insertAbove(this);
-			this.remove();
-			return child;
-		}
-		return this;
-	},
-
-	smooth: function() {
-		for (var i = 0, l = this._children.length; i < l; i++)
-			this._children[i].smooth();
-	},
-
-	draw: function(ctx, param) {
-		var l = this._children.length;
-		if (l == 0) {
-			return;
-		}
-		var firstChild = this._children[0];
-		ctx.beginPath();
-		param.compound = true;
-		for (var i = 0; i < l; i++)
-			Item.draw(this._children[i], ctx, param);
-		firstChild._setStyles(ctx);
-		var fillColor = firstChild.getFillColor(),
-			strokeColor = firstChild.getStrokeColor();
-		if (fillColor) {
-			ctx.fillStyle = fillColor.getCanvasStyle(ctx);
-			ctx.fill();
-		}
-		if (strokeColor) {
-			ctx.strokeStyle = strokeColor.getCanvasStyle(ctx);
-			ctx.stroke();
-		}
-		param.compound = false;
-	}
-}, new function() { 
-	function getCurrentPath(that) {
-		if (!that._children.length)
-			throw new Error('Use a moveTo() command first');
-		return that._children[that._children.length - 1];
-	}
-
-	var fields = {
-		moveTo: function(point) {
-			var path = new Path();
-			this.addChild(path);
-			path.moveTo.apply(path, arguments);
-		},
-
-		moveBy: function(point) {
-			this.moveTo(getCurrentPath(this).getLastSegment()._point.add(
-					Point.read(arguments)));
-		},
-
-		closePath: function() {
-			getCurrentPath(this).setClosed(true);
-		}
-	};
-
-	Base.each(['lineTo', 'cubicCurveTo', 'quadraticCurveTo', 'curveTo',
-			'arcTo', 'lineBy', 'curveBy', 'arcBy'], function(key) {
-		fields[key] = function() {
-			var path = getCurrentPath(this);
-			path[key].apply(path, arguments);
-		};
-	});
-
-	return fields;
-});
-
-var PathFlattener = Base.extend({
-	initialize: function(path) {
-		this.curves = []; 
-		this.parts = []; 
-		this.length = 0; 
-		this.index = 0;
-
-		var segments = path._segments,
-			segment1 = segments[0],
-			segment2,
-			that = this;
-
-		function addCurve(segment1, segment2) {
-			var curve = Curve.getValues(segment1, segment2);
-			that.curves.push(curve);
-			that._computeParts(curve, segment1._index, 0, 1);
-		}
-
-		for (var i = 1, l = segments.length; i < l; i++) {
-			segment2 = segments[i];
-			addCurve(segment1, segment2);
-			segment1 = segment2;
-		}
-		if (path._closed)
-			addCurve(segment2, segments[0]);
-	},
-
-	_computeParts: function(curve, index, minT, maxT) {
-		if ((maxT - minT) > 1 / 32 && !Curve.isFlatEnough(curve)) {
-			var curves = Curve.subdivide(curve);
-			var halfT = (minT + maxT) / 2;
-			this._computeParts(curves[0], index, minT, halfT);
-			this._computeParts(curves[1], index, halfT, maxT);
-		} else {
-			var x = curve[6] - curve[0],
-				y = curve[7] - curve[1],
-				dist = Math.sqrt(x * x + y * y);
-			if (dist > Numerical.TOLERANCE) {
-				this.length += dist;
-				this.parts.push({
-					offset: this.length,
-					value: maxT,
-					index: index
-				});
-			}
-		}
-	},
-
-	getParameterAt: function(offset) {
-		var i, j = this.index;
-		for (;;) {
-			i = j;
-			if (j == 0 || this.parts[--j].offset < offset)
-				break;
-		}
-		for (var l = this.parts.length; i < l; i++) {
-			var part = this.parts[i];
-			if (part.offset >= offset) {
-				this.index = i;
-				var prev = this.parts[i - 1];
-				var prevVal = prev && prev.index == part.index ? prev.value : 0,
-					prevLen = prev ? prev.offset : 0;
-				return {
-					value: prevVal + (part.value - prevVal)
-						* (offset - prevLen) /  (part.offset - prevLen),
-					index: part.index
-				};
-			}
-		}
-		var part = this.parts[this.parts.length - 1];
-		return {
-			value: 1,
-			index: part.index
-		};
-	},
-
-	evaluate: function(offset, type) {
-		var param = this.getParameterAt(offset);
-		return Curve.evaluate(this.curves[param.index], param.value, type);
-	},
-
-	drawPart: function(ctx, from, to) {
-		from = this.getParameterAt(from);
-		to = this.getParameterAt(to);
-		for (var i = from.index; i <= to.index; i++) {
-			var curve = Curve.getPart(this.curves[i],
-					i == from.index ? from.value : 0,
-					i == to.index ? to.value : 1);
-			if (i == from.index)
-				ctx.moveTo(curve[0], curve[1]);
-			ctx.bezierCurveTo.apply(ctx, curve.slice(2));
-		}
-	}
-});
-
-var PathFitter = Base.extend({
-	initialize: function(path, error) {
-		this.points = [];
-		var segments = path._segments,
-			prev;
-		for (var i = 0, l = segments.length; i < l; i++) {
-			var point = segments[i].point.clone();
-			if (!prev || !prev.equals(point)) {
-				this.points.push(point);
-				prev = point;
-			}
-		}
-		this.error = error;
-	},
-
-	fit: function() {
-		this.segments = [new Segment(this.points[0])];
-		this.fitCubic(0, this.points.length - 1,
-				this.points[1].subtract(this.points[0]).normalize(),
-				this.points[this.points.length - 2].subtract(
-					this.points[this.points.length - 1]).normalize());
-		return this.segments;
-	},
-
-	fitCubic: function(first, last, tan1, tan2) {
-		if (last - first == 1) {
-			var pt1 = this.points[first],
-				pt2 = this.points[last],
-				dist = pt1.getDistance(pt2) / 3;
-			this.addCurve([pt1, pt1.add(tan1.normalize(dist)),
-					pt2.add(tan2.normalize(dist)), pt2]);
-			return;
-		}
-		var uPrime = this.chordLengthParameterize(first, last),
-			maxError = Math.max(this.error, this.error * this.error),
-			error,
-			split;
-		for (var i = 0; i <= 4; i++) {
-			var curve = this.generateBezier(first, last, uPrime, tan1, tan2);
-			var max = this.findMaxError(first, last, curve, uPrime);
-			if (max.error < this.error) {
-				this.addCurve(curve);
-				return;
-			}
-			split = max.index;
-			if (max.error >= maxError)
-				break;
-			this.reparameterize(first, last, uPrime, curve);
-			maxError = max.error;
-		}
-		var V1 = this.points[split - 1].subtract(this.points[split]),
-			V2 = this.points[split].subtract(this.points[split + 1]),
-			tanCenter = V1.add(V2).divide(2).normalize();
-		this.fitCubic(first, split, tan1, tanCenter);
-		this.fitCubic(split, last, tanCenter.negate(), tan2);
-	},
-
-	addCurve: function(curve) {
-		var prev = this.segments[this.segments.length - 1];
-		prev.setHandleOut(curve[1].subtract(curve[0]));
-		this.segments.push(
-				new Segment(curve[3], curve[2].subtract(curve[3])));
-	},
-
-	generateBezier: function(first, last, uPrime, tan1, tan2) {
-		var epsilon = Numerical.EPSILON,
-			pt1 = this.points[first],
-			pt2 = this.points[last],
-		 	C = [[0, 0], [0, 0]],
-			X = [0, 0];
-
-		for (var i = 0, l = last - first + 1; i < l; i++) {
-			var u = uPrime[i],
-				t = 1 - u,
-				b = 3 * u * t,
-				b0 = t * t * t,
-				b1 = b * t,
-				b2 = b * u,
-				b3 = u * u * u,
-				a1 = tan1.normalize(b1),
-				a2 = tan2.normalize(b2),
-				tmp = this.points[first + i]
-					.subtract(pt1.multiply(b0 + b1))
-					.subtract(pt2.multiply(b2 + b3));
-			C[0][0] += a1.dot(a1);
-			C[0][1] += a1.dot(a2);
-			C[1][0] = C[0][1];
-			C[1][1] += a2.dot(a2);
-			X[0] += a1.dot(tmp);
-			X[1] += a2.dot(tmp);
-		}
-
-		var detC0C1 = C[0][0] * C[1][1] - C[1][0] * C[0][1],
-			alpha1, alpha2;
-		if (Math.abs(detC0C1) > epsilon) {
-			var detC0X  = C[0][0] * X[1]    - C[1][0] * X[0],
-				detXC1  = X[0]    * C[1][1] - X[1]    * C[0][1];
-			alpha1 = detXC1 / detC0C1;
-			alpha2 = detC0X / detC0C1;
-		} else {
-			var c0 = C[0][0] + C[0][1],
-				c1 = C[1][0] + C[1][1];
-			if (Math.abs(c0) > epsilon) {
-				alpha1 = alpha2 = X[0] / c0;
-			} else if (Math.abs(c0) > epsilon) {
-				alpha1 = alpha2 = X[1] / c1;
-			} else {
-				alpha1 = alpha2 = 0.;
-			}
-		}
-
-		var segLength = pt2.getDistance(pt1);
-		epsilon *= segLength;
-		if (alpha1 < epsilon || alpha2 < epsilon) {
-			alpha1 = alpha2 = segLength / 3;
-		}
-
-		return [pt1, pt1.add(tan1.normalize(alpha1)),
-				pt2.add(tan2.normalize(alpha2)), pt2];
-	},
-
-	reparameterize: function(first, last, u, curve) {
-		for (var i = first; i <= last; i++) {
-			u[i - first] = this.findRoot(curve, this.points[i], u[i - first]);
-		}
-	},
-
-	findRoot: function(curve, point, u) {
-		var curve1 = [],
-			curve2 = [];
-		for (var i = 0; i <= 2; i++) {
-			curve1[i] = curve[i + 1].subtract(curve[i]).multiply(3);
-		}
-		for (var i = 0; i <= 1; i++) {
-			curve2[i] = curve1[i + 1].subtract(curve1[i]).multiply(2);
-		}
-		var pt = this.evaluate(3, curve, u),
-		 	pt1 = this.evaluate(2, curve1, u),
-		 	pt2 = this.evaluate(1, curve2, u),
-		 	diff = pt.subtract(point),
-			df = pt1.dot(pt1) + diff.dot(pt2);
-		if (Math.abs(df) < Numerical.TOLERANCE)
-			return u;
-		return u - diff.dot(pt1) / df;
-	},
-
-	evaluate: function(degree, curve, t) {
-		var tmp = curve.slice();
-		for (var i = 1; i <= degree; i++) {
-			for (var j = 0; j <= degree - i; j++) {
-				tmp[j] = tmp[j].multiply(1 - t).add(tmp[j + 1].multiply(t));
-			}
-		}
-		return tmp[0];
-	},
-
-	chordLengthParameterize: function(first, last) {
-		var u = [0];
-		for (var i = first + 1; i <= last; i++) {
-			u[i - first] = u[i - first - 1]
-					+ this.points[i].getDistance(this.points[i - 1]);
-		}
-		for (var i = 1, m = last - first; i <= m; i++) {
-			u[i] /= u[m];
-		}
-		return u;
-	},
-
-	findMaxError: function(first, last, curve, u) {
-		var index = Math.floor((last - first + 1) / 2),
-			maxDist = 0;
-		for (var i = first + 1; i < last; i++) {
-			var P = this.evaluate(3, curve, u[i - first]);
-			var v = P.subtract(this.points[i]);
-			var dist = v.x * v.x + v.y * v.y; 
-			if (dist >= maxDist) {
-				maxDist = dist;
-				index = i;
-			}
-		}
-		return {
-			error: maxDist,
-			index: index
-		};
-	}
-});
-
-var TextItem = this.TextItem = Item.extend({
-	initialize: function() {
-		this.base();
-		this._content = '';
-		this._characterStyle = CharacterStyle.create(this);
-		this.setCharacterStyle(this._project.getCurrentStyle());
-		this._paragraphStyle = ParagraphStyle.create(this);
-		this.setParagraphStyle();
-	},
-
-	_clone: function(copy) {
-		copy._content = this._content;
-		copy.setCharacterStyle(this._characterStyle);
-		copy.setParagraphStyle(this._paragraphStyle);
-		return this.base(copy);
-	},
-
-	getContent: function() {
-		return this._content;
-	},
-
-	setContent: function(content) {
-		this._changed(Change.CONTENT);
-		this._content = '' + content;
-	},
-
-	getCharacterStyle: function() {
-		return this._characterStyle;
-	},
-
-	setCharacterStyle: function(style) {
-		this._characterStyle.initialize(style);
-	},
-
-	getParagraphStyle: function() {
-		return this._paragraphStyle;
-	},
-
-	setParagraphStyle: function(style) {
-		this._paragraphStyle.initialize(style);
-	}
-});
-
-var PointText = this.PointText = TextItem.extend({
-	initialize: function(point) {
-		this.base();
-		this._point = Point.read(arguments).clone();
-		this._matrix = new Matrix().translate(this._point);
-	},
-
-	clone: function() {
-		var copy = this._clone(new PointText(this._point));
-		copy._matrix.initialize(this._matrix);
-		return copy;
-	},
-
-	getPoint: function() {
-		return LinkedPoint.create(this, 'setPoint',
-				this._point.x, this._point.y);
-	},
-
-	setPoint: function(point) {
-		this.translate(Point.read(arguments).subtract(this._point));
-	},
-
-	getPosition: function() {
-		return this.getPoint();
-	},
-
-	setPosition: function(point) {
-		this.setPoint.apply(this, arguments);
-	},
-
-	_transform: function(matrix, flags) {
-		this._matrix.preConcatenate(matrix);
-		matrix._transformPoint(this._point, this._point);
-	},
-
-	draw: function(ctx) {
-		if (!this._content)
-			return;
-		ctx.save();
-		ctx.font = this.getFontSize() + 'pt ' + this.getFont();
-		ctx.textAlign = this.getJustification();
-		this._matrix.applyToContext(ctx);
-
-		var fillColor = this.getFillColor();
-		var strokeColor = this.getStrokeColor();
-		if (!fillColor || !strokeColor)
-			ctx.globalAlpha = this._opacity;
-		if (fillColor) {
-			ctx.fillStyle = fillColor.getCanvasStyle(ctx);
-			ctx.fillText(this._content, 0, 0);
-		}
-		if (strokeColor) {
-			ctx.strokeStyle = strokeColor.getCanvasStyle(ctx);
-			ctx.strokeText(this._content, 0, 0);
-		}
-		ctx.restore();
-	}
-});
-
-var Style = Item.extend({
-	initialize: function(style) {
-		var clone = style instanceof Style;
-		return Base.each(this._defaults, function(value, key) {
-			value = style && style[key] || value;
-			this[key] = value && clone && value.clone
-					? value.clone() : value;
-		}, this);
-	},
-
-	statics: {
-		create: function(item) {
-			var style = new this(this.dont);
-			style._item = item;
-			return style;
-		},
-
-		extend: function(src) {
-			var styleKey = src._style,
-				flags = src._flags || {};
-			src._owner.inject(Base.each(src._defaults, function(value, key) {
-				var isColor = !!key.match(/Color$/),
-					part = Base.capitalize(key),
-					set = 'set' + part,
-					get = 'get' + part;
-				src[set] = function(value) {
-					var children = this._item && this._item._children;
-					value = isColor ? Color.read(arguments) : value;
-					if (children) {
-						for (var i = 0, l = children.length; i < l; i++)
-							children[i][styleKey][set](value);
-					} else {
-						var old = this['_' + key];
-						if (old != value && !(old && old.equals
-									&& old.equals(value))) {
-							this['_' + key] = value;
-							if (isColor) {
-								if (old)
-									old._removeOwner(this._item);
-								if (value)
-									value._addOwner(this._item);
-							}
-							if (this._item)
-								this._item._changed(flags[key] || Change.STYLE);
-						}
-					}
-					return this;
-				};
-				src[get] = function() {
-					var children = this._item && this._item._children,
-						style;
-					if (!children)
-						return this['_' + key];
-					for (var i = 0, l = children.length; i < l; i++) {
-						var childStyle = children[i][styleKey][get]();
-						if (!style) {
-							style = childStyle;
-						} else if (style != childStyle && !(style
-								&& style.equals && style.equals(childStyle))) {
-							return undefined;
-						}
-					}
-					return style;
-				};
-				this[set] = function(value) {
-					this[styleKey][set](value);
-					return this;
-				};
-				this[get] = function() {
-					return this[styleKey][get]();
-				};
-			}, {}));
-			return this.base(src);
-		}
-	}
-});
-
-var PathStyle = this.PathStyle = Style.extend({
-	_defaults: {
-		fillColor: undefined,
-		strokeColor: undefined,
-		strokeWidth: 1,
-		strokeCap: 'butt',
-		strokeJoin: 'miter',
-		miterLimit: 10,
-		dashOffset: 0,
-		dashArray: []
-	},
-	_flags: {
-		strokeWidth: Change.STROKE,
-		strokeCap: Change.STROKE,
-		strokeJoin: Change.STROKE,
-		miterLimit: Change.STROKE
-	},
-	_owner: Item,
-	_style: '_style'
-
-});
-
-var ParagraphStyle = this.ParagraphStyle = Style.extend({
-	_defaults: {
-		justification: 'left'
-	},
-	_owner: TextItem,
-	_style: '_paragraphStyle'
-
-});
-
-var CharacterStyle = this.CharacterStyle = PathStyle.extend({
-	_defaults: Base.merge(PathStyle.prototype._defaults, {
-		fillColor: 'black',
-		fontSize: 10,
-		font: 'sans-serif'
-	}),
-	_owner: TextItem,
-	_style: '_characterStyle'
-
-});
-
-var Color = this.Color = Base.extend(new function() {
-
-	var components = {
-		gray: ['gray'],
-		rgb: ['red', 'green', 'blue'],
-		hsb: ['hue', 'saturation', 'brightness'],
-		hsl: ['hue', 'saturation', 'lightness']
-	};
-
-	var colorCache = {},
-		colorContext;
-
-	function nameToRgbColor(name) {
-		var color = colorCache[name];
-		if (color)
-			return color.clone();
-		if (!colorContext) {
-			var canvas = CanvasProvider.getCanvas(Size.create(1, 1));
-			colorContext = canvas.getContext('2d');
-			colorContext.globalCompositeOperation = 'copy';
-		}
-		colorContext.fillStyle = 'rgba(0,0,0,0)';
-		colorContext.fillStyle = name;
-		colorContext.fillRect(0, 0, 1, 1);
-		var data = colorContext.getImageData(0, 0, 1, 1).data,
-			rgb = [data[0] / 255, data[1] / 255, data[2] / 255];
-		return (colorCache[name] = RgbColor.read(rgb)).clone();
-	}
-
-	function hexToRgbColor(string) {
-		var hex = string.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
-		if (hex.length >= 4) {
-			var rgb = new Array(3);
-			for (var i = 0; i < 3; i++) {
-				var channel = hex[i + 1];
-				rgb[i] = parseInt(channel.length == 1
-						? channel + channel : channel, 16) / 255;
-			}
-			return RgbColor.read(rgb);
-		}
-	}
-
-	var hsbIndices = [
-		[0, 3, 1], 
-		[2, 0, 1], 
-		[1, 0, 3], 
-		[1, 2, 0], 
-		[3, 1, 0], 
-		[0, 1, 2]  
-	];
-
-	var converters = {
-		'rgb-hsb': function(color) {
-			var r = color._red,
-				g = color._green,
-				b = color._blue,
-				max = Math.max(r, g, b),
-				min = Math.min(r, g, b),
-				delta = max - min,
-				h = delta == 0 ? 0
-					:   ( max == r ? (g - b) / delta + (g < b ? 6 : 0)
-						: max == g ? (b - r) / delta + 2
-						:            (r - g) / delta + 4) * 60, 
-				s = max == 0 ? 0 : delta / max,
-				v = max; 
-			return new HsbColor(h, s, v, color._alpha);
-		},
-
-		'hsb-rgb': function(color) {
-			var h = (color._hue / 60) % 6, 
-				s = color._saturation,
-				b = color._brightness,
-				i = Math.floor(h), 
-				f = h - i,
-				i = hsbIndices[i],
-				v = [
-					b,						
-					b * (1 - s),			
-					b * (1 - s * f),		
-					b * (1 - s * (1 - f))	
-				];
-			return new RgbColor(v[i[0]], v[i[1]], v[i[2]], color._alpha);
-		},
-
-		'rgb-hsl': function(color) {
-			var r = color._red,
-				g = color._green,
-				b = color._blue,
-				max = Math.max(r, g, b),
-				min = Math.min(r, g, b),
-				delta = max - min,
-				achromatic = delta == 0,
-				h = achromatic ? 0
-					:   ( max == r ? (g - b) / delta + (g < b ? 6 : 0)
-						: max == g ? (b - r) / delta + 2
-						:            (r - g) / delta + 4) * 60, 
-				l = (max + min) / 2,
-				s = achromatic ? 0 : l < 0.5
-						? delta / (max + min)
-						: delta / (2 - max - min);
-			return new HslColor(h, s, l, color._alpha);
-		},
-
-		'hsl-rgb': function(color) {
-			var s = color._saturation,
-				h = color._hue / 360,
-				l = color._lightness,
-				t1, t2, c;
-			if (s == 0)
-				return new RgbColor(l, l, l, color._alpha);
-			var t3s = [ h + 1 / 3, h, h - 1 / 3 ],
-				t2 = l < 0.5 ? l * (1 + s) : l + s - l * s,
-				t1 = 2 * l - t2,
-				c = [];
-			for (var i = 0; i < 3; i++) {
-				var t3 = t3s[i];
-				if (t3 < 0) t3 += 1;
-				if (t3 > 1) t3 -= 1;
-				c[i] = 6 * t3 < 1
-					? t1 + (t2 - t1) * 6 * t3
-					: 2 * t3 < 1
-						? t2
-						: 3 * t3 < 2
-							? t1 + (t2 - t1) * ((2 / 3) - t3) * 6
-							: t1;
-			}
-			return new RgbColor(c[0], c[1], c[2], color._alpha);
-		},
-
-		'rgb-gray': function(color) {
-			return new GrayColor(1 - (color._red * 0.2989 + color._green * 0.587
-					+ color._blue * 0.114), color._alpha);
-		},
-
-		'gray-rgb': function(color) {
-			var comp = 1 - color._gray;
-			return new RgbColor(comp, comp, comp, color._alpha);
-		},
-
-		'gray-hsb': function(color) {
-			return new HsbColor(0, 0, 1 - color._gray, color._alpha);
-		},
-
-		'gray-hsl': function(color) {
-			return new HslColor(0, 0, 1 - color._gray, color._alpha);
-		}
-	};
-
-	var fields = {
-		_readNull: true,
-
-		initialize: function(arg) {
-			var isArray = Array.isArray(arg),
-				type = this._colorType;
-			if (typeof arg === 'object' && !isArray) {
-				if (!type) {
-					return arg.red !== undefined
-						? new RgbColor(arg.red, arg.green, arg.blue, arg.alpha)
-						: arg.gray !== undefined
-						? new GrayColor(arg.gray, arg.alpha)
-						: arg.lightness !== undefined
-						? new HslColor(arg.hue, arg.saturation, arg.lightness,
-								arg.alpha)
-						: arg.hue !== undefined
-						? new HsbColor(arg.hue, arg.saturation, arg.brightness,
-								arg.alpha)
-						: new RgbColor(); 
-				} else {
-					return Color.read(arguments).convert(type);
-				}
-			} else if (typeof arg === 'string') {
-				var rgbColor = arg.match(/^#[0-9a-f]{3,6}$/i)
-						? hexToRgbColor(arg)
-						: nameToRgbColor(arg);
-				return type
-						? rgbColor.convert(type)
-						: rgbColor;
-			} else {
-				var components = isArray ? arg
-						: Array.prototype.slice.call(arguments);
-				if (!type) {
-					if (components.length >= 3)
-						return new RgbColor(components);
-					return new GrayColor(components);
-				} else {
-					Base.each(this._components,
-						function(name, i) {
-							var value = components[i];
-							this['_' + name] = value !== undefined
-									? value : null;
-						},
-					this);
-				}
-			}
-		},
-
-		clone: function() {
-			var ctor = this.constructor,
-				copy = new ctor(ctor.dont),
-				components = this._components;
-			for (var i = 0, l = components.length; i < l; i++) {
-				var key = '_' + components[i];
-				copy[key] = this[key];
-			}
-			return copy;
-		},
-
-		convert: function(type) {
-			var converter;
-			return this._colorType == type
-					? this.clone()
-					: (converter = converters[this._colorType + '-' + type])
-						? converter(this)
-						: converters['rgb-' + type](
-								converters[this._colorType + '-rgb'](this));
-		},
-
-		statics: {
-			extend: function(src) {
-				src.beans = true;
-				if (src._colorType) {
-					var comps = components[src._colorType];
-					src._components = comps.concat(['alpha']);
-					Base.each(comps, function(name) {
-						var isHue = name === 'hue',
-							part = Base.capitalize(name),
-							name = '_' + name;
-						this['get' + part] = function() {
-							return this[name];
-						};
-						this['set' + part] = function(value) {
-							this[name] = isHue
-								? ((value % 360) + 360) % 360
-								: Math.min(Math.max(value, 0), 1);
-							this._changed();
-							return this;
-						};
-					}, src);
-				}
-				return this.base(src);
-			}
-		}
-	};
-
-	Base.each(components, function(comps, type) {
-		Base.each(comps, function(component) {
-			var part = Base.capitalize(component);
-			fields['get' + part] = function() {
-				return this.convert(type)[component];
-			};
-			fields['set' + part] = function(value) {
-				var color = this.convert(type);
-				color[component] = value;
-				color = color.convert(this._colorType);
-				for (var i = 0, l = this._components.length; i < l; i++) {
-					var key = this._components[i];
-					this[key] = color[key];
-				}
-			};
-		});
-	});
-
-	return fields;
-}, {
-
-	_changed: function() {
-		this._cssString = null;
-		for (var i = 0, l = this._owners && this._owners.length; i < l; i++)
-			this._owners[i]._changed(Change.STYLE);
-	},
-
-	_addOwner: function(item) {
-		if (!this._owners)
-			this._owners = [];
-		this._owners.push(item);
-	},
-
-	_removeOwner: function(item) {
-		var index = this._owners ? this._owners.indexOf(item) : -1;
-		if (index != -1) {
-			this._owners.splice(index, 1);
-			if (this._owners.length == 0)
-				delete this._owners;
-		}
-	},
-
-	getType: function() {
-		return this._colorType;
-	},
-
-	getComponents: function() {
-		var length = this._components.length;
-		var comps = new Array(length);
-		for (var i = 0; i < length; i++)
-			comps[i] = this['_' + this._components[i]];
-		return comps;
-	},
-
-	getAlpha: function() {
-		return this._alpha != null ? this._alpha : 1;
-	},
-
-	setAlpha: function(alpha) {
-		this._alpha = alpha == null ? null : Math.min(Math.max(alpha, 0), 1);
-		this._changed();
-		return this;
-	},
-
-	hasAlpha: function() {
-		return this._alpha != null;
-	},
-
-	equals: function(color) {
-		if (color && color._colorType === this._colorType) {
-			for (var i = 0, l = this._components.length; i < l; i++) {
-				var component = '_' + this._components[i];
-				if (this[component] !== color[component])
-					return false;
-			}
-			return true;
-		}
-		return false;
-	},
-
-	toString: function() {
-		var parts = [],
-			format = Base.formatNumber;
-		for (var i = 0, l = this._components.length; i < l; i++) {
-			var component = this._components[i],
-				value = this['_' + component];
-			if (component === 'alpha' && value == null)
-				value = 1;
-			parts.push(component + ': ' + format(value));
-		}
-		return '{ ' + parts.join(', ') + ' }';
-	},
-
-	toCssString: function() {
-		if (!this._cssString) {
-			var color = this.convert('rgb'),
-				alpha = color.getAlpha(),
-				components = [
-					Math.round(color._red * 255),
-					Math.round(color._green * 255),
-					Math.round(color._blue * 255),
-					alpha != null ? alpha : 1
-				];
-			this._cssString = 'rgba(' + components.join(', ') + ')';
-		}
-		return this._cssString;
-	},
-
-	getCanvasStyle: function() {
-		return this.toCssString();
-	}
-
-});
-
-var GrayColor = this.GrayColor = Color.extend({
-
-	_colorType: 'gray'
-});
-
-var RgbColor = this.RgbColor = this.RGBColor = Color.extend({
-
-	_colorType: 'rgb'
-});
-
-var HsbColor = this.HsbColor = this.HSBColor = Color.extend({
-
-	_colorType: 'hsb'
-});
-
-var HslColor = this.HslColor = this.HSLColor = Color.extend({
-
-	_colorType: 'hsl'
-});
-
-var GradientColor = this.GradientColor = Color.extend({
-
-	initialize: function(gradient, origin, destination, hilite) {
-		this.gradient = gradient || new Gradient();
-		this.setOrigin(origin);
-		this.setDestination(destination);
-		if (hilite)
-			this.setHilite(hilite);
-	},
-
-	clone: function() {
-		return new GradientColor(this.gradient, this._origin, this._destination,
-				this._hilite);
-	},
-
-	getOrigin: function() {
-		return this._origin;
-	},
-
-	setOrigin: function(origin) {
-		origin = Point.read(arguments).clone();
-		this._origin = origin;
-		if (this._destination)
-			this._radius = this._destination.getDistance(this._origin);
-		this._changed();
-		return this;
-	},
-
-	getDestination: function() {
-		return this._destination;
-	},
-
-	setDestination: function(destination) {
-		destination = Point.read(arguments).clone();
-		this._destination = destination;
-		this._radius = this._destination.getDistance(this._origin);
-		this._changed();
-		return this;
-	},
-
-	getHilite: function() {
-		return this._hilite;
-	},
-
-	setHilite: function(hilite) {
-		hilite = Point.read(arguments).clone();
-		var vector = hilite.subtract(this._origin);
-		if (vector.getLength() > this._radius) {
-			this._hilite = this._origin.add(
-					vector.normalize(this._radius - 0.1));
-		} else {
-			this._hilite = hilite;
-		}
-		this._changed();
-		return this;
-	},
-
-	getCanvasStyle: function(ctx) {
-		var gradient;
-		if (this.gradient.type === 'linear') {
-			gradient = ctx.createLinearGradient(this._origin.x, this._origin.y,
-					this._destination.x, this._destination.y);
-		} else {
-			var origin = this._hilite || this._origin;
-			gradient = ctx.createRadialGradient(origin.x, origin.y,
-					0, this._origin.x, this._origin.y, this._radius);
-		}
-		for (var i = 0, l = this.gradient._stops.length; i < l; i++) {
-			var stop = this.gradient._stops[i];
-			gradient.addColorStop(stop._rampPoint, stop._color.toCssString());
-		}
-		return gradient;
-	},
-
-	equals: function(color) {
-		return color == this || color && color._colorType === this._colorType
-				&& this.gradient.equals(color.gradient)
-				&& this._origin.equals(color._origin)
-				&& this._destination.equals(color._destination);
-	},
-
-	transform: function(matrix) {
-		matrix._transformPoint(this._origin, this._origin, true);
-		matrix._transformPoint(this._destination, this._destination, true);
-		if (this._hilite)
-			matrix._transformPoint(this._hilite, this._hilite, true);
-		this._radius = this._destination.getDistance(this._origin);
-	}
-});
-
-var Gradient = this.Gradient = Base.extend({
-	initialize: function(stops, type) {
-		this.setStops(stops || ['white', 'black']);
-		this.type = type || 'linear';
-	},
-
-	clone: function() {
-		var stops = [];
-		for (var i = 0, l = this._stops.length; i < l; i++)
-			stops[i] = this._stops[i].clone();
-		return new Gradient(stops, this.type);
-	},
-
-	getStops: function() {
-		return this._stops;
-	},
-
-	setStops: function(stops) {
-		if (stops.length < 2)
-			throw new Error(
-					'Gradient stop list needs to contain at least two stops.');
-		this._stops = GradientStop.readAll(stops);
-		for (var i = 0, l = this._stops.length; i < l; i++) {
-			var stop = this._stops[i];
-			if (stop._defaultRamp)
-				stop.setRampPoint(i / (l - 1));
-		}
-	},
-
-	equals: function(gradient) {
-		if (gradient.type != this.type)
-			return false;
-		if (this._stops.length == gradient._stops.length) {
-			for (var i = 0, l = this._stops.length; i < l; i++) {
-				if (!this._stops[i].equals(gradient._stops[i]))
-					return false;
-			}
-			return true;
-		}
-		return false;
-	}
-});
-
-var GradientStop = this.GradientStop = Base.extend({
-	initialize: function(arg0, arg1) {
-		if (arg1 === undefined && Array.isArray(arg0)) {
-			this.setColor(arg0[0]);
-			this.setRampPoint(arg0[1]);
-		} else if (arg0.color) {
-			this.setColor(arg0.color);
-			this.setRampPoint(arg0.rampPoint);
-		} else {
-			this.setColor(arg0);
-			this.setRampPoint(arg1);
-		}
-	},
-
-	clone: function() {
-		return new GradientStop(this._color.clone(), this._rampPoint);
-	},
-
-	getRampPoint: function() {
-		return this._rampPoint;
-	},
-
-	setRampPoint: function(rampPoint) {
-		this._defaultRamp = rampPoint == null;
-		this._rampPoint = rampPoint || 0;
-	},
-
-	getColor: function() {
-		return this._color;
-	},
-
-	setColor: function(color) {
-		this._color = Color.read(arguments);
-	},
-
-	equals: function(stop) {
-		return stop == this || stop instanceof GradientStop
-				&& this._color.equals(stop._color)
-				&& this._rampPoint == stop._rampPoint;
-	}
-});
-
-var DomElement = {
-	getBounds: function(el, viewport) {
-		var rect = el.getBoundingClientRect(),
-			doc = el.ownerDocument,
-			body = doc.body,
-			docEl = doc.documentElement,
-			x = rect.left - (docEl.clientLeft || body.clientLeft || 0),
-			y = rect.top - (docEl.clientTop  || body.clientTop  || 0);
-		if (!viewport) {
-			var win = DomElement.getViewport(doc);
-			x += win.pageXOffset || docEl.scrollLeft || body.scrollLeft;
-			y += win.pageYOffset || docEl.scrollTop || body.scrollTop;
-		}
-		return new Rectangle(x, y, rect.width, rect.height);
-	},
-
-	getOffset: function(el, viewport) {
-		return this.getBounds(el, viewport).getPoint();
-	},
-
-	getSize: function(el) {
-		return this.getBounds(el, true).getSize();
-	},
-
-	isInvisible: function(el) {
-		return this.getSize(el).equals([0, 0]);
-	},
-
-	isVisible: function(el) {
-		return !this.isInvisible(el) && this.getViewportBounds(el).intersects(
-				this.getBounds(el, true));
-	},
-
-	getViewport: function(doc) {
-		return doc.defaultView || doc.parentWindow;
-	},
-
-	getViewportBounds: function(el) {
-		var doc = el.ownerDocument,
-			view = this.getViewport(doc),
-			body = doc.getElementsByTagName(
-				doc.compatMode === 'CSS1Compat' ? 'html' : 'body')[0];
-		return Rectangle.create(0, 0, 
-			view.innerWidth || body.clientWidth,
-			view.innerHeight || body.clientHeight
-		);
-	},
-
-	getComputedStyle: function(el, name) {
-		if (el.currentStyle)
-			return el.currentStyle[Base.camelize(name)];
-		var style = this.getViewport(el.ownerDocument)
-				.getComputedStyle(el, null);
-		return style ? style.getPropertyValue(Base.hyphenate(name)) : null;
-	}
-};
-
-var DomEvent = {
-	add: function(el, events) {
-		for (var type in events) {
-			var func = events[type];
-			if (el.addEventListener) {
-				el.addEventListener(type, func, false);
-			} else if (el.attachEvent) {
-				el.attachEvent('on' + type, func.bound = function() {
-					func.call(el, window.event);
-				});
-			}
-		}
-	},
-
-	remove: function(el, events) {
-		for (var type in events) {
-			var func = events[type];
-			if (el.removeEventListener) {
-				el.removeEventListener(type, func, false);
-			} else if (el.detachEvent) {
-				el.detachEvent('on' + type, func.bound);
-			}
-		}
-	},
-
-	getPoint: function(event) {
-		var pos = event.targetTouches
-				? event.targetTouches.length
-					? event.targetTouches[0]
-					: event.changedTouches[0]
-				: event;
-		return Point.create(
-			pos.pageX || pos.clientX + document.documentElement.scrollLeft,
-			pos.pageY || pos.clientY + document.documentElement.scrollTop
-		);
-	},
-
-	getTarget: function(event) {
-		return event.target || event.srcElement;
-	},
-
-	getOffset: function(event, target) {
-		return DomEvent.getPoint(event).subtract(DomElement.getOffset(
-				target || DomEvent.getTarget(event)));
-	},
-
-	preventDefault: function(event) {
-		if (event.preventDefault) {
-			event.preventDefault();
-		} else {
-			event.returnValue = false;
-		}
-	},
-
-	stopPropagation: function(event) {
-		if (event.stopPropagation) {
-			event.stopPropagation();
-		} else {
-			event.cancelBubble = true;
-		}
-	},
-
-	stop: function(event) {
-		DomEvent.stopPropagation(event);
-		DomEvent.preventDefault(event);
-	}
-};
-
-DomEvent.requestAnimationFrame = new function() {
-	var part = 'equestAnimationFrame',
-		request = window['r' + part] || window['webkitR' + part]
-			|| window['mozR' + part] || window['oR' + part]
-			|| window['msR' + part];
-	if (request) {
-		request(function(time) {
-			if (time == undefined)
-				request = null;
-		});
-	}
-
-	var callbacks = [],
-		focused = true,
-		timer;
-
-	DomEvent.add(window, {
-		focus: function() {
-			focused = true;
-		},
-		blur: function() {
-			focused = false;
-		}
-	});
-
-	return function(callback, element) {
-		if (request)
-			return request(callback, element);
-		callbacks.push([callback, element]);
-		if (timer)
-			return;
-		timer = window.setInterval(function() {
-			for (var i = callbacks.length - 1; i >= 0; i--) {
-				var entry = callbacks[i],
-					func = entry[0],
-					el = entry[1];
-				if (!el || (PaperScript.getAttribute(el, 'keepalive') == 'true'
-						|| focused) && DomElement.isVisible(el)) {
-					callbacks.splice(i, 1);
-					func(Date.now());
-				}
-			}
-		}, 1000 / 60);
-	};
-};
-
-var View = this.View = PaperScopeItem.extend({
-	_list: 'views',
-	_reference: 'view',
-
-	initialize: function(canvas) {
-		this.base();
-		var size;
-
-		if (typeof canvas === 'string')
-			canvas = document.getElementById(canvas);
-		if (canvas instanceof HTMLCanvasElement) {
-			this._canvas = canvas;
-			if (PaperScript.hasAttribute(canvas, 'resize')) {
-				var offset = DomElement.getOffset(canvas, true),
-					that = this;
-				size = DomElement.getViewportBounds(canvas)
-						.getSize().subtract(offset);
-				canvas.width = size.width;
-				canvas.height = size.height;
-				DomEvent.add(window, {
-					resize: function(event) {
-						if (!DomElement.isInvisible(canvas))
-							offset = DomElement.getOffset(canvas, true);
-						that.setViewSize(DomElement.getViewportBounds(canvas)
-								.getSize().subtract(offset));
-					}
-				});
-			} else {
-				size = DomElement.isInvisible(canvas)
-					? Size.create(parseInt(canvas.getAttribute('width')),
-							parseInt(canvas.getAttribute('height')))
-					: DomElement.getSize(canvas);
-			}
-			if (PaperScript.hasAttribute(canvas, 'stats')) {
-				this._stats = new Stats();
-				var element = this._stats.domElement,
-					style = element.style,
-					offset = DomElement.getOffset(canvas);
-				style.position = 'absolute';
-				style.left = offset.x + 'px';
-				style.top = offset.y + 'px';
-				document.body.appendChild(element);
-			}
-		} else {
-			size = Size.read(arguments, 1);
-			if (size.isZero())
-				size = new Size(1024, 768);
-			this._canvas = CanvasProvider.getCanvas(size);
-		}
-		this._id = this._canvas.getAttribute('id');
-		if (this._id == null)
-			this._canvas.setAttribute('id', this._id = 'canvas-' + View._id++);
-
-		View._views[this._id] = this;
-		this._viewSize = LinkedSize.create(this, 'setViewSize',
-				size.width, size.height);
-		this._context = this._canvas.getContext('2d');
-		this._matrix = new Matrix();
-		this._zoom = 1;
-
-		this._events = this._createEvents();
-		DomEvent.add(this._canvas, this._events);
-		if (!View._focused)
-			View._focused = this;
-
-		this._scope._redrawNotified = false;
-	},
-
-	remove: function() {
-		if (!this.base())
-			return false;
-		if (View._focused == this)
-			View._focused = null;
-		delete View._views[this._id];
-		DomEvent.remove(this._canvas, this._events);
-		this._canvas = this._events = this._onFrame = null;
-		return true;
-	},
-
-	_redraw: function() {
-		this._redrawNeeded = true;
-		if (this._onFrameCallback) {
-			this._onFrameCallback(0, true);
-		} else {
-			this.draw();
-		}
-	},
-
-	_transform: function(matrix, flags) {
-		this._matrix.preConcatenate(matrix);
-		this._bounds = null;
-		this._inverse = null;
-		this._redraw();
-	},
-
-	getCanvas: function() {
-		return this._canvas;
-	},
-
-	getViewSize: function() {
-		return this._viewSize;
-	},
-
-	setViewSize: function(size) {
-		size = Size.read(arguments);
-		var delta = size.subtract(this._viewSize);
-		if (delta.isZero())
-			return;
-		this._canvas.width = size.width;
-		this._canvas.height = size.height;
-		this._viewSize.set(size.width, size.height, true);
-		this._bounds = null;
-		this._redrawNeeded = true;
-		if (this.onResize) {
-			this.onResize({
-				size: size,
-				delta: delta
-			});
-		}
-		this._redraw();
-	},
-
-	getBounds: function() {
-		if (!this._bounds)
-			this._bounds = this._getInverse()._transformBounds(
-					new Rectangle(new Point(), this._viewSize));
-		return this._bounds;
-	},
-
-	getSize: function() {
-		return this.getBounds().getSize();
-	},
-
-	getCenter: function() {
-		return this.getBounds().getCenter();
-	},
-
-	setCenter: function(center) {
-		this.scrollBy(Point.read(arguments).subtract(this.getCenter()));
-	},
-
-	getZoom: function() {
-		return this._zoom;
-	},
-
-	setZoom: function(zoom) {
-		this._transform(new Matrix().scale(zoom / this._zoom, this.getCenter()));
-		this._zoom = zoom;
-	},
-
-	isVisible: function() {
-		return DomElement.isVisible(this._canvas);
-	},
-
-	scrollBy: function(point) {
-		this._transform(new Matrix().translate(Point.read(arguments).negate()));
-	},
-
-	draw: function(checkRedraw) {
-		if (checkRedraw && !this._redrawNeeded)
-			return false;
-		if (this._stats)
-			this._stats.update();
-		var ctx = this._context,
-			size = this._viewSize;
-		ctx.clearRect(0, 0, size._width + 1, size._height + 1);
-
-		ctx.save();
-		this._matrix.applyToContext(ctx);
-		this._scope.project.draw(ctx);
-		ctx.restore();
-		if (this._redrawNeeded) {
-			this._redrawNeeded = false;
-			this._scope._redrawNotified = false;
-		}
-		return true;
-	},
-
-	projectToView: function(point) {
-		return this._matrix._transformPoint(Point.read(arguments));
-	},
-
-	viewToProject: function(point) {
-		return this._getInverse()._transformPoint(Point.read(arguments));
-	},
-
-	_getInverse: function() {
-		if (!this._inverse)
-			this._inverse = this._matrix.createInverse();
-		return this._inverse;
-	},
-
-	getOnFrame: function() {
-		return this._onFrame;
-	},
-
-	setOnFrame: function(onFrame) {
-		this._onFrame = onFrame;
-		if (!onFrame) {
-			delete this._onFrameCallback;
-			return;
-		}
-		var that = this,
-			requested = false,
-			before,
-			time = 0,
-			count = 0;
-		this._onFrameCallback = function(param, dontRequest) {
-			requested = false;
-			if (!that._onFrame)
-				return;
-			paper = that._scope;
-			requested = true;
-			if (!dontRequest) {
-				DomEvent.requestAnimationFrame(that._onFrameCallback,
-						that._canvas);
-			}
-			var now = Date.now() / 1000,
-			 	delta = before ? now - before : 0;
-			that._onFrame(Base.merge({
-				delta: delta, 
-				time: time += delta, 
-				count: count++
-			}));
-			before = now;
-			that.draw(true);
-		};
-		if (!requested)
-			this._onFrameCallback();
-	},
-
-	onResize: null
-}, {
-	statics: {
-		_views: {},
-		_id: 0
-	}
-}, new function() {
-	var tool,
-		timer,
-		curPoint,
-		tempFocus,
-		dragging = false;
-
-	function viewToProject(view, event) {
-		return view.viewToProject(DomEvent.getOffset(event, view._canvas));
-	}
-
-	function updateFocus() {
-		if (!View._focused || !View._focused.isVisible()) {
-			PaperScope.each(function(scope) {
-				for (var i = 0, l = scope.views.length; i < l; i++) {
-					var view = scope.views[i];
-					if (view.isVisible()) {
-						View._focused = tempFocus = view;
-						throw Base.stop;
-					}
-				}
-			});
-		}
-	}
-
-	function mousemove(event) {
-		var view;
-		if (!dragging) {
-		 	view = View._views[DomEvent.getTarget(event).getAttribute('id')];
-			if (view) {
-				View._focused = tempFocus = view;
-			} else if (tempFocus && tempFocus == View._focused) {
-				View._focused = null;
-				updateFocus();
-			}
-		}
-		if (!(view = view || View._focused) || !(tool = view._scope.tool))
-			return;
-		var point = event && viewToProject(view, event);
-		var onlyMove = !!(!tool.onMouseDrag && tool.onMouseMove);
-		if (dragging && !onlyMove) {
-			curPoint = point || curPoint;
-			if (curPoint && tool.onHandleEvent('mousedrag', curPoint, event)) {
-				view.draw(true);
-				DomEvent.stop(event);
-			}
-		} else if ((!dragging || onlyMove)
-				&& tool.onHandleEvent('mousemove', point, event)) {
-			view.draw(true);
-			DomEvent.stop(event);
-		}
-	}
-
-	function mouseup(event) {
-		var view = View._focused;
-		if (!view || !dragging)
-			return;
-		dragging = false;
-		curPoint = null;
-		if (tool) {
-			if (timer != null)
-				timer = clearInterval(timer);
-			if (tool.onHandleEvent('mouseup', viewToProject(view, event), event)) {
-				view.draw(true);
-				DomEvent.stop(event);
-			}
-		}
-	}
-
-	function selectstart(event) {
-		if (dragging)
-			DomEvent.stop(event);
-	}
-
-	DomEvent.add(document, {
-		mousemove: mousemove,
-		mouseup: mouseup,
-		touchmove: mousemove,
-		touchend: mouseup,
-		selectstart: selectstart,
-		scroll: updateFocus
-	});
-
-	DomEvent.add(window, {
-		load: updateFocus
-	});
-
-	return {
-		_createEvents: function() {
-			var view = this;
-
-			function mousedown(event) {
-				View._focused = view;
-				if (!(tool = view._scope.tool))
-					return;
-				curPoint = viewToProject(view, event);
-				if (tool.onHandleEvent('mousedown', curPoint, event))
-					view.draw(true);
-				if (tool.eventInterval != null)
-					timer = setInterval(mousemove, tool.eventInterval);
-				dragging = true;
-			}
-
-			return {
-				mousedown: mousedown,
-				touchstart: mousedown,
-				selectstart: selectstart
-			};
-		},
-
-		statics: {
-
-			updateFocus: updateFocus
-		}
-	};
-});
-
-var Event = this.Event = Base.extend({
-	initialize: function(event) {
-		this.event = event;
-	},
-
-	preventDefault: function() {
-		DomEvent.preventDefault(this.event);
-	},
-
-	stopPropagation: function() {
-		DomEvent.stopPropagation(this.event);
-	},
-
-	stop: function() {
-		DomEvent.stop(this.event);
-	},
-
-	getModifiers: function() {
-		return Key.modifiers;
-	}
-});
-
-var KeyEvent = this.KeyEvent = Event.extend(new function() {
-	return {
-		initialize: function(down, key, character, event) {
-			this.base(event);
-			this.type = down ? 'keydown' : 'keyup';
-			this.key = key;
-			this.character = character;
-		},
-
-		toString: function() {
-			return '{ type: ' + this.type
-					+ ', key: ' + this.key
-					+ ', character: ' + this.character
-					+ ', modifiers: ' + this.getModifiers()
-					+ ' }';
-		}
-	};
-});
-
-var Key = this.Key = new function() {
-
-	var keys = {
-		 8: 'backspace',
-		13: 'enter',
-		16: 'shift',
-		17: 'control',
-		18: 'option',
-		19: 'pause',
-		20: 'caps-lock',
-		27: 'escape',
-		32: 'space',
-		35: 'end',
-		36: 'home',
-		37: 'left',
-		38: 'up',
-		39: 'right',
-		40: 'down',
-		46: 'delete',
-		91: 'command',
-		93: 'command', 
-		224: 'command'  
-	},
-
-	modifiers = Base.merge({
-		shift: false,
-		control: false,
-		option: false,
-		command: false,
-		capsLock: false
-	}),
-
-	charCodeMap = {}, 
-	keyMap = {}, 
-	downCode; 
-
-	function handleKey(down, keyCode, charCode, event) {
-		var character = String.fromCharCode(charCode),
-			key = keys[keyCode] || character.toLowerCase(),
-			handler = down ? 'onKeyDown' : 'onKeyUp',
-			view = View._focused,
-			scope = view && view.isVisible() && view._scope,
-			tool = scope && scope.tool;
-		keyMap[key] = down;
-		if (tool && tool[handler]) {
-			var keyEvent = new KeyEvent(down, key, character, event);
-			if (tool[handler](keyEvent) === false)
-				keyEvent.preventDefault();
-			if (view)
-				view.draw(true);
-		}
-	}
-
-	DomEvent.add(document, {
-		keydown: function(event) {
-			var code = event.which || event.keyCode;
-			var key = keys[code], name;
-			if (key) {
-				if ((name = Base.camelize(key)) in modifiers)
-					modifiers[name] = true;
-				charCodeMap[code] = 0;
-				handleKey(true, code, null, event);
-			} else {
-				downCode = code;
-			}
-		},
-
-		keypress: function(event) {
-			if (downCode != null) {
-				var code = event.which || event.keyCode;
-				charCodeMap[downCode] = code;
-				handleKey(true, downCode, code, event);
-				downCode = null;
-			}
-		},
-
-		keyup: function(event) {
-			var code = event.which || event.keyCode,
-				key = keys[code], name;
-			if (key && (name = Base.camelize(key)) in modifiers)
-				modifiers[name] = false;
-			if (charCodeMap[code] != null) {
-				handleKey(false, code, charCodeMap[code], event);
-				delete charCodeMap[code];
-			}
-		}
-	});
-
-	return {
-		modifiers: modifiers,
-
-		isDown: function(key) {
-			return !!keyMap[key];
-		}
-	};
-};
-
-var ToolEvent = this.ToolEvent = Event.extend({
-	initialize: function(tool, type, event) {
-		this.tool = tool;
-		this.type = type;
-		this.event = event;
-	},
-
-	_choosePoint: function(point, toolPoint) {
-		return point ? point : toolPoint ? toolPoint.clone() : null;
-	},
-
-	getPoint: function() {
-		return this._choosePoint(this._point, this.tool._point);
-	},
-
-	setPoint: function(point) {
-		this._point = point;
-	},
-
-	getLastPoint: function() {
-		return this._choosePoint(this._lastPoint, this.tool._lastPoint);
-	},
-
-	setLastPoint: function(lastPoint) {
-		this._lastPoint = lastPoint;
-	},
-
-	getDownPoint: function() {
-		return this._choosePoint(this._downPoint, this.tool._downPoint);
-	},
-
-	setDownPoint: function(downPoint) {
-		this._downPoint = downPoint;
-	},
-
-	getMiddlePoint: function() {
-		if (!this._middlePoint && this.tool._lastPoint) {
-			return this.tool._point.add(this.tool._lastPoint).divide(2);
-		}
-		return this.middlePoint;
-	},
-
-	setMiddlePoint: function(middlePoint) {
-		this._middlePoint = middlePoint;
-	},
-
-	getDelta: function() {
-		return !this._delta && this.tool._lastPoint
-		 		? this.tool._point.subtract(this.tool._lastPoint)
-				: this._delta;
-	},
-
-	setDelta: function(delta) {
-		this._delta = delta;
-	},
-
-	getCount: function() {
-		return /^mouse(down|up)$/.test(this.type)
-				? this.tool._downCount
-				: this.tool._count;
-	},
-
-	setCount: function(count) {
-		this.tool[/^mouse(down|up)$/.test(this.type) ? 'downCount' : 'count']
-			= count;
-	},
-
-	getItem: function() {
-		if (!this._item) {
-			var result = this.tool._scope.project.hitTest(this.getPoint());
-			if (result) {
-				var item = result.item,
-					parent = item._parent;
-				while ((parent instanceof Group && !(parent instanceof Layer))
-						|| parent instanceof CompoundPath) {
-					item = parent;
-					parent = parent._parent;
-				}
-				this._item = item;
-			}
-		}
-		return this._item;
-	},
-	setItem: function(item) {
-		this._item = item;
-	},
-
-	toString: function() {
-		return '{ type: ' + this.type
-				+ ', point: ' + this.getPoint()
-				+ ', count: ' + this.getCount()
-				+ ', modifiers: ' + this.getModifiers()
-				+ ' }';
-	}
-});
-
-var Tool = this.Tool = PaperScopeItem.extend({
-	_list: 'tools',
-	_reference: 'tool',
-
-	initialize: function() {
-		this.base();
-		this._firstMove = true;
-		this._count = 0;
-		this._downCount = 0;
-	},
-
-	eventInterval: null,
-
-	getMinDistance: function() {
-		return this._minDistance;
-	},
-
-	setMinDistance: function(minDistance) {
-		this._minDistance = minDistance;
-		if (this._minDistance != null && this._maxDistance != null
-				&& this._minDistance > this._maxDistance) {
-			this._maxDistance = this._minDistance;
-		}
-	},
-
-	getMaxDistance: function() {
-		return this._maxDistance;
-	},
-
-	setMaxDistance: function(maxDistance) {
-		this._maxDistance = maxDistance;
-		if (this._minDistance != null && this._maxDistance != null
-				&& this._maxDistance < this._minDistance) {
-			this._minDistance = maxDistance;
-		}
-	},
-
-	getFixedDistance: function() {
-		return this._minDistance == this._maxDistance
-			? this._minDistance : null;
-	},
-
-	setFixedDistance: function(distance) {
-		this._minDistance = distance;
-		this._maxDistance = distance;
-	},
-
-	updateEvent: function(type, pt, minDistance, maxDistance, start,
-			needsChange, matchMaxDistance) {
-		if (!start) {
-			if (minDistance != null || maxDistance != null) {
-				var minDist = minDistance != null ? minDistance : 0;
-				var vector = pt.subtract(this._point);
-				var distance = vector.getLength();
-				if (distance < minDist)
-					return false;
-				var maxDist = maxDistance != null ? maxDistance : 0;
-				if (maxDist != 0) {
-					if (distance > maxDist) {
-						pt = this._point.add(vector.normalize(maxDist));
-					} else if (matchMaxDistance) {
-						return false;
-					}
-				}
-			}
-			if (needsChange && pt.equals(this._point))
-				return false;
-		}
-		this._lastPoint = start && type == 'mousemove' ? pt : this._point;
-		this._point = pt;
-		switch (type) {
-		case 'mousedown':
-			this._lastPoint = this._downPoint;
-			this._downPoint = this._point;
-			this._downCount++;
-			break;
-		case 'mouseup':
-			this._lastPoint = this._downPoint;
-			break;
-		}
-		this._count = start ? 0 : this._count + 1;
-		return true;
-	},
-
-	onHandleEvent: function(type, pt, event) {
-		paper = this._scope;
-		var called = false;
-		switch (type) {
-		case 'mousedown':
-			this.updateEvent(type, pt, null, null, true, false, false);
-			if (this.onMouseDown) {
-				this.onMouseDown(new ToolEvent(this, type, event));
-				called = true;
-			}
-			break;
-		case 'mousedrag':
-			var needsChange = false,
-				matchMaxDistance = false;
-			while (this.updateEvent(type, pt, this.minDistance,
-					this.maxDistance, false, needsChange, matchMaxDistance)) {
-				if (this.onMouseDrag) {
-					this.onMouseDrag(new ToolEvent(this, type, event));
-					called = true;
-				}
-				needsChange = true;
-				matchMaxDistance = true;
-			}
-			break;
-		case 'mouseup':
-			if ((this._point.x != pt.x || this._point.y != pt.y)
-					&& this.updateEvent('mousedrag', pt, this.minDistance,
-							this.maxDistance, false, false, false)) {
-				if (this.onMouseDrag) {
-					this.onMouseDrag(new ToolEvent(this, type, event));
-					called = true;
-				}
-			}
-			this.updateEvent(type, pt, null, this.maxDistance, false,
-					false, false);
-			if (this.onMouseUp) {
-				this.onMouseUp(new ToolEvent(this, type, event));
-				called = true;
-			}
-			this.updateEvent(type, pt, null, null, true, false, false);
-			this._firstMove = true;
-			break;
-		case 'mousemove':
-			while (this.updateEvent(type, pt, this.minDistance,
-					this.maxDistance, this._firstMove, true, false)) {
-				if (this.onMouseMove) {
-					this.onMouseMove(new ToolEvent(this, type, event));
-					called = true;
-				}
-				this._firstMove = false;
-			}
-			break;
-		}
-		return called;
-	}
-});
-
-var CanvasProvider = {
-	canvases: [],
-	getCanvas: function(size) {
-		if (this.canvases.length) {
-			var canvas = this.canvases.pop();
-			if ((canvas.width != size.width)
-					|| (canvas.height != size.height)) {
-				canvas.width = size.width;
-				canvas.height = size.height;
-			} else {
-				canvas.getContext('2d').clearRect(0, 0,
-						size.width + 1, size.height + 1);
-			}
-			return canvas;
-		} else {
-			var canvas = document.createElement('canvas');
-			canvas.width = size.width;
-			canvas.height = size.height;
-			return canvas;
-		}
-	},
-
-	returnCanvas: function(canvas) {
-		this.canvases.push(canvas);
-	}
-};
-
-var Numerical = new function() {
-
-	var abscissas = [
-		[  0.5773502691896257645091488],
-		[0,0.7745966692414833770358531],
-		[  0.3399810435848562648026658,0.8611363115940525752239465],
-		[0,0.5384693101056830910363144,0.9061798459386639927976269],
-		[  0.2386191860831969086305017,0.6612093864662645136613996,0.9324695142031520278123016],
-		[0,0.4058451513773971669066064,0.7415311855993944398638648,0.9491079123427585245261897],
-		[  0.1834346424956498049394761,0.5255324099163289858177390,0.7966664774136267395915539,0.9602898564975362316835609],
-		[0,0.3242534234038089290385380,0.6133714327005903973087020,0.8360311073266357942994298,0.9681602395076260898355762],
-		[  0.1488743389816312108848260,0.4333953941292471907992659,0.6794095682990244062343274,0.8650633666889845107320967,0.9739065285171717200779640],
-		[0,0.2695431559523449723315320,0.5190961292068118159257257,0.7301520055740493240934163,0.8870625997680952990751578,0.9782286581460569928039380],
-		[  0.1252334085114689154724414,0.3678314989981801937526915,0.5873179542866174472967024,0.7699026741943046870368938,0.9041172563704748566784659,0.9815606342467192506905491],
-		[0,0.2304583159551347940655281,0.4484927510364468528779129,0.6423493394403402206439846,0.8015780907333099127942065,0.9175983992229779652065478,0.9841830547185881494728294],
-		[  0.1080549487073436620662447,0.3191123689278897604356718,0.5152486363581540919652907,0.6872929048116854701480198,0.8272013150697649931897947,0.9284348836635735173363911,0.9862838086968123388415973],
-		[0,0.2011940939974345223006283,0.3941513470775633698972074,0.5709721726085388475372267,0.7244177313601700474161861,0.8482065834104272162006483,0.9372733924007059043077589,0.9879925180204854284895657],
-		[  0.0950125098376374401853193,0.2816035507792589132304605,0.4580167776572273863424194,0.6178762444026437484466718,0.7554044083550030338951012,0.8656312023878317438804679,0.9445750230732325760779884,0.9894009349916499325961542]
-	];
-
-	var weights = [
-		[1],
-		[0.8888888888888888888888889,0.5555555555555555555555556],
-		[0.6521451548625461426269361,0.3478548451374538573730639],
-		[0.5688888888888888888888889,0.4786286704993664680412915,0.2369268850561890875142640],
-		[0.4679139345726910473898703,0.3607615730481386075698335,0.1713244923791703450402961],
-		[0.4179591836734693877551020,0.3818300505051189449503698,0.2797053914892766679014678,0.1294849661688696932706114],
-		[0.3626837833783619829651504,0.3137066458778872873379622,0.2223810344533744705443560,0.1012285362903762591525314],
-		[0.3302393550012597631645251,0.3123470770400028400686304,0.2606106964029354623187429,0.1806481606948574040584720,0.0812743883615744119718922],
-		[0.2955242247147528701738930,0.2692667193099963550912269,0.2190863625159820439955349,0.1494513491505805931457763,0.0666713443086881375935688],
-		[0.2729250867779006307144835,0.2628045445102466621806889,0.2331937645919904799185237,0.1862902109277342514260976,0.1255803694649046246346943,0.0556685671161736664827537],
-		[0.2491470458134027850005624,0.2334925365383548087608499,0.2031674267230659217490645,0.1600783285433462263346525,0.1069393259953184309602547,0.0471753363865118271946160],
-		[0.2325515532308739101945895,0.2262831802628972384120902,0.2078160475368885023125232,0.1781459807619457382800467,0.1388735102197872384636018,0.0921214998377284479144218,0.0404840047653158795200216],
-		[0.2152638534631577901958764,0.2051984637212956039659241,0.1855383974779378137417166,0.1572031671581935345696019,0.1215185706879031846894148,0.0801580871597602098056333,0.0351194603317518630318329],
-		[0.2025782419255612728806202,0.1984314853271115764561183,0.1861610000155622110268006,0.1662692058169939335532009,0.1395706779261543144478048,0.1071592204671719350118695,0.0703660474881081247092674,0.0307532419961172683546284],
-		[0.1894506104550684962853967,0.1826034150449235888667637,0.1691565193950025381893121,0.1495959888165767320815017,0.1246289712555338720524763,0.0951585116824927848099251,0.0622535239386478928628438,0.0271524594117540948517806]
-	];
-
-	var abs = Math.abs,
-		sqrt = Math.sqrt,
-		cos = Math.cos,
-		PI = Math.PI;
-
-	return {
-		TOLERANCE: 10e-6,
-		EPSILON: 10e-12,
-
-		integrate: function(f, a, b, n) {
-			var x = abscissas[n - 2],
-				w = weights[n - 2],
-				A = 0.5 * (b - a),
-				B = A + a,
-				i = 0,
-				m = (n + 1) >> 1,
-				sum = n & 1 ? w[i++] * f(B) : 0; 
-			while (i < m) {
-				var Ax = A * x[i];
-				sum += w[i++] * (f(B + Ax) + f(B - Ax));
-			}
-			return A * sum;
-		},
-
-		findRoot: function(f, df, x, a, b, n, tolerance) {
-			for (var i = 0; i < n; i++) {
-				var fx = f(x),
-					dx = fx / df(x);
-				if (abs(dx) < tolerance)
-					return x;
-				var nx = x - dx;
-				if (fx > 0) {
-					b = x;
-					x = nx <= a ? 0.5 * (a + b) : nx;
-				} else {
-					a = x;
-					x = nx >= b ? 0.5 * (a + b) : nx;
-				}
-			}
-		},
-
-		solveQuadratic: function(a, b, c, roots, tolerance) {
-			if (abs(a) < tolerance) {
-				if (abs(b) >= tolerance) {
-					roots[0] = -c / b;
-					return 1;
-				}
-				if (abs(c) < tolerance)
-					return -1; 
-				return 0; 
-			}
-			var q = b * b - 4 * a * c;
-			if (q < 0)
-				return 0; 
-			q = sqrt(q);
-			if (b < 0)
-				q = -q;
-			q = (b + q) * -0.5;
-			var n = 0;
-			if (abs(q) >= tolerance)
-				roots[n++] = c / q;
-			if (abs(a) >= tolerance)
-				roots[n++] = q / a;
-			return n; 
-		},
-
-		solveCubic: function(a, b, c, d, roots, tolerance) {
-			if (abs(a) < tolerance)
-				return Numerical.solveQuadratic(b, c, d, roots, tolerance);
-			b /= a;
-			c /= a;
-			d /= a;
-			var Q = (b * b - 3 * c) / 9,
-				R = (2 * b * b * b - 9 * b * c + 27 * d) / 54,
-				Q3 = Q * Q * Q,
-				R2 = R * R;
-			b /= 3; 
-			if (R2 < Q3) { 
-				var theta = Math.acos(R / sqrt(Q3)),
-					q = -2 * sqrt(Q);
-				roots[0] = q * cos(theta / 3) - b;
-				roots[1] = q * cos((theta + 2 * PI) / 3) - b;
-				roots[2] = q * cos((theta - 2 * PI) / 3) - b;
-				return 3;
-			} else { 
-				var A = -Math.pow(abs(R) + sqrt(R2 - Q3), 1 / 3);
-				if (R < 0) A = -A;
-				var B = (abs(A) < tolerance) ? 0 : Q / A;
-				roots[0] = (A + B) - b;
-				return 1;
-			}
-			return 0;
-		}
-	};
-};
-
-var BlendMode = {
-	process: function(blendMode, srcContext, dstContext, alpha, offset) {
-		var srcCanvas = srcContext.canvas,
-			dstData = dstContext.getImageData(offset.x, offset.y,
-					srcCanvas.width, srcCanvas.height),
-			dst  = dstData.data,
-			src  = srcContext.getImageData(0, 0,
-					srcCanvas.width, srcCanvas.height).data,
-			min = Math.min,
-			max = Math.max,
-			abs = Math.abs,
-			sr, sg, sb, sa, 
-			br, bg, bb, ba, 
-			dr, dg, db;     
-
-		function getLum(r, g, b) {
-			return 0.2989 * r + 0.587 * g + 0.114 * b;
-		}
-
-		function setLum(r, g, b, l) {
-			var d = l - getLum(r, g, b);
-			dr = r + d;
-			dg = g + d;
-			db = b + d;
-			var l = getLum(dr, dg, db),
-				mn = min(dr, dg, db),
-				mx = max(dr, dg, db);
-			if (mn < 0) {
-				var lmn = l - mn;
-				dr = l + (dr - l) * l / lmn;
-				dg = l + (dg - l) * l / lmn;
-				db = l + (db - l) * l / lmn;
-			}
-			if (mx > 255) {
-				var ln = 255 - l, mxl = mx - l;
-				dr = l + (dr - l) * ln / mxl;
-				dg = l + (dg - l) * ln / mxl;
-				db = l + (db - l) * ln / mxl;
-			}
-		}
-
-		function getSat(r, g, b) {
-			return max(r, g, b) - min(r, g, b);
-		}
-
-		function setSat(r, g, b, s) {
-			var col = [r, g, b],
-				mx = max(r, g, b), 
-				mn = min(r, g, b), 
-				md; 
-			mn = mn == r ? 0 : mn == g ? 1 : 2;
-			mx = mx == r ? 0 : mx == g ? 1 : 2;
-			md = min(mn, mx) == 0 ? max(mn, mx) == 1 ? 2 : 1 : 0;
-			if (col[mx] > col[mn]) {
-				col[md] = (col[md] - col[mn]) * s / (col[mx] - col[mn]);
-				col[mx] = s;
-			} else {
-				col[md] = col[mx] = 0;
-			}
-			col[mn] = 0;
-			dr = col[0];
-			dg = col[1];
-			db = col[2];
-		}
-
-		var modes = {
-			multiply: function() {
-				dr = br * sr / 255;
-				dg = bg * sg / 255;
-				db = bb * sb / 255;
-			},
-
-			screen: function() {
-				dr = 255 - (255 - br) * (255 - sr) / 255;
-				dg = 255 - (255 - bg) * (255 - sg) / 255;
-				db = 255 - (255 - bb) * (255 - sb) / 255;
-			},
-
-			overlay: function() {
-				dr = br < 128 ? 2 * br * sr / 255 : 255 - 2 * (255 - br) * (255 - sr) / 255;
-				dg = bg < 128 ? 2 * bg * sg / 255 : 255 - 2 * (255 - bg) * (255 - sg) / 255;
-				db = bb < 128 ? 2 * bb * sb / 255 : 255 - 2 * (255 - bb) * (255 - sb) / 255;
-			},
-
-			'soft-light': function() {
-				var t = sr * br / 255;
-				dr = t + br * (255 - (255 - br) * (255 - sr) / 255 - t) / 255;
-				t = sg * bg / 255;
-				dg = t + bg * (255 - (255 - bg) * (255 - sg) / 255 - t) / 255;
-				t = sb * bb / 255;
-				db = t + bb * (255 - (255 - bb) * (255 - sb) / 255 - t) / 255;
-			},
-
-			'hard-light': function() {
-				dr = sr < 128 ? 2 * sr * br / 255 : 255 - 2 * (255 - sr) * (255 - br) / 255;
-				dg = sg < 128 ? 2 * sg * bg / 255 : 255 - 2 * (255 - sg) * (255 - bg) / 255;
-				db = sb < 128 ? 2 * sb * bb / 255 : 255 - 2 * (255 - sb) * (255 - bb) / 255;
-			},
-
-			'color-dodge': function() {
-				dr = sr == 255 ? sr : min(255, br * 255 / (255 - sr));
-				dg = sg == 255 ? sg : min(255, bg * 255 / (255 - sg));
-				db = sb == 255 ? sb : min(255, bb * 255 / (255 - sb));
-			},
-
-			'color-burn': function() {
-				dr = sr == 0 ? 0 : max(255 - ((255 - br) * 255) / sr, 0);
-				dg = sg == 0 ? 0 : max(255 - ((255 - bg) * 255) / sg, 0);
-				db = sb == 0 ? 0 : max(255 - ((255 - bb) * 255) / sb, 0);
-			},
-
-			darken: function() {
-				dr = br < sr ? br : sr;
-				dg = bg < sg ? bg : sg;
-				db = bb < sb ? bb : sb;
-			},
-
-			lighten: function() {
-				dr = br > sr ? br : sr;
-				dg = bg > sg ? bg : sg;
-				db = bb > sb ? bb : sb;
-			},
-
-			difference: function() {
-				dr = br - sr;
-				if (dr < 0)
-					dr = -dr;
-				dg = bg - sg;
-				if (dg < 0)
-					dg = -dg;
-				db = bb - sb;
-				if (db < 0)
-					db = -db;
-			},
-
-			exclusion: function() {
-				dr = br + sr * (255 - br - br) / 255;
-				dg = bg + sg * (255 - bg - bg) / 255;
-				db = bb + sb * (255 - bb - bb) / 255;
-			},
-
-			hue: function() {
-				setSat(sr, sg, sb, getSat(br, bg, bb));
-				setLum(dr, dg, db, getLum(br, bg, bb));
-			},
-
-			saturation: function() {
-				setSat(br, bg, bb, getSat(sr, sg, sb));
-				setLum(dr, dg, db, getLum(br, bg, bb));
-			},
-
-			luminosity: function() {
-				setLum(br, bg, bb, getLum(sr, sg, sb));
-			},
-
-			color: function() {
-				setLum(sr, sg, sb, getLum(br, bg, bb));
-			},
-
-			add: function() {
-				dr = min(br + sr, 255);
-				dg = min(bg + sg, 255);
-				db = min(bb + sb, 255);
-			},
-
-			subtract: function() {
-				dr = max(br - sr, 0);
-				dg = max(bg - sg, 0);
-				db = max(bb - sb, 0);
-			},
-
-			average: function() {
-				dr = (br + sr) / 2;
-				dg = (bg + sg) / 2;
-				db = (bb + sb) / 2;
-			},
-
-			negation: function() {
-				dr = 255 - abs(255 - sr - br);
-				dg = 255 - abs(255 - sg - bg);
-				db = 255 - abs(255 - sb - bb);
-			}
-		};
-
-		var process = modes[blendMode];
-		if (!process)
-			return;
-
-		for (var i = 0, l = dst.length; i < l; i += 4) {
-			sr = src[i];
-			br = dst[i];
-			sg = src[i + 1];
-			bg = dst[i + 1];
-			sb = src[i + 2];
-			bb = dst[i + 2];
-			sa = src[i + 3];
-			ba = dst[i + 3];
-			process();
-			var a1 = sa * alpha / 255,
-				a2 = 1 - a1;
-			dst[i] = a1 * dr + a2 * br;
-			dst[i + 1] = a1 * dg + a2 * bg;
-			dst[i + 2] = a1 * db + a2 * bb;
-			dst[i + 3] = sa * alpha + a2 * ba;
-		}
-		dstContext.putImageData(dstData, offset.x, offset.y);
-	}
-};
-
-var PaperScript = this.PaperScript = new function() {
-var parse_js=new function(){function W(a,b,c){var d=[];for(var e=0;e<a.length;++e)d.push(b.call(c,a[e],e));return d}function V(c){return/^[a-z_$][a-z0-9_$]*$/i.test(c)&&c!="this"&&!M(d,c)&&!M(b,c)&&!M(a,c)}function U(a,b){var c={};a===!0&&(a={});for(var d in b)M(b,d)&&(c[d]=a&&M(a,d)?a[d]:b[d]);return c}function T(a,b){return b<1?"":Array(b+1).join(a)}function S(a,b){function z(a){var b=a[0],c=r[b];if(!c)throw new Error("Can't find generator for \""+b+'"');y.push(a);var d=c.apply(b,a.slice(1));y.pop();return d}function x(a){var b=a[0],c=a[1];c!=null&&(b=k([g(b),"=",m(c,"seq")]));return b}function w(a){return a?a.length==0?"{}":"{"+e+j(function(){return u(a).join(e)})+e+h("}"):";"}function v(a){var b=a.length;return b==0?"{}":"{"+e+W(a,function(a,d){var f=a[1].length>0,g=j(function(){return h(a[0]?k(["case",z(a[0])+":"]):"default:")},.5)+(f?e+j(function(){return u(a[1]).join(e)}):"");!c&&f&&d<b-1&&(g+=";");return g}).join(e)+e+h("}")}function u(a,b){for(var d=[],e=a.length-1,f=0;f<=e;++f){var g=a[f],i=z(g);i!=";"&&(!c&&f==e&&(g[0]=="while"&&O(g[2])||L(g[0],["for","for-in"])&&O(g[4])||g[0]=="if"&&O(g[2])&&!g[3]||g[0]=="if"&&g[3]&&O(g[3])?i=i.replace(/;*\s*$/,";"):i=i.replace(/;+\s*$/,"")),d.push(i))}return b?d:W(d,h)}function t(a,b,c,d){var e=d||"function";a&&(e+=" "+g(a)),e+="("+l(W(b,g))+")";return k([e,w(c)])}function s(a){if(a[0]=="do")return z(["block",[a]]);var b=a;for(;;){var c=b[0];if(c=="if"){if(!b[3])return z(["block",[a]]);b=b[3]}else if(c=="while"||c=="do")b=b[2];else if(c=="for"||c=="for-in")b=b[4];else break}return z(a)}function q(a){var b=a.toString(10),c=[b.replace(/^0\./,".")],d;Math.floor(a)===a?(c.push("0x"+a.toString(16).toLowerCase(),"0"+a.toString(8)),(d=/^(.*?)(0+)$/.exec(a))&&c.push(d[1]+"e"+d[2].length)):(d=/^0?\.(0+)(.*)$/.exec(a))&&c.push(d[2]+"e-"+(d[1].length+d[2].length),b.substr(b.indexOf(".")));return n(c)}function o(a){if(a[0]=="function"||a[0]=="object"){var b=J(y),c=b.pop(),d=b.pop();while(d){if(d[0]=="stat")return!0;if((d[0]=="seq"||d[0]=="call"||d[0]=="dot"||d[0]=="sub"||d[0]=="conditional")&&d[1]===c||(d[0]=="binary"||d[0]=="assign"||d[0]=="unary-postfix")&&d[2]===c)c=d,d=b.pop();else return!1}}return!M(P,a[0])}function n(a){if(a.length==1)return a[0];if(a.length==2){var b=a[1];a=a[0];return a.length<=b.length?a:b}return n([a[0],n(a.slice(1))])}function m(a){var b=z(a);for(var c=1;c<arguments.length;++c){var d=arguments[c];if(d instanceof Function&&d(a)||a[0]==d)return"("+b+")"}return b}function l(a){return a.join(","+f)}function k(a){if(c)return a.join(" ");var b=[];for(var d=0;d<a.length;++d){var e=a[d+1];b.push(a[d]),e&&(/[a-z0-9_\x24]$/i.test(a[d].toString())&&/^[a-z0-9_\x24]/i.test(e.toString())||/[\+\-]$/.test(a[d].toString())&&/^[\+\-]/.test(e.toString()))&&b.push(" ")}return b.join("")}function j(a,b){b==null&&(b=1),d+=b;try{return a.apply(null,J(arguments,1))}finally{d-=b}}function h(a){a==null&&(a=""),c&&(a=T(" ",b.indent_start+d*b.indent_level)+a);return a}function g(a){return a.toString()}b=U(b,{indent_start:0,indent_level:4,quote_keys:!1,space_colon:!1,beautify:!1});var c=!!b.beautify,d=0,e=c?"\n":"",f=c?" ":"",r={string:Q,num:q,name:g,toplevel:function(a){return u(a).join(e)},splice:function(a){var b=y[y.length-2][0];return M(R,b)?w.apply(this,arguments):W(u(a,!0),function(a,b){return b>0?h(a):a}).join(e)},block:w,"var":function(a){return"var "+l(W(a,x))+";"},"const":function(a){return"const "+l(W(a,x))+";"},"try":function(a,b,c){var d=["try",w(a)];b&&d.push("catch","("+b[0]+")",w(b[1])),c&&d.push("finally",w(c));return k(d)},"throw":function(a){return k(["throw",z(a)])+";"},"new":function(a,b){b=b.length>0?"("+l(W(b,z))+")":"";return k(["new",m(a,"seq","binary","conditional","assign",function(a){var b=N(),c={};try{b.with_walkers({call:function(){throw c},"function":function(){return this}},function(){b.walk(a)})}catch(d){if(d===c)return!0;throw d}})+b])},"switch":function(a,b){return k(["switch","("+z(a)+")",v(b)])},"break":function(a){var b="break";a!=null&&(b+=" "+g(a));return b+";"},"continue":function(a){var b="continue";a!=null&&(b+=" "+g(a));return b+";"},conditional:function(a,b,c){return k([m(a,"assign","seq","conditional"),"?",m(b,"seq"),":",m(c,"seq")])},assign:function(a,b,c){a&&a!==!0?a+="=":a="=";return k([z(b),a,m(c,"seq")])},dot:function(a){var b=z(a),c=1;a[0]=="num"?/\./.test(a[1])||(b+="."):o(a)&&(b="("+b+")");while(c<arguments.length)b+="."+g(arguments[c++]);return b},call:function(a,b){var c=z(a);o(a)&&(c="("+c+")");return c+"("+l(W(b,function(a){return m(a,"seq")}))+")"},"function":t,defun:t,"if":function(a,b,c){var d=["if","("+z(a)+")",c?s(b):z(b)];c&&d.push("else",z(c));return k(d)},"for":function(a,b,c,d){var e=["for"];a=(a!=null?z(a):"").replace(/;*\s*$/,";"+f),b=(b!=null?z(b):"").replace(/;*\s*$/,";"+f),c=(c!=null?z(c):"").replace(/;*\s*$/,"");var g=a+b+c;g=="; ; "&&(g=";;"),e.push("("+g+")",z(d));return k(e)},"for-in":function(a,b,c,d){return k(["for","("+(a?z(a).replace(/;+$/,""):z(b)),"in",z(c)+")",z(d)])},"while":function(a,b){return k(["while","("+z(a)+")",z(b)])},"do":function(a,b){return k(["do",z(b),"while","("+z(a)+")"])+";"},"return":function(a){var b=["return"];a!=null&&b.push(z(a));return k(b)+";"},binary:function(a,b,c){var d=z(b),e=z(c);if(L(b[0],["assign","conditional","seq"])||b[0]=="binary"&&B[a]>B[b[1]])d="("+d+")";if(L(c[0],["assign","conditional","seq"])||c[0]=="binary"&&B[a]>=B[c[1]]&&(c[1]!=a||!L(a,["&&","||","*"])))e="("+e+")";return k([d,a,e])},"unary-prefix":function(a,b){var c=z(b);b[0]=="num"||b[0]=="unary-prefix"&&!M(i,a+b[1])||!o(b)||(c="("+c+")");return a+(p(a.charAt(0))?" ":"")+c},"unary-postfix":function(a,b){var c=z(b);b[0]=="num"||b[0]=="unary-postfix"&&!M(i,a+b[1])||!o(b)||(c="("+c+")");return c+a},sub:function(a,b){var c=z(a);o(a)&&(c="("+c+")");return c+"["+z(b)+"]"},object:function(a){return a.length==0?"{}":"{"+e+j(function(){return W(a,function(a){if(a.length==3)return h(t(a[0],a[1][2],a[1][3],a[2]));var d=a[0],e=z(a[1]);b.quote_keys?d=Q(d):(typeof d=="number"||!c&&+d+""==d)&&parseFloat(d)>=0?d=q(+d):V(d)||(d=Q(d));return h(k(c&&b.space_colon?[d,":",e]:[d+":",e]))}).join(","+e)})+e+h("}")},regexp:function(a,b){return"/"+a+"/"+b},array:function(a){return a.length==0?"[]":k(["[",l(W(a,function(a){return!c&&a[0]=="atom"&&a[1]=="undefined"?"":m(a,"seq")})),"]"])},stat:function(a){return z(a).replace(/;*\s*$/,";")},seq:function(){return l(W(J(arguments),z))},label:function(a,b){return k([g(a),":",z(b)])},"with":function(a,b){return k(["with","("+z(a)+")",z(b)])},atom:function(a){return g(a)}},y=[];return z(a)}function Q(a){var b=0,c=0;a=a.replace(/[\\\b\f\n\r\t\x22\x27]/g,function(a){switch(a){case"\\":return"\\\\";case"\b":return"\\b";case"\f":return"\\f";case"\n":return"\\n";case"\r":return"\\r";case"\t":return"\\t";case'"':++b;return'"';case"'":++c;return"'"}return a});return b>c?"'"+a.replace(/\x27/g,"\\'")+"'":'"'+a.replace(/\x22/g,'\\"')+'"'}function O(a){return!a||a[0]=="block"&&(!a[1]||a[1].length==0)}function N(){function g(a,b){var c={},e;for(e in a)M(a,e)&&(c[e]=d[e],d[e]=a[e]);var f=b();for(e in c)M(c,e)&&(c[e]?d[e]=c[e]:delete d[e]);return f}function f(a){if(a==null)return null;try{e.push(a);var b=a[0],f=d[b];if(f){var g=f.apply(a,a.slice(1));if(g!=null)return g}f=c[b];return f.apply(a,a.slice(1))}finally{e.pop()}}function b(a){var b=[this[0]];a!=null&&b.push(W(a,f));return b}function a(a){return[this[0],W(a,function(a){var b=[a[0]];a.length>1&&(b[1]=f(a[1]));return b})]}var c={string:function(a){return[this[0],a]},num:function(a){return[this[0],a]},name:function(a){return[this[0],a]},toplevel:function(a){return[this[0],W(a,f)]},block:b,splice:b,"var":a,"const":a,"try":function(a,b,c){return[this[0],W(a,f),b!=null?[b[0],W(b[1],f)]:null,c!=null?W(c,f):null]},"throw":function(a){return[this[0],f(a)]},"new":function(a,b){return[this[0],f(a),W(b,f)]},"switch":function(a,b){return[this[0],f(a),W(b,function(a){return[a[0]?f(a[0]):null,W(a[1],f)]})]},"break":function(a){return[this[0],a]},"continue":function(a){return[this[0],a]},conditional:function(a,b,c){return[this[0],f(a),f(b),f(c)]},assign:function(a,b,c){return[this[0],a,f(b),f(c)]},dot:function(a){return[this[0],f(a)].concat(J(arguments,1))},call:function(a,b){return[this[0],f(a),W(b,f)]},"function":function(a,b,c){return[this[0],a,b.slice(),W(c,f)]},defun:function(a,b,c){return[this[0],a,b.slice(),W(c,f)]},"if":function(a,b,c){return[this[0],f(a),f(b),f(c)]},"for":function(a,b,c,d){return[this[0],f(a),f(b),f(c),f(d)]},"for-in":function(a,b,c,d){return[this[0],f(a),f(b),f(c),f(d)]},"while":function(a,b){return[this[0],f(a),f(b)]},"do":function(a,b){return[this[0],f(a),f(b)]},"return":function(a){return[this[0],f(a)]},binary:function(a,b,c){return[this[0],a,f(b),f(c)]},"unary-prefix":function(a,b){return[this[0],a,f(b)]},"unary-postfix":function(a,b){return[this[0],a,f(b)]},sub:function(a,b){return[this[0],f(a),f(b)]},object:function(a){return[this[0],W(a,function(a){return a.length==2?[a[0],f(a[1])]:[a[0],f(a[1]),a[2]]})]},regexp:function(a,b){return[this[0],a,b]},array:function(a){return[this[0],W(a,f)]},stat:function(a){return[this[0],f(a)]},seq:function(){return[this[0]].concat(W(J(arguments),f))},label:function(a,b){return[this[0],a,f(b)]},"with":function(a,b){return[this[0],f(a),f(b)]},atom:function(a){return[this[0],a]}},d={},e=[];return{walk:f,with_walkers:g,parent:function(){return e[e.length-2]},stack:function(){return e}}}function M(a,b){return Object.prototype.hasOwnProperty.call(a,b)}function L(a,b){for(var c=b.length;--c>=0;)if(b[c]===a)return!0;return!1}function K(a){return a.split("")}function J(a,b){return Array.prototype.slice.call(a,b||0)}function I(a){var b={};for(var c=0;c<a.length;++c)b[a[c]]=!0;return b}function H(a){a instanceof Function&&(a=a());for(var b=1,c=arguments.length;--c>0;++b)arguments[b]();return a}function G(a){var b=J(arguments,1);return function(){return a.apply(this,b.concat(J(arguments)))}}function F(a,b,c){function bk(a){try{++d.in_loop;return a()}finally{--d.in_loop}}function bi(a){var b=bg(a),c=d.token.value;if(e("operator")&&M(A,c)){if(bh(b)){g();return p("assign",A[c],b,bi(a))}i("Invalid assignment")}return b}function bh(a){if(!b)return!0;switch(a[0]){case"dot":case"sub":case"new":case"call":return!0;case"name":return a[1]!="this"}}function bg(a){var b=bf(a);if(e("operator","?")){g();var c=bj(!1);m(":");return p("conditional",b,c,bj(!1,a))}return b}function bf(a){return be(Y(!0),0,a)}function be(a,b,c){var f=e("operator")?d.token.value:null;f&&f=="in"&&c&&(f=null);var h=f!=null?B[f]:null;if(h!=null&&h>b){g();var i=be(Y(!0),h,c);return be(p("binary",f,a,i),b,c)}return a}function bd(a,b,c){(b=="++"||b=="--")&&!bh(c)&&i("Invalid use of "+b+" operator");return p(a,b,c)}function bc(a,b){if(e("punc",".")){g();return bc(p("dot",a,bb()),b)}if(e("punc","[")){g();return bc(p("sub",a,H(bj,G(m,"]"))),b)}if(b&&e("punc","(")){g();return bc(p("call",a,Z(")")),!0)}return b&&e("operator")&&M(z,d.token.value)?H(G(bd,"unary-postfix",d.token.value,a),g):a}function bb(){switch(d.token.type){case"name":case"operator":case"keyword":case"atom":return H(d.token.value,g);default:k()}}function ba(){switch(d.token.type){case"num":case"string":return H(d.token.value,g)}return bb()}function _(){var a=!0,c=[];while(!e("punc","}")){a?a=!1:m(",");if(!b&&e("punc","}"))break;var f=d.token.type,h=ba();f!="name"||h!="get"&&h!="set"||!!e("punc",":")?(m(":"),c.push([h,bj(!1)])):c.push([bb(),P(!1),h])}g();return p("object",c)}function $(){return p("array",Z("]",!b,!0))}function Z(a,b,c){var d=!0,f=[];while(!e("punc",a)){d?d=!1:m(",");if(b&&e("punc",a))break;e("punc",",")&&c?f.push(["atom","undefined"]):f.push(bj(!1))}g();return f}function X(){var a=Y(!1),b;e("punc","(")?(g(),b=Z(")")):b=[];return bc(p("new",a,b),!0)}function W(){return p("const",U())}function V(a){return p("var",U(a))}function U(a){var b=[];for(;;){e("name")||k();var c=d.token.value;g(),e("operator","=")?(g(),b.push([c,bj(!1,a)])):b.push([c]);if(!e("punc",","))break;g()}return b}function T(){var a=R(),b,c;if(e("keyword","catch")){g(),m("("),e("name")||i("Name expected");var f=d.token.value;g(),m(")"),b=[f,R()]}e("keyword","finally")&&(g(),c=R()),!b&&!c&&i("Missing catch/finally blocks");return p("try",a,b,c)}function R(){m("{");var a=[];while(!e("punc","}"))e("eof")&&k(),a.push(t());g();return a}function Q(){var a=q(),b=t(),c;e("keyword","else")&&(g(),c=t());return p("if",a,b,c)}function O(a){var b=a[0]=="var"?p("name",a[1][0]):a;g();var c=bj();m(")");return p("for-in",a,b,c,bk(t))}function N(a){m(";");var b=e("punc",";")?null:bj();m(";");var c=e("punc",")")?null:bj();m(")");return p("for",a,b,c,bk(t))}function K(){m("(");var a=null;if(!e("punc",";")){a=e("keyword","var")?(g(),V(!0)):bj(!0,!0);if(e("operator","in"))return O(a)}return N(a)}function I(a){var b;n()||(b=e("name")?d.token.value:null),b!=null?(g(),L(b,d.labels)||i("Label "+b+" without matching loop or statement")):d.in_loop==0&&i(a+" not inside a loop or switch"),o();return p(a,b)}function F(){return p("stat",H(bj,o))}function w(a){d.labels.push(a);var c=d.token,e=t();b&&!M(C,e[0])&&k(c),d.labels.pop();return p("label",a,e)}function s(a){return c?function(){var b=d.token,c=a.apply(this,arguments);c[0]=r(c[0],b,h());return c}:a}function r(a,b,c){return a instanceof E?a:new E(a,b,c)}function q(){m("(");var a=bj();m(")");return a}function p(){return J(arguments)}function o(){e("punc",";")?g():n()||k()}function n(){return!b&&(d.token.nlb||e("eof")||e("punc","}"))}function m(a){return l("punc",a)}function l(a,b){if(e(a,b))return g();j(d.token,"Unexpected token "+d.token.type+", expected "+a)}function k(a){a==null&&(a=d.token),j(a,"Unexpected token: "+a.type+" ("+a.value+")")}function j(a,b){i(b,a.line,a.col)}function i(a,b,c,e){var f=d.input.context();u(a,b!=null?b:f.tokline,c!=null?c:f.tokcol,e!=null?e:f.tokpos)}function h(){return d.prev}function g(){d.prev=d.token,d.peeked?(d.token=d.peeked,d.peeked=null):d.token=d.input();return d.token}function f(){return d.peeked||(d.peeked=d.input())}function e(a,b){return v(d.token,a,b)}var d={input:typeof a=="string"?x(a,!0):a,token:null,prev:null,peeked:null,in_function:0,in_loop:0,labels:[]};d.token=g();var t=s(function(){e("operator","/")&&(d.peeked=null,d.token=d.input(!0));switch(d.token.type){case"num":case"string":case"regexp":case"operator":case"atom":return F();case"name":return v(f(),"punc",":")?w(H(d.token.value,g,g)):F();case"punc":switch(d.token.value){case"{":return p("block",R());case"[":case"(":return F();case";":g();return p("block");default:k()};case"keyword":switch(H(d.token.value,g)){case"break":return I("break");case"continue":return I("continue");case"debugger":o();return p("debugger");case"do":return function(a){l("keyword","while");return p("do",H(q,o),a)}(bk(t));case"for":return K();case"function":return P(!0);case"if":return Q();case"return":d.in_function==0&&i("'return' outside of function");return p("return",e("punc",";")?(g(),null):n()?null:H(bj,o));case"switch":return p("switch",q(),S());case"throw":return p("throw",H(bj,o));case"try":return T();case"var":return H(V,o);case"const":return H(W,o);case"while":return p("while",q(),bk(t));case"with":return p("with",q(),t());default:k()}}}),P=s(function(a){var b=e("name")?H(d.token.value,g):null;a&&!b&&k(),m("(");return p(a?"defun":"function",b,function(a,b){while(!e("punc",")"))a?a=!1:m(","),e("name")||k(),b.push(d.token.value),g();g();return b}(!0,[]),function(){++d.in_function;var a=d.in_loop;d.in_loop=0;var b=R();--d.in_function,d.in_loop=a;return b}())}),S=G(bk,function(){m("{");var a=[],b=null;while(!e("punc","}"))e("eof")&&k(),e("keyword","case")?(g(),b=[],a.push([bj(),b]),m(":")):e("keyword","default")?(g(),m(":"),b=[],a.push([null,b])):(b||k(),b.push(t()));g();return a}),Y=s(function(a){if(e("operator","new")){g();return X()}if(e("operator")&&M(y,d.token.value))return bd("unary-prefix",H(d.token.value,g),Y(a));if(e("punc")){switch(d.token.value){case"(":g();return bc(H(bj,G(m,")")),a);case"[":g();return bc($(),a);case"{":g();return bc(_(),a)}k()}if(e("keyword","function")){g();return bc(P(!1),a)}if(M(D,d.token.type)){var b=d.token.type=="regexp"?p("regexp",d.token.value[0],d.token.value[1]):p(d.token.type,d.token.value);return bc(H(b,g),a)}k()}),bj=s(function(a,b){arguments.length==0&&(a=!0);var c=bi(b);if(a&&e("punc",",")){g();return p("seq",c,bj(!0,b))}return c});return p("toplevel",function(a){while(!e("eof"))a.push(t());return a}([]))}function E(a,b,c){this.name=a,this.start=b,this.end=c}function x(b){function P(a){if(a)return I();y(),v();var b=g();if(!b)return x("eof");if(o(b))return C();if(b=='"'||b=="'")return F();if(M(l,b))return x("punc",h());if(b==".")return L();if(b=="/")return K();if(M(e,b))return J();if(b=="\\"||q(b))return N();B("Unexpected character '"+b+"'")}function O(a,b){try{return b()}catch(c){if(c===w)B(a);else throw c}}function N(){var b=A(r);return M(a,b)?M(i,b)?x("operator",b):M(d,b)?x("atom",b):x("keyword",b):x("name",b)}function L(){h();return o(g())?C("."):x("punc",".")}function K(){h();var a=f.regex_allowed;switch(g()){case"/":f.comments_before.push(G()),f.regex_allowed=a;return P();case"*":f.comments_before.push(H()),f.regex_allowed=a;return P()}return f.regex_allowed?I():J("/")}function J(a){function b(a){if(!g())return a;var c=a+g();if(M(i,c)){h();return b(c)}return a}return x("operator",b(a||h()))}function I(){return O("Unterminated regular expression",function(){var a=!1,b="",c,d=!1;while(c=h(!0))if(a)b+="\\"+c,a=!1;else if(c=="[")d=!0,b+=c;else if(c=="]"&&d)d=!1,b+=c;else{if(c=="/"&&!d)break;c=="\\"?a=!0:b+=c}var e=A(function(a){return M(m,a)});return x("regexp",[b,e])})}function H(){h();return O("Unterminated multiline comment",function(){var a=t("*/",!0),b=f.text.substring(f.pos,a),c=x("comment2",b,!0);f.pos=a+2,f.line+=b.split("\n").length-1,f.newline_before=b.indexOf("\n")>=0;return c})}function G(){h();var a=t("\n"),b;a==-1?(b=f.text.substr(f.pos),f.pos=f.text.length):(b=f.text.substring(f.pos,a),f.pos=a);return x("comment1",b,!0)}function F(){return O("Unterminated string constant",function(){var a=h(),b="";for(;;){var c=h(!0);if(c=="\\")c=D();else if(c==a)break;b+=c}return x("string",b)})}function E(a){var b=0;for(;a>0;--a){var c=parseInt(h(!0),16);isNaN(c)&&B("Invalid hex-character pattern in string"),b=b<<4|c}return b}function D(){var a=h(!0);switch(a){case"n":return"\n";case"r":return"\r";case"t":return"\t";case"b":return"\b";case"v":return"";case"f":return"\f";case"0":return"";case"x":return String.fromCharCode(E(2));case"u":return String.fromCharCode(E(4));case"\n":return"";default:return a}}function C(a){var b=!1,c=!1,d=!1,e=a==".",f=A(function(f,g){if(f=="x"||f=="X")return d?!1:d=!0;if(!d&&(f=="E"||f=="e"))return b?!1:b=c=!0;if(f=="-")return c||g==0&&!a?!0:!1;if(f=="+")return c;c=!1;if(f==".")return!e&&!d?e=!0:!1;return p(f)});a&&(f=a+f);var g=s(f);if(!isNaN(g))return x("num",g);B("Invalid syntax: "+f)}function B(a){u(a,f.tokline,f.tokcol,f.tokpos)}function A(a){var b="",c=g(),d=0;while(c&&a(c,d++))b+=h(),c=g();return b}function y(){while(M(j,g()))h()}function x(a,b,d){f.regex_allowed=a=="operator"&&!M(z,b)||a=="keyword"&&M(c,b)||a=="punc"&&M(k,b);var e={type:a,value:b,line:f.tokline,col:f.tokcol,pos:f.tokpos,nlb:f.newline_before};d||(e.comments_before=f.comments_before,f.comments_before=[]),f.newline_before=!1;return e}function v(){f.tokline=f.line,f.tokcol=f.col,f.tokpos=f.pos}function t(a,b){var c=f.text.indexOf(a,f.pos);if(b&&c==-1)throw w;return c}function n(){return!f.peek()}function h(a){var b=f.text.charAt(f.pos++);if(a&&!b)throw w;b=="\n"?(f.newline_before=!0,++f.line,f.col=0):++f.col;return b}function g(){return f.text.charAt(f.pos)}var f={text:b.replace(/\r\n?|[\n\u2028\u2029]/g,"\n").replace(/^\uFEFF/,""),pos:0,tokpos:0,line:0,tokline:0,col:0,tokcol:0,newline_before:!1,regex_allowed:!1,comments_before:[]};P.context=function(a){a&&(f=a);return f};return P}function v(a,b,c){return a.type==b&&(c==null||a.value==c)}function u(a,b,c,d){throw new t(a,b,c,d)}function t(a,b,c,d){this.message=a,this.line=b,this.col=c,this.pos=d}function s(a){if(f.test(a))return parseInt(a.substr(2),16);if(g.test(a))return parseInt(a.substr(1),8);if(h.test(a))return parseFloat(a)}function r(a){return q(a)||o(a)}function q(a){return a=="$"||a=="_"||n(a)}function p(a){return o(a)||n(a)}function o(a){a=a.charCodeAt(0);return a>=48&&a<=57}function n(a){a=a.charCodeAt(0);return a>=65&&a<=90||a>=97&&a<=122}var a=I(["break","case","catch","const","continue","default","delete","do","else","finally","for","function","if","in","instanceof","new","return","switch","throw","try","typeof","var","void","while","with"]),b=I(["abstract","boolean","byte","char","class","debugger","double","enum","export","extends","final","float","goto","implements","import","int","interface","long","native","package","private","protected","public","short","static","super","synchronized","throws","transient","volatile"]),c=I(["return","new","delete","throw","else","case"]),d=I(["false","null","true","undefined"]),e=I(K("+-*&%=<>!?|~^")),f=/^0x[0-9a-f]+$/i,g=/^0[0-7]+$/,h=/^\d*\.?\d*(?:e[+-]?\d*(?:\d\.?|\.?\d)\d*)?$/i,i=I(["in","instanceof","typeof","new","void","delete","++","--","+","-","!","~","&","|","^","*","/","%",">>","<<",">>>","<",">","<=",">=","==","===","!=","!==","?","=","+=","-=","/=","*=","%=",">>=","<<=",">>>=","|=","^=","&=","&&","||"]),j=I(K(" \n\r\t")),k=I(K("[{}(,.;:")),l=I(K("[]{}(),;:")),m=I(K("gmsiy"));t.prototype.toString=function(){return this.message+" (line: "+this.line+", col: "+this.col+", pos: "+this.pos+")"};var w={},y=I(["typeof","void","delete","--","++","!","~","-","+"]),z=I(["--","++"]),A=function(a,b,c){while(c<a.length)b[a[c]]=a[c].substr(0,a[c].length-1),c++;return b}(["+=","-=","/=","*=","%=",">>=","<<=",">>>=","|=","^=","&="],{"=":!0},0),B=function(a,b){for(var c=0,d=1;c<a.length;++c,++d){var e=a[c];for(var f=0;f<e.length;++f)b[e[f]]=d}return b}([["||"],["&&"],["|"],["^"],["&"],["==","===","!=","!=="],["<",">","<=",">=","in","instanceof"],[">>","<<",">>>"],["+","-"],["*","/","%"]],{}),C=I(["for","do","while","switch"]),D=I(["atom","num","string","regexp","name"]);E.prototype.toString=function(){return this.name};var P=I(["name","array","object","string","dot","sub","call","regexp"]),R=I(["if","while","do","for","for-in","with"]);return{parse:F,gen_code:S,tokenizer:x,ast_walker:N}}
-
-	// Math Operators
-
-	var operators = {
-		'+': 'add',
-		'-': 'subtract',
-		'*': 'multiply',
-		'/': 'divide',
-		'%': 'modulo',
-		'==': 'equals',
-		'!=': 'equals'
-	};
-
-	function $eval(left, operator, right) {
-		var handler = operators[operator];
-		if (left && left[handler]) {
-			var res = left[handler](right);
-			return operator == '!=' ? !res : res;
-		}
-		switch (operator) {
-		case '+': return left + right;
-		case '-': return left - right;
-		case '*': return left * right;
-		case '/': return left / right;
-		case '%': return left % right;
-		case '==': return left == right;
-		case '!=': return left != right;
-		default:
-			throw new Error('Implement Operator: ' + operator);
-		}
-	};
-
-	// Sign Operators
-
-	var signOperators = {
-		'-': 'negate'
-	};
-
-	function $sign(operator, value) {
-		var handler = signOperators[operator];
-		if (value && value[handler]) {
-			return value[handler]();
-		}
-		switch (operator) {
-		case '+': return +value;
-		case '-': return -value;
-		default:
-			throw new Error('Implement Sign Operator: ' + operator);
-		}
-	}
-
-	// AST Helpers
-
-	function isDynamic(exp) {
-		var type = exp[0];
-		return type != 'num' && type != 'string';
-	}
-
-	function handleOperator(operator, left, right) {
-		// Only replace operators with calls to $operator if the left hand side
-		// is potentially an object.
-		if (operators[operator] && isDynamic(left)) {
-			// Replace with call to $operator(left, operator, right):
-			return ['call', ['name', '$eval'],
-					[left, ['string', operator], right]];
-		}
-	}
-
-	/**
-	 * Compiles PaperScript code into JavaScript code.
-	 *
-	 * @name PaperScript.compile
-	 * @function
-	 * @param {String} code The PaperScript code.
-	 * @return {String} The compiled PaperScript as JavaScript code.
-	 */
-	function compile(code) {
-		// Use parse-js to translate the code into a AST structure which is then
-		// walked and parsed for operators to overload. The resulting AST is
-		// translated back to code and evaluated.
-		var ast = parse_js.parse(code),
-			walker = parse_js.ast_walker(),
-			walk = walker.walk;
-
-		ast = walker.with_walkers({
-			'binary': function(operator, left, right) {
-				// Handle simple mathematical operators here:
-				return handleOperator(operator, left = walk(left),
-						right = walk(right))
-						// Always return something since we're walking left and
-						|| [this[0], operator, left, right];
-			},
-
-			'assign': function(operator, left, right) {
-				var res = handleOperator(operator, left = walk(left),
-						right = walk(right));
-				if (res)
-					return [this[0], true, left, res];
-				return [this[0], operator, left, right];
-			},
-
-			'unary-prefix': function(operator, exp) {
-				if (signOperators[operator] && isDynamic(exp)) {
-					return ['call', ['name', '$sign'],
-							[['string', operator], walk(exp)]];
-				}
-			}
-		}, function() {
-			return walk(ast);
-		});
-
-		return parse_js.gen_code(ast, {
-			beautify: true
-		});
-	}
-
-	function evaluate(code, scope) {
-		paper = scope;
-		var view = scope.view,
-			tool = /on(?:Key|Mouse)(?:Up|Down|Move|Drag)/.test(code)
-					&& new Tool(),
-			res;
-		with (scope) {
-			(function() {
-				var onEditOptions, onSelect, onDeselect, onReselect, onMouseDown,
-					onMouseUp, onMouseDrag, onMouseMove, onKeyDown, onKeyUp,
-					onFrame, onResize,
-					handlers = [ 'onEditOptions', 'onSelect', 'onDeselect',
-						'onReselect', 'onMouseDown', 'onMouseUp', 'onMouseDrag',
-						'onMouseMove', 'onKeyDown', 'onKeyUp'];
-				res = eval(compile(code));
-				if (tool) {
-					Base.each(handlers, function(key) {
-						tool[key] = eval(key);
-					});
-				}
-				if (view) {
-					view.onResize = onResize;
-					view.setOnFrame(onFrame);
-					view.draw();
-				}
-			}).call(scope);
-		}
-		return res;
-	}
-
-	function request(url, scope) {
-		var xhr = new (window.ActiveXObject || XMLHttpRequest)(
-				'Microsoft.XMLHTTP');
-		xhr.open('GET', url, true);
-		if (xhr.overrideMimeType) {
-			xhr.overrideMimeType('text/plain');
-		}
-		xhr.onreadystatechange = function() {
-			if (xhr.readyState === 4) {
-				return evaluate(xhr.responseText, scope);
-			}
-		};
-		return xhr.send(null);
-	}
-
-	function load() {
-		var scripts = document.getElementsByTagName('script');
-		for (var i = 0, l = scripts.length; i < l; i++) {
-			var script = scripts[i];
-			if (/^text\/(?:x-|)paperscript$/.test(script.type)
-					&& !script.getAttribute('data-paper-loaded')) {
-				var scope = new PaperScope(script);
-				scope.setup(PaperScript.getAttribute(script, 'canvas'));
-				if (script.src) {
-					request(script.src, scope);
-				} else {
-					evaluate(script.innerHTML, scope);
-				}
-				script.setAttribute('data-paper-loaded', true);
-			}
-		}
-	}
-
-	DomEvent.add(window, { load: load });
-
-	function handleAttribute(name) {
-		name += 'Attribute';
-		return function(el, attr) {
-			return el[name](attr) || el[name]('data-paper-' + attr);
-		};
-	}
-
-	return {
-		compile: compile,
-		evaluate: evaluate,
-		load: load,
-		getAttribute: handleAttribute('get'),
-		hasAttribute: handleAttribute('has')
-	};
-
-};
-
-this.load = PaperScript.load;
-
-Base.each(this, function(val, key) {
-	if (val && val.prototype instanceof Base) {
-		val._name = key;
-	}
-});
-
-this.enumerable = true;
-return new (PaperScope.inject(this));
-};
\ No newline at end of file
diff --git a/dist/paper.js b/dist/paper.js
index e459b4a4..e69de29b 100644
--- a/dist/paper.js
+++ b/dist/paper.js
@@ -1,8237 +0,0 @@
-/*!
- * Paper.js v0.22
- *
- * This file is part of Paper.js, a JavaScript Vector Graphics Library,
- * based on Scriptographer.org and designed to be largely API compatible.
- * http://paperjs.org/
- * http://scriptographer.org/
- *
- * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
- * http://lehni.org/ & http://jonathanpuckey.com/
- *
- * Distributed under the MIT license. See LICENSE file for details.
- *
- * All rights reserved.
- *
- * Date: Wed Apr 25 20:47:53 2012 +0200
- *
- ***
- *
- * Bootstrap.js JavaScript Framework.
- * http://bootstrapjs.org/
- *
- * Copyright (c) 2006 - 2011 Juerg Lehni
- * http://lehni.org/
- *
- * Distributed under the MIT license.
- *
- ***
- *
- * Parse-js
- *
- * A JavaScript tokenizer / parser / generator, originally written in Lisp.
- * Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
- * http://marijn.haverbeke.nl/parse-js/
- *
- * Ported by to JavaScript by Mihai Bazon
- * Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
- * http://mihai.bazon.net/blog/
- *
- * Modifications and adaptions to browser (c) 2011, Juerg Lehni
- * http://lehni.org/
- *
- * Distributed under the BSD license.
- */
-
-var paper = new function() {
-
-var Base = new function() { 
-	var fix = !this.__proto__,
-		hidden = /^(statics|generics|preserve|enumerable|prototype|__proto__|toString|valueOf)$/,
-		proto = Object.prototype,
-		has = fix
-			? function(name) {
-				return name !== '__proto__' && this.hasOwnProperty(name);
-			}
-			: proto.hasOwnProperty,
-		toString = proto.toString,
-		proto = Array.prototype,
-		isArray = Array.isArray = Array.isArray || function(obj) {
-			return toString.call(obj) === '[object Array]';
-		},
-		slice = proto.slice,
-		forEach = proto.forEach || function(iter, bind) {
-			for (var i = 0, l = this.length; i < l; i++)
-				iter.call(bind, this[i], i, this);
-		},
-		forIn = function(iter, bind) {
-			for (var i in this)
-				if (this.hasOwnProperty(i))
-					iter.call(bind, this[i], i, this);
-		},
-		_define = Object.defineProperty,
-		_describe = Object.getOwnPropertyDescriptor;
-
-	function define(obj, name, desc) {
-		if (_define) {
-			try {
-				delete obj[name];
-				return _define(obj, name, desc);
-			} catch (e) {}
-		}
-		if ((desc.get || desc.set) && obj.__defineGetter__) {
-			desc.get && obj.__defineGetter__(name, desc.get);
-			desc.set && obj.__defineSetter__(name, desc.set);
-		} else {
-			obj[name] = desc.value;
-		}
-		return obj;
-	}
-
-	function describe(obj, name) {
-		if (_describe) {
-			try {
-				return _describe(obj, name);
-			} catch (e) {}
-		}
-		var get = obj.__lookupGetter__ && obj.__lookupGetter__(name);
-		return get
-			? { get: get, set: obj.__lookupSetter__(name), enumerable: true,
-					configurable: true }
-			: has.call(obj, name)
-				? { value: obj[name], enumerable: true, configurable: true,
-						writable: true }
-				: null;
-	}
-
-	function inject(dest, src, enumerable, base, preserve, generics) {
-		var beans, bean;
-
-		function field(name, val, dontCheck, generics) {
-			var val = val || (val = describe(src, name))
-					&& (val.get ? val : val.value),
-				func = typeof val === 'function',
-				res = val,
-				prev = preserve || func
-					? (val && val.get ? name in dest : dest[name]) : null;
-			if (generics && func && (!preserve || !generics[name])) {
-				generics[name] = function(bind) {
-					return bind && dest[name].apply(bind,
-							slice.call(arguments, 1));
-				}
-			}
-			if ((dontCheck || val !== undefined && has.call(src, name))
-					&& (!preserve || !prev)) {
-				if (func) {
-					if (prev && /\bthis\.base\b/.test(val)) {
-						var fromBase = base && base[name] == prev;
-						res = function() {
-							var tmp = describe(this, 'base');
-							define(this, 'base', { value: fromBase
-								? base[name] : prev, configurable: true });
-							try {
-								return val.apply(this, arguments);
-							} finally {
-								tmp ? define(this, 'base', tmp)
-									: delete this.base;
-							}
-						};
-						res.toString = function() {
-							return val.toString();
-						}
-						res.valueOf = function() {
-							return val.valueOf();
-						}
-					}
-					if (beans && val.length == 0
-							&& (bean = name.match(/^(get|is)(([A-Z])(.*))$/)))
-						beans.push([ bean[3].toLowerCase() + bean[4], bean[2] ]);
-				}
-				if (!res || func || !res.get)
-					res = { value: res, writable: true };
-				if ((describe(dest, name)
-						|| { configurable: true }).configurable) {
-					res.configurable = true;
-					res.enumerable = enumerable;
-				}
-				define(dest, name, res);
-			}
-		}
-		if (src) {
-			beans = [];
-			for (var name in src)
-				if (has.call(src, name) && !hidden.test(name))
-					field(name, null, true, generics);
-			field('toString');
-			field('valueOf');
-			for (var i = 0, l = beans && beans.length; i < l; i++)
-				try {
-					var bean = beans[i], part = bean[1];
-					field(bean[0], {
-						get: dest['get' + part] || dest['is' + part],
-						set: dest['set' + part]
-					}, true);
-				} catch (e) {}
-		}
-		return dest;
-	}
-
-	function extend(obj) {
-		var ctor = function(dont) {
-			if (fix) define(this, '__proto__', { value: obj });
-			if (this.initialize && dont !== ctor.dont)
-				return this.initialize.apply(this, arguments);
-		}
-		ctor.prototype = obj;
-		ctor.toString = function() {
-			return (this.prototype.initialize || function() {}).toString();
-		}
-		return ctor;
-	}
-
-	function iterator(iter) {
-		return !iter
-			? function(val) { return val }
-			: typeof iter !== 'function'
-				? function(val) { return val == iter }
-				: iter;
-	}
-
-	function each(obj, iter, bind, asArray) {
-		try {
-			if (obj)
-				(asArray || asArray === undefined && isArray(obj)
-					? forEach : forIn).call(obj, iterator(iter),
-						bind = bind || obj);
-		} catch (e) {
-			if (e !== Base.stop) throw e;
-		}
-		return bind;
-	}
-
-	function clone(obj) {
-		return each(obj, function(val, i) {
-			this[i] = val;
-		}, new obj.constructor());
-	}
-
-	return inject(function() {}, {
-		inject: function(src) {
-			if (src) {
-				var proto = this.prototype,
-					base = proto.__proto__ && proto.__proto__.constructor,
-					statics = src.statics == true ? src : src.statics;
-				if (statics != src)
-					inject(proto, src, src.enumerable, base && base.prototype,
-							src.preserve, src.generics && this);
-				inject(this, statics, true, base, src.preserve);
-			}
-			for (var i = 1, l = arguments.length; i < l; i++)
-				this.inject(arguments[i]);
-			return this;
-		},
-
-		extend: function(src) {
-			var proto = new this(this.dont),
-				ctor = extend(proto);
-			define(proto, 'constructor',
-					{ value: ctor, writable: true, configurable: true });
-			ctor.dont = {};
-			inject(ctor, this, true);
-			return arguments.length ? this.inject.apply(ctor, arguments) : ctor;
-		}
-	}, true).inject({
-		has: has,
-		each: each,
-
-		inject: function() {
-			for (var i = 0, l = arguments.length; i < l; i++)
-				inject(this, arguments[i]);
-			return this;
-		},
-
-		extend: function() {
-			var res = new (extend(this));
-			return res.inject.apply(res, arguments);
-		},
-
-		each: function(iter, bind) {
-			return each(this, iter, bind);
-		},
-
-		clone: function() {
-			return clone(this);
-		},
-
-		statics: {
-			each: each,
-			clone: clone,
-			define: define,
-			describe: describe,
-			iterator: iterator,
-
-			has: function(obj, name) {
-				return has.call(obj, name);
-			},
-
-			type: function(obj) {
-				return (obj || obj === 0) && (obj._type || typeof obj) || null;
-			},
-
-			check: function(obj) {
-				return !!(obj || obj === 0);
-			},
-
-			pick: function() {
-				for (var i = 0, l = arguments.length; i < l; i++)
-					if (arguments[i] !== undefined)
-						return arguments[i];
-				return null;
-			},
-
-			stop: {}
-		}
-	});
-}
-
-this.Base = Base.inject({
-	generics: true,
-
-	clone: function() {
-		return new this.constructor(this);
-	},
-
-	toString: function() {
-		return '{ ' + Base.each(this, function(value, key) {
-			if (key.charAt(0) != '_') {
-				var type = typeof value;
-				this.push(key + ': ' + (type === 'number'
-						? Base.formatNumber(value)
-						: type === 'string' ? "'" + value + "'" : value));
-			}
-		}, []).join(', ') + ' }';
-	},
-
-	statics: {
-		read: function(list, start, length) {
-			var start = start || 0,
-				length = length || list.length - start;
-			var obj = list[start];
-			if (obj instanceof this
-					|| this.prototype._readNull && obj == null && length <= 1)
-				return obj;
-			obj = new this(this.dont);
-			return obj.initialize.apply(obj, start > 0 || length < list.length
-				? Array.prototype.slice.call(list, start, start + length)
-				: list) || obj;
-		},
-
-		readAll: function(list, start) {
-			var res = [], entry;
-			for (var i = start || 0, l = list.length; i < l; i++) {
-				res.push(Array.isArray(entry = list[i])
-					? this.read(entry, 0)
-					: this.read(list, i, 1));
-			}
-			return res;
-		},
-
-		splice: function(list, items, index, remove) {
-			var amount = items && items.length,
-				append = index === undefined;
-			index = append ? list.length : index;
-			for (var i = 0; i < amount; i++)
-				items[i]._index = index + i;
-			if (append) {
-				list.push.apply(list, items);
-				return [];
-			} else {
-				var args = [index, remove];
-				if (items)
-					args.push.apply(args, items);
-				var removed = list.splice.apply(list, args);
-				for (var i = 0, l = removed.length; i < l; i++)
-					delete removed[i]._index;
-				for (var i = index + amount, l = list.length; i < l; i++)
-					list[i]._index = i;
-				return removed;
-			}
-		},
-
-		merge: function() {
-			return Base.each(arguments, function(hash) {
-				Base.each(hash, function(value, key) {
-					this[key] = value;
-				}, this);
-			}, new Base(), true); 
-		},
-
-		capitalize: function(str) {
-			return str.replace(/\b[a-z]/g, function(match) {
-				return match.toUpperCase();
-			});
-		},
-
-		camelize: function(str) {
-			return str.replace(/-(\w)/g, function(all, chr) {
-				return chr.toUpperCase();
-			});
-		},
-
-		hyphenate: function(str) {
-			return str.replace(/[a-z][A-Z0-9]|[0-9][a-zA-Z]|[A-Z]{2}[a-z]/g,
-				function(match) {
-					return match.charAt(0) + '-' + match.substring(1);
-				}
-			).toLowerCase();
-		},
-
-		formatNumber: function(num) {
-			return (Math.round(num * 100000) / 100000).toString();
-		}
-	}
-});
-
-var PaperScope = this.PaperScope = Base.extend({
-
-	initialize: function(script) {
-		paper = this;
-		this.project = null;
-		this.projects = [];
-		this.tools = [];
-		this._id = script && (script.getAttribute('id') || script.src)
-				|| ('paperscope-' + (PaperScope._id++));
-		if (script)
-			script.setAttribute('id', this._id);
-		PaperScope._scopes[this._id] = this;
-	},
-
-	version: 0.22,
-
-	getView: function() {
-		return this.project.view;
-	},
-
-	getTool: function() {
-		if (!this._tool)
-			this._tool = new Tool();
-		return this._tool;
-	 },
-
-	evaluate: function(code) {
-		var res = PaperScript.evaluate(code, this);
-		View.updateFocus();
-		return res;
-	},
-
-	install: function(scope) {
-		var that = this;
-		Base.each(['project', 'view', 'tool'], function(key) {
-			Base.define(scope, key, {
-				configurable: true,
-				writable: true,
-				get: function() {
-					return that[key];
-				}
-			});
-		});
-		for (var key in this) {
-			if (!/^(version|_id|load)/.test(key) && !(key in scope))
-				scope[key] = this[key];
-		}
-	},
-
-	setup: function(canvas) {
-		paper = this;
-		this.project = new Project(canvas);
-	},
-
-	clear: function() {
-		for (var i = this.projects.length - 1; i >= 0; i--)
-			this.projects[i].remove();
-		for (var i = this.tools.length - 1; i >= 0; i--)
-			this.tools[i].remove();
-	},
-
-	remove: function() {
-		this.clear();
-		delete PaperScope._scopes[this._id];
-	},
-
-	statics: {
-		_scopes: {},
-		_id: 0,
-
-		get: function(id) {
-			if (typeof id === 'object')
-				id = id.getAttribute('id');
-			return this._scopes[id] || null;
-		}
-	}
-});
-
-var PaperScopeItem = Base.extend({
-
-	initialize: function(activate) {
-		this._scope = paper;
-		this._index = this._scope[this._list].push(this) - 1;
-		if (activate || !this._scope[this._reference])
-			this.activate();
-	},
-
-	activate: function() {
-		if (!this._scope)
-			return false;
-		this._scope[this._reference] = this;
-		return true;
-	},
-
-	remove: function() {
-		if (this._index == null)
-			return false;
-		Base.splice(this._scope[this._list], null, this._index, 1);
-		if (this._scope[this._reference] == this)
-			this._scope[this._reference] = null;
-		this._scope = null;
-		return true;
-	}
-});
-
-var Callback = {
-	attach: function(type, func) {
-		if (typeof type !== 'string') {
-			return Base.each(type, function(value, key) {
-				this.attach(key, value);
-			}, this);
-		}
-		var entry = this._eventTypes[type];
-		if (!entry)
-			return this;
-		var handlers = this._handlers = this._handlers || {};
-		handlers = handlers[type] = handlers[type] || [];
-		if (handlers.indexOf(func) == -1) { 
-			handlers.push(func);
-			if (entry.install && handlers.length == 1)
-				entry.install.call(this, type);
-		}
-		return this;
-	},
-
-	detach: function(type, func) {
-		if (typeof type !== 'string') {
-			return Base.each(type, function(value, key) {
-				this.detach(key, value);
-			}, this);
-		}
-		var entry = this._eventTypes[type],
-			handlers = this._handlers && this._handlers[type],
-			index;
-		if (entry && handlers) {
-			if (!func || (index = handlers.indexOf(func)) != -1
-					&& handlers.length == 1) {
-				if (entry.uninstall)
-					entry.uninstall.call(this, type);
-				delete this._handlers[type];
-			} else if (index != -1) {
-				handlers.splice(index, 1);
-			}
-		}
-		return this;
-	},
-
-	fire: function(type, event) {
-		var handlers = this._handlers && this._handlers[type];
-		if (!handlers)
-			return false;
-		Base.each(handlers, function(func) {
-			if (func.call(this, event) === false && event && event.stop)
-				event.stop();
-		}, this);
-		return true;
-	},
-
-	responds: function(type) {
-		return !!(this._handlers && this._handlers[type]);
-	},
-
-	statics: {
-		inject: function() {
-			for (var i = 0, l = arguments.length; i < l; i++) {
-				var src = arguments[i],
-					events = src._events;
-				if (events) {
-					var types = {};
-					Base.each(events, function(entry, key) {
-						var isString = typeof entry === 'string',
-							name = isString ? entry : key,
-							part = Base.capitalize(name),
-							type = name.substring(2).toLowerCase();
-						types[type] = isString ? {} : entry;
-						name = '_' + name;
-						src['get' + part] = function() {
-							return this[name];
-						};
-						src['set' + part] = function(func) {
-							if (func) {
-								this.attach(type, func);
-							} else if (this[name]) {
-								this.detach(type, this[name]);
-							}
-							this[name] = func;
-						};
-					});
-					src._eventTypes = types;
-				}
-				this.base(src);
-			}
-			return this;
-		}
-	}
-};
-
-var Point = this.Point = Base.extend({
-	initialize: function(arg0, arg1) {
-		if (arg1 !== undefined) {
-			this.x = arg0;
-			this.y = arg1;
-		} else if (arg0 !== undefined) {
-			if (arg0 == null) {
-				this.x = this.y = 0;
-			} else if (arg0.x !== undefined) {
-				this.x = arg0.x;
-				this.y = arg0.y;
-			} else if (arg0.width !== undefined) {
-				this.x = arg0.width;
-				this.y = arg0.height;
-			} else if (Array.isArray(arg0)) {
-				this.x = arg0[0];
-				this.y = arg0.length > 1 ? arg0[1] : arg0[0];
-			} else if (arg0.angle !== undefined) {
-				this.x = arg0.length;
-				this.y = 0;
-				this.setAngle(arg0.angle);
-			} else if (typeof arg0 === 'number') {
-				this.x = this.y = arg0;
-			} else {
-				this.x = this.y = 0;
-			}
-		} else {
-			this.x = this.y = 0;
-		}
-	},
-
-	set: function(x, y) {
-		this.x = x;
-		this.y = y;
-		return this;
-	},
-
-	clone: function() {
-		return Point.create(this.x, this.y);
-	},
-
-	toString: function() {
-		var format = Base.formatNumber;
-		return '{ x: ' + format(this.x) + ', y: ' + format(this.y) + ' }';
-	},
-
-	add: function(point) {
-		point = Point.read(arguments);
-		return Point.create(this.x + point.x, this.y + point.y);
-	},
-
-	subtract: function(point) {
-		point = Point.read(arguments);
-		return Point.create(this.x - point.x, this.y - point.y);
-	},
-
-	multiply: function(point) {
-		point = Point.read(arguments);
-		return Point.create(this.x * point.x, this.y * point.y);
-	},
-
-	divide: function(point) {
-		point = Point.read(arguments);
-		return Point.create(this.x / point.x, this.y / point.y);
-	},
-
-	modulo: function(point) {
-		point = Point.read(arguments);
-		return Point.create(this.x % point.x, this.y % point.y);
-	},
-
-	negate: function() {
-		return Point.create(-this.x, -this.y);
-	},
-
-	transform: function(matrix) {
-		return matrix ? matrix._transformPoint(this) : this;
-	},
-
-	getDistance: function(point, squared) {
-		point = Point.read(arguments);
-		var x = point.x - this.x,
-			y = point.y - this.y,
-			d = x * x + y * y;
-		return squared ? d : Math.sqrt(d);
-	},
-
-	getLength: function() {
-		var l = this.x * this.x + this.y * this.y;
-		return arguments[0] ? l : Math.sqrt(l);
-	},
-
-	setLength: function(length) {
-		if (this.isZero()) {
-			var angle = this._angle || 0;
-			this.set(
-				Math.cos(angle) * length,
-				Math.sin(angle) * length
-			);
-		} else {
-			var scale = length / this.getLength();
-			if (scale == 0)
-				this.getAngle();
-			this.set(
-				this.x * scale,
-				this.y * scale
-			);
-		}
-		return this;
-	},
-
-	normalize: function(length) {
-		if (length === undefined)
-			length = 1;
-		var current = this.getLength(),
-			scale = current != 0 ? length / current : 0,
-			point = Point.create(this.x * scale, this.y * scale);
-		point._angle = this._angle;
-		return point;
-	},
-
-	getAngle: function() {
-		return this.getAngleInRadians(arguments[0]) * 180 / Math.PI;
-	},
-
-	setAngle: function(angle) {
-		angle = this._angle = angle * Math.PI / 180;
-		if (!this.isZero()) {
-			var length = this.getLength();
-			this.set(
-				Math.cos(angle) * length,
-				Math.sin(angle) * length
-			);
-		}
-		return this;
-	},
-
-	getAngleInRadians: function() {
-		if (arguments[0] === undefined) {
-			if (this._angle == null)
-				this._angle = Math.atan2(this.y, this.x);
-			return this._angle;
-		} else {
-			var point = Point.read(arguments),
-				div = this.getLength() * point.getLength();
-			if (div == 0) {
-				return NaN;
-			} else {
-				return Math.acos(this.dot(point) / div);
-			}
-		}
-	},
-
-	getAngleInDegrees: function() {
-		return this.getAngle(arguments[0]);
-	},
-
-	getQuadrant: function() {
-		return this.x >= 0 ? this.y >= 0 ? 1 : 4 : this.y >= 0 ? 2 : 3;
-	},
-
-	getDirectedAngle: function(point) {
-		point = Point.read(arguments);
-		return Math.atan2(this.cross(point), this.dot(point)) * 180 / Math.PI;
-	},
-
-	rotate: function(angle, center) {
-		angle = angle * Math.PI / 180;
-		var point = center ? this.subtract(center) : this,
-			s = Math.sin(angle),
-			c = Math.cos(angle);
-		point = Point.create(
-			point.x * c - point.y * s,
-			point.y * c + point.x * s
-		);
-		return center ? point.add(center) : point;
-	},
-
-	equals: function(point) {
-		point = Point.read(arguments);
-		return this.x == point.x && this.y == point.y;
-	},
-
-	isInside: function(rect) {
-		return rect.contains(this);
-	},
-
-	isClose: function(point, tolerance) {
-		return this.getDistance(point) < tolerance;
-	},
-
-	isColinear: function(point) {
-		return this.cross(point) < Numerical.TOLERANCE;
-	},
-
-	isOrthogonal: function(point) {
-		return this.dot(point) < Numerical.TOLERANCE;
-	},
-
-	isZero: function() {
-		return this.x == 0 && this.y == 0;
-	},
-
-	isNaN: function() {
-		return isNaN(this.x) || isNaN(this.y);
-	},
-
-	dot: function(point) {
-		point = Point.read(arguments);
-		return this.x * point.x + this.y * point.y;
-	},
-
-	cross: function(point) {
-		point = Point.read(arguments);
-		return this.x * point.y - this.y * point.x;
-	},
-
-	project: function(point) {
-		point = Point.read(arguments);
-		if (point.isZero()) {
-			return Point.create(0, 0);
-		} else {
-			var scale = this.dot(point) / point.dot(point);
-			return Point.create(
-				point.x * scale,
-				point.y * scale
-			);
-		}
-	},
-
-	statics: {
-		create: function(x, y) {
-			var point = new Point(Point.dont);
-			point.x = x;
-			point.y = y;
-			return point;
-		},
-
-		min: function(point1, point2) {
-			point1 = Point.read(arguments, 0, 1);
-			point2 = Point.read(arguments, 1, 1);
-			return Point.create(
-				Math.min(point1.x, point2.x),
-				Math.min(point1.y, point2.y)
-			);
-		},
-
-		max: function(point1, point2) {
-			point1 = Point.read(arguments, 0, 1);
-			point2 = Point.read(arguments, 1, 1);
-			return Point.create(
-				Math.max(point1.x, point2.x),
-				Math.max(point1.y, point2.y)
-			);
-		},
-
-		random: function() {
-			return Point.create(Math.random(), Math.random());
-		}
-	}
-}, new function() { 
-
-	return Base.each(['round', 'ceil', 'floor', 'abs'], function(name) {
-		var op = Math[name];
-		this[name] = function() {
-			return Point.create(op(this.x), op(this.y));
-		};
-	}, {});
-});
-
-var LinkedPoint = Point.extend({
-	set: function(x, y, dontNotify) {
-		this._x = x;
-		this._y = y;
-		if (!dontNotify)
-			this._owner[this._setter](this);
-		return this;
-	},
-
-	getX: function() {
-		return this._x;
-	},
-
-	setX: function(x) {
-		this._x = x;
-		this._owner[this._setter](this);
-	},
-
-	getY: function() {
-		return this._y;
-	},
-
-	setY: function(y) {
-		this._y = y;
-		this._owner[this._setter](this);
-	},
-
-	statics: {
-		create: function(owner, setter, x, y, dontLink) {
-			if (dontLink)
-				return Point.create(x, y);
-			var point = new LinkedPoint(LinkedPoint.dont);
-			point._x = x;
-			point._y = y;
-			point._owner = owner;
-			point._setter = setter;
-			return point;
-		}
-	}
-});
-
-var Size = this.Size = Base.extend({
-	initialize: function(arg0, arg1) {
-		if (arg1 !== undefined) {
-			this.width = arg0;
-			this.height = arg1;
-		} else if (arg0 !== undefined) {
-			if (arg0 == null) {
-				this.width = this.height = 0;
-			} else if (arg0.width !== undefined) {
-				this.width = arg0.width;
-				this.height = arg0.height;
-			} else if (arg0.x !== undefined) {
-				this.width = arg0.x;
-				this.height = arg0.y;
-			} else if (Array.isArray(arg0)) {
-				this.width = arg0[0];
-				this.height = arg0.length > 1 ? arg0[1] : arg0[0];
-			} else if (typeof arg0 === 'number') {
-				this.width = this.height = arg0;
-			} else {
-				this.width = this.height = 0;
-			}
-		} else {
-			this.width = this.height = 0;
-		}
-	},
-
-	toString: function() {
-		var format = Base.formatNumber;
-		return '{ width: ' + format(this.width)
-				+ ', height: ' + format(this.height) + ' }';
-	},
-
-	set: function(width, height) {
-		this.width = width;
-		this.height = height;
-		return this;
-	},
-
-	clone: function() {
-		return Size.create(this.width, this.height);
-	},
-
-	add: function(size) {
-		size = Size.read(arguments);
-		return Size.create(this.width + size.width, this.height + size.height);
-	},
-
-	subtract: function(size) {
-		size = Size.read(arguments);
-		return Size.create(this.width - size.width, this.height - size.height);
-	},
-
-	multiply: function(size) {
-		size = Size.read(arguments);
-		return Size.create(this.width * size.width, this.height * size.height);
-	},
-
-	divide: function(size) {
-		size = Size.read(arguments);
-		return Size.create(this.width / size.width, this.height / size.height);
-	},
-
-	modulo: function(size) {
-		size = Size.read(arguments);
-		return Size.create(this.width % size.width, this.height % size.height);
-	},
-
-	negate: function() {
-		return Size.create(-this.width, -this.height);
-	},
-
-	equals: function(size) {
-		size = Size.read(arguments);
-		return this.width == size.width && this.height == size.height;
-	},
-
-	isZero: function() {
-		return this.width == 0 && this.height == 0;
-	},
-
-	isNaN: function() {
-		return isNaN(this.width) || isNaN(this.height);
-	},
-
-	statics: {
-		create: function(width, height) {
-			return new Size(Size.dont).set(width, height);
-		},
-
-		min: function(size1, size2) {
-			return Size.create(
-				Math.min(size1.width, size2.width),
-				Math.min(size1.height, size2.height));
-		},
-
-		max: function(size1, size2) {
-			return Size.create(
-				Math.max(size1.width, size2.width),
-				Math.max(size1.height, size2.height));
-		},
-
-		random: function() {
-			return Size.create(Math.random(), Math.random());
-		}
-	}
-}, new function() { 
-
-	return Base.each(['round', 'ceil', 'floor', 'abs'], function(name) {
-		var op = Math[name];
-		this[name] = function() {
-			return Size.create(op(this.width), op(this.height));
-		};
-	}, {});
-});
-
-var LinkedSize = Size.extend({
-	set: function(width, height, dontNotify) {
-		this._width = width;
-		this._height = height;
-		if (!dontNotify)
-			this._owner[this._setter](this);
-		return this;
-	},
-
-	getWidth: function() {
-		return this._width;
-	},
-
-	setWidth: function(width) {
-		this._width = width;
-		this._owner[this._setter](this);
-	},
-
-	getHeight: function() {
-		return this._height;
-	},
-
-	setHeight: function(height) {
-		this._height = height;
-		this._owner[this._setter](this);
-	},
-
-	statics: {
-		create: function(owner, setter, width, height, dontLink) {
-			if (dontLink)
-				return Size.create(width, height);
-			var size = new LinkedSize(LinkedSize.dont);
-			size._width = width;
-			size._height = height;
-			size._owner = owner;
-			size._setter = setter;
-			return size;
-		}
-	}
-});
-
-var Rectangle = this.Rectangle = Base.extend({
-	initialize: function(arg0, arg1, arg2, arg3) {
-		if (arguments.length == 4) {
-			this.x = arg0;
-			this.y = arg1;
-			this.width = arg2;
-			this.height = arg3;
-		} else if (arguments.length == 2) {
-			if (arg1 && arg1.x !== undefined) {
-				var point1 = Point.read(arguments, 0, 1);
-				var point2 = Point.read(arguments, 1, 1);
-				this.x = point1.x;
-				this.y = point1.y;
-				this.width = point2.x - point1.x;
-				this.height = point2.y - point1.y;
-				if (this.width < 0) {
-					this.x = point2.x;
-					this.width = -this.width;
-				}
-				if (this.height < 0) {
-					this.y = point2.y;
-					this.height = -this.height;
-				}
-			} else {
-				var point = Point.read(arguments, 0, 1);
-				var size = Size.read(arguments, 1, 1);
-				this.x = point.x;
-				this.y = point.y;
-				this.width = size.width;
-				this.height = size.height;
-			}
-		} else if (arg0) {
-			this.x = arg0.x || 0;
-			this.y = arg0.y || 0;
-			this.width = arg0.width || 0;
-			this.height = arg0.height || 0;
-		} else {
-			this.x = this.y = this.width = this.height = 0;
-		}
-	},
-
-	set: function(x, y, width, height) {
-		this.x = x;
-		this.y = y;
-		this.width = width;
-		this.height = height;
-		return this;
-	},
-
-	getPoint: function() {
-		return LinkedPoint.create(this, 'setPoint', this.x, this.y,
-				arguments[0]);
-	},
-
-	setPoint: function(point) {
-		point = Point.read(arguments);
-		this.x = point.x;
-		this.y = point.y;
-		return this;
-	},
-
-	getSize: function() {
-		return LinkedSize.create(this, 'setSize', this.width, this.height,
-				arguments[0]);
-	},
-
-	setSize: function(size) {
-		size = Size.read(arguments);
-		this.width = size.width;
-		this.height = size.height;
-		return this;
-	},
-
-	getLeft: function() {
-		return this.x;
-	},
-
-	setLeft: function(left) {
-		this.width -= left - this.x;
-		this.x = left;
-		return this;
-	},
-
-	getTop: function() {
-		return this.y;
-	},
-
-	setTop: function(top) {
-		this.height -= top - this.y;
-		this.y = top;
-		return this;
-	},
-
-	getRight: function() {
-		return this.x + this.width;
-	},
-
-	setRight: function(right) {
-		this.width = right - this.x;
-		return this;
-	},
-
-	getBottom: function() {
-		return this.y + this.height;
-	},
-
-	setBottom: function(bottom) {
-		this.height = bottom - this.y;
-		return this;
-	},
-
-	getCenterX: function() {
-		return this.x + this.width * 0.5;
-	},
-
-	setCenterX: function(x) {
-		this.x = x - this.width * 0.5;
-		return this;
-	},
-
-	getCenterY: function() {
-		return this.y + this.height * 0.5;
-	},
-
-	setCenterY: function(y) {
-		this.y = y - this.height * 0.5;
-		return this;
-	},
-
-	getCenter: function() {
-		return LinkedPoint.create(this, 'setCenter',
-				this.getCenterX(), this.getCenterY(), arguments[0]);
-	},
-
-	setCenter: function(point) {
-		point = Point.read(arguments);
-		return this.setCenterX(point.x).setCenterY(point.y);
-	},
-
-	equals: function(rect) {
-		rect = Rectangle.read(arguments);
-		return this.x == rect.x && this.y == rect.y
-				&& this.width == rect.width && this.height == rect.height;
-	},
-
-	isEmpty: function() {
-		return this.width == 0 || this.height == 0;
-	},
-
-	toString: function() {
-		var format = Base.formatNumber;
-		return '{ x: ' + format(this.x)
-				+ ', y: ' + format(this.y)
-				+ ', width: ' + format(this.width)
-				+ ', height: ' + format(this.height)
-				+ ' }';
-	},
-
-	contains: function(arg) {
-		return arg && arg.width !== undefined
-				|| (Array.isArray(arg) ? arg : arguments).length == 4
-				? this._containsRectangle(Rectangle.read(arguments))
-				: this._containsPoint(Point.read(arguments));
-	},
-
-	_containsPoint: function(point) {
-		var x = point.x,
-			y = point.y;
-		return x >= this.x && y >= this.y
-				&& x <= this.x + this.width
-				&& y <= this.y + this.height;
-	},
-
-	_containsRectangle: function(rect) {
-		var x = rect.x,
-			y = rect.y;
-		return x >= this.x && y >= this.y
-				&& x + rect.width <= this.x + this.width
-				&& y + rect.height <= this.y + this.height;
-	},
-
-	intersects: function(rect) {
-		rect = Rectangle.read(arguments);
-		return rect.x + rect.width > this.x
-				&& rect.y + rect.height > this.y
-				&& rect.x < this.x + this.width
-				&& rect.y < this.y + this.height;
-	},
-
-	intersect: function(rect) {
-		rect = Rectangle.read(arguments);
-		var x1 = Math.max(this.x, rect.x),
-			y1 = Math.max(this.y, rect.y),
-			x2 = Math.min(this.x + this.width, rect.x + rect.width),
-			y2 = Math.min(this.y + this.height, rect.y + rect.height);
-		return Rectangle.create(x1, y1, x2 - x1, y2 - y1);
-	},
-
-	unite: function(rect) {
-		rect = Rectangle.read(arguments);
-		var x1 = Math.min(this.x, rect.x),
-			y1 = Math.min(this.y, rect.y),
-			x2 = Math.max(this.x + this.width, rect.x + rect.width),
-			y2 = Math.max(this.y + this.height, rect.y + rect.height);
-		return Rectangle.create(x1, y1, x2 - x1, y2 - y1);
-	},
-
-	include: function(point) {
-		point = Point.read(arguments);
-		var x1 = Math.min(this.x, point.x),
-			y1 = Math.min(this.y, point.y),
-			x2 = Math.max(this.x + this.width, point.x),
-			y2 = Math.max(this.y + this.height, point.y);
-		return Rectangle.create(x1, y1, x2 - x1, y2 - y1);
-	},
-
-	expand: function(hor, ver) {
-		if (ver === undefined)
-			ver = hor;
-		return Rectangle.create(this.x - hor / 2, this.y - ver / 2,
-				this.width + hor, this.height + ver);
-	},
-
-	scale: function(hor, ver) {
-		return this.expand(this.width * hor - this.width,
-				this.height * (ver === undefined ? hor : ver) - this.height);
-	},
-
-	statics: {
-		create: function(x, y, width, height) {
-			return new Rectangle(Rectangle.dont).set(x, y, width, height);
-		}
-	}
-}, new function() {
-	return Base.each([
-			['Top', 'Left'], ['Top', 'Right'],
-			['Bottom', 'Left'], ['Bottom', 'Right'],
-			['Left', 'Center'], ['Top', 'Center'],
-			['Right', 'Center'], ['Bottom', 'Center']
-		],
-		function(parts, index) {
-			var part = parts.join('');
-			var xFirst = /^[RL]/.test(part);
-			if (index >= 4)
-				parts[1] += xFirst ? 'Y' : 'X';
-			var x = parts[xFirst ? 0 : 1],
-				y = parts[xFirst ? 1 : 0],
-				getX = 'get' + x,
-				getY = 'get' + y,
-				setX = 'set' + x,
-				setY = 'set' + y,
-				get = 'get' + part,
-				set = 'set' + part;
-			this[get] = function() {
-				return LinkedPoint.create(this, set,
-						this[getX](), this[getY](), arguments[0]);
-			};
-			this[set] = function(point) {
-				point = Point.read(arguments);
-				return this[setX](point.x)[setY](point.y);
-			};
-		}, {});
-});
-
-var LinkedRectangle = Rectangle.extend({
-	set: function(x, y, width, height, dontNotify) {
-		this._x = x;
-		this._y = y;
-		this._width = width;
-		this._height = height;
-		if (!dontNotify)
-			this._owner[this._setter](this);
-		return this;
-	},
-
-	statics: {
-		create: function(owner, setter, x, y, width, height) {
-			var rect = new LinkedRectangle(LinkedRectangle.dont).set(
-					x, y, width, height, true);
-			rect._owner = owner;
-			rect._setter = setter;
-			return rect;
-		}
-	}
-}, new function() {
-	var proto = Rectangle.prototype;
-
-	return Base.each(['x', 'y', 'width', 'height'], function(key) {
-		var part = Base.capitalize(key);
-		var internal = '_' + key;
-		this['get' + part] = function() {
-			return this[internal];
-		};
-
-		this['set' + part] = function(value) {
-			this[internal] = value;
-			if (!this._dontNotify)
-				this._owner[this._setter](this);
-		};
-	}, Base.each(['Point', 'Size', 'Center',
-			'Left', 'Top', 'Right', 'Bottom', 'CenterX', 'CenterY',
-			'TopLeft', 'TopRight', 'BottomLeft', 'BottomRight',
-			'LeftCenter', 'TopCenter', 'RightCenter', 'BottomCenter'],
-		function(key) {
-			var name = 'set' + key;
-			this[name] = function(value) {
-				this._dontNotify = true;
-				proto[name].apply(this, arguments);
-				delete this._dontNotify;
-				this._owner[this._setter](this);
-				return this;
-			};
-		}, {})
-	);
-});
-
-var Matrix = this.Matrix = Base.extend({
-	initialize: function(arg) {
-		var count = arguments.length,
-			ok = true;
-		if (count == 6) {
-			this.set.apply(this, arguments);
-		} else if (count == 1) {
-			if (arg instanceof Matrix) {
-				this.set(arg._a, arg._c, arg._b, arg._d, arg._tx, arg._ty);
-			} else if (Array.isArray(arg)) {
-				this.set.apply(this, arg);
-			} else {
-				ok = false;
-			}
-		} else if (count == 0) {
-			this.setIdentity();
-		} else {
-			ok = false;
-		}
-		if (!ok)
-			throw new Error('Unsupported matrix parameters');
-	},
-
-	clone: function() {
-		return Matrix.create(this._a, this._c, this._b, this._d,
-				this._tx, this._ty);
-	},
-
-	set: function(a, c, b, d, tx, ty) {
-		this._a = a;
-		this._c = c;
-		this._b = b;
-		this._d = d;
-		this._tx = tx;
-		this._ty = ty;
-		return this;
-	},
-
-	setIdentity: function() {
-		this._a = this._d = 1;
-		this._c = this._b = this._tx = this._ty = 0;
-		return this;
-	},
-
-	scale: function( hor, ver, center) {
-		if (arguments.length < 2 || typeof ver === 'object') {
-			center = Point.read(arguments, 1);
-			ver = hor;
-		} else {
-			center = Point.read(arguments, 2);
-		}
-		if (center)
-			this.translate(center);
-		this._a *= hor;
-		this._c *= hor;
-		this._b *= ver;
-		this._d *= ver;
-		if (center)
-			this.translate(center.negate());
-		return this;
-	},
-
-	translate: function(point) {
-		point = Point.read(arguments);
-		var x = point.x, y = point.y;
-		this._tx += x * this._a + y * this._b;
-		this._ty += x * this._c + y * this._d;
-		return this;
-	},
-
-	rotate: function(angle, center) {
-		return this.concatenate(
-				Matrix.getRotateInstance.apply(Matrix, arguments));
-	},
-
-	shear: function( hor, ver, center) {
-		if (arguments.length < 2 || typeof ver === 'object') {
-			center = Point.read(arguments, 1);
-			ver = hor;
-		} else {
-			center = Point.read(arguments, 2);
-		}
-		if (center)
-			this.translate(center);
-		var a = this._a,
-			c = this._c;
-		this._a += ver * this._b;
-		this._c += ver * this._d;
-		this._b += hor * a;
-		this._d += hor * c;
-		if (center)
-			this.translate(center.negate());
-		return this;
-	},
-
-	toString: function() {
-		var format = Base.formatNumber;
-		return '[[' + [format(this._a), format(this._b),
-					format(this._tx)].join(', ') + '], ['
-				+ [format(this._c), format(this._d),
-					format(this._ty)].join(', ') + ']]';
-	},
-
-	getValues: function() {
-		return [ this._a, this._c, this._b, this._d, this._tx, this._ty ];
-	},
-
-	concatenate: function(mx) {
-		var a = this._a,
-			b = this._b,
-			c = this._c,
-			d = this._d;
-		this._a = mx._a * a + mx._c * b;
-		this._b = mx._b * a + mx._d * b;
-		this._c = mx._a * c + mx._c * d;
-		this._d = mx._b * c + mx._d * d;
-		this._tx += mx._tx * a + mx._ty * b;
-		this._ty += mx._tx * c + mx._ty * d;
-		return this;
-	},
-
-	preConcatenate: function(mx) {
-		var a = this._a,
-			b = this._b,
-			c = this._c,
-			d = this._d,
-			tx = this._tx,
-			ty = this._ty;
-		this._a = mx._a * a + mx._b * c;
-		this._b = mx._a * b + mx._b * d;
-		this._c = mx._c * a + mx._d * c;
-		this._d = mx._c * b + mx._d * d;
-		this._tx = mx._a * tx + mx._b * ty + mx._tx;
-		this._ty = mx._c * tx + mx._d * ty + mx._ty;
-		return this;
-	},
-
-	transform: function( src, srcOff, dst, dstOff, numPts) {
-		return arguments.length < 5
-			? this._transformPoint(Point.read(arguments))
-			: this._transformCoordinates(src, srcOff, dst, dstOff, numPts);
-	},
-
-	_transformPoint: function(point, dest, dontNotify) {
-		var x = point.x,
-			y = point.y;
-		if (!dest)
-			dest = new Point(Point.dont);
-		return dest.set(
-			x * this._a + y * this._b + this._tx,
-			x * this._c + y * this._d + this._ty,
-			dontNotify
-		);
-	},
-
-	_transformCoordinates: function(src, srcOff, dst, dstOff, numPts) {
-		var i = srcOff, j = dstOff,
-			srcEnd = srcOff + 2 * numPts;
-		while (i < srcEnd) {
-			var x = src[i++];
-			var y = src[i++];
-			dst[j++] = x * this._a + y * this._b + this._tx;
-			dst[j++] = x * this._c + y * this._d + this._ty;
-		}
-		return dst;
-	},
-
-	_transformCorners: function(rect) {
-		var x1 = rect.x,
-			y1 = rect.y,
-			x2 = x1 + rect.width,
-			y2 = y1 + rect.height,
-			coords = [ x1, y1, x2, y1, x2, y2, x1, y2 ];
-		return this._transformCoordinates(coords, 0, coords, 0, 4);
-	},
-
-	_transformBounds: function(bounds, dest, dontNotify) {
-		var coords = this._transformCorners(bounds),
-			min = coords.slice(0, 2),
-			max = coords.slice(0);
-		for (var i = 2; i < 8; i++) {
-			var val = coords[i],
-				j = i & 1;
-			if (val < min[j])
-				min[j] = val;
-			else if (val > max[j])
-				max[j] = val;
-		}
-		if (!dest)
-			dest = new Rectangle(Rectangle.dont);
-		return dest.set(min[0], min[1], max[0] - min[0], max[1] - min[1],
-				dontNotify);
-	},
-
-	inverseTransform: function(point) {
-		return this._inverseTransform(Point.read(arguments));
-	},
-
-	_getDeterminant: function() {
-		var det = this._a * this._d - this._b * this._c;
-		return isFinite(det) && Math.abs(det) > Numerical.EPSILON
-				&& isFinite(this._tx) && isFinite(this._ty)
-				? det : null;
-	},
-
-	_inverseTransform: function(point, dest, dontNotify) {
-		var det = this._getDeterminant();
-		if (!det)
-			return null;
-		var x = point.x - this._tx,
-			y = point.y - this._ty;
-		if (!dest)
-			dest = new Point(Point.dont);
-		return dest.set(
-			(x * this._d - y * this._b) / det,
-			(y * this._a - x * this._c) / det,
-			dontNotify
-		);
-	},
-
-	getTranslation: function() {
-		return Point.create(this._tx, this._ty);
-	},
-
-	getScaling: function() {
-		var hor = Math.sqrt(this._a * this._a + this._c * this._c),
-			ver = Math.sqrt(this._b * this._b + this._d * this._d);
-		return Point.create(this._a < 0 ? -hor : hor, this._b < 0 ? -ver : ver);
-	},
-
-	getRotation: function() {
-		var angle1 = -Math.atan2(this._b, this._d),
-			angle2 = Math.atan2(this._c, this._a);
-		return Math.abs(angle1 - angle2) < Numerical.TOLERANCE
-				? angle1 * 180 / Math.PI : undefined;
-	},
-
-	equals: function(mx) {
-		return this._a == mx._a && this._b == mx._b && this._c == mx._c
-				&& this._d == mx._d && this._tx == mx._tx && this._ty == mx._ty;
-	},
-
-	isIdentity: function() {
-		return this._a == 1 && this._c == 0 && this._b == 0 && this._d == 1
-				&& this._tx == 0 && this._ty == 0;
-	},
-
-	isInvertible: function() {
-		return !!this._getDeterminant();
-	},
-
-	isSingular: function() {
-		return !this._getDeterminant();
-	},
-
-	createInverse: function() {
-		var det = this._getDeterminant();
-		return det && Matrix.create(
-				this._d / det,
-				-this._c / det,
-				-this._b / det,
-				this._a / det,
-				(this._b * this._ty - this._d * this._tx) / det,
-				(this._c * this._tx - this._a * this._ty) / det);
-	},
-
-	createShiftless: function() {
-		return Matrix.create(this._a, this._c, this._b, this._d, 0, 0);
-	},
-
-	setToScale: function(hor, ver) {
-		return this.set(hor, 0, 0, ver, 0, 0);
-	},
-
-	setToTranslation: function(delta) {
-		delta = Point.read(arguments);
-		return this.set(1, 0, 0, 1, delta.x, delta.y);
-	},
-
-	setToShear: function(hor, ver) {
-		return this.set(1, ver, hor, 1, 0, 0);
-	},
-
-	setToRotation: function(angle, center) {
-		center = Point.read(arguments, 1);
-		angle = angle * Math.PI / 180;
-		var x = center.x,
-			y = center.y,
-			cos = Math.cos(angle),
-			sin = Math.sin(angle);
-		return this.set(cos, sin, -sin, cos,
-				x - x * cos + y * sin,
-				y - x * sin - y * cos);
-	},
-
-	applyToContext: function(ctx, reset) {
-		ctx[reset ? 'setTransform' : 'transform'](
-				this._a, this._c, this._b, this._d, this._tx, this._ty);
-		return this;
-	},
-
-	statics: {
-		create: function(a, c, b, d, tx, ty) {
-			return new Matrix(Matrix.dont).set(a, c, b, d, tx, ty);
-		},
-
-		getScaleInstance: function(hor, ver) {
-			var mx = new Matrix();
-			return mx.setToScale.apply(mx, arguments);
-		},
-
-		getTranslateInstance: function(delta) {
-			var mx = new Matrix();
-			return mx.setToTranslation.apply(mx, arguments);
-		},
-
-		getShearInstance: function(hor, ver, center) {
-			var mx = new Matrix();
-			return mx.setToShear.apply(mx, arguments);
-		},
-
-		getRotateInstance: function(angle, center) {
-			var mx = new Matrix();
-			return mx.setToRotation.apply(mx, arguments);
-		}
-	}
-}, new function() {
-	return Base.each({
-		scaleX: '_a',
-		scaleY: '_d',
-		translateX: '_tx',
-		translateY: '_ty',
-		shearX: '_b',
-		shearY: '_c'
-	}, function(prop, name) {
-		name = Base.capitalize(name);
-		this['get' + name] = function() {
-			return this[prop];
-		};
-		this['set' + name] = function(value) {
-			this[prop] = value;
-		};
-	}, {});
-});
-
-var Line = this.Line = Base.extend({
-	initialize: function(point1, point2, infinite) {
-		point1 = Point.read(arguments, 0, 1);
-		point2 = Point.read(arguments, 1, 1);
-		if (arguments.length == 3) {
-			this.point = point1;
-			this.vector = point2.subtract(point1);
-			this.infinite = infinite;
-		} else {
-			this.point = point1;
-			this.vector = point2;
-			this.infinite = true;
-		}
-	},
-
-	intersect: function(line) {
-		var cross = this.vector.cross(line.vector);
-		if (Math.abs(cross) <= Numerical.EPSILON)
-			return null;
-		var v = line.point.subtract(this.point),
-			t1 = v.cross(line.vector) / cross,
-			t2 = v.cross(this.vector) / cross;
-		return (this.infinite || 0 <= t1 && t1 <= 1)
-				&& (line.infinite || 0 <= t2 && t2 <= 1)
-			? this.point.add(this.vector.multiply(t1)) : null;
-	},
-
-	getSide: function(point) {
-		var v1 = this.vector,
-			v2 = point.subtract(this.point),
-			ccw = v2.cross(v1);
-		if (ccw == 0) {
-			ccw = v2.dot(v1);
-			if (ccw > 0) {
-				ccw = v2.subtract(v1).dot(v1);
-				if (ccw < 0)
-				    ccw = 0;
-			}
-		}
-		return ccw < 0 ? -1 : ccw > 0 ? 1 : 0;
-	},
-
-	getDistance: function(point) {
-		var m = this.vector.y / this.vector.x, 
-			b = this.point.y - (m * this.point.x); 
-		var dist = Math.abs(point.y - (m * point.x) - b) / Math.sqrt(m * m + 1);
-		return this.infinite ? dist : Math.min(dist,
-				point.getDistance(this.point),
-				point.getDistance(this.point.add(this.vector)));
-	}
-});
-
-var Project = this.Project = PaperScopeItem.extend({
-	_list: 'projects',
-	_reference: 'project',
-
-	initialize: function(view) {
-		this.base(true);
-		this._currentStyle = new PathStyle();
-		this._selectedItems = {};
-		this._selectedItemCount = 0;
-		this.layers = [];
-		this.symbols = [];
-		this.activeLayer = new Layer();
-		if (view)
-			this.view = view instanceof View ? view : View.create(view);
-	},
-
-	_needsRedraw: function() {
-		if (this.view)
-			this.view._redrawNeeded = true;
-	},
-
-	remove: function() {
-		if (!this.base())
-			return false;
-		if (this.view)
-			this.view.remove();
-		return true;
-	},
-
-	getCurrentStyle: function() {
-		return this._currentStyle;
-	},
-
-	setCurrentStyle: function(style) {
-		this._currentStyle.initialize(style);
-	},
-
-	getIndex: function() {
-		return this._index;
-	},
-
-	getSelectedItems: function() {
-		var items = [];
-		Base.each(this._selectedItems, function(item) {
-			items.push(item);
-		});
-		return items;
-	},
-
-	_updateSelection: function(item) {
-		if (item._selected) {
-			this._selectedItemCount++;
-			this._selectedItems[item._id] = item;
-		} else {
-			this._selectedItemCount--;
-			delete this._selectedItems[item._id];
-		}
-	},
-
-	selectAll: function() {
-		for (var i = 0, l = this.layers.length; i < l; i++)
-			this.layers[i].setSelected(true);
-	},
-
-	deselectAll: function() {
-		for (var i in this._selectedItems)
-			this._selectedItems[i].setSelected(false);
-	},
-
-	hitTest: function(point, options) {
-		options = HitResult.getOptions(point, options);
-		point = options.point;
-		for (var i = this.layers.length - 1; i >= 0; i--) {
-			var res = this.layers[i].hitTest(point, options);
-			if (res) return res;
-		}
-		return null;
-	},
-
-	draw: function(ctx, matrix) {
-		ctx.save();
-		if (!matrix.isIdentity())
-			matrix.applyToContext(ctx);
-		var param = { offset: new Point(0, 0) };
-		for (var i = 0, l = this.layers.length; i < l; i++)
-			Item.draw(this.layers[i], ctx, param);
-		ctx.restore();
-
-		if (this._selectedItemCount > 0) {
-			ctx.save();
-			ctx.strokeWidth = 1;
-			ctx.strokeStyle = ctx.fillStyle = '#009dec';
-			var matrices = {};
-			function getGlobalMatrix(item, mx, cached) {
-				var cache = cached && matrices[item._id];
-				if (cache) {
-					mx.concatenate(cache);
-					return mx;
-				}
-				if (item._parent) {
-					getGlobalMatrix(item._parent, mx, true);
-					if (!item._matrix.isIdentity())
-						mx.concatenate(item._matrix);
-				} else {
-					mx.initialize(item._matrix);
-				}
-				if (cached)
-					matrices[item._id] = mx.clone();
-				return mx;
-			}
-			for (var id in this._selectedItems) {
-				var item = this._selectedItems[id];
-				item.drawSelected(ctx, getGlobalMatrix(item, matrix.clone()));
-			}
-			ctx.restore();
-		}
-	}
-});
-
-var Symbol = this.Symbol = Base.extend({
-	initialize: function(item) {
-		this.project = paper.project;
-		this.project.symbols.push(this);
-		this.setDefinition(item);
-		this._instances = {};
-	},
-
-	_changed: function(flags) {
-		Base.each(this._instances, function(item) {
-			item._changed(flags);
-		});
-	},
-
-	getDefinition: function() {
-		return this._definition;
-	},
-
-	setDefinition: function(item) {
-		if (item._parentSymbol)
-			item = item.clone();
-		if (this._definition)
-			delete this._definition._parentSymbol;
-		this._definition = item;
-		item.remove();
-		item.setPosition(new Point());
-		item._parentSymbol = this;
-		this._changed(Change.GEOMETRY);
-	},
-
-	place: function(position) {
-		return new PlacedSymbol(this, position);
-	},
-
-	clone: function() {
-	 	return new Symbol(this._definition.clone());
-	}
-});
-
-var ChangeFlag = {
-	APPEARANCE: 1,
-	HIERARCHY: 2,
-	GEOMETRY: 4,
-	STROKE: 8,
-	STYLE: 16,
-	ATTRIBUTE: 32,
-	CONTENT: 64,
-	PIXELS: 128,
-	CLIPPING: 256
-};
-
-var Change = {
-	HIERARCHY: ChangeFlag.HIERARCHY | ChangeFlag.APPEARANCE,
-	GEOMETRY: ChangeFlag.GEOMETRY | ChangeFlag.APPEARANCE,
-	STROKE: ChangeFlag.STROKE | ChangeFlag.STYLE | ChangeFlag.APPEARANCE,
-	STYLE: ChangeFlag.STYLE | ChangeFlag.APPEARANCE,
-	ATTRIBUTE: ChangeFlag.ATTRIBUTE | ChangeFlag.APPEARANCE,
-	CONTENT: ChangeFlag.CONTENT | ChangeFlag.APPEARANCE,
-	PIXELS: ChangeFlag.PIXELS | ChangeFlag.APPEARANCE
-};
-
-var Item = this.Item = Base.extend(Callback, {
-	_events: new function() {
-
-		var mouseFlags = {
-			mousedown: {
-				mousedown: 1,
-				mousedrag: 1,
-				click: 1,
-				doubleclick: 1
-			},
-			mouseup: {
-				mouseup: 1,
-				mousedrag: 1,
-				click: 1,
-				doubleclick: 1
-			},
-			mousemove: {
-				mousedrag: 1,
-				mousemove: 1,
-				mouseenter: 1,
-				mouseleave: 1
-			}
-		};
-
-		var mouseEvent = {
-			install: function(type) {
-				var counters = this._project.view._eventCounters;
-				if (counters) {
-					for (var key in mouseFlags) {
-						counters[key] = (counters[key] || 0)
-								+ (mouseFlags[key][type] || 0);
-					}
-				}
-			},
-			uninstall: function(type) {
-				var counters = this._project.view._eventCounters;
-				if (counters) {
-					for (var key in mouseFlags)
-						counters[key] -= mouseFlags[key][type] || 0;
-				}
-			}
-		};
-
-		var onFrameItems = [];
-		function onFrame(event) {
-			for (var i = 0, l = onFrameItems.length; i < l; i++)
-				onFrameItems[i].fire('frame', event);
-		}
-
-		return Base.each(['onMouseDown', 'onMouseUp', 'onMouseDrag', 'onClick',
-			'onDoubleClick', 'onMouseMove', 'onMouseEnter', 'onMouseLeave'],
-			function(name) {
-				this[name] = mouseEvent;
-			}, {
-				onFrame: {
-					install: function() {
-						if (!onFrameItems.length)
-							this._project.view.attach('frame', onFrame);
-						onFrameItems.push(this);
-					},
-					uninstall: function() {
-						onFrameItems.splice(onFrameItems.indexOf(this), 1);
-						if (!onFrameItems.length)
-							this._project.view.detach('frame', onFrame);
-					}
-				}
-			});
-	},
-
-	initialize: function(pointOrMatrix) {
-		this._id = ++Item._id;
-		if (!this._project)
-			paper.project.activeLayer.addChild(this);
-		if (!this._style)
-			this._style = PathStyle.create(this);
-		this.setStyle(this._project.getCurrentStyle());
-		this._matrix = pointOrMatrix !== undefined
-			? pointOrMatrix instanceof Matrix
-				? pointOrMatrix.clone()
-				: new Matrix().translate(Point.read(arguments, 0))
-			: new Matrix();
-	},
-
-	_changed: function(flags) {
-		if (flags & ChangeFlag.GEOMETRY) {
-			delete this._bounds;
-			delete this._position;
-		}
-		if (this._parent
-				&& (flags & (ChangeFlag.GEOMETRY | ChangeFlag.STROKE))) {
-			this._parent._clearBoundsCache();
-		}
-		if (flags & ChangeFlag.HIERARCHY) {
-			this._clearBoundsCache();
-		}
-		if (flags & ChangeFlag.APPEARANCE) {
-			this._project._needsRedraw();
-		}
-		if (this._parentSymbol)
-			this._parentSymbol._changed(flags);
-		if (this._project._changes) {
-			var entry = this._project._changesById[this._id];
-			if (entry) {
-				entry.flags |= flags;
-			} else {
-				entry = { item: this, flags: flags };
-				this._project._changesById[this._id] = entry;
-				this._project._changes.push(entry);
-			}
-		}
-	},
-
-	getId: function() {
-		return this._id;
-	},
-
-	getName: function() {
-		return this._name;
-	},
-
-	setName: function(name) {
-
-		if (this._name)
-			this._removeFromNamed();
-		this._name = name || undefined;
-		if (name && this._parent) {
-			var children = this._parent._children,
-				namedChildren = this._parent._namedChildren;
-			(namedChildren[name] = namedChildren[name] || []).push(this);
-			children[name] = this;
-		}
-		this._changed(ChangeFlag.ATTRIBUTE);
-	},
-
-	statics: {
-		_id: 0
-	}
-}, Base.each(['locked', 'visible', 'blendMode', 'opacity', 'guide'],
-	function(name) {
-		var part = Base.capitalize(name),
-			name = '_' + name;
-		this['get' + part] = function() {
-			return this[name];
-		};
-		this['set' + part] = function(value) {
-			if (value != this[name]) {
-				this[name] = value;
-				this._changed(name === '_locked'
-						? ChangeFlag.ATTRIBUTE : Change.ATTRIBUTE);
-			}
-		};
-}, {}), {
-
-	_locked: false,
-
-	_visible: true,
-
-	_blendMode: 'normal',
-
-	_opacity: 1,
-
-	_guide: false,
-
-	isSelected: function() {
-		if (this._children) {
-			for (var i = 0, l = this._children.length; i < l; i++)
-				if (this._children[i].isSelected())
-					return true;
-		}
-		return this._selected;
-	},
-
-	setSelected: function(selected ) {
-		if (this._children && !arguments[1]) {
-			for (var i = 0, l = this._children.length; i < l; i++)
-				this._children[i].setSelected(selected);
-		} else if ((selected = !!selected) != this._selected) {
-			this._selected = selected;
-			this._project._updateSelection(this);
-			this._changed(Change.ATTRIBUTE);
-		}
-	},
-
-	_selected: false,
-
-	isFullySelected: function() {
-		if (this._children && this._selected) {
-			for (var i = 0, l = this._children.length; i < l; i++)
-				if (!this._children[i].isFullySelected())
-					return false;
-			return true;
-		}
-		return this._selected;
-	},
-
-	setFullySelected: function(selected) {
-		if (this._children) {
-			for (var i = 0, l = this._children.length; i < l; i++)
-				this._children[i].setFullySelected(selected);
-		}
-		this.setSelected(selected, true);
-	},
-
-	isClipMask: function() {
-		return this._clipMask;
-	},
-
-	setClipMask: function(clipMask) {
-		if (this._clipMask != (clipMask = !!clipMask)) {
-			this._clipMask = clipMask;
-			if (clipMask) {
-				this.setFillColor(null);
-				this.setStrokeColor(null);
-			}
-			this._changed(Change.ATTRIBUTE);
-			if (this._parent)
-				this._parent._changed(ChangeFlag.CLIPPING);
-		}
-	},
-
-	_clipMask: false,
-
-	getPosition: function() {
-		var pos = this._position
-				|| (this._position = this.getBounds().getCenter(true));
-		return arguments[0] ? pos
-				: LinkedPoint.create(this, 'setPosition', pos.x, pos.y);
-	},
-
-	setPosition: function(point) {
-		this.translate(Point.read(arguments).subtract(this.getPosition(true)));
-	},
-
-	getMatrix: function() {
-		return this._matrix;
-	},
-
-	setMatrix: function(matrix) {
-		this._matrix.initialize(matrix);
-		this._changed(Change.GEOMETRY);
-	}
-}, Base.each(['bounds', 'strokeBounds', 'handleBounds', 'roughBounds'],
-function(name) {
-	this['get' + Base.capitalize(name)] = function() {
-		var type = this._boundsType,
-			bounds = this._getCachedBounds(
-				typeof type == 'string' ? type : type && type[name] || name,
-				arguments[0]);
-		return name == 'bounds' ? LinkedRectangle.create(this, 'setBounds',
-				bounds.x, bounds.y, bounds.width, bounds.height) : bounds;
-	};
-}, {
-	_getCachedBounds: function(type, matrix, cacheItem) {
-		var cache = (!matrix || matrix.equals(this._matrix)) && type;
-		if (cacheItem && this._parent) {
-			var id = cacheItem._id,
-				ref = this._parent._boundsCache
-					= this._parent._boundsCache || {
-				ids: {},
-				list: []
-			};
-			if (!ref.ids[id]) {
-				ref.list.push(cacheItem);
-				ref.ids[id] = cacheItem;
-			}
-		}
-		if (cache && this._bounds && this._bounds[cache])
-			return this._bounds[cache];
-		var identity = this._matrix.isIdentity();
-		matrix = !matrix || matrix.isIdentity()
-				? identity ? null : this._matrix
-				: identity ? matrix : matrix.clone().concatenate(this._matrix);
-		var bounds = this._getBounds(type, matrix, cache ? this : cacheItem);
-		if (cache) {
-			if (!this._bounds)
-				this._bounds = {};
-			this._bounds[cache] = bounds.clone();
-		}
-		return bounds;
-	},
-
-	_clearBoundsCache: function() {
-		if (this._boundsCache) {
-			for (var i = 0, list = this._boundsCache.list, l = list.length;
-					i < l; i++) {
-				var item = list[i];
-				delete item._bounds;
-				if (item != this && item._boundsCache)
-					item._clearBoundsCache();
-			}
-			delete this._boundsCache;
-		}
-	},
-
-	_getBounds: function(type, matrix, cacheItem) {
-		var children = this._children;
-		if (!children || children.length == 0)
-			return new Rectangle();
-		var x1 = Infinity,
-			x2 = -x1,
-			y1 = x1,
-			y2 = x2;
-		for (var i = 0, l = children.length; i < l; i++) {
-			var child = children[i];
-			if (child._visible) {
-				var rect = child._getCachedBounds(type, matrix, cacheItem);
-				x1 = Math.min(rect.x, x1);
-				y1 = Math.min(rect.y, y1);
-				x2 = Math.max(rect.x + rect.width, x2);
-				y2 = Math.max(rect.y + rect.height, y2);
-			}
-		}
-		return Rectangle.create(x1, y1, x2 - x1, y2 - y1);
-	},
-
-	setBounds: function(rect) {
-		rect = Rectangle.read(arguments);
-		var bounds = this.getBounds(),
-			matrix = new Matrix(),
-			center = rect.getCenter();
-		matrix.translate(center);
-		if (rect.width != bounds.width || rect.height != bounds.height) {
-			matrix.scale(
-					bounds.width != 0 ? rect.width / bounds.width : 1,
-					bounds.height != 0 ? rect.height / bounds.height : 1);
-		}
-		center = bounds.getCenter();
-		matrix.translate(-center.x, -center.y);
-		this.transform(matrix);
-	}
-
-}), {
-	getProject: function() {
-		return this._project;
-	},
-
-	_setProject: function(project) {
-		if (this._project != project) {
-			this._project = project;
-			if (this._children) {
-				for (var i = 0, l = this._children.length; i < l; i++) {
-					this._children[i]._setProject(project);
-				}
-			}
-		}
-	},
-
-	getLayer: function() {
-		var parent = this;
-		while (parent = parent._parent) {
-			if (parent instanceof Layer)
-				return parent;
-		}
-		return null;
-	},
-
-	getParent: function() {
-		return this._parent;
-	},
-
-	getChildren: function() {
-		return this._children;
-	},
-
-	setChildren: function(items) {
-		this.removeChildren();
-		this.addChildren(items);
-	},
-
-	getFirstChild: function() {
-		return this._children && this._children[0] || null;
-	},
-
-	getLastChild: function() {
-		return this._children && this._children[this._children.length - 1]
-				|| null;
-	},
-
-	getNextSibling: function() {
-		return this._parent && this._parent._children[this._index + 1] || null;
-	},
-
-	getPreviousSibling: function() {
-		return this._parent && this._parent._children[this._index - 1] || null;
-	},
-
-	getIndex: function() {
-		return this._index;
-	},
-
-	clone: function() {
-		return this._clone(new this.constructor());
-	},
-
-	_clone: function(copy) {
-		copy.setStyle(this._style);
-		if (this._children) {
-			for (var i = 0, l = this._children.length; i < l; i++)
-				copy.addChild(this._children[i].clone());
-		}
-		var keys = ['_locked', '_visible', '_blendMode', '_opacity',
-				'_clipMask', '_guide'];
-		for (var i = 0, l = keys.length; i < l; i++) {
-			var key = keys[i];
-			if (this.hasOwnProperty(key))
-				copy[key] = this[key];
-		}
-		copy._matrix.initialize(this._matrix);
-		copy.setSelected(this._selected);
-		if (this._name)
-			copy.setName(this._name);
-		return copy;
-	},
-
-	copyTo: function(itemOrProject) {
-		var copy = this.clone();
-		if (itemOrProject.layers) {
-			itemOrProject.activeLayer.addChild(copy);
-		} else {
-			itemOrProject.addChild(copy);
-		}
-		return copy;
-	},
-
-	rasterize: function(resolution) {
-		var bounds = this.getStrokeBounds(),
-			scale = (resolution || 72) / 72,
-			canvas = CanvasProvider.getCanvas(bounds.getSize().multiply(scale)),
-			ctx = canvas.getContext('2d'),
-			matrix = new Matrix().scale(scale).translate(-bounds.x, -bounds.y);
-		matrix.applyToContext(ctx);
-		this.draw(ctx, {});
-		var raster = new Raster(canvas);
-		raster.setBounds(bounds);
-		return raster;
-	},
-
-	hitTest: function(point, options) {
-		options = HitResult.getOptions(point, options);
-		point = options.point = this._matrix._inverseTransform(options.point);
-		if (!this._children && !this.getRoughBounds()
-				.expand(options.tolerance)._containsPoint(point))
-			return null;
-		if ((options.center || options.bounds) &&
-				!(this instanceof Layer && !this._parent)) {
-			var bounds = this.getBounds(),
-				that = this,
-				points = ['TopLeft', 'TopRight', 'BottomLeft', 'BottomRight',
-				'LeftCenter', 'TopCenter', 'RightCenter', 'BottomCenter'],
-				res;
-			function checkBounds(type, part) {
-				var pt = bounds['get' + part]();
-				if (point.getDistance(pt) < options.tolerance)
-					return new HitResult(type, that,
-							{ name: Base.hyphenate(part), point: pt });
-			}
-			if (options.center && (res = checkBounds('center', 'Center')))
-				return res;
-			if (options.bounds) {
-				for (var i = 0; i < 8; i++)
-					if (res = checkBounds('bounds', points[i]))
-						return res;
-			}
-		}
-
-		return this._children || !(options.guides && !this._guide
-				|| options.selected && !this._selected)
-					? this._hitTest(point, options) : null;
-	},
-
-	_hitTest: function(point, options) {
-		if (this._children) {
-			for (var i = this._children.length - 1; i >= 0; i--) {
-				var res = this._children[i].hitTest(point, options);
-				if (res) return res;
-			}
-		}
-	},
-
-	addChild: function(item) {
-		return this.insertChild(undefined, item);
-	},
-
-	insertChild: function(index, item) {
-		if (this._children) {
-			item._remove(false, true);
-			Base.splice(this._children, [item], index, 0);
-			item._parent = this;
-			item._setProject(this._project);
-			if (item._name)
-				item.setName(item._name);
-			this._changed(Change.HIERARCHY);
-			return true;
-		}
-		return false;
-	},
-
-	addChildren: function(items) {
-		for (var i = 0, l = items && items.length; i < l; i++)
-			this.insertChild(undefined, items[i]);
-	},
-
-	insertChildren: function(index, items) {
-		for (var i = 0, l = items && items.length; i < l; i++) {
-			if (this.insertChild(index, items[i]))
-				index++;
-		}
-	},
-
-	insertAbove: function(item) {
-		var index = item._index;
-		if (item._parent == this._parent && index < this._index)
-			 index++;
-		return item._parent.insertChild(index, this);
-	},
-
-	insertBelow: function(item) {
-		var index = item._index;
-		if (item._parent == this._parent && index > this._index)
-			 index--;
-		return item._parent.insertChild(index, this);
-	},
-
-	appendTop: function(item) {
-		return this.addChild(item);
-	},
-
-	appendBottom: function(item) {
-		return this.insertChild(0, item);
-	},
-
-	moveAbove: function(item) {
-		return this.insertAbove(item);
-	},
-
-	moveBelow: function(item) {
-		return this.insertBelow(item);
-	},
-
-	_removeFromNamed: function() {
-		var children = this._parent._children,
-			namedChildren = this._parent._namedChildren,
-			name = this._name,
-			namedArray = namedChildren[name],
-			index = namedArray ? namedArray.indexOf(this) : -1;
-		if (index == -1)
-			return;
-		if (children[name] == this)
-			delete children[name];
-		namedArray.splice(index, 1);
-		if (namedArray.length) {
-			children[name] = namedArray[namedArray.length - 1];
-		} else {
-			delete namedChildren[name];
-		}
-	},
-
-	_remove: function(deselect, notify) {
-		if (this._parent) {
-			if (deselect)
-				this.setSelected(false);
-			if (this._name)
-				this._removeFromNamed();
-			if (this._index != null)
-				Base.splice(this._parent._children, null, this._index, 1);
-			if (notify)
-				this._parent._changed(Change.HIERARCHY);
-			this._parent = null;
-			return true;
-		}
-		return false;
-	},
-
-	remove: function() {
-		return this._remove(true, true);
-	},
-
-	removeChildren: function(from, to) {
-		if (!this._children)
-			return null;
-		from = from || 0;
-		to = Base.pick(to, this._children.length);
-		var removed = Base.splice(this._children, null, from, to - from);
-		for (var i = removed.length - 1; i >= 0; i--)
-			removed[i]._remove(true, false);
-		if (removed.length > 0)
-			this._changed(Change.HIERARCHY);
-		return removed;
-	},
-
-	reverseChildren: function() {
-		if (this._children) {
-			this._children.reverse();
-			for (var i = 0, l = this._children.length; i < l; i++)
-				this._children[i]._index = i;
-			this._changed(Change.HIERARCHY);
-		}
-	},
-
-	isEditable: function() {
-		var item = this;
-		while (item) {
-			if (!item._visible || item._locked)
-				return false;
-			item = item._parent;
-		}
-		return true;
-	},
-
-	_getOrder: function(item) {
-		function getList(item) {
-			var list = [];
-			do {
-				list.unshift(item);
-			} while (item = item._parent)
-			return list;
-		}
-		var list1 = getList(this),
-			list2 = getList(item);
-		for (var i = 0, l = Math.min(list1.length, list2.length); i < l; i++) {
-			if (list1[i] != list2[i]) {
-				return list1[i]._index < list2[i]._index ? 1 : -1;
-			}
-		}
-		return 0;
-	},
-
-	hasChildren: function() {
-		return this._children && this._children.length > 0;
-	},
-
-	isAbove: function(item) {
-		return this._getOrder(item) == -1;
-	},
-
-	isBelow: function(item) {
-		return this._getOrder(item) == 1;
-	},
-
-	isParent: function(item) {
-		return this._parent == item;
-	},
-
-	isChild: function(item) {
-		return item && item._parent == this;
-	},
-
-	isDescendant: function(item) {
-		var parent = this;
-		while (parent = parent._parent) {
-			if (parent == item)
-				return true;
-		}
-		return false;
-	},
-
-	isAncestor: function(item) {
-		return item ? item.isDescendant(this) : false;
-	},
-
-	isGroupedWith: function(item) {
-		var parent = this._parent;
-		while (parent) {
-			if (parent._parent
-				&& (parent instanceof Group || parent instanceof CompoundPath)
-				&& item.isDescendant(parent))
-					return true;
-			parent = parent._parent;
-		}
-		return false;
-	},
-
-	scale: function(hor, ver , center, apply) {
-		if (arguments.length < 2 || typeof ver === 'object') {
-			apply = center;
-			center = ver;
-			ver = hor;
-		}
-		return this.transform(new Matrix().scale(hor, ver,
-				center || this.getPosition(true)), apply);
-	},
-
-	translate: function(delta, apply) {
-		var mx = new Matrix();
-		return this.transform(mx.translate.apply(mx, arguments), apply);
-	},
-
-	rotate: function(angle, center, apply) {
-		return this.transform(new Matrix().rotate(angle,
-				center || this.getPosition(true)), apply);
-	},
-
-	shear: function(hor, ver, center, apply) {
-		if (arguments.length < 2 || typeof ver === 'object') {
-			apply = center;
-			center = ver;
-			ver = hor;
-		}
-		return this.transform(new Matrix().shear(hor, ver,
-				center || this.getPosition(true)), apply);
-	},
-
-	transform: function(matrix, apply) {
-		var bounds = this._bounds,
-			position = this._position;
-		this._matrix.preConcatenate(matrix);
-		if (this._transform)
-			this._transform(matrix);
-		if (apply)
-			this.apply();
-		this._changed(Change.GEOMETRY);
-		if (bounds && matrix.getRotation() % 90 === 0) {
-			for (var key in bounds) {
-				var rect = bounds[key];
-				matrix._transformBounds(rect, rect);
-			}
-			var type = this._boundsType,
-				rect = bounds[type && type.bounds || 'bounds'];
-			if (rect)
-				this._position = rect.getCenter(true);
-			this._bounds = bounds;
-		} else if (position) {
-			this._position = matrix._transformPoint(position, position);
-		}
-		return this;
-	},
-
-	apply: function() {
-		if (this._apply(this._matrix)) {
-			this._matrix.setIdentity();
-		}
-	},
-
-	_apply: function(matrix) {
-		if (this._children) {
-			for (var i = 0, l = this._children.length; i < l; i++) {
-				var child = this._children[i];
-				child.transform(matrix);
-				child.apply();
-			}
-			return true;
-		}
-	},
-
-	fitBounds: function(rectangle, fill) {
-		rectangle = Rectangle.read(arguments);
-		var bounds = this.getBounds(),
-			itemRatio = bounds.height / bounds.width,
-			rectRatio = rectangle.height / rectangle.width,
-			scale = (fill ? itemRatio > rectRatio : itemRatio < rectRatio)
-					? rectangle.width / bounds.width
-					: rectangle.height / bounds.height,
-			newBounds = new Rectangle(new Point(),
-					Size.create(bounds.width * scale, bounds.height * scale));
-		newBounds.setCenter(rectangle.getCenter());
-		this.setBounds(newBounds);
-	},
-
-	toString: function() {
-		return (this.constructor._name || 'Item') + (this._name
-				? " '" + this._name + "'"
-				: ' @' + this._id);
-	},
-
-	_setStyles: function(ctx) {
-		var style = this._style,
-			width = style._strokeWidth,
-			join = style._strokeJoin,
-			cap = style._strokeCap,
-			limit = style._miterLimit,
-			fillColor = style._fillColor,
-			strokeColor = style._strokeColor;
-		if (width != null) ctx.lineWidth = width;
-		if (join) ctx.lineJoin = join;
-		if (cap) ctx.lineCap = cap;
-		if (limit) ctx.miterLimit = limit;
-		if (fillColor) ctx.fillStyle = fillColor.getCanvasStyle(ctx);
-		if (strokeColor) ctx.strokeStyle = strokeColor.getCanvasStyle(ctx);
-		if (!fillColor || !strokeColor)
-			ctx.globalAlpha = this._opacity;
-	},
-
-	statics: {
-		drawSelectedBounds: function(bounds, ctx, matrix) {
-			var coords = matrix._transformCorners(bounds);
-			ctx.beginPath();
-			for (var i = 0; i < 8; i++)
-				ctx[i == 0 ? 'moveTo' : 'lineTo'](coords[i], coords[++i]);
-			ctx.closePath();
-			ctx.stroke();
-			for (var i = 0; i < 8; i++) {
-				ctx.beginPath();
-				ctx.rect(coords[i] - 2, coords[++i] - 2, 4, 4);
-				ctx.fill();
-			}
-		},
-
-		draw: function(item, ctx, param) {
-			if (!item._visible || item._opacity == 0)
-				return;
-			var tempCanvas, parentCtx,
-			 	itemOffset, prevOffset;
-			if (item._blendMode !== 'normal' || item._opacity < 1
-					&& !(item._segments
-						&& (!item.getFillColor() || !item.getStrokeColor()))) {
-				var bounds = item.getStrokeBounds();
-				if (!bounds.width || !bounds.height)
-					return;
-				prevOffset = param.offset;
-				parentCtx = ctx;
-				itemOffset = param.offset = bounds.getTopLeft().floor();
-				tempCanvas = CanvasProvider.getCanvas(
-						bounds.getSize().ceil().add(Size.create(1, 1)));
-				ctx = tempCanvas.getContext('2d');
-			}
-			if (!param.clipping)
-				ctx.save();
-			if (tempCanvas)
-				ctx.translate(-itemOffset.x, -itemOffset.y);
-			item._matrix.applyToContext(ctx);
-			item.draw(ctx, param);
-			if (!param.clipping)
-				ctx.restore();
-			if (tempCanvas) {
-				param.offset = prevOffset;
-				if (item._blendMode !== 'normal') {
-					BlendMode.process(item._blendMode, ctx, parentCtx,
-						item._opacity, itemOffset.subtract(prevOffset));
-				} else {
-					parentCtx.save();
-					parentCtx.globalAlpha = item._opacity;
-					parentCtx.drawImage(tempCanvas, itemOffset.x, itemOffset.y);
-					parentCtx.restore();
-				}
-				CanvasProvider.returnCanvas(tempCanvas);
-			}
-		}
-	}
-}, Base.each(['down', 'drag', 'up', 'move'], function(name) {
-	this['removeOn' + Base.capitalize(name)] = function() {
-		var hash = {};
-		hash[name] = true;
-		return this.removeOn(hash);
-	};
-}, {
-
-	removeOn: function(obj) {
-		for (var name in obj) {
-			if (obj[name]) {
-				var key = 'mouse' + name,
-					sets = Tool._removeSets = Tool._removeSets || {};
-				sets[key] = sets[key] || {};
-				sets[key][this._id] = this;
-			}
-		}
-		return this;
-	}
-}));
-
-var Group = this.Group = Item.extend({
-	initialize: function(items) {
-		this.base();
-		this._children = [];
-		this._namedChildren = {};
-		this.addChildren(!items || !Array.isArray(items)
-				|| typeof items[0] !== 'object' ? arguments : items);
-	},
-
-	_changed: function(flags) {
-		Item.prototype._changed.call(this, flags);
-		if (flags & (ChangeFlag.HIERARCHY | ChangeFlag.CLIPPING)) {
-			delete this._clipItem;
-		}
-	},
-
-	_getClipItem: function() {
-		if (this._clipItem !== undefined)
-			return this._clipItem;
-		for (var i = 0, l = this._children.length; i < l; i++) {
-			var child = this._children[i];
-			if (child._clipMask)
-				return this._clipItem = child;
-		}
-		return this._clipItem = null;
-	},
-
-	isClipped: function() {
-		return !!this._getClipItem();
-	},
-
-	setClipped: function(clipped) {
-		var child = this.getFirstChild();
-		if (child)
-			child.setClipMask(clipped);
-		return this;
-	},
-
-	draw: function(ctx, param) {
-		var clipItem = this._getClipItem();
-		if (clipItem) {
-			param.clipping = true;
-			Item.draw(clipItem, ctx, param);
-			delete param.clipping;
-		}
-		for (var i = 0, l = this._children.length; i < l; i++) {
-			var item = this._children[i];
-			if (item != clipItem)
-				Item.draw(item, ctx, param);
-		}
-	}
-});
-
-var Layer = this.Layer = Group.extend({
-	initialize: function(items) {
-		this._project = paper.project;
-		this._index = this._project.layers.push(this) - 1;
-		this.base.apply(this, arguments);
-		this.activate();
-	},
-
-	_remove: function(deselect, notify) {
-		if (this._parent)
-			return this.base(deselect, notify);
-		if (this._index != null) {
-			if (deselect)
-				this.setSelected(false);
-			Base.splice(this._project.layers, null, this._index, 1);
-			this._project._needsRedraw();
-			return true;
-		}
-		return false;
-	},
-
-	getNextSibling: function() {
-		return this._parent ? this.base()
-				: this._project.layers[this._index + 1] || null;
-	},
-
-	getPreviousSibling: function() {
-		return this._parent ? this.base()
-				: this._project.layers[this._index - 1] || null;
-	},
-
-	activate: function() {
-		this._project.activeLayer = this;
-	}
-}, new function () {
-	function insert(above) {
-		return function(item) {
-			if (item instanceof Layer && !item._parent
-						&& this._remove(false, true)) {
-				Base.splice(item._project.layers, [this],
-						item._index + (above ? 1 : -1), 0);
-				this._setProject(item._project);
-				return true;
-			}
-			return this.base(item);
-		};
-	}
-
-	return {
-		insertAbove: insert(true),
-
-		insertBelow: insert(false)
-	};
-});
-
-var PlacedItem = this.PlacedItem = Item.extend({
-	_boundsType: { bounds: 'strokeBounds' }
-});
-
-var Raster = this.Raster = PlacedItem.extend({
-	_boundsType: 'bounds',
-
-	initialize: function(object, pointOrMatrix) {
-		this.base(pointOrMatrix);
-		if (object.getContext) {
-			this.setCanvas(object);
-		} else {
-			if (typeof object === 'string')
-				object = document.getElementById(object);
-			this.setImage(object);
-		}
-	},
-
-	clone: function() {
-		var image = this._image;
-		if (!image) {
-			image = CanvasProvider.getCanvas(this._size);
-			image.getContext('2d').drawImage(this._canvas, 0, 0);
-		}
-		var copy = new Raster(image);
-		return this._clone(copy);
-	},
-
-	getSize: function() {
-		return this._size;
-	},
-
-	setSize: function() {
-		var size = Size.read(arguments),
-			image = this.getImage();
-		this.setCanvas(CanvasProvider.getCanvas(size));
-		this.getContext(true).drawImage(image, 0, 0, size.width, size.height);
-	},
-
-	getWidth: function() {
-		return this._size.width;
-	},
-
-	getHeight: function() {
-		return this._size.height;
-	},
-
-	getPpi: function() {
-		var matrix = this._matrix,
-			orig = new Point(0, 0).transform(matrix),
-			u = new Point(1, 0).transform(matrix).subtract(orig),
-			v = new Point(0, 1).transform(matrix).subtract(orig);
-		return Size.create(
-			72 / u.getLength(),
-			72 / v.getLength()
-		);
-	},
-
-	getContext: function() {
-		if (!this._context)
-			this._context = this.getCanvas().getContext('2d');
-		if (arguments[0])
-			this._changed(Change.PIXELS);
-		return this._context;
-	},
-
-	setContext: function(context) {
-		this._context = context;
-	},
-
-	getCanvas: function() {
-		if (!this._canvas) {
-			this._canvas = CanvasProvider.getCanvas(this._size);
-			if (this._image)
-				this.getContext(true).drawImage(this._image, 0, 0);
-		}
-		return this._canvas;
-	},
-
-	setCanvas: function(canvas) {
-		if (this._canvas)
-			CanvasProvider.returnCanvas(this._canvas);
-		this._canvas = canvas;
-		this._size = Size.create(canvas.width, canvas.height);
-		this._image = null;
-		this._context = null;
-		this._changed(Change.GEOMETRY | Change.PIXELS);
-	},
-
-	getImage: function() {
-		return this._image || this.getCanvas();
-	},
-
-	setImage: function(image) {
-		if (this._canvas)
-			CanvasProvider.returnCanvas(this._canvas);
-		this._image = image;
-		this._size = Size.create(image.naturalWidth, image.naturalHeight);
-		this._canvas = null;
-		this._context = null;
-		this._changed(Change.GEOMETRY);
-	},
-
-	getSubImage: function(rect) {
-		rect = Rectangle.read(arguments);
-		var canvas = CanvasProvider.getCanvas(rect.getSize());
-		canvas.getContext('2d').drawImage(this.getCanvas(), rect.x, rect.y,
-				canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
-		return canvas;
-	},
-
-	drawImage: function(image, point) {
-		point = Point.read(arguments, 1);
-		this.getContext(true).drawImage(image, point.x, point.y);
-	},
-
-	getAverageColor: function(object) {
-		var bounds, path;
-		if (!object) {
-			bounds = this.getBounds();
-		} else if (object instanceof PathItem) {
-			path = object;
-			bounds = object.getBounds();
-		} else if (object.width) {
-			bounds = new Rectangle(object);
-		} else if (object.x) {
-			bounds = Rectangle.create(object.x - 0.5, object.y - 0.5, 1, 1);
-		}
-		var sampleSize = 32,
-			width = Math.min(bounds.width, sampleSize),
-			height = Math.min(bounds.height, sampleSize);
-		var ctx = Raster._sampleContext;
-		if (!ctx) {
-			ctx = Raster._sampleContext = CanvasProvider.getCanvas(
-					new Size(sampleSize)).getContext('2d');
-		} else {
-			ctx.clearRect(0, 0, sampleSize, sampleSize);
-		}
-		ctx.save();
-		ctx.scale(width / bounds.width, height / bounds.height);
-		ctx.translate(-bounds.x, -bounds.y);
-		if (path)
-			path.draw(ctx, { clip: true });
-		this._matrix.applyToContext(ctx);
-		ctx.drawImage(this._canvas || this._image,
-				-this._size.width / 2, -this._size.height / 2);
-		ctx.restore();
-		var pixels = ctx.getImageData(0.5, 0.5, Math.ceil(width),
-				Math.ceil(height)).data,
-			channels = [0, 0, 0],
-			total = 0;
-		for (var i = 0, l = pixels.length; i < l; i += 4) {
-			var alpha = pixels[i + 3];
-			total += alpha;
-			alpha /= 255;
-			channels[0] += pixels[i] * alpha;
-			channels[1] += pixels[i + 1] * alpha;
-			channels[2] += pixels[i + 2] * alpha;
-		}
-		for (var i = 0; i < 3; i++)
-			channels[i] /= total;
-		return total ? Color.read(channels) : null;
-	},
-
-	getPixel: function(point) {
-		point = Point.read(arguments);
-		var pixels = this.getContext().getImageData(point.x, point.y, 1, 1).data,
-			channels = new Array(4);
-		for (var i = 0; i < 4; i++)
-			channels[i] = pixels[i] / 255;
-		return RgbColor.read(channels);
-	},
-
-	setPixel: function(point, color) {
-		var hasPoint = arguments.length == 2;
-		point = Point.read(arguments, 0, hasPoint ? 1 : 2);
-		color = Color.read(arguments, hasPoint ? 1 : 2);
-		var ctx = this.getContext(true),
-			imageData = ctx.createImageData(1, 1),
-			alpha = color.getAlpha();
-		imageData.data[0] = color.getRed() * 255;
-		imageData.data[1] = color.getGreen() * 255;
-		imageData.data[2] = color.getBlue() * 255;
-		imageData.data[3] = alpha != null ? alpha * 255 : 255;
-		ctx.putImageData(imageData, point.x, point.y);
-	},
-
-	createData: function(size) {
-		size = Size.read(arguments);
-		return this.getContext().createImageData(size.width, size.height);
-	},
-
-	getData: function(rect) {
-		rect = Rectangle.read(arguments);
-		if (rect.isEmpty())
-			rect = new Rectangle(this.getSize());
-		return this.getContext().getImageData(rect.x, rect.y,
-				rect.width, rect.height);
-	},
-
-	setData: function(data, point) {
-		point = Point.read(arguments, 1);
-		this.getContext(true).putImageData(data, point.x, point.y);
-	},
-
-	_getBounds: function(type, matrix) {
-		var rect = new Rectangle(this._size).setCenter(0, 0);
-		return matrix ? matrix._transformBounds(rect) : rect;
-	},
-
-	_hitTest: function(point, options) {
-		if (point.isInside(this._getBounds())) {
-			var that = this;
-			return new HitResult('pixel', that, {
-				offset: point.add(that._size.divide(2)).round(),
-				getColor: function() {
-					return that.getPixel(this.offset);
-				}
-			});
-		}
-	},
-
-	draw: function(ctx, param) {
-		ctx.drawImage(this._canvas || this._image,
-				-this._size.width / 2, -this._size.height / 2);
-	},
-
-	drawSelected: function(ctx, matrix) {
-		Item.drawSelectedBounds(new Rectangle(this._size).setCenter(0, 0), ctx,
-				matrix);
-	}
-});
-
-var PlacedSymbol = this.PlacedSymbol = PlacedItem.extend({
-	initialize: function(symbol, pointOrMatrix) {
-		this.base(pointOrMatrix);
-		this.setSymbol(symbol instanceof Symbol ? symbol : new Symbol(symbol));
-	},
-
-	getSymbol: function() {
-		return this._symbol;
-	},
-
-	setSymbol: function(symbol) {
-		if (this._symbol)
-			delete this._symbol._instances[this._id];
-		this._symbol = symbol;
-		symbol._instances[this._id] = this;
-	},
-
-	clone: function() {
-		return this._clone(new PlacedSymbol(this.symbol, this._matrix.clone()));
-	},
-
-	_getBounds: function(type, matrix) {
-		return this.symbol._definition._getCachedBounds(type, matrix);
-	},
-
-	draw: function(ctx, param) {
-		Item.draw(this.symbol._definition, ctx, param);
-	},
-
-	drawSelected: function(ctx, matrix) {
-		Item.drawSelectedBounds(this.symbol._definition.getBounds(), ctx,
-				matrix);
-	}
-
-});
-
-HitResult = Base.extend({
-	initialize: function(type, item, values) {
-		this.type = type;
-		this.item = item;
-		if (values)
-			this.inject(values);
-	},
-
-	statics: {
-		getOptions: function(point, options) {
-			return options && options._merged ? options : Base.merge({
-				point: Point.read(arguments, 0, 1),
-				type: null,
-				tolerance: 2,
-				fill: !options,
-				stroke: !options,
-				segments: !options,
-				handles: false,
-				ends: false,
-				center: false,
-				bounds: false,
-				guides: false,
-				selected: false,
-				_merged: true
-			}, options);
-		}
-	}
-});
-
-var Segment = this.Segment = Base.extend({
-	initialize: function(arg0, arg1, arg2, arg3, arg4, arg5) {
-		var count = arguments.length,
-			createPoint = SegmentPoint.create,
-			point, handleIn, handleOut;
-		if (count == 0) {
-		} else if (count == 1) {
-			if (arg0.point) {
-				point = arg0.point;
-				handleIn = arg0.handleIn;
-				handleOut = arg0.handleOut;
-			} else {
-				point = arg0;
-			}
-		} else if (count < 6) {
-			if (count == 2 && arg1.x === undefined) {
-				point = [ arg0, arg1 ];
-			} else {
-				point = arg0;
-				handleIn = arg1;
-				handleOut = arg2;
-			}
-		} else if (count == 6) {
-			point = [ arg0, arg1 ];
-			handleIn = [ arg2, arg3 ];
-			handleOut = [ arg4, arg5 ];
-		}
-		createPoint(this, '_point', point);
-		createPoint(this, '_handleIn', handleIn);
-		createPoint(this, '_handleOut', handleOut);
-	},
-
-	_changed: function(point) {
-		if (!this._path)
-			return;
-		var curve = this._path._curves && this.getCurve(), other;
-		if (curve) {
-			curve._changed();
-			if (other = (curve[point == this._point
-					|| point == this._handleIn && curve._segment1 == this
-					? 'getPrevious' : 'getNext']())) {
-				other._changed();
-			}
-		}
-		this._path._changed(Change.GEOMETRY);
-	},
-
-	getPoint: function() {
-		return this._point;
-	},
-
-	setPoint: function(point) {
-		point = Point.read(arguments);
-		this._point.set(point.x, point.y);
-	},
-
-	getHandleIn: function() {
-		return this._handleIn;
-	},
-
-	setHandleIn: function(point) {
-		point = Point.read(arguments);
-		this._handleIn.set(point.x, point.y);
-	},
-
-	getHandleOut: function() {
-		return this._handleOut;
-	},
-
-	setHandleOut: function(point) {
-		point = Point.read(arguments);
-		this._handleOut.set(point.x, point.y);
-	},
-
-	_isSelected: function(point) {
-		var state = this._selectionState;
-		return point == this._point ? !!(state & SelectionState.POINT)
-			: point == this._handleIn ? !!(state & SelectionState.HANDLE_IN)
-			: point == this._handleOut ? !!(state & SelectionState.HANDLE_OUT)
-			: false;
-	},
-
-	_setSelected: function(point, selected) {
-		var path = this._path,
-			selected = !!selected, 
-			state = this._selectionState || 0,
-			selection = [
-				!!(state & SelectionState.POINT),
-				!!(state & SelectionState.HANDLE_IN),
-				!!(state & SelectionState.HANDLE_OUT)
-			];
-		if (point == this._point) {
-			if (selected) {
-				selection[1] = selection[2] = false;
-			} else {
-				var previous = this.getPrevious(),
-					next = this.getNext();
-				selection[1] = previous && (previous._point.isSelected()
-						|| previous._handleOut.isSelected());
-				selection[2] = next && (next._point.isSelected()
-						|| next._handleIn.isSelected());
-			}
-			selection[0] = selected;
-		} else {
-			var index = point == this._handleIn ? 1 : 2;
-			if (selection[index] != selected) {
-				if (selected)
-					selection[0] = false;
-				selection[index] = selected;
-				path._changed(Change.ATTRIBUTE);
-			}
-		}
-		this._selectionState = (selection[0] ? SelectionState.POINT : 0)
-				| (selection[1] ? SelectionState.HANDLE_IN : 0)
-				| (selection[2] ? SelectionState.HANDLE_OUT : 0);
-		if (path && state != this._selectionState)
-			path._updateSelection(this, state, this._selectionState);
-	},
-
-	isSelected: function() {
-		return this._isSelected(this._point);
-	},
-
-	setSelected: function(selected) {
-		this._setSelected(this._point, selected);
-	},
-
-	getIndex: function() {
-		return this._index !== undefined ? this._index : null;
-	},
-
-	getPath: function() {
-		return this._path || null;
-	},
-
-	getCurve: function() {
-		if (this._path) {
-			var index = this._index;
-			if (!this._path._closed && index == this._path._segments.length - 1)
-				index--;
-			return this._path.getCurves()[index] || null;
-		}
-		return null;
-	},
-
-	getNext: function() {
-		var segments = this._path && this._path._segments;
-		return segments && (segments[this._index + 1]
-				|| this._path._closed && segments[0]) || null;
-	},
-
-	getPrevious: function() {
-		var segments = this._path && this._path._segments;
-		return segments && (segments[this._index - 1]
-				|| this._path._closed && segments[segments.length - 1]) || null;
-	},
-
-	reverse: function() {
-		return new Segment(this._point, this._handleOut, this._handleIn);
-	},
-
-	remove: function() {
-		return this._path ? !!this._path.removeSegment(this._index) : false;
-	},
-
-	clone: function() {
-		return new Segment(this._point, this._handleIn, this._handleOut);
-	},
-
-	equals: function(segment) {
-		return segment == this || segment
-				&& this._point.equals(segment._point)
-				&& this._handleIn.equals(segment._handleIn)
-				&& this._handleOut.equals(segment._handleOut);
-	},
-
-	toString: function() {
-		var parts = [ 'point: ' + this._point ];
-		if (!this._handleIn.isZero())
-			parts.push('handleIn: ' + this._handleIn);
-		if (!this._handleOut.isZero())
-			parts.push('handleOut: ' + this._handleOut);
-		return '{ ' + parts.join(', ') + ' }';
-	},
-
-	_transformCoordinates: function(matrix, coords, change) {
-		var point = this._point,
-			handleIn =  !change || !this._handleIn.isZero()
-					? this._handleIn : null,
-			handleOut = !change || !this._handleOut.isZero()
-					? this._handleOut : null,
-			x = point._x,
-			y = point._y,
-			i = 2;
-		coords[0] = x;
-		coords[1] = y;
-		if (handleIn) {
-			coords[i++] = handleIn._x + x;
-			coords[i++] = handleIn._y + y;
-		}
-		if (handleOut) {
-			coords[i++] = handleOut._x + x;
-			coords[i++] = handleOut._y + y;
-		}
-		if (!matrix)
-			return;
-		matrix._transformCoordinates(coords, 0, coords, 0, i / 2);
-		x = coords[0];
-		y = coords[1];
-		if (change) {
-			point._x = x;
-			point._y = y;
-			i  = 2;
-			if (handleIn) {
-				handleIn._x = coords[i++] - x;
-				handleIn._y = coords[i++] - y;
-			}
-			if (handleOut) {
-				handleOut._x = coords[i++] - x;
-				handleOut._y = coords[i++] - y;
-			}
-		} else {
-			if (!handleIn) {
-				coords[i++] = x;
-				coords[i++] = y;
-			}
-			if (!handleOut) {
-				coords[i++] = x;
-				coords[i++] = y;
-			}
-		}
-	}
-});
-
-var SegmentPoint = Point.extend({
-	set: function(x, y) {
-		this._x = x;
-		this._y = y;
-		this._owner._changed(this);
-		return this;
-	},
-
-	getX: function() {
-		return this._x;
-	},
-
-	setX: function(x) {
-		this._x = x;
-		this._owner._changed(this);
-	},
-
-	getY: function() {
-		return this._y;
-	},
-
-	setY: function(y) {
-		this._y = y;
-		this._owner._changed(this);
-	},
-
-	isZero: function() {
-		return this._x == 0 && this._y == 0;
-	},
-
-	setSelected: function(selected) {
-		this._owner._setSelected(this, selected);
-	},
-
-	isSelected: function() {
-		return this._owner._isSelected(this);
-	},
-
-	statics: {
-		create: function(segment, key, pt) {
-			var point = new SegmentPoint(SegmentPoint.dont),
-				x, y, selected;
-			if (!pt) {
-				x = y = 0;
-			} else if ((x = pt[0]) !== undefined) { 
-				y = pt[1];
-			} else {
-				if ((x = pt.x) === undefined) {
-					pt = Point.read(arguments, 2, 1);
-					x = pt.x;
-				}
-				y = pt.y;
-				selected = pt.selected;
-			}
-			point._x = x;
-			point._y = y;
-			point._owner = segment;
-			segment[key] = point;
-			if (selected)
-				point.setSelected(true);
-			return point;
-		}
-	}
-});
-
-var SelectionState = {
-	HANDLE_IN: 1,
-	HANDLE_OUT: 2,
-	POINT: 4
-};
-
-var Curve = this.Curve = Base.extend({
-	initialize: function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7) {
-		var count = arguments.length;
-		if (count == 0) {
-			this._segment1 = new Segment();
-			this._segment2 = new Segment();
-		} else if (count == 1) {
-			this._segment1 = new Segment(arg0.segment1);
-			this._segment2 = new Segment(arg0.segment2);
-		} else if (count == 2) {
-			this._segment1 = new Segment(arg0);
-			this._segment2 = new Segment(arg1);
-		} else if (count == 4) {
-			this._segment1 = new Segment(arg0, null, arg1);
-			this._segment2 = new Segment(arg3, arg2, null);
-		} else if (count == 8) {
-			var p1 = Point.create(arg0, arg1),
-				p2 = Point.create(arg6, arg7);
-			this._segment1 = new Segment(p1, null,
-					Point.create(arg2, arg3).subtract(p1));
-			this._segment2 = new Segment(p2,
-					Point.create(arg4, arg5).subtract(p2), null);
-		}
-	},
-
-	_changed: function() {
-		delete this._length;
-	},
-
-	getPoint1: function() {
-		return this._segment1._point;
-	},
-
-	setPoint1: function(point) {
-		point = Point.read(arguments);
-		this._segment1._point.set(point.x, point.y);
-	},
-
-	getPoint2: function() {
-		return this._segment2._point;
-	},
-
-	setPoint2: function(point) {
-		point = Point.read(arguments);
-		this._segment2._point.set(point.x, point.y);
-	},
-
-	getHandle1: function() {
-		return this._segment1._handleOut;
-	},
-
-	setHandle1: function(point) {
-		point = Point.read(arguments);
-		this._segment1._handleOut.set(point.x, point.y);
-	},
-
-	getHandle2: function() {
-		return this._segment2._handleIn;
-	},
-
-	setHandle2: function(point) {
-		point = Point.read(arguments);
-		this._segment2._handleIn.set(point.x, point.y);
-	},
-
-	getSegment1: function() {
-		return this._segment1;
-	},
-
-	getSegment2: function() {
-		return this._segment2;
-	},
-
-	getPath: function() {
-		return this._path;
-	},
-
-	getIndex: function() {
-		return this._segment1._index;
-	},
-
-	getNext: function() {
-		var curves = this._path && this._path._curves;
-		return curves && (curves[this._segment1._index + 1]
-				|| this._path._closed && curves[0]) || null;
-	},
-
-	getPrevious: function() {
-		var curves = this._path && this._path._curves;
-		return curves && (curves[this._segment1._index - 1]
-				|| this._path._closed && curves[curves.length - 1]) || null;
-	},
-
-	isSelected: function() {
-		return this.getHandle1().isSelected() && this.getHandle2().isSelected();
-	},
-
-	setSelected: function(selected) {
-		this.getHandle1().setSelected(selected);
-		this.getHandle2().setSelected(selected);
-	},
-
-	getValues: function() {
-		return Curve.getValues(this._segment1, this._segment2);
-	},
-
-	getPoints: function() {
-		var coords = this.getValues(),
-			points = [];
-		for (var i = 0; i < 8; i += 2)
-			points.push(Point.create(coords[i], coords[i + 1]));
-		return points;
-	},
-
-	getLength: function() {
-		var from = arguments[0],
-			to = arguments[1];
-			fullLength = arguments.length == 0 || from == 0 && to == 1;
-		if (fullLength && this._length != null)
-			return this._length;
-		var length = Curve.getLength(this.getValues(), from, to);
-		if (fullLength)
-			this._length = length;
-		return length;
-	},
-
-	getPart: function(from, to) {
-		return new Curve(Curve.getPart(this.getValues(), from, to));
-	},
-
-	isLinear: function() {
-		return this._segment1._handleOut.isZero()
-				&& this._segment2._handleIn.isZero();
-	},
-
-	getParameterAt: function(offset, start) {
-		return Curve.getParameterAt(this.getValues(), offset,
-				start !== undefined ? start : offset < 0 ? 1 : 0);
-	},
-
-	getPoint: function(parameter) {
-		return Curve.evaluate(this.getValues(), parameter, 0);
-	},
-
-	getTangent: function(parameter) {
-		return Curve.evaluate(this.getValues(), parameter, 1);
-	},
-
-	getNormal: function(parameter) {
-		return Curve.evaluate(this.getValues(), parameter, 2);
-	},
-
-	getParameter: function(point) {
-		point = Point.read(point);
-		return Curve.getParameter(this.getValues(), point.x, point.y);
-	},
-
-	getCrossings: function(point, roots) {
-		var vals = this.getValues(),
-			num = Curve.solveCubic(vals, 1, point.y, roots),
-			crossings = 0;
-		for (var i = 0; i < num; i++) {
-			var t = roots[i];
-			if (t >= 0 && t < 1 && Curve.evaluate(vals, t, 0).x > point.x) {
-				if (t < Numerical.TOLERANCE && Curve.evaluate(
-							this.getPrevious().getValues(), 1, 1).y
-						* Curve.evaluate(vals, t, 1).y >= 0)
-					continue;
-				crossings++;
-			}
-		}
-		return crossings;
-	},
-
-	reverse: function() {
-		return new Curve(this._segment2.reverse(), this._segment1.reverse());
-	},
-
-	clone: function() {
-		return new Curve(this._segment1, this._segment2);
-	},
-
-	toString: function() {
-		var parts = [ 'point1: ' + this._segment1._point ];
-		if (!this._segment1._handleOut.isZero())
-			parts.push('handle1: ' + this._segment1._handleOut);
-		if (!this._segment2._handleIn.isZero())
-			parts.push('handle2: ' + this._segment2._handleIn);
-		parts.push('point2: ' + this._segment2._point);
-		return '{ ' + parts.join(', ') + ' }';
-	},
-
-	statics: {
-		create: function(path, segment1, segment2) {
-			var curve = new Curve(Curve.dont);
-			curve._path = path;
-			curve._segment1 = segment1;
-			curve._segment2 = segment2;
-			return curve;
-		},
-
-		getValues: function(segment1, segment2) {
-			var p1 = segment1._point,
-				h1 = segment1._handleOut,
-				h2 = segment2._handleIn,
-				p2 = segment2._point;
-    		return [
-    			p1._x, p1._y,
-    			p1._x + h1._x, p1._y + h1._y,
-    			p2._x + h2._x, p2._y + h2._y,
-    			p2._x, p2._y
-    		];
-		},
-
-		evaluate: function(v, t, type) {
-			var p1x = v[0], p1y = v[1],
-				c1x = v[2], c1y = v[3],
-				c2x = v[4], c2y = v[5],
-				p2x = v[6], p2y = v[7],
-				x, y;
-
-			if (type == 0 && (t == 0 || t == 1)) {
-				x = t == 0 ? p1x : p2x;
-				y = t == 0 ? p1y : p2y;
-			} else {
-				var tMin = Numerical.TOLERANCE;
-				if (t < tMin && c1x == p1x && c1y == p1y)
-					t = tMin;
-				else if (t > 1 - tMin && c2x == p2x && c2y == p2y)
-					t = 1 - tMin;
-				var cx = 3 * (c1x - p1x),
-					bx = 3 * (c2x - c1x) - cx,
-					ax = p2x - p1x - cx - bx,
-
-					cy = 3 * (c1y - p1y),
-					by = 3 * (c2y - c1y) - cy,
-					ay = p2y - p1y - cy - by;
-
-				switch (type) {
-				case 0: 
-					x = ((ax * t + bx) * t + cx) * t + p1x;
-					y = ((ay * t + by) * t + cy) * t + p1y;
-					break;
-				case 1: 
-				case 2: 
-					x = (3 * ax * t + 2 * bx) * t + cx;
-					y = (3 * ay * t + 2 * by) * t + cy;
-					break;
-				}
-			}
-			return type == 2 ? new Point(y, -x) : new Point(x, y);
-		},
-
-		subdivide: function(v, t) {
-			var p1x = v[0], p1y = v[1],
-				c1x = v[2], c1y = v[3],
-				c2x = v[4], c2y = v[5],
-				p2x = v[6], p2y = v[7];
-			if (t === undefined)
-				t = 0.5;
-			var u = 1 - t,
-				p3x = u * p1x + t * c1x, p3y = u * p1y + t * c1y,
-				p4x = u * c1x + t * c2x, p4y = u * c1y + t * c2y,
-				p5x = u * c2x + t * p2x, p5y = u * c2y + t * p2y,
-				p6x = u * p3x + t * p4x, p6y = u * p3y + t * p4y,
-				p7x = u * p4x + t * p5x, p7y = u * p4y + t * p5y,
-				p8x = u * p6x + t * p7x, p8y = u * p6y + t * p7y;
-			return [
-				[p1x, p1y, p3x, p3y, p6x, p6y, p8x, p8y], 
-				[p8x, p8y, p7x, p7y, p5x, p5y, p2x, p2y] 
-			];
-		},
-
-		solveCubic: function (v, coord, val, roots) {
-			var p1 = v[coord],
-				c1 = v[coord + 2],
-				c2 = v[coord + 4],
-				p2 = v[coord + 6],
-				c = 3 * (c1 - p1),
-				b = 3 * (c2 - c1) - c,
-				a = p2 - p1 - c - b;
-			return Numerical.solveCubic(a, b, c, p1 - val, roots,
-					Numerical.TOLERANCE);
-		},
-
-		getParameter: function(v, x, y) {
-			var txs = [],
-				tys = [],
-				sx = Curve.solveCubic(v, 0, x, txs),
-				sy = Curve.solveCubic(v, 1, y, tys),
-				tx, ty;
-			for (var cx = 0;  sx == -1 || cx < sx;) {
-				if (sx == -1 || (tx = txs[cx++]) >= 0 && tx <= 1) {
-					for (var cy = 0; sy == -1 || cy < sy;) {
-						if (sy == -1 || (ty = tys[cy++]) >= 0 && ty <= 1) {
-							if (sx == -1) tx = ty;
-							else if (sy == -1) ty = tx;
-							if (Math.abs(tx - ty) < Numerical.TOLERANCE)
-								return (tx + ty) * 0.5;
-						}
-					}
-					if (sx == -1)
-						break;
-				}
-			}
-			return null;
-		},
-
-		getPart: function(v, from, to) {
-			if (from > 0)
-				v = Curve.subdivide(v, from)[1]; 
-			if (to < 1)
-				v = Curve.subdivide(v, (to - from) / (1 - from))[0]; 
-			return v;
-		},
-
-		isFlatEnough: function(v) {
-			var p1x = v[0], p1y = v[1],
-				c1x = v[2], c1y = v[3],
-				c2x = v[4], c2y = v[5],
-				p2x = v[6], p2y = v[7],
-				ux = 3 * c1x - 2 * p1x - p2x,
-				uy = 3 * c1y - 2 * p1y - p2y,
-				vx = 3 * c2x - 2 * p2x - p1x,
-				vy = 3 * c2y - 2 * p2y - p1y;
-			return Math.max(ux * ux, vx * vx) + Math.max(uy * uy, vy * vy) < 1;
-		}
-	}
-}, new function() { 
-
-	function getLengthIntegrand(v) {
-		var p1x = v[0], p1y = v[1],
-			c1x = v[2], c1y = v[3],
-			c2x = v[4], c2y = v[5],
-			p2x = v[6], p2y = v[7],
-
-			ax = 9 * (c1x - c2x) + 3 * (p2x - p1x),
-			bx = 6 * (p1x + c2x) - 12 * c1x,
-			cx = 3 * (c1x - p1x),
-
-			ay = 9 * (c1y - c2y) + 3 * (p2y - p1y),
-			by = 6 * (p1y + c2y) - 12 * c1y,
-			cy = 3 * (c1y - p1y);
-
-		return function(t) {
-			var dx = (ax * t + bx) * t + cx,
-				dy = (ay * t + by) * t + cy;
-			return Math.sqrt(dx * dx + dy * dy);
-		};
-	}
-
-	function getIterations(a, b) {
-		return Math.max(2, Math.min(16, Math.ceil(Math.abs(b - a) * 32)));
-	}
-
-	return {
-		statics: true,
-
-		getLength: function(v, a, b) {
-			if (a === undefined)
-				a = 0;
-			if (b === undefined)
-				b = 1;
-			if (v[0] == v[2] && v[1] == v[3] && v[6] == v[4] && v[7] == v[5]) {
-				var dx = v[6] - v[0], 
-					dy = v[7] - v[1]; 
-				return (b - a) * Math.sqrt(dx * dx + dy * dy);
-			}
-			var ds = getLengthIntegrand(v);
-			return Numerical.integrate(ds, a, b, getIterations(a, b));
-		},
-
-		getParameterAt: function(v, offset, start) {
-			if (offset == 0)
-				return start;
-			var forward = offset > 0,
-				a = forward ? start : 0,
-				b = forward ? 1 : start,
-				offset = Math.abs(offset),
-				ds = getLengthIntegrand(v),
-				rangeLength = Numerical.integrate(ds, a, b,
-						getIterations(a, b));
-			if (offset >= rangeLength)
-				return forward ? b : a;
-			var guess = offset / rangeLength,
-				length = 0;
-			function f(t) {
-				var count = getIterations(start, t);
-				length += start < t
-						? Numerical.integrate(ds, start, t, count)
-						: -Numerical.integrate(ds, t, start, count);
-				start = t;
-				return length - offset;
-			}
-			return Numerical.findRoot(f, ds,
-					forward ? a + guess : b - guess, 
-					a, b, 16, Numerical.TOLERANCE);
-		}
-	};
-}, new function() { 
-
-	var maxDepth = 32,
-		epsilon = Math.pow(2, -maxDepth - 1);
-
-	var zCubic = [
-		[1.0, 0.6, 0.3, 0.1],
-		[0.4, 0.6, 0.6, 0.4],
-		[0.1, 0.3, 0.6, 1.0]
-	];
-
-	var xAxis = new Line(new Point(0, 0), new Point(1, 0));
-
-	function toBezierForm(v, point) {
-		var n = 3, 
-	 		degree = 5, 
-			c = [],
-			d = [],
-			cd = [],
-			w = [];
-		for(var i = 0; i <= n; i++) {
-			c[i] = v[i].subtract(point);
-			if (i < n)
-				d[i] = v[i + 1].subtract(v[i]).multiply(n);
-		}
-
-		for (var row = 0; row < n; row++) {
-			cd[row] = [];
-			for (var column = 0; column <= n; column++)
-				cd[row][column] = d[row].dot(c[column]);
-		}
-
-		for (var i = 0; i <= degree; i++)
-			w[i] = new Point(i / degree, 0);
-
-		for (k = 0; k <= degree; k++) {
-			var lb = Math.max(0, k - n + 1),
-				ub = Math.min(k, n);
-			for (var i = lb; i <= ub; i++) {
-				var j = k - i;
-				w[k].y += cd[j][i] * zCubic[j][i];
-			}
-		}
-
-		return w;
-	}
-
-	function findRoots(w, depth) {
-		switch (countCrossings(w)) {
-		case 0:
-			return [];
-		case 1:
-			if (depth >= maxDepth)
-				return [0.5 * (w[0].x + w[5].x)];
-			if (isFlatEnough(w)) {
-				var line = new Line(w[0], w[5], true);
-				return [ line.vector.getLength(true) <= Numerical.EPSILON
-						? line.point.x
-						: xAxis.intersect(line).x ];
-			}
-		}
-
-		var p = [[]],
-			left = [],
-			right = [];
-		for (var j = 0; j <= 5; j++)
-		 	p[0][j] = new Point(w[j]);
-
-		for (var i = 1; i <= 5; i++) {
-			p[i] = [];
-			for (var j = 0 ; j <= 5 - i; j++)
-				p[i][j] = p[i - 1][j].add(p[i - 1][j + 1]).multiply(0.5);
-		}
-		for (var j = 0; j <= 5; j++) {
-			left[j]  = p[j][0];
-			right[j] = p[5 - j][j];
-		}
-
-		return findRoots(left, depth + 1).concat(findRoots(right, depth + 1));
-	}
-
-	function countCrossings(v) {
-		var crossings = 0,
-			prevSign = null;
-		for (var i = 0, l = v.length; i < l; i++)  {
-			var sign = v[i].y < 0 ? -1 : 1;
-			if (prevSign != null && sign != prevSign)
-				crossings++;
-			prevSign = sign;
-		}
-		return crossings;
-	}
-
-	function isFlatEnough(v) {
-
-		var n = v.length - 1,
-			a = v[0].y - v[n].y,
-			b = v[n].x - v[0].x,
-			c = v[0].x * v[n].y - v[n].x * v[0].y,
-			maxAbove = 0,
-			maxBelow = 0;
-		for (var i = 1; i < n; i++) {
-			var val = a * v[i].x + b * v[i].y + c,
-				dist = val * val;
-			if (val < 0 && dist > maxBelow) {
-				maxBelow = dist;
-			} else if (dist > maxAbove) {
-				maxAbove = dist;
-			}
-		}
-		return Math.abs((maxAbove + maxBelow) / (2 * a * (a * a + b * b)))
-				< epsilon;
-	}
-
-	return {
-		getNearestLocation: function(point) {
-			var w = toBezierForm(this.getPoints(), point);
-			var roots = findRoots(w, 0).concat([0, 1]);
-			var minDist = Infinity,
-				minT,
-				minPoint;
-			for (var i = 0; i < roots.length; i++) {
-				var pt = this.getPoint(roots[i]),
-					dist = point.getDistance(pt, true);
-				if (dist < minDist) {
-					minDist = dist;
-					minT = roots[i];
-					minPoint = pt;
-				}
-			}
-			return new CurveLocation(this, minT, minPoint, Math.sqrt(minDist));
-		},
-
-		getNearestPoint: function(point) {
-			return this.getNearestLocation(point).getPoint();
-		}
-	};
-});
-
-CurveLocation = Base.extend({
-	initialize: function(curve, parameter, point, distance) {
-		this._curve = curve;
-		this._parameter = parameter;
-		this._point = point;
-		this._distance = distance;
-	},
-
-	getSegment: function() {
-		if (!this._segment) {
-			var curve = this._curve,
-				parameter = this.getParameter();
-			if (parameter == 0) {
-				this._segment = curve._segment1;
-			} else if (parameter == 1) {
-				this._segment = curve._segment2;
-			} else if (parameter == null) {
-				return null;
-			} else {
-				this._segment = curve.getLength(0, parameter)
-					< curve.getLength(parameter, 1)
-						? curve._segment1
-						: curve._segment2;
-			}
-		}
-		return this._segment;
-	},
-
-	getCurve: function() {
-		return this._curve;
-	},
-
-	getPath: function() {
-		return this._curve && this._curve._path;
-	},
-
-	getIndex: function() {
-		return this._curve && this._curve.getIndex();
-	},
-
-	getOffset: function() {
-		var path = this._curve && this._curve._path;
-		return path && path._getOffset(this);
-	},
-
-	getCurveOffset: function() {
-		var parameter = this.getParameter();
-		return parameter != null && this._curve
-				&& this._curve.getLength(0, parameter);
-	},
-
-	getParameter: function() {
-		if (this._parameter == null && this._curve && this._point)
-			this._parameter = this._curve.getParameterAt(this._point);
-		return this._parameter;
-	},
-
-	getPoint: function() {
-		if (!this._point && this._curve && this._parameter != null)
-			this._point = this._curve.getPoint(this._parameter);
-		return this._point;
-	},
-
-	getTangent: function() {
-		var parameter = this.getParameter();
-		return parameter != null && this._curve
-				&& this._curve.getTangent(parameter);
-	},
-
-	getNormal: function() {
-		var parameter = this.getParameter();
-		return parameter != null && this._curve
-				&& this._curve.getNormal(parameter);
-	},
-
-	getDistance: function() {
-		return this._distance;
-	},
-
-	toString: function() {
-		var parts = [],
-			point = this.getPoint();
-		if (point)
-			parts.push('point: ' + point);
-		var index = this.getIndex();
-		if (index != null)
-			parts.push('index: ' + index);
-		var parameter = this.getParameter();
-		if (parameter != null)
-			parts.push('parameter: ' + Base.formatNumber(parameter));
-		if (this._distance != null)
-			parts.push('distance: ' + Base.formatNumber(this._distance));
-		return '{ ' + parts.join(', ') + ' }';
-	}
-});
-
-var PathItem = this.PathItem = Item.extend({
-
-});
-
-var Path = this.Path = PathItem.extend({
-	initialize: function(segments) {
-		this.base();
-		this._closed = false;
-		this._selectedSegmentState = 0;
-		this.setSegments(!segments || !Array.isArray(segments)
-				|| typeof segments[0] !== 'object' ? arguments : segments);
-	},
-
-	clone: function() {
-		var copy = this._clone(new Path(this._segments));
-		copy._closed = this._closed;
-		if (this._clockwise !== undefined)
-			copy._clockwise = this._clockwise;
-		return copy;
-	},
-
-	_changed: function(flags) {
-		Item.prototype._changed.call(this, flags);
-		if (flags & ChangeFlag.GEOMETRY) {
-			delete this._length;
-			delete this._clockwise;
-			if (this._curves != null) {
-				for (var i = 0, l = this._curves.length; i < l; i++) {
-					this._curves[i]._changed(Change.GEOMETRY);
-				}
-			}
-		} else if (flags & ChangeFlag.STROKE) {
-			delete this._bounds;
-		}
-	},
-
-	getSegments: function() {
-		return this._segments;
-	},
-
-	setSegments: function(segments) {
-		if (!this._segments) {
-			this._segments = [];
-		} else {
-			this._selectedSegmentState = 0;
-			this._segments.length = 0;
-			if (this._curves)
-				delete this._curves;
-		}
-		this._add(Segment.readAll(segments));
-	},
-
-	getFirstSegment: function() {
-		return this._segments[0];
-	},
-
-	getLastSegment: function() {
-		return this._segments[this._segments.length - 1];
-	},
-
-	getCurves: function() {
-		if (!this._curves) {
-			var segments = this._segments,
-				length = segments.length;
-			if (!this._closed && length > 0)
-				length--;
-			this._curves = new Array(length);
-			for (var i = 0; i < length; i++)
-				this._curves[i] = Curve.create(this, segments[i],
-					segments[i + 1] || segments[0]);
-		}
-		return this._curves;
-	},
-
-	getFirstCurve: function() {
-		return this.getCurves()[0];
-	},
-
-	getLastCurve: function() {
-		var curves = this.getCurves();
-		return curves[curves.length - 1];
-	},
-
-	getClosed: function() {
-		return this._closed;
-	},
-
-	setClosed: function(closed) {
-		if (this._closed != (closed = !!closed)) {
-			this._closed = closed;
-			if (this._curves) {
-				var length = this._segments.length,
-					i;
-				if (!closed && length > 0)
-					length--;
-				this._curves.length = length;
-				if (closed)
-					this._curves[i = length - 1] = Curve.create(this,
-						this._segments[i], this._segments[0]);
-			}
-			this._changed(Change.GEOMETRY);
-		}
-	},
-
-	transform: function(matrix) {
-		return this.base(matrix, true);
-	},
-
-	getMatrix: function() {
-		return null;
-	},
-
-	setMatrix: function(matrix) {
-	},
-
-	_apply: function(matrix) {
-		var coords = new Array(6);
-		for (var i = 0, l = this._segments.length; i < l; i++) {
-			this._segments[i]._transformCoordinates(matrix, coords, true);
-		}
-		var style = this._style,
-			fillColor = style._fillColor,
-			strokeColor = style._strokeColor;
-		if (fillColor && fillColor.transform)
-			fillColor.transform(matrix);
-		if (strokeColor && strokeColor.transform)
-			strokeColor.transform(matrix);
-		return true;
-	},
-
-	_add: function(segs, index) {
-		var segments = this._segments,
-			curves = this._curves,
-			amount = segs.length,
-			append = index == null,
-			index = append ? segments.length : index,
-			fullySelected = this.isFullySelected();
-		for (var i = 0; i < amount; i++) {
-			var segment = segs[i];
-			if (segment._path) {
-				segment = segs[i] = new Segment(segment);
-			}
-			segment._path = this;
-			segment._index = index + i;
-			if (fullySelected)
-				segment._selectionState = SelectionState.POINT;
-			if (segment._selectionState)
-				this._updateSelection(segment, 0, segment._selectionState);
-		}
-		if (append) {
-			segments.push.apply(segments, segs);
-		} else {
-			segments.splice.apply(segments, [index, 0].concat(segs));
-			for (var i = index + amount, l = segments.length; i < l; i++) {
-				segments[i]._index = i;
-			}
-		}
-		if (curves && --index >= 0) {
-			curves.splice(index, 0, Curve.create(this, segments[index],
-				segments[index + 1]));
-			var curve = curves[index + amount];
-			if (curve) {
-				curve._segment1 = segments[index + amount];
-			}
-		}
-		this._changed(Change.GEOMETRY);
-		return segs;
-	},
-
-	add: function(segment1 ) {
-		return arguments.length > 1 && typeof segment1 !== 'number'
-			? this._add(Segment.readAll(arguments))
-			: this._add([ Segment.read(arguments) ])[0];
-	},
-
-	insert: function(index, segment1 ) {
-		return arguments.length > 2 && typeof segment1 !== 'number'
-			? this._add(Segment.readAll(arguments, 1), index)
-			: this._add([ Segment.read(arguments, 1) ], index)[0];
-	},
-
-	addSegment: function(segment) {
-		return this._add([ Segment.read(arguments) ])[0];
-	},
-
-	insertSegment: function(index, segment) {
-		return this._add([ Segment.read(arguments, 1) ], index)[0];
-	},
-
-	addSegments: function(segments) {
-		return this._add(Segment.readAll(segments));
-	},
-
-	insertSegments: function(index, segments) {
-		return this._add(Segment.readAll(segments), index);
-	},
-
-	removeSegment: function(index) {
-		var segments = this.removeSegments(index, index + 1);
-		return segments[0] || null;
-	},
-
-	removeSegments: function(from, to) {
-		from = from || 0;
-	 	to = Base.pick(to, this._segments.length);
-		var segments = this._segments,
-			curves = this._curves,
-			last = to >= segments.length,
-			removed = segments.splice(from, to - from),
-			amount = removed.length;
-		if (!amount)
-			return removed;
-		for (var i = 0; i < amount; i++) {
-			var segment = removed[i];
-			if (segment._selectionState)
-				this._updateSelection(segment, segment._selectionState, 0);
-			removed._index = removed._path = undefined;
-		}
-		for (var i = from, l = segments.length; i < l; i++)
-			segments[i]._index = i;
-		if (curves) {
-			curves.splice(from, amount);
-			var curve;
-			if (curve = curves[from - 1])
-				curve._segment2 = segments[from];
-			if (curve = curves[from])
-				curve._segment1 = segments[from];
-			if (last && this._closed && (curve = curves[curves.length - 1]))
-				curve._segment2 = segments[0];
-		}
-		this._changed(Change.GEOMETRY);
-		return removed;
-	},
-
-	isFullySelected: function() {
-		return this._selected && this._selectedSegmentState
-				== this._segments.length * SelectionState.POINT;
-	},
-
-	setFullySelected: function(selected) {
-		var length = this._segments.length;
-		this._selectedSegmentState = selected
-				? length * SelectionState.POINT : 0;
-		for (var i = 0; i < length; i++)
-			this._segments[i]._selectionState = selected
-					? SelectionState.POINT : 0;
-		this.setSelected(selected);
-	},
-
-	_updateSelection: function(segment, oldState, newState) {
-		segment._selectionState = newState;
-		var total = this._selectedSegmentState += newState - oldState;
-		if (total > 0)
-			this.setSelected(true);
-	},
-
-	flatten: function(maxDistance) {
-		var flattener = new PathFlattener(this),
-			pos = 0,
-			step = flattener.length / Math.ceil(flattener.length / maxDistance),
-			end = flattener.length + (this._closed ? -step : step) / 2;
-		var segments = [];
-		while (pos <= end) {
-			segments.push(new Segment(flattener.evaluate(pos, 0)));
-			pos += step;
-		}
-		this.setSegments(segments);
-	},
-
-	simplify: function(tolerance) {
-		if (this._segments.length > 2) {
-			var fitter = new PathFitter(this, tolerance || 2.5);
-			this.setSegments(fitter.fit());
-		}
-	},
-
-	isClockwise: function() {
-		if (this._clockwise !== undefined)
-			return this._clockwise;
-		var sum = 0,
-			xPre, yPre;
-		function edge(x, y) {
-			if (xPre !== undefined)
-				sum += (xPre - x) * (y + yPre);
-			xPre = x;
-			yPre = y;
-		}
-		for (var i = 0, l = this._segments.length; i < l; i++) {
-			var seg1 = this._segments[i],
-				seg2 = this._segments[i + 1 < l ? i + 1 : 0],
-				point1 = seg1._point,
-				handle1 = seg1._handleOut,
-				handle2 = seg2._handleIn,
-				point2 = seg2._point;
-			edge(point1._x, point1._y);
-			edge(point1._x + handle1._x, point1._y + handle1._y);
-			edge(point2._x + handle2._x, point2._y + handle2._y);
-			edge(point2._x, point2._y);
-		}
-		return sum > 0;
-	},
-
-	setClockwise: function(clockwise) {
-		if (this.isClockwise() != (clockwise = !!clockwise)) {
-			this.reverse();
-			this._clockwise = clockwise;
-		}
-	},
-
-	reverse: function() {
-		this._segments.reverse();
-		for (var i = 0, l = this._segments.length; i < l; i++) {
-			var segment = this._segments[i];
-			var handleIn = segment._handleIn;
-			segment._handleIn = segment._handleOut;
-			segment._handleOut = handleIn;
-			segment._index = i;
-		}
-		if (this._clockwise !== undefined)
-			this._clockwise = !this._clockwise;
-	},
-
-	join: function(path) {
-		if (path) {
-			var segments = path._segments,
-				last1 = this.getLastSegment(),
-				last2 = path.getLastSegment();
-			if (last1._point.equals(last2._point))
-				path.reverse();
-			var first2 = path.getFirstSegment();
-			if (last1._point.equals(first2._point)) {
-				last1.setHandleOut(first2._handleOut);
-				this._add(segments.slice(1));
-			} else {
-				var first1 = this.getFirstSegment();
-				if (first1._point.equals(first2._point))
-					path.reverse();
-				last2 = path.getLastSegment();
-				if (first1._point.equals(last2._point)) {
-					first1.setHandleIn(last2._handleIn);
-					this._add(segments.slice(0, segments.length - 1), 0);
-				} else {
-					this._add(segments.slice(0));
-				}
-			}
-			path.remove();
-			var first1 = this.getFirstSegment();
-			last1 = this.getLastSegment();
-			if (last1._point.equals(first1._point)) {
-				first1.setHandleIn(last1._handleIn);
-				last1.remove();
-				this.setClosed(true);
-			}
-			this._changed(Change.GEOMETRY);
-			return true;
-		}
-		return false;
-	},
-
-	getLength: function() {
-		if (this._length == null) {
-			var curves = this.getCurves();
-			this._length = 0;
-			for (var i = 0, l = curves.length; i < l; i++)
-				this._length += curves[i].getLength();
-		}
-		return this._length;
-	},
-
-	_getOffset: function(location) {
-		var index = location && location.getIndex();
-		if (index != null) {
-			var curves = this.getCurves(),
-				offset = 0;
-			for (var i = 0; i < index; i++)
-				offset += curves[i].getLength();
-			var curve = curves[index];
-			return offset + curve.getLength(0, location.getParameter());
-		}
-		return null;
-	},
-
-	getLocation: function(point) {
-		var curves = this.getCurves();
-		for (var i = 0, l = curves.length; i < l; i++) {
-			var curve = curves[i];
-			var t = curve.getParameter(point);
-			if (t != null)
-				return new CurveLocation(curve, t);
-		}
-		return null;
-	},
-
-	getLocationAt: function(offset, isParameter) {
-		var curves = this.getCurves(),
-			length = 0;
-		if (isParameter) {
-			var index = ~~offset; 
-			return new CurveLocation(curves[index], offset - index);
-		}
-		for (var i = 0, l = curves.length; i < l; i++) {
-			var start = length,
-				curve = curves[i];
-			length += curve.getLength();
-			if (length >= offset) {
-				return new CurveLocation(curve,
-						curve.getParameterAt(offset - start));
-			}
-		}
-		if (offset <= this.getLength())
-			return new CurveLocation(curves[curves.length - 1], 1);
-		return null;
-	},
-
-	getPointAt: function(offset, isParameter) {
-		var loc = this.getLocationAt(offset, isParameter);
-		return loc && loc.getPoint();
-	},
-
-	getTangentAt: function(offset, isParameter) {
-		var loc = this.getLocationAt(offset, isParameter);
-		return loc && loc.getTangent();
-	},
-
-	getNormalAt: function(offset, isParameter) {
-		var loc = this.getLocationAt(offset, isParameter);
-		return loc && loc.getNormal();
-	},
-
-	getNearestLocation: function(point) {
-		var curves = this.getCurves(),
-			minDist = Infinity,
-			minLoc = null;
-		for (var i = 0, l = curves.length; i < l; i++) {
-			var loc = curves[i].getNearestLocation(point);
-			if (loc._distance < minDist) {
-				minDist = loc._distance;
-				minLoc = loc;
-			}
-		}
-		return minLoc;
-	},
-
-	getNearestPoint: function(point) {
-		return this.getNearestLocation(point).getPoint();
-	},
-
-	contains: function(point) {
-		point = Point.read(arguments);
-		if (!this._closed || !this.getRoughBounds()._containsPoint(point))
-			return false;
-		var curves = this.getCurves(),
-			crossings = 0,
-			roots = [];
-		for (var i = 0, l = curves.length; i < l; i++)
-			crossings += curves[i].getCrossings(point, roots);
-		return (crossings & 1) == 1;
-	},
-
-	_hitTest: function(point, options) {
-		var style = this._style,
-			tolerance = options.tolerance || 0,
-			radius = (options.stroke && style._strokeColor
-					? style._strokeWidth / 2 : 0) + tolerance,
-			loc,
-			res;
-		var coords = [],
-			that = this;
-		function checkPoint(seg, pt, name) {
-			if (point.getDistance(pt) < tolerance)
-				return new HitResult(name, that, { segment: seg, point: pt });
-		}
-		function checkSegment(seg, ends) {
-			var point = seg._point;
-			return (ends || options.segments)
-					&& checkPoint(seg, point, 'segment')
-				|| (!ends && options.handles) && (
-					checkPoint(seg, point.add(seg._handleIn), 'handle-in') ||
-					checkPoint(seg, point.add(seg._handleOut), 'handle-out'));
-		}
-		if (options.ends && !options.segments && !this._closed) {
-			if (res = checkSegment(this.getFirstSegment(), true)
-					|| checkSegment(this.getLastSegment(), true))
-				return res;
-		} else if (options.segments || options.handles) {
-			for (var i = 0, l = this._segments.length; i < l; i++) {
-				if (res = checkSegment(this._segments[i]))
-					return res;
-			}
-		}
-		if (options.stroke && radius > 0)
-			loc = this.getNearestLocation(point);
-		if (!(loc && loc._distance <= radius) && options.fill
-				&& style._fillColor && this.contains(point))
-			return new HitResult('fill', this);
-		if (!loc && options.stroke && radius > 0)
-			loc = this.getNearestLocation(point);
-		if (loc && loc._distance <= radius)
-			return options.stroke
-					? new HitResult('stroke', this, { location: loc })
-					: new HitResult('fill', this);
-	}
-
-}, new function() { 
-
-	function drawHandles(ctx, segments, matrix) {
-		var coords = new Array(6);
-		for (var i = 0, l = segments.length; i < l; i++) {
-			var segment = segments[i];
-			segment._transformCoordinates(matrix, coords, false);
-			var state = segment._selectionState,
-				selected = state & SelectionState.POINT,
-				pX = coords[0],
-				pY = coords[1];
-
-			function drawHandle(index) {
-				var hX = coords[index],
-					hY = coords[index + 1];
-				if (pX != hX || pY != hY) {
-					ctx.beginPath();
-					ctx.moveTo(pX, pY);
-					ctx.lineTo(hX, hY);
-					ctx.stroke();
-					ctx.beginPath();
-					ctx.arc(hX, hY, 1.75, 0, Math.PI * 2, true);
-					ctx.fill();
-				}
-			}
-
-			if (selected || (state & SelectionState.HANDLE_IN))
-				drawHandle(2);
-			if (selected || (state & SelectionState.HANDLE_OUT))
-				drawHandle(4);
-			ctx.save();
-			ctx.beginPath();
-			ctx.rect(pX - 2, pY - 2, 4, 4);
-			ctx.fill();
-			if (!selected) {
-				ctx.beginPath();
-				ctx.rect(pX - 1, pY - 1, 2, 2);
-				ctx.fillStyle = '#ffffff';
-				ctx.fill();
-			}
-			ctx.restore();
-		}
-	}
-
-	function drawSegments(ctx, path, matrix) {
-		var segments = path._segments,
-			length = segments.length,
-			coords = new Array(6),
-			first = true,
-			pX, pY,
-			inX, inY,
-			outX, outY;
-
-		function drawSegment(i) {
-			var segment = segments[i];
-			if (matrix) {
-				segment._transformCoordinates(matrix, coords, false);
-				pX = coords[0];
-				pY = coords[1];
-			} else {
-				var point = segment._point;
-				pX = point._x;
-				pY = point._y;
-			}
-			if (first) {
-				ctx.moveTo(pX, pY);
-				first = false;
-			} else {
-				if (matrix) {
-					inX = coords[2];
-					inY = coords[3];
-				} else {
-					var handle = segment._handleIn;
-					inX = pX + handle._x;
-					inY = pY + handle._y;
-				}
-				if (inX == pX && inY == pY && outX == pX && outY == pY) {
-					ctx.lineTo(pX, pY);
-				} else {
-					ctx.bezierCurveTo(outX, outY, inX, inY, pX, pY);
-				}
-			}
-			if (matrix) {
-				outX = coords[4];
-				outY = coords[5];
-			} else {
-				var handle = segment._handleOut;
-				outX = pX + handle._x;
-				outY = pY + handle._y;
-			}
-		}
-
-		for (var i = 0; i < length; i++)
-			drawSegment(i);
-		if (path._closed && length > 1)
-			drawSegment(0);
-	}
-
-	return {
-		draw: function(ctx, param) {
-			if (!param.compound)
-				ctx.beginPath();
-
-			var style = this._style,
-				fillColor = style._fillColor,
-				strokeColor = style._strokeColor,
-				dashArray = style._dashArray,
-				hasDash = strokeColor && dashArray && dashArray.length;
-
-			if (param.compound || this._clipMask || fillColor
-					|| strokeColor && !hasDash) {
-				drawSegments(ctx, this);
-			}
-
-			if (this._closed)
-				ctx.closePath();
-
-			if (this._clipMask) {
-				ctx.clip();
-			} else if (!param.compound && (fillColor || strokeColor)) {
-				ctx.save();
-				this._setStyles(ctx);
-				if (fillColor)
-					ctx.fill();
-				if (strokeColor) {
-					if (hasDash) {
-						ctx.beginPath();
-						var flattener = new PathFlattener(this),
-							from = style._dashOffset, to,
-							i = 0;
-						while (from < flattener.length) {
-							to = from + dashArray[(i++) % dashArray.length];
-							flattener.drawPart(ctx, from, to);
-							from = to + dashArray[(i++) % dashArray.length];
-						}
-					}
-					ctx.stroke();
-				}
-				ctx.restore();
-			}
-		},
-
-		drawSelected: function(ctx, matrix) {
-			ctx.beginPath();
-			drawSegments(ctx, this, matrix);
-			ctx.stroke();
-			drawHandles(ctx, this._segments, matrix);
-		}
-	};
-}, new function() { 
-
-	function getFirstControlPoints(rhs) {
-		var n = rhs.length,
-			x = [], 
-			tmp = [], 
-			b = 2;
-		x[0] = rhs[0] / b;
-		for (var i = 1; i < n; i++) {
-			tmp[i] = 1 / b;
-			b = (i < n - 1 ? 4 : 2) - tmp[i];
-			x[i] = (rhs[i] - x[i - 1]) / b;
-		}
-		for (var i = 1; i < n; i++) {
-			x[n - i - 1] -= tmp[n - i] * x[n - i];
-		}
-		return x;
-	};
-
-	return {
-		smooth: function() {
-			var segments = this._segments,
-				size = segments.length,
-				n = size,
-				overlap;
-
-			if (size <= 2)
-				return;
-
-			if (this._closed) {
-				overlap = Math.min(size, 4);
-				n += Math.min(size, overlap) * 2;
-			} else {
-				overlap = 0;
-			}
-			var knots = [];
-			for (var i = 0; i < size; i++)
-				knots[i + overlap] = segments[i]._point;
-			if (this._closed) {
-				for (var i = 0; i < overlap; i++) {
-					knots[i] = segments[i + size - overlap]._point;
-					knots[i + size + overlap] = segments[i]._point;
-				}
-			} else {
-				n--;
-			}
-			var rhs = [];
-
-			for (var i = 1; i < n - 1; i++)
-				rhs[i] = 4 * knots[i]._x + 2 * knots[i + 1]._x;
-			rhs[0] = knots[0]._x + 2 * knots[1]._x;
-			rhs[n - 1] = 3 * knots[n - 1]._x;
-			var x = getFirstControlPoints(rhs);
-
-			for (var i = 1; i < n - 1; i++)
-				rhs[i] = 4 * knots[i]._y + 2 * knots[i + 1]._y;
-			rhs[0] = knots[0]._y + 2 * knots[1]._y;
-			rhs[n - 1] = 3 * knots[n - 1]._y;
-			var y = getFirstControlPoints(rhs);
-
-			if (this._closed) {
-				for (var i = 0, j = size; i < overlap; i++, j++) {
-					var f1 = (i / overlap);
-					var f2 = 1 - f1;
-					x[j] = x[i] * f1 + x[j] * f2;
-					y[j] = y[i] * f1 + y[j] * f2;
-					var ie = i + overlap, je = j + overlap;
-					x[je] = x[ie] * f2 + x[je] * f1;
-					y[je] = y[ie] * f2 + y[je] * f1;
-				}
-				n--;
-			}
-			var handleIn = null;
-			for (var i = overlap; i <= n - overlap; i++) {
-				var segment = segments[i - overlap];
-				if (handleIn)
-					segment.setHandleIn(handleIn.subtract(segment._point));
-				if (i < n) {
-					segment.setHandleOut(
-							Point.create(x[i], y[i]).subtract(segment._point));
-					if (i < n - 1)
-						handleIn = Point.create(
-								2 * knots[i + 1]._x - x[i + 1],
-								2 * knots[i + 1]._y - y[i + 1]);
-					else
-						handleIn = Point.create(
-								(knots[n]._x + x[n - 1]) / 2,
-								(knots[n]._y + y[n - 1]) / 2);
-				}
-			}
-			if (this._closed && handleIn) {
-				var segment = this._segments[0];
-				segment.setHandleIn(handleIn.subtract(segment._point));
-			}
-		}
-	};
-}, new function() { 
-	function getCurrentSegment(that) {
-		var segments = that._segments;
-		if (segments.length == 0)
-			throw new Error('Use a moveTo() command first');
-		return segments[segments.length - 1];
-	}
-
-	return {
-		moveTo: function(point) {
-			if (!this._segments.length)
-				this._add([ new Segment(Point.read(arguments)) ]);
-		},
-
-		moveBy: function(point) {
-			throw new Error('moveBy() is unsupported on Path items.');
-		},
-
-		lineTo: function(point) {
-			this._add([ new Segment(Point.read(arguments)) ]);
-		},
-
-		cubicCurveTo: function(handle1, handle2, to) {
-			handle1 = Point.read(arguments, 0, 1);
-			handle2 = Point.read(arguments, 1, 1);
-			to = Point.read(arguments, 2, 1);
-			var current = getCurrentSegment(this);
-			current.setHandleOut(handle1.subtract(current._point));
-			this._add([ new Segment(to, handle2.subtract(to)) ]);
-		},
-
-		quadraticCurveTo: function(handle, to) {
-			handle = Point.read(arguments, 0, 1);
-			to = Point.read(arguments, 1, 1);
-			var current = getCurrentSegment(this)._point;
-			this.cubicCurveTo(
-				handle.add(current.subtract(handle).multiply(1/3)),
-				handle.add(to.subtract(handle).multiply(1/3)),
-				to
-			);
-		},
-
-		curveTo: function(through, to, parameter) {
-			through = Point.read(arguments, 0, 1);
-			to = Point.read(arguments, 1, 1);
-			var t = Base.pick(parameter, 0.5),
-				t1 = 1 - t,
-				current = getCurrentSegment(this)._point,
-				handle = through.subtract(current.multiply(t1 * t1))
-					.subtract(to.multiply(t * t)).divide(2 * t * t1);
-			if (handle.isNaN())
-				throw new Error(
-					'Cannot put a curve through points with parameter = ' + t);
-			this.quadraticCurveTo(handle, to);
-		},
-
-		arcTo: function(to, clockwise ) {
-			var current = getCurrentSegment(this),
-				from = current._point,
-				through;
-			if (clockwise === undefined)
-				clockwise = true;
-			if (typeof clockwise === 'boolean') {
-				to = Point.read(arguments, 0, 1);
-				var middle = from.add(to).divide(2),
-				through = middle.add(middle.subtract(from).rotate(
-						clockwise ? -90 : 90));
-			} else {
-				through = Point.read(arguments, 0, 1);
-				to = Point.read(arguments, 1, 1);
-			}
-			var l1 = new Line(from.add(through).divide(2),
-					through.subtract(from).rotate(90)),
-			 	l2 = new Line(through.add(to).divide(2),
-					to.subtract(through).rotate(90)),
-				center = l1.intersect(l2),
-				line = new Line(from, to, true),
-				throughSide = line.getSide(through);
-			if (!center) {
-				if (!throughSide)
-					return this.lineTo(to);
-				throw new Error("Cannot put an arc through the given points: "
-					+ [from, through, to]);
-			}
-			var vector = from.subtract(center),
-				radius = vector.getLength(),
-				extent = vector.getDirectedAngle(to.subtract(center)),
-				centerSide = line.getSide(center);
-			if (centerSide == 0) {
-				extent = throughSide * Math.abs(extent);
-			} else if (throughSide == centerSide) {
-				extent -= 360 * (extent < 0 ? -1 : 1);
-			}
-			var ext = Math.abs(extent),
-				count =  ext >= 360 ? 4 : Math.ceil(ext / 90),
-				inc = extent / count,
-				half = inc * Math.PI / 360,
-				z = 4 / 3 * Math.sin(half) / (1 + Math.cos(half)),
-				segments = [];
-			for (var i = 0; i <= count; i++) {
-				var pt = i < count ? center.add(vector) : to;
-				var out = i < count ? vector.rotate(90).multiply(z) : null;
-				if (i == 0) {
-					current.setHandleOut(out);
-				} else {
-					segments.push(
-						new Segment(pt, vector.rotate(-90).multiply(z), out));
-				}
-				vector = vector.rotate(inc);
-			}
-			this._add(segments);
-		},
-
-		lineBy: function(vector) {
-			vector = Point.read(arguments);
-			var current = getCurrentSegment(this);
-			this.lineTo(current._point.add(vector));
-		},
-
-		curveBy: function(throughVector, toVector, parameter) {
-			throughVector = Point.read(throughVector);
-			toVector = Point.read(toVector);
-			var current = getCurrentSegment(this)._point;
-			this.curveTo(current.add(throughVector), current.add(toVector),
-					parameter);
-		},
-
-		arcBy: function(throughVector, toVector) {
-			throughVector = Point.read(throughVector);
-			toVector = Point.read(toVector);
-			var current = getCurrentSegment(this)._point;
-			this.arcBy(current.add(throughVector), current.add(toVector));
-		},
-
-		closePath: function() {
-			this.setClosed(true);
-		}
-	};
-}, new function() { 
-	function getBounds(matrix, strokePadding) {
-		var segments = this._segments,
-			first = segments[0];
-		if (!first)
-			return null;
-		var coords = new Array(6),
-			prevCoords = new Array(6);
-		first._transformCoordinates(matrix, prevCoords, false);
-		var min = prevCoords.slice(0, 2),
-			max = min.slice(0), 
-			tMin = Numerical.TOLERANCE,
-			tMax = 1 - tMin;
-		function processSegment(segment) {
-			segment._transformCoordinates(matrix, coords, false);
-
-			for (var i = 0; i < 2; i++) {
-				var v0 = prevCoords[i], 
-					v1 = prevCoords[i + 4], 
-					v2 = coords[i + 2], 
-					v3 = coords[i]; 
-
-				function add(value, t) {
-					var padding = 0;
-					if (value == null) {
-						var u = 1 - t;
-						value = u * u * u * v0
-								+ 3 * u * u * t * v1
-								+ 3 * u * t * t * v2
-								+ t * t * t * v3;
-						padding = strokePadding ? strokePadding[i] : 0;
-					}
-					var left = value - padding,
-						right = value + padding;
-					if (left < min[i])
-						min[i] = left;
-					if (right > max[i])
-						max[i] = right;
-
-				}
-				add(v3, null);
-
-				var a = 3 * (v1 - v2) - v0 + v3,
-					b = 2 * (v0 + v2) - 4 * v1,
-					c = v1 - v0;
-
-				if (a == 0) {
-					if (b == 0)
-					    continue;
-					var t = -c / b;
-					if (tMin < t && t < tMax)
-						add(null, t);
-					continue;
-				}
-
-				var q = b * b - 4 * a * c;
-				if (q < 0)
-					continue;
-				var sqrt = Math.sqrt(q),
-					f = -0.5 / a,
-				 	t1 = (b - sqrt) * f,
-					t2 = (b + sqrt) * f;
-				if (tMin < t1 && t1 < tMax)
-					add(null, t1);
-				if (tMin < t2 && t2 < tMax)
-					add(null, t2);
-			}
-			var tmp = prevCoords;
-			prevCoords = coords;
-			coords = tmp;
-		}
-		for (var i = 1, l = segments.length; i < l; i++)
-			processSegment(segments[i]);
-		if (this._closed)
-			processSegment(first);
-		return Rectangle.create(min[0], min[1],
-					max[0] - min[0], max[1] - min[1]);
-	}
-
-	function getPenPadding(radius, matrix) {
-		if (!matrix)
-			return [radius, radius];
-		var mx = matrix.createShiftless(),
-			hor = mx.transform(Point.create(radius, 0)),
-			ver = mx.transform(Point.create(0, radius)),
-			phi = hor.getAngleInRadians(),
-			a = hor.getLength(),
-			b = ver.getLength();
-		var sin = Math.sin(phi),
-			cos = Math.cos(phi),
-			tan = Math.tan(phi),
-			tx = -Math.atan(b * tan / a),
-			ty = Math.atan(b / (tan * a));
-		return [Math.abs(a * Math.cos(tx) * cos - b * Math.sin(tx) * sin),
-				Math.abs(b * Math.sin(ty) * cos + a * Math.cos(ty) * sin)];
-	}
-
-	function getStrokeBounds(matrix) {
-		var style = this._style;
-		if (!style._strokeColor || !style._strokeWidth)
-			return getBounds.call(this, matrix);
-		var width = style._strokeWidth,
-			radius = width / 2,
-			padding = getPenPadding(radius, matrix),
-			join = style._strokeJoin,
-			cap = style._strokeCap,
-			miter = style._miterLimit * width / 2,
-			segments = this._segments,
-			length = segments.length,
-			bounds = getBounds.call(this, matrix, padding);
-		var joinBounds = new Rectangle(new Size(padding).multiply(2));
-
-		function add(point) {
-			bounds = bounds.include(matrix
-				? matrix._transformPoint(point, point) : point);
-		}
-
-		function addBevelJoin(curve, t) {
-			var point = curve.getPoint(t),
-				normal = curve.getNormal(t).normalize(radius);
-			add(point.add(normal));
-			add(point.subtract(normal));
-		}
-
-		function addJoin(segment, join) {
-			if (join === 'round' || !segment._handleIn.isZero()
-					&& !segment._handleOut.isZero()) {
-				bounds = bounds.unite(joinBounds.setCenter(matrix
-					? matrix._transformPoint(segment._point) : segment._point));
-			} else if (join == 'bevel') {
-				var curve = segment.getCurve();
-				addBevelJoin(curve, 0);
-				addBevelJoin(curve.getPrevious(), 1);
-			} else if (join == 'miter') {
-				var curve2 = segment.getCurve(),
-					curve1 = curve2.getPrevious(),
-					point = curve2.getPoint(0),
-					normal1 = curve1.getNormal(1).normalize(radius),
-					normal2 = curve2.getNormal(0).normalize(radius),
-					line1 = new Line(point.subtract(normal1),
-							Point.create(-normal1.y, normal1.x)),
-					line2 = new Line(point.subtract(normal2),
-							Point.create(-normal2.y, normal2.x)),
-					corner = line1.intersect(line2);
-				if (!corner || point.getDistance(corner) > miter) {
-					addJoin(segment, 'bevel');
-				} else {
-					add(corner);
-				}
-			}
-		}
-
-		function addCap(segment, cap, t) {
-			switch (cap) {
-			case 'round':
-				return addJoin(segment, cap);
-			case 'butt':
-			case 'square':
-				var curve = segment.getCurve(),
-					point = curve.getPoint(t),
-					normal = curve.getNormal(t).normalize(radius);
-				if (cap === 'square')
-					point = point.add(normal.rotate(t == 0 ? -90 : 90));
-				add(point.add(normal));
-				add(point.subtract(normal));
-				break;
-			}
-		}
-
-		for (var i = 1, l = length - (this._closed ? 0 : 1); i < l; i++) {
-			addJoin(segments[i], join);
-		}
-		if (this._closed) {
-			addJoin(segments[0], join);
-		} else {
-			addCap(segments[0], cap, 0);
-			addCap(segments[length - 1], cap, 1);
-		}
-		return bounds;
-	}
-
-	function getHandleBounds(matrix, stroke, join) {
-		var coords = new Array(6),
-			x1 = Infinity,
-			x2 = -x1,
-			y1 = x1,
-			y2 = x2;
-		stroke = stroke / 2 || 0; 
-		join = join / 2 || 0; 
-		for (var i = 0, l = this._segments.length; i < l; i++) {
-			var segment = this._segments[i];
-			segment._transformCoordinates(matrix, coords, false);
-			for (var j = 0; j < 6; j += 2) {
-				var padding = j == 0 ? join : stroke,
-					x = coords[j],
-					y = coords[j + 1],
-					xn = x - padding,
-					xx = x + padding,
-					yn = y - padding,
-					yx = y + padding;
-				if (xn < x1) x1 = xn;
-				if (xx > x2) x2 = xx;
-				if (yn < y1) y1 = yn;
-				if (yx > y2) y2 = yx;
-			}
-		}
-		return Rectangle.create(x1, y1, x2 - x1, y2 - y1);
-	}
-
-	function getRoughBounds(matrix) {
-		var style = this._style,
-			width = style._strokeWidth;
-		return getHandleBounds.call(this, matrix, width,
-				style._strokeJoin == 'miter'
-					? width * style._miterLimit
-					: width);
-	}
-
-	var get = {
-		bounds: getBounds,
-		strokeBounds: getStrokeBounds,
-		handleBounds: getHandleBounds,
-		roughBounds: getRoughBounds
-	};
-
-	return {
-		_getBounds: function(type, matrix) {
-			return get[type].call(this, matrix);
-		}
-	};
-});
-
-Path.inject({ statics: new function() {
-	var kappa = 2 / 3 * (Math.sqrt(2) - 1);
-
-	var ovalSegments = [
-		new Segment([0, 0.5], [0, kappa ], [0, -kappa]),
-		new Segment([0.5, 0], [-kappa, 0], [kappa, 0 ]),
-		new Segment([1, 0.5], [0, -kappa], [0, kappa ]),
-		new Segment([0.5, 1], [kappa, 0 ], [-kappa, 0])
-	];
-
-	return {
-		Line: function() {
-			var step = Math.floor(arguments.length / 2);
-			return new Path(
-				Segment.read(arguments, 0, step),
-				Segment.read(arguments, step, step)
-			);
-		},
-
-		Rectangle: function(rect) {
-			rect = Rectangle.read(arguments);
-			var left = rect.x,
-				top = rect.y,
-				right = left + rect.width,
-				bottom = top + rect.height,
-				path = new Path();
-			path._add([
-				new Segment(Point.create(left, bottom)),
-				new Segment(Point.create(left, top)),
-				new Segment(Point.create(right, top)),
-				new Segment(Point.create(right, bottom))
-			]);
-			path._closed = true;
-			return path;
-		},
-
-		RoundRectangle: function(rect, size) {
-			if (arguments.length == 2) {
-				rect = Rectangle.read(arguments, 0, 1);
-				size = Size.read(arguments, 1, 1);
-			} else if (arguments.length == 6) {
-				rect = Rectangle.read(arguments, 0, 4);
-				size = Size.read(arguments, 4, 2);
-			}
-			size = Size.min(size, rect.getSize(true).divide(2));
-			var path = new Path(),
-				uSize = size.multiply(kappa * 2),
-				bl = rect.getBottomLeft(true),
-				tl = rect.getTopLeft(true),
-				tr = rect.getTopRight(true),
-				br = rect.getBottomRight(true);
-			path._add([
-				new Segment(bl.add(size.width, 0), null, [-uSize.width, 0]),
-				new Segment(bl.subtract(0, size.height), [0, uSize.height], null),
-
-				new Segment(tl.add(0, size.height), null, [0, -uSize.height]),
-				new Segment(tl.add(size.width, 0), [-uSize.width, 0], null),
-
-				new Segment(tr.subtract(size.width, 0), null, [uSize.width, 0]),
-				new Segment(tr.add(0, size.height), [0, -uSize.height], null),
-
-				new Segment(br.subtract(0, size.height), null, [0, uSize.height]),
-				new Segment(br.subtract(size.width, 0), [uSize.width, 0], null)
-			]);
-			path._closed = true;
-			return path;
-		},
-
-		Oval: function(rect) {
-			rect = Rectangle.read(arguments);
-			var path = new Path(),
-				point = rect.getPoint(true),
-				size = rect.getSize(true),
-				segments = new Array(4);
-			for (var i = 0; i < 4; i++) {
-				var segment = ovalSegments[i];
-				segments[i] = new Segment(
-					segment._point.multiply(size).add(point),
-					segment._handleIn.multiply(size),
-					segment._handleOut.multiply(size)
-				);
-			}
-			path._add(segments);
-			path._closed = true;
-			return path;
-		},
-
-		Circle: function(center, radius) {
-			if (arguments.length == 3) {
-				center = Point.read(arguments, 0, 2);
-				radius = arguments[2];
-			} else {
-				center = Point.read(arguments, 0, 1);
-			}
-			return Path.Oval(new Rectangle(center.subtract(radius),
-					Size.create(radius * 2, radius * 2)));
-		},
-
-		Arc: function(from, through, to) {
-			var path = new Path();
-			path.moveTo(from);
-			path.arcTo(through, to);
-			return path;
-		},
-
-		RegularPolygon: function(center, numSides, radius) {
-			center = Point.read(arguments, 0, 1);
-			var path = new Path(),
-				step = 360 / numSides,
-				three = !(numSides % 3),
-				vector = new Point(0, three ? -radius : radius),
-				offset = three ? -1 : 0.5,
-				segments = new Array(numSides);
-			for (var i = 0; i < numSides; i++) {
-				segments[i] = new Segment(center.add(
-					vector.rotate((i + offset) * step)));
-			}
-			path._add(segments);
-			path._closed = true;
-			return path;
-		},
-
-		Star: function(center, numPoints, radius1, radius2) {
-			center = Point.read(arguments, 0, 1);
-			numPoints *= 2;
-			var path = new Path(),
-				step = 360 / numPoints,
-				vector = new Point(0, -1),
-				segments = new Array(numPoints);
-			for (var i = 0; i < numPoints; i++) {
-				segments[i] = new Segment(center.add(
-					vector.rotate(step * i).multiply(i % 2 ? radius2 : radius1)));
-			}
-			path._add(segments);
-			path._closed = true;
-			return path;
-		}
-	};
-}});
-
-var CompoundPath = this.CompoundPath = PathItem.extend({
-	initialize: function(paths) {
-		this.base();
-		this._children = [];
-		this._namedChildren = {};
-		var items = !paths || !Array.isArray(paths)
-				|| typeof paths[0] !== 'object' ? arguments : paths;
-		this.addChildren(items);
-	},
-
-	insertChild: function(index, item) {
-		this.base(index, item);
-		if (item._clockwise === undefined)
-			item.setClockwise(item._index == 0);
-	},
-
-	simplify: function() {
-		if (this._children.length == 1) {
-			var child = this._children[0];
-			child.insertAbove(this);
-			this.remove();
-			return child;
-		}
-		return this;
-	},
-
-	smooth: function() {
-		for (var i = 0, l = this._children.length; i < l; i++)
-			this._children[i].smooth();
-	},
-
-	draw: function(ctx, param) {
-		var children = this._children;
-		if (children.length == 0)
-			return;
-		var firstChild = children[0],
-			style = firstChild._style;
-		ctx.beginPath();
-		param.compound = true;
-		for (var i = 0, l = children.length; i < l; i++)
-			Item.draw(children[i], ctx, param);
-		firstChild._setStyles(ctx);
-		if (style._fillColor)
-			ctx.fill();
-		if (style._strokeColor)
-			ctx.stroke();
-		param.compound = false;
-	}
-}, new function() { 
-	function getCurrentPath(that) {
-		if (!that._children.length)
-			throw new Error('Use a moveTo() command first');
-		return that._children[that._children.length - 1];
-	}
-
-	var fields = {
-		moveTo: function(point) {
-			var path = new Path();
-			this.addChild(path);
-			path.moveTo.apply(path, arguments);
-		},
-
-		moveBy: function(point) {
-			this.moveTo(getCurrentPath(this).getLastSegment()._point.add(
-					Point.read(arguments)));
-		},
-
-		closePath: function() {
-			getCurrentPath(this).setClosed(true);
-		}
-	};
-
-	Base.each(['lineTo', 'cubicCurveTo', 'quadraticCurveTo', 'curveTo',
-			'arcTo', 'lineBy', 'curveBy', 'arcBy'], function(key) {
-		fields[key] = function() {
-			var path = getCurrentPath(this);
-			path[key].apply(path, arguments);
-		};
-	});
-
-	return fields;
-});
-
-var PathFlattener = Base.extend({
-	initialize: function(path) {
-		this.curves = []; 
-		this.parts = []; 
-		this.length = 0; 
-		this.index = 0;
-
-		var segments = path._segments,
-			segment1 = segments[0],
-			segment2,
-			that = this;
-
-		function addCurve(segment1, segment2) {
-			var curve = Curve.getValues(segment1, segment2);
-			that.curves.push(curve);
-			that._computeParts(curve, segment1._index, 0, 1);
-		}
-
-		for (var i = 1, l = segments.length; i < l; i++) {
-			segment2 = segments[i];
-			addCurve(segment1, segment2);
-			segment1 = segment2;
-		}
-		if (path._closed)
-			addCurve(segment2, segments[0]);
-	},
-
-	_computeParts: function(curve, index, minT, maxT) {
-		if ((maxT - minT) > 1 / 32 && !Curve.isFlatEnough(curve)) {
-			var curves = Curve.subdivide(curve);
-			var halfT = (minT + maxT) / 2;
-			this._computeParts(curves[0], index, minT, halfT);
-			this._computeParts(curves[1], index, halfT, maxT);
-		} else {
-			var x = curve[6] - curve[0],
-				y = curve[7] - curve[1],
-				dist = Math.sqrt(x * x + y * y);
-			if (dist > Numerical.TOLERANCE) {
-				this.length += dist;
-				this.parts.push({
-					offset: this.length,
-					value: maxT,
-					index: index
-				});
-			}
-		}
-	},
-
-	getParameterAt: function(offset) {
-		var i, j = this.index;
-		for (;;) {
-			i = j;
-			if (j == 0 || this.parts[--j].offset < offset)
-				break;
-		}
-		for (var l = this.parts.length; i < l; i++) {
-			var part = this.parts[i];
-			if (part.offset >= offset) {
-				this.index = i;
-				var prev = this.parts[i - 1];
-				var prevVal = prev && prev.index == part.index ? prev.value : 0,
-					prevLen = prev ? prev.offset : 0;
-				return {
-					value: prevVal + (part.value - prevVal)
-						* (offset - prevLen) /  (part.offset - prevLen),
-					index: part.index
-				};
-			}
-		}
-		var part = this.parts[this.parts.length - 1];
-		return {
-			value: 1,
-			index: part.index
-		};
-	},
-
-	evaluate: function(offset, type) {
-		var param = this.getParameterAt(offset);
-		return Curve.evaluate(this.curves[param.index], param.value, type);
-	},
-
-	drawPart: function(ctx, from, to) {
-		from = this.getParameterAt(from);
-		to = this.getParameterAt(to);
-		for (var i = from.index; i <= to.index; i++) {
-			var curve = Curve.getPart(this.curves[i],
-					i == from.index ? from.value : 0,
-					i == to.index ? to.value : 1);
-			if (i == from.index)
-				ctx.moveTo(curve[0], curve[1]);
-			ctx.bezierCurveTo.apply(ctx, curve.slice(2));
-		}
-	}
-});
-
-var PathFitter = Base.extend({
-	initialize: function(path, error) {
-		this.points = [];
-		var segments = path._segments,
-			prev;
-		for (var i = 0, l = segments.length; i < l; i++) {
-			var point = segments[i].point.clone();
-			if (!prev || !prev.equals(point)) {
-				this.points.push(point);
-				prev = point;
-			}
-		}
-		this.error = error;
-	},
-
-	fit: function() {
-		this.segments = [new Segment(this.points[0])];
-		this.fitCubic(0, this.points.length - 1,
-				this.points[1].subtract(this.points[0]).normalize(),
-				this.points[this.points.length - 2].subtract(
-					this.points[this.points.length - 1]).normalize());
-		return this.segments;
-	},
-
-	fitCubic: function(first, last, tan1, tan2) {
-		if (last - first == 1) {
-			var pt1 = this.points[first],
-				pt2 = this.points[last],
-				dist = pt1.getDistance(pt2) / 3;
-			this.addCurve([pt1, pt1.add(tan1.normalize(dist)),
-					pt2.add(tan2.normalize(dist)), pt2]);
-			return;
-		}
-		var uPrime = this.chordLengthParameterize(first, last),
-			maxError = Math.max(this.error, this.error * this.error),
-			error,
-			split;
-		for (var i = 0; i <= 4; i++) {
-			var curve = this.generateBezier(first, last, uPrime, tan1, tan2);
-			var max = this.findMaxError(first, last, curve, uPrime);
-			if (max.error < this.error) {
-				this.addCurve(curve);
-				return;
-			}
-			split = max.index;
-			if (max.error >= maxError)
-				break;
-			this.reparameterize(first, last, uPrime, curve);
-			maxError = max.error;
-		}
-		var V1 = this.points[split - 1].subtract(this.points[split]),
-			V2 = this.points[split].subtract(this.points[split + 1]),
-			tanCenter = V1.add(V2).divide(2).normalize();
-		this.fitCubic(first, split, tan1, tanCenter);
-		this.fitCubic(split, last, tanCenter.negate(), tan2);
-	},
-
-	addCurve: function(curve) {
-		var prev = this.segments[this.segments.length - 1];
-		prev.setHandleOut(curve[1].subtract(curve[0]));
-		this.segments.push(
-				new Segment(curve[3], curve[2].subtract(curve[3])));
-	},
-
-	generateBezier: function(first, last, uPrime, tan1, tan2) {
-		var epsilon = Numerical.EPSILON,
-			pt1 = this.points[first],
-			pt2 = this.points[last],
-		 	C = [[0, 0], [0, 0]],
-			X = [0, 0];
-
-		for (var i = 0, l = last - first + 1; i < l; i++) {
-			var u = uPrime[i],
-				t = 1 - u,
-				b = 3 * u * t,
-				b0 = t * t * t,
-				b1 = b * t,
-				b2 = b * u,
-				b3 = u * u * u,
-				a1 = tan1.normalize(b1),
-				a2 = tan2.normalize(b2),
-				tmp = this.points[first + i]
-					.subtract(pt1.multiply(b0 + b1))
-					.subtract(pt2.multiply(b2 + b3));
-			C[0][0] += a1.dot(a1);
-			C[0][1] += a1.dot(a2);
-			C[1][0] = C[0][1];
-			C[1][1] += a2.dot(a2);
-			X[0] += a1.dot(tmp);
-			X[1] += a2.dot(tmp);
-		}
-
-		var detC0C1 = C[0][0] * C[1][1] - C[1][0] * C[0][1],
-			alpha1, alpha2;
-		if (Math.abs(detC0C1) > epsilon) {
-			var detC0X  = C[0][0] * X[1]    - C[1][0] * X[0],
-				detXC1  = X[0]    * C[1][1] - X[1]    * C[0][1];
-			alpha1 = detXC1 / detC0C1;
-			alpha2 = detC0X / detC0C1;
-		} else {
-			var c0 = C[0][0] + C[0][1],
-				c1 = C[1][0] + C[1][1];
-			if (Math.abs(c0) > epsilon) {
-				alpha1 = alpha2 = X[0] / c0;
-			} else if (Math.abs(c1) > epsilon) {
-				alpha1 = alpha2 = X[1] / c1;
-			} else {
-				alpha1 = alpha2 = 0.;
-			}
-		}
-
-		var segLength = pt2.getDistance(pt1);
-		epsilon *= segLength;
-		if (alpha1 < epsilon || alpha2 < epsilon) {
-			alpha1 = alpha2 = segLength / 3;
-		}
-
-		return [pt1, pt1.add(tan1.normalize(alpha1)),
-				pt2.add(tan2.normalize(alpha2)), pt2];
-	},
-
-	reparameterize: function(first, last, u, curve) {
-		for (var i = first; i <= last; i++) {
-			u[i - first] = this.findRoot(curve, this.points[i], u[i - first]);
-		}
-	},
-
-	findRoot: function(curve, point, u) {
-		var curve1 = [],
-			curve2 = [];
-		for (var i = 0; i <= 2; i++) {
-			curve1[i] = curve[i + 1].subtract(curve[i]).multiply(3);
-		}
-		for (var i = 0; i <= 1; i++) {
-			curve2[i] = curve1[i + 1].subtract(curve1[i]).multiply(2);
-		}
-		var pt = this.evaluate(3, curve, u),
-		 	pt1 = this.evaluate(2, curve1, u),
-		 	pt2 = this.evaluate(1, curve2, u),
-		 	diff = pt.subtract(point),
-			df = pt1.dot(pt1) + diff.dot(pt2);
-		if (Math.abs(df) < Numerical.TOLERANCE)
-			return u;
-		return u - diff.dot(pt1) / df;
-	},
-
-	evaluate: function(degree, curve, t) {
-		var tmp = curve.slice();
-		for (var i = 1; i <= degree; i++) {
-			for (var j = 0; j <= degree - i; j++) {
-				tmp[j] = tmp[j].multiply(1 - t).add(tmp[j + 1].multiply(t));
-			}
-		}
-		return tmp[0];
-	},
-
-	chordLengthParameterize: function(first, last) {
-		var u = [0];
-		for (var i = first + 1; i <= last; i++) {
-			u[i - first] = u[i - first - 1]
-					+ this.points[i].getDistance(this.points[i - 1]);
-		}
-		for (var i = 1, m = last - first; i <= m; i++) {
-			u[i] /= u[m];
-		}
-		return u;
-	},
-
-	findMaxError: function(first, last, curve, u) {
-		var index = Math.floor((last - first + 1) / 2),
-			maxDist = 0;
-		for (var i = first + 1; i < last; i++) {
-			var P = this.evaluate(3, curve, u[i - first]);
-			var v = P.subtract(this.points[i]);
-			var dist = v.x * v.x + v.y * v.y; 
-			if (dist >= maxDist) {
-				maxDist = dist;
-				index = i;
-			}
-		}
-		return {
-			error: maxDist,
-			index: index
-		};
-	}
-});
-
-var TextItem = this.TextItem = Item.extend({
-	_boundsType: 'bounds',
-
-	initialize: function(pointOrMatrix) {
-		this._style = CharacterStyle.create(this);
-		this._paragraphStyle = ParagraphStyle.create(this);
-		this.base(pointOrMatrix);
-		this.setParagraphStyle();
-		this._content = '';
-		this._lines = [];
-	},
-
-	_clone: function(copy) {
-		copy.setContent(this._content);
-		copy.setParagraphStyle(this._paragraphStyle);
-		return this.base(copy);
-	},
-
-	getContent: function() {
-		return this._content;
-	},
-
-	setContent: function(content) {
-		this._content = '' + content;
-		this._lines = this._content.split(/\r\n|\n|\r/mg);
-		this._changed(Change.CONTENT);
-	},
-
-	getCharacterStyle: function() {
-		return this.getStyle();
-	},
-
-	setCharacterStyle: function(style) {
-		this.setStyle(style);
-	}
-
-});
-
-var PointText = this.PointText = TextItem.extend({
-	initialize: function(pointOrMatrix) {
-		this.base(pointOrMatrix);
-		this._point = this._matrix.getTranslation();
-	},
-
-	clone: function() {
-		return this._clone(new PointText(this._matrix));
-	},
-
-	getPoint: function() {
-		return LinkedPoint.create(this, 'setPoint',
-				this._point.x, this._point.y);
-	},
-
-	setPoint: function(point) {
-		this.translate(Point.read(arguments).subtract(this._point));
-	},
-
-	_transform: function(matrix) {
-		matrix._transformPoint(this._point, this._point);
-	},
-
-	draw: function(ctx) {
-		if (!this._content)
-			return;
-		this._setStyles(ctx);
-		var style = this._style,
-			leading = this.getLeading(),
-			lines = this._lines;
-		ctx.font = style.getFontStyle();
-		ctx.textAlign = this.getJustification();
-		for (var i = 0, l = lines.length; i < l; i++) {
-			var line = lines[i];
-			if (style._fillColor)
-				ctx.fillText(line, 0, 0);
-			if (style._strokeColor)
-				ctx.strokeText(line, 0, 0);
-			ctx.translate(0, leading);
-		}
-	}
-}, new function() {
-	var context = null;
-
-	return {
-		_getBounds: function(type, matrix) {
-			if (!context)
-				context = CanvasProvider.getCanvas(
-						Size.create(1, 1)).getContext('2d');
-			var justification = this.getJustification(),
-				x = 0;
-			context.font = this._style.getFontStyle();
-			var width = 0;
-			for (var i = 0, l = this._lines.length; i < l; i++)
-				width = Math.max(width, context.measureText(
-						this._lines[i]).width);
-			if (justification !== 'left')
-				x -= width / (justification === 'center' ? 2: 1);
-			var leading = this.getLeading(),
-				count = this._lines.length,
-				bounds = Rectangle.create(x,
-						count ? leading / 4 + (count - 1) * leading : 0,
-						width, -count * leading);
-			return matrix ? matrix._transformBounds(bounds, bounds) : bounds;
-		}
-	};
-});
-
-var Style = Item.extend({
-	initialize: function(style) {
-		var clone = style instanceof Style;
-		return Base.each(this._defaults, function(value, key) {
-			value = style && style[key] || value;
-			this[key] = value && clone && value.clone
-					? value.clone() : value;
-		}, this);
-	},
-
-	statics: {
-		create: function(item) {
-			var style = new this(this.dont);
-			style._item = item;
-			return style;
-		},
-
-		extend: function(src) {
-			var styleKey = '_' + src._style,
-				stylePart = Base.capitalize(src._style),
-				flags = src._flags || {},
-				owner = {};
-
-			owner['get' + stylePart] = function() {
-				return this[styleKey];
-			};
-
-			owner['set' + stylePart] = function(style) {
-				this[styleKey].initialize(style);
-			};
-
-			Base.each(src._defaults, function(value, key) {
-				var isColor = !!key.match(/Color$/),
-					part = Base.capitalize(key),
-					set = 'set' + part,
-					get = 'get' + part;
-				src[set] = function(value) {
-					var children = this._item && this._item._children;
-					value = isColor ? Color.read(arguments) : value;
-					if (children) {
-						for (var i = 0, l = children.length; i < l; i++)
-							children[i][styleKey][set](value);
-					} else {
-						var old = this['_' + key];
-						if (old != value && !(old && old.equals
-									&& old.equals(value))) {
-							this['_' + key] = value;
-							if (isColor) {
-								if (old)
-									old._removeOwner(this._item);
-								if (value)
-									value._addOwner(this._item);
-							}
-							if (this._item)
-								this._item._changed(flags[key] || Change.STYLE);
-						}
-					}
-					return this;
-				};
-				src[get] = function() {
-					var children = this._item && this._item._children,
-						style;
-					if (!children)
-						return this['_' + key];
-					for (var i = 0, l = children.length; i < l; i++) {
-						var childStyle = children[i][styleKey][get]();
-						if (!style) {
-							style = childStyle;
-						} else if (style != childStyle && !(style
-								&& style.equals && style.equals(childStyle))) {
-							return undefined;
-						}
-					}
-					return style;
-				};
-				owner[set] = function(value) {
-					this[styleKey][set](value);
-					return this;
-				};
-				owner[get] = function() {
-					return this[styleKey][get]();
-				};
-			});
-			src._owner.inject(owner);
-			return this.base.apply(this, arguments);
-		}
-	}
-});
-
-var PathStyle = this.PathStyle = Style.extend({
-	_owner: Item,
-	_style: 'style',
-	_defaults: {
-		fillColor: undefined,
-		strokeColor: undefined,
-		strokeWidth: 1,
-		strokeCap: 'butt',
-		strokeJoin: 'miter',
-		miterLimit: 10,
-		dashOffset: 0,
-		dashArray: []
-	},
-	_flags: {
-		strokeWidth: Change.STROKE,
-		strokeCap: Change.STROKE,
-		strokeJoin: Change.STROKE,
-		miterLimit: Change.STROKE
-	}
-
-});
-
-var ParagraphStyle = this.ParagraphStyle = Style.extend({
-	_owner: TextItem,
-	_style: 'paragraphStyle',
-	_defaults: {
-		justification: 'left'
-	},
-	_flags: {
-		justification: Change.GEOMETRY
-	}
-
-});
-
-var CharacterStyle = this.CharacterStyle = PathStyle.extend({
-	_owner: TextItem,
-	_style: 'style',
-	_defaults: Base.merge(PathStyle.prototype._defaults, {
-		fillColor: 'black',
-		fontSize: 12,
-		leading: null,
-		font: 'sans-serif'
-	}),
-	_flags: {
-		fontSize: Change.GEOMETRY,
-		leading: Change.GEOMETRY,
-		font: Change.GEOMETRY
-	}
-
-}, {
-	getLeading: function() {
-		var leading = this.base();
-		return leading != null ? leading : this.getFontSize() * 1.2;
-	},
-
-	getFontStyle: function() {
-		return this._fontSize + 'px ' + this._font;
-	}
-});
-
-var Color = this.Color = Base.extend(new function() {
-
-	var components = {
-		gray: ['gray'],
-		rgb: ['red', 'green', 'blue'],
-		hsb: ['hue', 'saturation', 'brightness'],
-		hsl: ['hue', 'saturation', 'lightness']
-	};
-
-	var colorCache = {},
-		colorContext;
-
-	function nameToRgbColor(name) {
-		var color = colorCache[name];
-		if (color)
-			return color.clone();
-		if (!colorContext) {
-			var canvas = CanvasProvider.getCanvas(Size.create(1, 1));
-			colorContext = canvas.getContext('2d');
-			colorContext.globalCompositeOperation = 'copy';
-		}
-		colorContext.fillStyle = 'rgba(0,0,0,0)';
-		colorContext.fillStyle = name;
-		colorContext.fillRect(0, 0, 1, 1);
-		var data = colorContext.getImageData(0, 0, 1, 1).data,
-			rgb = [data[0] / 255, data[1] / 255, data[2] / 255];
-		return (colorCache[name] = RgbColor.read(rgb)).clone();
-	}
-
-	function hexToRgbColor(string) {
-		var hex = string.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
-		if (hex.length >= 4) {
-			var rgb = new Array(3);
-			for (var i = 0; i < 3; i++) {
-				var channel = hex[i + 1];
-				rgb[i] = parseInt(channel.length == 1
-						? channel + channel : channel, 16) / 255;
-			}
-			return RgbColor.read(rgb);
-		}
-	}
-
-	var hsbIndices = [
-		[0, 3, 1], 
-		[2, 0, 1], 
-		[1, 0, 3], 
-		[1, 2, 0], 
-		[3, 1, 0], 
-		[0, 1, 2]  
-	];
-
-	var converters = {
-		'rgb-hsb': function(color) {
-			var r = color._red,
-				g = color._green,
-				b = color._blue,
-				max = Math.max(r, g, b),
-				min = Math.min(r, g, b),
-				delta = max - min,
-				h = delta == 0 ? 0
-					:   ( max == r ? (g - b) / delta + (g < b ? 6 : 0)
-						: max == g ? (b - r) / delta + 2
-						:            (r - g) / delta + 4) * 60, 
-				s = max == 0 ? 0 : delta / max,
-				v = max; 
-			return new HsbColor(h, s, v, color._alpha);
-		},
-
-		'hsb-rgb': function(color) {
-			var h = (color._hue / 60) % 6, 
-				s = color._saturation,
-				b = color._brightness,
-				i = Math.floor(h), 
-				f = h - i,
-				i = hsbIndices[i],
-				v = [
-					b,						
-					b * (1 - s),			
-					b * (1 - s * f),		
-					b * (1 - s * (1 - f))	
-				];
-			return new RgbColor(v[i[0]], v[i[1]], v[i[2]], color._alpha);
-		},
-
-		'rgb-hsl': function(color) {
-			var r = color._red,
-				g = color._green,
-				b = color._blue,
-				max = Math.max(r, g, b),
-				min = Math.min(r, g, b),
-				delta = max - min,
-				achromatic = delta == 0,
-				h = achromatic ? 0
-					:   ( max == r ? (g - b) / delta + (g < b ? 6 : 0)
-						: max == g ? (b - r) / delta + 2
-						:            (r - g) / delta + 4) * 60, 
-				l = (max + min) / 2,
-				s = achromatic ? 0 : l < 0.5
-						? delta / (max + min)
-						: delta / (2 - max - min);
-			return new HslColor(h, s, l, color._alpha);
-		},
-
-		'hsl-rgb': function(color) {
-			var s = color._saturation,
-				h = color._hue / 360,
-				l = color._lightness,
-				t1, t2, c;
-			if (s == 0)
-				return new RgbColor(l, l, l, color._alpha);
-			var t3s = [ h + 1 / 3, h, h - 1 / 3 ],
-				t2 = l < 0.5 ? l * (1 + s) : l + s - l * s,
-				t1 = 2 * l - t2,
-				c = [];
-			for (var i = 0; i < 3; i++) {
-				var t3 = t3s[i];
-				if (t3 < 0) t3 += 1;
-				if (t3 > 1) t3 -= 1;
-				c[i] = 6 * t3 < 1
-					? t1 + (t2 - t1) * 6 * t3
-					: 2 * t3 < 1
-						? t2
-						: 3 * t3 < 2
-							? t1 + (t2 - t1) * ((2 / 3) - t3) * 6
-							: t1;
-			}
-			return new RgbColor(c[0], c[1], c[2], color._alpha);
-		},
-
-		'rgb-gray': function(color) {
-			return new GrayColor(1 - (color._red * 0.2989 + color._green * 0.587
-					+ color._blue * 0.114), color._alpha);
-		},
-
-		'gray-rgb': function(color) {
-			var comp = 1 - color._gray;
-			return new RgbColor(comp, comp, comp, color._alpha);
-		},
-
-		'gray-hsb': function(color) {
-			return new HsbColor(0, 0, 1 - color._gray, color._alpha);
-		},
-
-		'gray-hsl': function(color) {
-			return new HslColor(0, 0, 1 - color._gray, color._alpha);
-		}
-	};
-
-	var fields = {
-		_readNull: true,
-
-		initialize: function(arg) {
-			var isArray = Array.isArray(arg),
-				type = this._colorType;
-			if (typeof arg === 'object' && !isArray) {
-				if (!type) {
-					return arg.red !== undefined
-						? new RgbColor(arg.red, arg.green, arg.blue, arg.alpha)
-						: arg.gray !== undefined
-						? new GrayColor(arg.gray, arg.alpha)
-						: arg.lightness !== undefined
-						? new HslColor(arg.hue, arg.saturation, arg.lightness,
-								arg.alpha)
-						: arg.hue !== undefined
-						? new HsbColor(arg.hue, arg.saturation, arg.brightness,
-								arg.alpha)
-						: new RgbColor(); 
-				} else {
-					return Color.read(arguments).convert(type);
-				}
-			} else if (typeof arg === 'string') {
-				var rgbColor = arg.match(/^#[0-9a-f]{3,6}$/i)
-						? hexToRgbColor(arg)
-						: nameToRgbColor(arg);
-				return type
-						? rgbColor.convert(type)
-						: rgbColor;
-			} else {
-				var components = isArray ? arg
-						: Array.prototype.slice.call(arguments);
-				if (!type) {
-					if (components.length >= 3)
-						return new RgbColor(components);
-					return new GrayColor(components);
-				} else {
-					Base.each(this._components,
-						function(name, i) {
-							var value = components[i];
-							this['_' + name] = value !== undefined
-									? value : null;
-						},
-					this);
-				}
-			}
-		},
-
-		clone: function() {
-			var ctor = this.constructor,
-				copy = new ctor(ctor.dont),
-				components = this._components;
-			for (var i = 0, l = components.length; i < l; i++) {
-				var key = '_' + components[i];
-				copy[key] = this[key];
-			}
-			return copy;
-		},
-
-		convert: function(type) {
-			var converter;
-			return this._colorType == type
-					? this.clone()
-					: (converter = converters[this._colorType + '-' + type])
-						? converter(this)
-						: converters['rgb-' + type](
-								converters[this._colorType + '-rgb'](this));
-		},
-
-		statics: {
-			extend: function(src) {
-				if (src._colorType) {
-					var comps = components[src._colorType];
-					src._components = comps.concat(['alpha']);
-					Base.each(comps, function(name) {
-						var isHue = name === 'hue',
-							part = Base.capitalize(name),
-							name = '_' + name;
-						this['get' + part] = function() {
-							return this[name];
-						};
-						this['set' + part] = function(value) {
-							this[name] = isHue
-								? ((value % 360) + 360) % 360
-								: Math.min(Math.max(value, 0), 1);
-							this._changed();
-							return this;
-						};
-					}, src);
-				}
-				return this.base(src);
-			}
-		}
-	};
-
-	Base.each(components, function(comps, type) {
-		Base.each(comps, function(component) {
-			var part = Base.capitalize(component);
-			fields['get' + part] = function() {
-				return this.convert(type)[component];
-			};
-			fields['set' + part] = function(value) {
-				var color = this.convert(type);
-				color[component] = value;
-				color = color.convert(this._colorType);
-				for (var i = 0, l = this._components.length; i < l; i++) {
-					var key = this._components[i];
-					this[key] = color[key];
-				}
-			};
-		});
-	});
-
-	return fields;
-}, {
-
-	_changed: function() {
-		this._cssString = null;
-		for (var i = 0, l = this._owners && this._owners.length; i < l; i++)
-			this._owners[i]._changed(Change.STYLE);
-	},
-
-	_addOwner: function(item) {
-		if (!this._owners)
-			this._owners = [];
-		this._owners.push(item);
-	},
-
-	_removeOwner: function(item) {
-		var index = this._owners ? this._owners.indexOf(item) : -1;
-		if (index != -1) {
-			this._owners.splice(index, 1);
-			if (this._owners.length == 0)
-				delete this._owners;
-		}
-	},
-
-	getType: function() {
-		return this._colorType;
-	},
-
-	getComponents: function() {
-		var length = this._components.length;
-		var comps = new Array(length);
-		for (var i = 0; i < length; i++)
-			comps[i] = this['_' + this._components[i]];
-		return comps;
-	},
-
-	getAlpha: function() {
-		return this._alpha != null ? this._alpha : 1;
-	},
-
-	setAlpha: function(alpha) {
-		this._alpha = alpha == null ? null : Math.min(Math.max(alpha, 0), 1);
-		this._changed();
-		return this;
-	},
-
-	hasAlpha: function() {
-		return this._alpha != null;
-	},
-
-	equals: function(color) {
-		if (color && color._colorType === this._colorType) {
-			for (var i = 0, l = this._components.length; i < l; i++) {
-				var component = '_' + this._components[i];
-				if (this[component] !== color[component])
-					return false;
-			}
-			return true;
-		}
-		return false;
-	},
-
-	toString: function() {
-		var parts = [],
-			format = Base.formatNumber;
-		for (var i = 0, l = this._components.length; i < l; i++) {
-			var component = this._components[i],
-				value = this['_' + component];
-			if (component === 'alpha' && value == null)
-				value = 1;
-			parts.push(component + ': ' + format(value));
-		}
-		return '{ ' + parts.join(', ') + ' }';
-	},
-
-	toCssString: function() {
-		if (!this._cssString) {
-			var color = this.convert('rgb'),
-				alpha = color.getAlpha(),
-				components = [
-					Math.round(color._red * 255),
-					Math.round(color._green * 255),
-					Math.round(color._blue * 255),
-					alpha != null ? alpha : 1
-				];
-			this._cssString = 'rgba(' + components.join(', ') + ')';
-		}
-		return this._cssString;
-	},
-
-	getCanvasStyle: function() {
-		return this.toCssString();
-	}
-
-});
-
-var GrayColor = this.GrayColor = Color.extend({
-
-	_colorType: 'gray'
-});
-
-var RgbColor = this.RgbColor = this.RGBColor = Color.extend({
-
-	_colorType: 'rgb'
-});
-
-var HsbColor = this.HsbColor = this.HSBColor = Color.extend({
-
-	_colorType: 'hsb'
-});
-
-var HslColor = this.HslColor = this.HSLColor = Color.extend({
-
-	_colorType: 'hsl'
-});
-
-var GradientColor = this.GradientColor = Color.extend({
-
-	initialize: function(gradient, origin, destination, hilite) {
-		this.gradient = gradient || new Gradient();
-		this.gradient._addOwner(this);
-		this.setOrigin(origin);
-		this.setDestination(destination);
-		if (hilite)
-			this.setHilite(hilite);
-	},
-
-	clone: function() {
-		return new GradientColor(this.gradient, this._origin, this._destination,
-				this._hilite);
-	},
-
-	getOrigin: function() {
-		return this._origin;
-	},
-
-	setOrigin: function(origin) {
-		origin = Point.read(arguments).clone();
-		this._origin = origin;
-		if (this._destination)
-			this._radius = this._destination.getDistance(this._origin);
-		this._changed();
-		return this;
-	},
-
-	getDestination: function() {
-		return this._destination;
-	},
-
-	setDestination: function(destination) {
-		destination = Point.read(arguments).clone();
-		this._destination = destination;
-		this._radius = this._destination.getDistance(this._origin);
-		this._changed();
-		return this;
-	},
-
-	getHilite: function() {
-		return this._hilite;
-	},
-
-	setHilite: function(hilite) {
-		hilite = Point.read(arguments).clone();
-		var vector = hilite.subtract(this._origin);
-		if (vector.getLength() > this._radius) {
-			this._hilite = this._origin.add(
-					vector.normalize(this._radius - 0.1));
-		} else {
-			this._hilite = hilite;
-		}
-		this._changed();
-		return this;
-	},
-
-	getCanvasStyle: function(ctx) {
-		var gradient;
-		if (this.gradient.type === 'linear') {
-			gradient = ctx.createLinearGradient(this._origin.x, this._origin.y,
-					this._destination.x, this._destination.y);
-		} else {
-			var origin = this._hilite || this._origin;
-			gradient = ctx.createRadialGradient(origin.x, origin.y,
-					0, this._origin.x, this._origin.y, this._radius);
-		}
-		for (var i = 0, l = this.gradient._stops.length; i < l; i++) {
-			var stop = this.gradient._stops[i];
-			gradient.addColorStop(stop._rampPoint, stop._color.toCssString());
-		}
-		return gradient;
-	},
-
-	equals: function(color) {
-		return color == this || color && color._colorType === this._colorType
-				&& this.gradient.equals(color.gradient)
-				&& this._origin.equals(color._origin)
-				&& this._destination.equals(color._destination);
-	},
-
-	transform: function(matrix) {
-		matrix._transformPoint(this._origin, this._origin, true);
-		matrix._transformPoint(this._destination, this._destination, true);
-		if (this._hilite)
-			matrix._transformPoint(this._hilite, this._hilite, true);
-		this._radius = this._destination.getDistance(this._origin);
-	}
-});
-
-var Gradient = this.Gradient = Base.extend({
-	initialize: function(stops, type) {
-		this.setStops(stops || ['white', 'black']);
-		this.type = type || 'linear';
-	},
-
-	_changed: function() {
-		for (var i = 0, l = this._owners && this._owners.length; i < l; i++)
-			this._owners[i]._changed();
-	},
-
-	_addOwner: function(color) {
-		if (!this._owners)
-			this._owners = [];
-		this._owners.push(color);
-	},
-
-	_removeOwner: function(color) {
-		var index = this._owners ? this._owners.indexOf(color) : -1;
-		if (index != -1) {
-			this._owners.splice(index, 1);
-			if (this._owners.length == 0)
-				delete this._owners;
-		}
-	},
-
-	clone: function() {
-		var stops = [];
-		for (var i = 0, l = this._stops.length; i < l; i++)
-			stops[i] = this._stops[i].clone();
-		return new Gradient(stops, this.type);
-	},
-
-	getStops: function() {
-		return this._stops;
-	},
-
-	setStops: function(stops) {
-		if (this.stops) {
-			for (var i = 0, l = this._stops.length; i < l; i++) {
-				this._stops[i]._removeOwner(this);
-			}
-		}
-		if (stops.length < 2)
-			throw new Error(
-					'Gradient stop list needs to contain at least two stops.');
-		this._stops = GradientStop.readAll(stops);
-		for (var i = 0, l = this._stops.length; i < l; i++) {
-			var stop = this._stops[i];
-			stop._addOwner(this);
-			if (stop._defaultRamp)
-				stop.setRampPoint(i / (l - 1));
-		}
-		this._changed();
-	},
-
-	equals: function(gradient) {
-		if (gradient.type != this.type)
-			return false;
-		if (this._stops.length == gradient._stops.length) {
-			for (var i = 0, l = this._stops.length; i < l; i++) {
-				if (!this._stops[i].equals(gradient._stops[i]))
-					return false;
-			}
-			return true;
-		}
-		return false;
-	}
-});
-
-var GradientStop = this.GradientStop = Base.extend({
-	initialize: function(arg0, arg1) {
-		if (arg1 === undefined && Array.isArray(arg0)) {
-			this.setColor(arg0[0]);
-			this.setRampPoint(arg0[1]);
-		} else if (arg0.color) {
-			this.setColor(arg0.color);
-			this.setRampPoint(arg0.rampPoint);
-		} else {
-			this.setColor(arg0);
-			this.setRampPoint(arg1);
-		}
-	},
-
-	clone: function() {
-		return new GradientStop(this._color.clone(), this._rampPoint);
-	},
-
-	_changed: function() {
-		for (var i = 0, l = this._owners && this._owners.length; i < l; i++)
-			this._owners[i]._changed(Change.STYLE);
-	},
-
-	_addOwner: function(gradient) {
-		if (!this._owners)
-			this._owners = [];
-		this._owners.push(gradient);
-	},
-
-	_removeOwner: function(gradient) {
-		var index = this._owners ? this._owners.indexOf(gradient) : -1;
-		if (index != -1) {
-			this._owners.splice(index, 1);
-			if (this._owners.length == 0)
-				delete this._owners;
-		}
-	},
-
-	getRampPoint: function() {
-		return this._rampPoint;
-	},
-
-	setRampPoint: function(rampPoint) {
-		this._defaultRamp = rampPoint == null;
-		this._rampPoint = rampPoint || 0;
-		this._changed();
-	},
-
-	getColor: function() {
-		return this._color;
-	},
-
-	setColor: function(color) {
-		if (this._color)
-			this._color._removeOwner(this);
-		this._color = Color.read(arguments);
-		this._color._addOwner(this);
-		this._changed();
-	},
-
-	equals: function(stop) {
-		return stop == this || stop instanceof GradientStop
-				&& this._color.equals(stop._color)
-				&& this._rampPoint == stop._rampPoint;
-	}
-});
-
-var DomElement = {
-	getBounds: function(el, viewport) {
-		var rect = el.getBoundingClientRect(),
-			doc = el.ownerDocument,
-			body = doc.body,
-			docEl = doc.documentElement,
-			x = rect.left - (docEl.clientLeft || body.clientLeft || 0),
-			y = rect.top - (docEl.clientTop  || body.clientTop  || 0);
-		if (!viewport) {
-			var win = DomElement.getViewport(doc);
-			x += win.pageXOffset || docEl.scrollLeft || body.scrollLeft;
-			y += win.pageYOffset || docEl.scrollTop || body.scrollTop;
-		}
-		return new Rectangle(x, y, rect.width, rect.height);
-	},
-
-	getOffset: function(el, viewport) {
-		return this.getBounds(el, viewport).getPoint();
-	},
-
-	getSize: function(el) {
-		return this.getBounds(el, true).getSize();
-	},
-
-	isInvisible: function(el) {
-		return this.getSize(el).equals([0, 0]);
-	},
-
-	isVisible: function(el) {
-		return !this.isInvisible(el) && this.getViewportBounds(el).intersects(
-				this.getBounds(el, true));
-	},
-
-	getViewport: function(doc) {
-		return doc.defaultView || doc.parentWindow;
-	},
-
-	getViewportBounds: function(el) {
-		var doc = el.ownerDocument,
-			view = this.getViewport(doc),
-			body = doc.getElementsByTagName(
-				doc.compatMode === 'CSS1Compat' ? 'html' : 'body')[0];
-		return Rectangle.create(0, 0, 
-			view.innerWidth || body.clientWidth,
-			view.innerHeight || body.clientHeight
-		);
-	},
-
-	getComputedStyle: function(el, name) {
-		if (el.currentStyle)
-			return el.currentStyle[Base.camelize(name)];
-		var style = this.getViewport(el.ownerDocument)
-				.getComputedStyle(el, null);
-		return style ? style.getPropertyValue(Base.hyphenate(name)) : null;
-	}
-};
-
-var DomEvent = {
-	add: function(el, events) {
-		for (var type in events) {
-			var func = events[type];
-			if (el.addEventListener) {
-				el.addEventListener(type, func, false);
-			} else if (el.attachEvent) {
-				el.attachEvent('on' + type, func.bound = function() {
-					func.call(el, window.event);
-				});
-			}
-		}
-	},
-
-	remove: function(el, events) {
-		for (var type in events) {
-			var func = events[type];
-			if (el.removeEventListener) {
-				el.removeEventListener(type, func, false);
-			} else if (el.detachEvent) {
-				el.detachEvent('on' + type, func.bound);
-			}
-		}
-	},
-
-	getPoint: function(event) {
-		var pos = event.targetTouches
-				? event.targetTouches.length
-					? event.targetTouches[0]
-					: event.changedTouches[0]
-				: event;
-		return Point.create(
-			pos.pageX || pos.clientX + document.documentElement.scrollLeft,
-			pos.pageY || pos.clientY + document.documentElement.scrollTop
-		);
-	},
-
-	getTarget: function(event) {
-		return event.target || event.srcElement;
-	},
-
-	getOffset: function(event, target) {
-		return DomEvent.getPoint(event).subtract(DomElement.getOffset(
-				target || DomEvent.getTarget(event)));
-	},
-
-	preventDefault: function(event) {
-		if (event.preventDefault) {
-			event.preventDefault();
-		} else {
-			event.returnValue = false;
-		}
-	},
-
-	stopPropagation: function(event) {
-		if (event.stopPropagation) {
-			event.stopPropagation();
-		} else {
-			event.cancelBubble = true;
-		}
-	},
-
-	stop: function(event) {
-		DomEvent.stopPropagation(event);
-		DomEvent.preventDefault(event);
-	}
-};
-
-DomEvent.requestAnimationFrame = new function() {
-	var part = 'equestAnimationFrame',
-		request = window['r' + part] || window['webkitR' + part]
-			|| window['mozR' + part] || window['oR' + part]
-			|| window['msR' + part];
-	if (request) {
-		request(function(time) {
-			if (time == undefined)
-				request = null;
-		});
-	}
-
-	var callbacks = [],
-		focused = true,
-		timer;
-
-	DomEvent.add(window, {
-		focus: function() {
-			focused = true;
-		},
-		blur: function() {
-			focused = false;
-		}
-	});
-
-	return function(callback, element) {
-		if (request)
-			return request(callback, element);
-		callbacks.push([callback, element]);
-		if (timer)
-			return;
-		timer = window.setInterval(function() {
-			for (var i = callbacks.length - 1; i >= 0; i--) {
-				var entry = callbacks[i],
-					func = entry[0],
-					el = entry[1];
-				if (!el || (PaperScript.getAttribute(el, 'keepalive') == 'true'
-						|| focused) && DomElement.isVisible(el)) {
-					callbacks.splice(i, 1);
-					func(Date.now());
-				}
-			}
-		}, 1000 / 60);
-	};
-};
-
-var View = this.View = Base.extend(Callback, {
-	_events: {
-		onFrame: {
-			install: function() {
-				var that = this,
-					requested = false,
-					before,
-					time = 0,
-					count = 0;
-				this._onFrameCallback = function(param, dontRequest) {
-					requested = false;
-					if (!that._onFrameCallback)
-						return;
-					paper = that._scope;
-					if (!dontRequest) {
-						requested = true;
-						DomEvent.requestAnimationFrame(that._onFrameCallback,
-								that._element);
-					}
-					var now = Date.now() / 1000,
-					 	delta = before ? now - before : 0;
-					that.fire('frame', Base.merge({
-						delta: delta,
-						time: time += delta,
-						count: count++
-					}));
-					before = now;
-					if (that._stats)
-						that._stats.update();
-					that.draw(true);
-				};
-				if (!requested)
-					this._onFrameCallback();
-			},
-
-			uninstall: function() {
-				delete this._onFrameCallback;
-			}
-		},
-
-		onResize: {}
-	},
-
-	initialize: function(element) {
-		this._scope = paper;
-		this._project = paper.project;
-		this._element = element;
-		var size;
-		this._id = element.getAttribute('id');
-		if (this._id == null)
-			element.setAttribute('id', this._id = 'view-' + View._id++);
-		DomEvent.add(element, this._handlers);
-		if (PaperScript.hasAttribute(element, 'resize')) {
-			var offset = DomElement.getOffset(element, true),
-				that = this;
-			size = DomElement.getViewportBounds(element)
-					.getSize().subtract(offset);
-			element.width = size.width;
-			element.height = size.height;
-			DomEvent.add(window, {
-				resize: function(event) {
-					if (!DomElement.isInvisible(element))
-						offset = DomElement.getOffset(element, true);
-					that.setViewSize(DomElement.getViewportBounds(element)
-							.getSize().subtract(offset));
-				}
-			});
-		} else {
-			size = DomElement.isInvisible(element)
-				? Size.create(parseInt(element.getAttribute('width')),
-						parseInt(element.getAttribute('height')))
-				: DomElement.getSize(element);
-		}
-		if (PaperScript.hasAttribute(element, 'stats')) {
-			this._stats = new Stats();
-			var stats = this._stats.domElement,
-				style = stats.style,
-				offset = DomElement.getOffset(element);
-			style.position = 'absolute';
-			style.left = offset.x + 'px';
-			style.top = offset.y + 'px';
-			document.body.appendChild(stats);
-		}
-		View._views.push(this);
-		View._viewsById[this._id] = this;
-		this._viewSize = LinkedSize.create(this, 'setViewSize',
-				size.width, size.height);
-		this._matrix = new Matrix();
-		this._zoom = 1;
-		if (!View._focused)
-			View._focused = this;
-	},
-
-	remove: function() {
-		if (!this._project)
-			return false;
-		if (View._focused == this)
-			View._focused = null;
-		View._views.splice(View._views.indexOf(this), 1);
-		delete View._viewsById[this._id];
-		if (this._project.view == this)
-			this._project.view = null;
-		DomEvent.remove(this._element, this._handlers);
-		this._element = this._project = null;
-		this.detach('frame');
-		return true;
-	},
-
-	_redraw: function() {
-		this._redrawNeeded = true;
-		if (this._onFrameCallback) {
-			this._onFrameCallback(0, true);
-		} else {
-			this.draw();
-		}
-	},
-
-	_transform: function(matrix) {
-		this._matrix.preConcatenate(matrix);
-		this._bounds = null;
-		this._inverse = null;
-		this._redraw();
-	},
-
-	getElement: function() {
-		return this._element;
-	},
-
-	getViewSize: function() {
-		return this._viewSize;
-	},
-
-	setViewSize: function(size) {
-		size = Size.read(arguments);
-		var delta = size.subtract(this._viewSize);
-		if (delta.isZero())
-			return;
-		this._element.width = size.width;
-		this._element.height = size.height;
-		this._viewSize.set(size.width, size.height, true);
-		this._bounds = null;
-		this._redrawNeeded = true;
-		this.fire('resize', {
-			size: size,
-			delta: delta
-		});
-		this._redraw();
-	},
-
-	getBounds: function() {
-		if (!this._bounds)
-			this._bounds = this._getInverse()._transformBounds(
-					new Rectangle(new Point(), this._viewSize));
-		return this._bounds;
-	},
-
-	getSize: function() {
-		return this.getBounds().getSize();
-	},
-
-	getCenter: function() {
-		return this.getBounds().getCenter();
-	},
-
-	setCenter: function(center) {
-		this.scrollBy(Point.read(arguments).subtract(this.getCenter()));
-	},
-
-	getZoom: function() {
-		return this._zoom;
-	},
-
-	setZoom: function(zoom) {
-		this._transform(new Matrix().scale(zoom / this._zoom,
-			this.getCenter()));
-		this._zoom = zoom;
-	},
-
-	isVisible: function() {
-		return DomElement.isVisible(this._element);
-	},
-
-	scrollBy: function(point) {
-		this._transform(new Matrix().translate(Point.read(arguments).negate()));
-	},
-
-	projectToView: function(point) {
-		return this._matrix._transformPoint(Point.read(arguments));
-	},
-
-	viewToProject: function(point) {
-		return this._getInverse()._transformPoint(Point.read(arguments));
-	},
-
-	_getInverse: function() {
-		if (!this._inverse)
-			this._inverse = this._matrix.createInverse();
-		return this._inverse;
-	}
-
-}, {
-	statics: {
-		_views: [],
-		_viewsById: {},
-		_id: 0,
-
-		create: function(element) {
-			if (typeof element === 'string')
-				element = document.getElementById(element);
-			return new CanvasView(element);
-		}
-	}
-}, new function() {
-	var tool,
-		curPoint,
-		tempFocus,
-		dragging = false;
-
-	function getView(event) {
-		return View._viewsById[DomEvent.getTarget(event).getAttribute('id')];
-	}
-
-	function viewToProject(view, event) {
-		return view.viewToProject(DomEvent.getOffset(event, view._element));
-	}
-
-	function updateFocus() {
-		if (!View._focused || !View._focused.isVisible()) {
-			for (var i = 0, l = View._views.length; i < l; i++) {
-				var view = View._views[i];
-				if (view && view.isVisible()) {
-					View._focused = tempFocus = view;
-					break;
-				}
-			}
-		}
-	}
-
-	function mousedown(event) {
-		var view = View._focused = getView(event);
-		curPoint = viewToProject(view, event);
-		dragging = true;
-		if (view._onMouseDown)
-			view._onMouseDown(event, curPoint);
-		if (tool = view._scope.tool)
-			tool._onHandleEvent('mousedown', curPoint, event);
-		view.draw(true);
-	}
-
-	function mousemove(event) {
-		var view;
-		if (!dragging) {
-			view = getView(event);
-			if (view) {
-				View._focused = tempFocus = view;
-			} else if (tempFocus && tempFocus == View._focused) {
-				View._focused = null;
-				updateFocus();
-			}
-		}
-		if (!(view = view || View._focused))
-			return;
-		var point = event && viewToProject(view, event);
-		if (view._onMouseMove)
-			view._onMouseMove(event, point);
-		if (tool = view._scope.tool) {
-			var onlyMove = !!(!tool.onMouseDrag && tool.onMouseMove);
-			if (dragging && !onlyMove) {
-				if ((curPoint = point || curPoint) 
-						&& tool._onHandleEvent('mousedrag', curPoint, event))
-					DomEvent.stop(event);
-			} else if ((!dragging || onlyMove)
-					&& tool._onHandleEvent('mousemove', point, event)) {
-				DomEvent.stop(event);
-			}
-		}
-		view.draw(true);
-	}
-
-	function mouseup(event) {
-		var view = View._focused;
-		if (!view || !dragging)
-			return;
-		var point = viewToProject(view, event);
-		curPoint = null;
-		dragging = false;
-		if (view._onMouseUp)
-			view._onMouseUp(event, point);
-		if (tool && tool._onHandleEvent('mouseup', point, event))
-			DomEvent.stop(event);
-		view.draw(true);
-	}
-
-	function selectstart(event) {
-		if (dragging)
-			DomEvent.stop(event);
-	}
-
-	DomEvent.add(document, {
-		mousemove: mousemove,
-		mouseup: mouseup,
-		touchmove: mousemove,
-		touchend: mouseup,
-		selectstart: selectstart,
-		scroll: updateFocus
-	});
-
-	DomEvent.add(window, {
-		load: updateFocus
-	});
-
-	return {
-		_handlers: {
-			mousedown: mousedown,
-			touchstart: mousedown,
-			selectstart: selectstart
-		},
-
-		statics: {
-			updateFocus: updateFocus
-		}
-	};
-});
-
-var CanvasView = View.extend({
-	initialize: function(canvas) {
-		if (!(canvas instanceof HTMLCanvasElement)) {
-			var size = Size.read(arguments, 1);
-			if (size.isZero())
-				size = Size.create(1024, 768);
-			canvas = CanvasProvider.getCanvas(size);
-		}
-		this._context = canvas.getContext('2d');
-		this._eventCounters = {};
-		this.base(canvas);
-	},
-
-	draw: function(checkRedraw) {
-		if (checkRedraw && !this._redrawNeeded)
-			return false;
-		var ctx = this._context,
-			size = this._viewSize;
-		ctx.clearRect(0, 0, size._width + 1, size._height + 1);
-		this._project.draw(ctx, this._matrix);
-		this._redrawNeeded = false;
-		return true;
-	}
-}, new function() { 
-
-	var hitOptions = {
-		fill: true,
-		stroke: true,
-		tolerance: 0
-	};
-
-	var downPoint,
-		lastPoint,
-		overPoint,
-		downItem,
-		overItem,
-		hasDrag,
-		doubleClick,
-		clickTime;
-
-	function callEvent(type, event, point, target, lastPoint, bubble) {
-		var item = target,
-			mouseEvent,
-			called = false;
-		while (item) {
-			if (item.responds(type)) {
-				if (!mouseEvent)
-					mouseEvent = new MouseEvent(type, event, point, target,
-							lastPoint ? point.subtract(lastPoint) : null);
-				called = item.fire(type, mouseEvent) || called;
-				if (called && (!bubble || mouseEvent._stopped))
-					break;
-			}
-			item = item.getParent();
-		}
-		return called;
-	}
-
-	function handleEvent(view, type, event, point, lastPoint) {
-		if (view._eventCounters[type]) {
-			var hit = view._project.hitTest(point, hitOptions),
-				item = hit && hit.item;
-			if (item) {
-				if (type == 'mousemove' && item != overItem)
-					lastPoint = point;
-				if (type != 'mousemove' || !hasDrag)
-					callEvent(type, event, point, item, lastPoint);
-				return item;
-			}
-		}
-	}
-
-	return {
-		_onMouseDown: function(event, point) {
-			var item = handleEvent(this, 'mousedown', event, point);
-			doubleClick = downItem == item && Date.now() - clickTime < 300;
-			downItem = item;
-			downPoint = lastPoint = overPoint = point;
-			hasDrag = downItem && downItem.responds('mousedrag');
-		},
-
-		_onMouseUp: function(event, point) {
-			var item = handleEvent(this, 'mouseup', event, point);
-			if (hasDrag) {
-				if (lastPoint && !lastPoint.equals(point))
-					callEvent('mousedrag', event, point, downItem, lastPoint);
-				if (item != downItem) {
-					overPoint = point;
-					callEvent('mousemove', event, point, item, overPoint);
-				}
-			}
-			if (item == downItem) {
-				clickTime = Date.now();
-				callEvent(doubleClick ? 'doubleclick' : 'click', event,
-						downPoint, overItem);
-				doubleClick = false;
-			}
-			downItem = null;
-			hasDrag = false;
-		},
-
-		_onMouseMove: function(event, point) {
-			if (downItem)
-				callEvent('mousedrag', event, point, downItem, lastPoint);
-			var item = handleEvent(this, 'mousemove', event, point, overPoint);
-			lastPoint = overPoint = point;
-			if (item != overItem) {
-				callEvent('mouseleave', event, point, overItem);
-				overItem = item;
-				callEvent('mouseenter', event, point, item);
-			}
-		}
-	};
-});
-
-var Event = this.Event = Base.extend({
-	initialize: function(event) {
-		this.event = event;
-	},
-
-	preventDefault: function() {
-		this._prevented = true;
-		DomEvent.preventDefault(this.event);
-		return this;
-	},
-
-	stopPropagation: function() {
-		this._stopped = true;
-		DomEvent.stopPropagation(this.event);
-		return this;
-	},
-
-	stop: function() {
-		return this.stopPropagation().preventDefault();
-	},
-
-	getModifiers: function() {
-		return Key.modifiers;
-	}
-});
-
-var KeyEvent = this.KeyEvent = Event.extend({
-	initialize: function(down, key, character, event) {
-		this.base(event);
-		this.type = down ? 'keydown' : 'keyup';
-		this.key = key;
-		this.character = character;
-	},
-
-	toString: function() {
-		return '{ type: ' + this.type
-				+ ', key: ' + this.key
-				+ ', character: ' + this.character
-				+ ', modifiers: ' + this.getModifiers()
-				+ ' }';
-	}
-});
-
-var Key = this.Key = new function() {
-
-	var keys = {
-		8: 'backspace',
-		13: 'enter',
-		16: 'shift',
-		17: 'control',
-		18: 'option',
-		19: 'pause',
-		20: 'caps-lock',
-		27: 'escape',
-		32: 'space',
-		35: 'end',
-		36: 'home',
-		37: 'left',
-		38: 'up',
-		39: 'right',
-		40: 'down',
-		46: 'delete',
-		91: 'command',
-		93: 'command', 
-		224: 'command'  
-	},
-
-	modifiers = Base.merge({
-		shift: false,
-		control: false,
-		option: false,
-		command: false,
-		capsLock: false
-	}),
-
-	charCodeMap = {}, 
-	keyMap = {}, 
-	downCode; 
-
-	function handleKey(down, keyCode, charCode, event) {
-		var character = String.fromCharCode(charCode),
-			key = keys[keyCode] || character.toLowerCase(),
-			type = down ? 'keydown' : 'keyup',
-			view = View._focused,
-			scope = view && view.isVisible() && view._scope,
-			tool = scope && scope.tool;
-		keyMap[key] = down;
-		if (tool && tool.responds(type)) {
-			tool.fire(type, new KeyEvent(down, key, character, event));
-			if (view)
-				view.draw(true);
-		}
-	}
-
-	DomEvent.add(document, {
-		keydown: function(event) {
-			var code = event.which || event.keyCode;
-			var key = keys[code], name;
-			if (key) {
-				if ((name = Base.camelize(key)) in modifiers)
-					modifiers[name] = true;
-				charCodeMap[code] = 0;
-				handleKey(true, code, null, event);
-			} else {
-				downCode = code;
-			}
-		},
-
-		keypress: function(event) {
-			if (downCode != null) {
-				var code = event.which || event.keyCode;
-				charCodeMap[downCode] = code;
-				handleKey(true, downCode, code, event);
-				downCode = null;
-			}
-		},
-
-		keyup: function(event) {
-			var code = event.which || event.keyCode,
-				key = keys[code], name;
-			if (key && (name = Base.camelize(key)) in modifiers)
-				modifiers[name] = false;
-			if (charCodeMap[code] != null) {
-				handleKey(false, code, charCodeMap[code], event);
-				delete charCodeMap[code];
-			}
-		}
-	});
-
-	return {
-		modifiers: modifiers,
-
-		isDown: function(key) {
-			return !!keyMap[key];
-		}
-	};
-};
-
-var MouseEvent = this.MouseEvent = Event.extend({
-	initialize: function(type, event, point, target, delta) {
-		this.base(event);
-		this.type = type;
-		this.point = point;
-		this.target = target;
-		this.delta = delta;
-	},
-
-	toString: function() {
-		return '{ type: ' + this.type
-				+ ', point: ' + this.point
-				+ ', target: ' + this.target
-				+ (this.delta ? ', delta: ' + this.delta : '')
-				+ ', modifiers: ' + this.getModifiers()
-				+ ' }';
-	}
-});
-
-var ToolEvent = this.ToolEvent = Event.extend({
-	initialize: function(tool, type, event) {
-		this.tool = tool;
-		this.type = type;
-		this.event = event;
-	},
-
-	_choosePoint: function(point, toolPoint) {
-		return point ? point : toolPoint ? toolPoint.clone() : null;
-	},
-
-	getPoint: function() {
-		return this._choosePoint(this._point, this.tool._point);
-	},
-
-	setPoint: function(point) {
-		this._point = point;
-	},
-
-	getLastPoint: function() {
-		return this._choosePoint(this._lastPoint, this.tool._lastPoint);
-	},
-
-	setLastPoint: function(lastPoint) {
-		this._lastPoint = lastPoint;
-	},
-
-	getDownPoint: function() {
-		return this._choosePoint(this._downPoint, this.tool._downPoint);
-	},
-
-	setDownPoint: function(downPoint) {
-		this._downPoint = downPoint;
-	},
-
-	getMiddlePoint: function() {
-		if (!this._middlePoint && this.tool._lastPoint) {
-			return this.tool._point.add(this.tool._lastPoint).divide(2);
-		}
-		return this.middlePoint;
-	},
-
-	setMiddlePoint: function(middlePoint) {
-		this._middlePoint = middlePoint;
-	},
-
-	getDelta: function() {
-		return !this._delta && this.tool._lastPoint
-		 		? this.tool._point.subtract(this.tool._lastPoint)
-				: this._delta;
-	},
-
-	setDelta: function(delta) {
-		this._delta = delta;
-	},
-
-	getCount: function() {
-		return /^mouse(down|up)$/.test(this.type)
-				? this.tool._downCount
-				: this.tool._count;
-	},
-
-	setCount: function(count) {
-		this.tool[/^mouse(down|up)$/.test(this.type) ? 'downCount' : 'count']
-			= count;
-	},
-
-	getItem: function() {
-		if (!this._item) {
-			var result = this.tool._scope.project.hitTest(this.getPoint());
-			if (result) {
-				var item = result.item,
-					parent = item._parent;
-				while ((parent instanceof Group && !(parent instanceof Layer))
-						|| parent instanceof CompoundPath) {
-					item = parent;
-					parent = parent._parent;
-				}
-				this._item = item;
-			}
-		}
-		return this._item;
-	},
-	setItem: function(item) {
-		this._item = item;
-	},
-
-	toString: function() {
-		return '{ type: ' + this.type
-				+ ', point: ' + this.getPoint()
-				+ ', count: ' + this.getCount()
-				+ ', modifiers: ' + this.getModifiers()
-				+ ' }';
-	}
-});
-
-var Tool = this.Tool = PaperScopeItem.extend(Callback, {
-	_list: 'tools',
-	_reference: '_tool', 
-	_events: [ 'onEditOptions', 'onSelect', 'onDeselect', 'onReselect',
-			'onMouseDown', 'onMouseUp', 'onMouseDrag', 'onMouseMove',
-			'onKeyDown', 'onKeyUp' ],
-
-	initialize: function() {
-		this.base();
-		this._firstMove = true;
-		this._count = 0;
-		this._downCount = 0;
-	},
-
-	getMinDistance: function() {
-		return this._minDistance;
-	},
-
-	setMinDistance: function(minDistance) {
-		this._minDistance = minDistance;
-		if (this._minDistance != null && this._maxDistance != null
-				&& this._minDistance > this._maxDistance) {
-			this._maxDistance = this._minDistance;
-		}
-	},
-
-	getMaxDistance: function() {
-		return this._maxDistance;
-	},
-
-	setMaxDistance: function(maxDistance) {
-		this._maxDistance = maxDistance;
-		if (this._minDistance != null && this._maxDistance != null
-				&& this._maxDistance < this._minDistance) {
-			this._minDistance = maxDistance;
-		}
-	},
-
-	getFixedDistance: function() {
-		return this._minDistance == this._maxDistance
-			? this._minDistance : null;
-	},
-
-	setFixedDistance: function(distance) {
-		this._minDistance = distance;
-		this._maxDistance = distance;
-	},
-
-	_updateEvent: function(type, pt, minDistance, maxDistance, start,
-			needsChange, matchMaxDistance) {
-		if (!start) {
-			if (minDistance != null || maxDistance != null) {
-				var minDist = minDistance != null ? minDistance : 0;
-				var vector = pt.subtract(this._point);
-				var distance = vector.getLength();
-				if (distance < minDist)
-					return false;
-				var maxDist = maxDistance != null ? maxDistance : 0;
-				if (maxDist != 0) {
-					if (distance > maxDist) {
-						pt = this._point.add(vector.normalize(maxDist));
-					} else if (matchMaxDistance) {
-						return false;
-					}
-				}
-			}
-			if (needsChange && pt.equals(this._point))
-				return false;
-		}
-		this._lastPoint = start && type == 'mousemove' ? pt : this._point;
-		this._point = pt;
-		switch (type) {
-		case 'mousedown':
-			this._lastPoint = this._downPoint;
-			this._downPoint = this._point;
-			this._downCount++;
-			break;
-		case 'mouseup':
-			this._lastPoint = this._downPoint;
-			break;
-		}
-		this._count = start ? 0 : this._count + 1;
-		return true;
-	},
-
-	_onHandleEvent: function(type, pt, event) {
-		paper = this._scope;
-		var sets = Tool._removeSets;
-		if (sets) {
-			if (type === 'mouseup')
-				sets.mousedrag = null;
-			var set = sets[type];
-			if (set) {
-				for (var id in set) {
-					var item = set[id];
-					for (var key in sets) {
-						var other = sets[key];
-						if (other && other != set && other[item._id])
-							delete other[item._id];
-					}
-					item.remove();
-				}
-				sets[type] = null;
-			}
-		}
-		var called = false;
-		switch (type) {
-		case 'mousedown':
-			this._updateEvent(type, pt, null, null, true, false, false);
-			if (this.responds(type))
-				called = this.fire(type, new ToolEvent(this, type, event));
-			break;
-		case 'mousedrag':
-			var needsChange = false,
-				matchMaxDistance = false;
-			while (this._updateEvent(type, pt, this.minDistance,
-					this.maxDistance, false, needsChange, matchMaxDistance)) {
-				if (this.responds(type))
-					called = this.fire(type, new ToolEvent(this, type, event));
-				needsChange = true;
-				matchMaxDistance = true;
-			}
-			break;
-		case 'mouseup':
-			if ((this._point.x != pt.x || this._point.y != pt.y)
-					&& this._updateEvent('mousedrag', pt, this.minDistance,
-							this.maxDistance, false, false, false)) {
-				if (this.responds('mousedrag'))
-					called = this.fire('mousedrag',
-							new ToolEvent(this, type, event));
-			}
-			this._updateEvent(type, pt, null, this.maxDistance, false,
-					false, false);
-			if (this.responds(type))
-				called = this.fire(type, new ToolEvent(this, type, event));
-			this._updateEvent(type, pt, null, null, true, false, false);
-			this._firstMove = true;
-			break;
-		case 'mousemove':
-			while (this._updateEvent(type, pt, this.minDistance,
-					this.maxDistance, this._firstMove, true, false)) {
-				if (this.responds(type))
-					called = this.fire(type, new ToolEvent(this, type, event));
-				this._firstMove = false;
-			}
-			break;
-		}
-		return called;
-	}
-
-});
-
-var CanvasProvider = {
-	canvases: [],
-	getCanvas: function(size) {
-		if (this.canvases.length) {
-			var canvas = this.canvases.pop();
-			if ((canvas.width != size.width)
-					|| (canvas.height != size.height)) {
-				canvas.width = size.width;
-				canvas.height = size.height;
-			} else {
-				canvas.getContext('2d').clearRect(0, 0,
-						size.width + 1, size.height + 1);
-			}
-			return canvas;
-		} else {
-			var canvas = document.createElement('canvas');
-			canvas.width = size.width;
-			canvas.height = size.height;
-			return canvas;
-		}
-	},
-
-	returnCanvas: function(canvas) {
-		this.canvases.push(canvas);
-	}
-};
-
-var Numerical = new function() {
-
-	var abscissas = [
-		[  0.5773502691896257645091488],
-		[0,0.7745966692414833770358531],
-		[  0.3399810435848562648026658,0.8611363115940525752239465],
-		[0,0.5384693101056830910363144,0.9061798459386639927976269],
-		[  0.2386191860831969086305017,0.6612093864662645136613996,0.9324695142031520278123016],
-		[0,0.4058451513773971669066064,0.7415311855993944398638648,0.9491079123427585245261897],
-		[  0.1834346424956498049394761,0.5255324099163289858177390,0.7966664774136267395915539,0.9602898564975362316835609],
-		[0,0.3242534234038089290385380,0.6133714327005903973087020,0.8360311073266357942994298,0.9681602395076260898355762],
-		[  0.1488743389816312108848260,0.4333953941292471907992659,0.6794095682990244062343274,0.8650633666889845107320967,0.9739065285171717200779640],
-		[0,0.2695431559523449723315320,0.5190961292068118159257257,0.7301520055740493240934163,0.8870625997680952990751578,0.9782286581460569928039380],
-		[  0.1252334085114689154724414,0.3678314989981801937526915,0.5873179542866174472967024,0.7699026741943046870368938,0.9041172563704748566784659,0.9815606342467192506905491],
-		[0,0.2304583159551347940655281,0.4484927510364468528779129,0.6423493394403402206439846,0.8015780907333099127942065,0.9175983992229779652065478,0.9841830547185881494728294],
-		[  0.1080549487073436620662447,0.3191123689278897604356718,0.5152486363581540919652907,0.6872929048116854701480198,0.8272013150697649931897947,0.9284348836635735173363911,0.9862838086968123388415973],
-		[0,0.2011940939974345223006283,0.3941513470775633698972074,0.5709721726085388475372267,0.7244177313601700474161861,0.8482065834104272162006483,0.9372733924007059043077589,0.9879925180204854284895657],
-		[  0.0950125098376374401853193,0.2816035507792589132304605,0.4580167776572273863424194,0.6178762444026437484466718,0.7554044083550030338951012,0.8656312023878317438804679,0.9445750230732325760779884,0.9894009349916499325961542]
-	];
-
-	var weights = [
-		[1],
-		[0.8888888888888888888888889,0.5555555555555555555555556],
-		[0.6521451548625461426269361,0.3478548451374538573730639],
-		[0.5688888888888888888888889,0.4786286704993664680412915,0.2369268850561890875142640],
-		[0.4679139345726910473898703,0.3607615730481386075698335,0.1713244923791703450402961],
-		[0.4179591836734693877551020,0.3818300505051189449503698,0.2797053914892766679014678,0.1294849661688696932706114],
-		[0.3626837833783619829651504,0.3137066458778872873379622,0.2223810344533744705443560,0.1012285362903762591525314],
-		[0.3302393550012597631645251,0.3123470770400028400686304,0.2606106964029354623187429,0.1806481606948574040584720,0.0812743883615744119718922],
-		[0.2955242247147528701738930,0.2692667193099963550912269,0.2190863625159820439955349,0.1494513491505805931457763,0.0666713443086881375935688],
-		[0.2729250867779006307144835,0.2628045445102466621806889,0.2331937645919904799185237,0.1862902109277342514260976,0.1255803694649046246346943,0.0556685671161736664827537],
-		[0.2491470458134027850005624,0.2334925365383548087608499,0.2031674267230659217490645,0.1600783285433462263346525,0.1069393259953184309602547,0.0471753363865118271946160],
-		[0.2325515532308739101945895,0.2262831802628972384120902,0.2078160475368885023125232,0.1781459807619457382800467,0.1388735102197872384636018,0.0921214998377284479144218,0.0404840047653158795200216],
-		[0.2152638534631577901958764,0.2051984637212956039659241,0.1855383974779378137417166,0.1572031671581935345696019,0.1215185706879031846894148,0.0801580871597602098056333,0.0351194603317518630318329],
-		[0.2025782419255612728806202,0.1984314853271115764561183,0.1861610000155622110268006,0.1662692058169939335532009,0.1395706779261543144478048,0.1071592204671719350118695,0.0703660474881081247092674,0.0307532419961172683546284],
-		[0.1894506104550684962853967,0.1826034150449235888667637,0.1691565193950025381893121,0.1495959888165767320815017,0.1246289712555338720524763,0.0951585116824927848099251,0.0622535239386478928628438,0.0271524594117540948517806]
-	];
-
-	var abs = Math.abs,
-		sqrt = Math.sqrt,
-		cos = Math.cos,
-		PI = Math.PI;
-
-	return {
-		TOLERANCE: 10e-6,
-		EPSILON: 10e-12,
-
-		integrate: function(f, a, b, n) {
-			var x = abscissas[n - 2],
-				w = weights[n - 2],
-				A = 0.5 * (b - a),
-				B = A + a,
-				i = 0,
-				m = (n + 1) >> 1,
-				sum = n & 1 ? w[i++] * f(B) : 0; 
-			while (i < m) {
-				var Ax = A * x[i];
-				sum += w[i++] * (f(B + Ax) + f(B - Ax));
-			}
-			return A * sum;
-		},
-
-		findRoot: function(f, df, x, a, b, n, tolerance) {
-			for (var i = 0; i < n; i++) {
-				var fx = f(x),
-					dx = fx / df(x);
-				if (abs(dx) < tolerance)
-					return x;
-				var nx = x - dx;
-				if (fx > 0) {
-					b = x;
-					x = nx <= a ? 0.5 * (a + b) : nx;
-				} else {
-					a = x;
-					x = nx >= b ? 0.5 * (a + b) : nx;
-				}
-			}
-		},
-
-		solveQuadratic: function(a, b, c, roots, tolerance) {
-			if (abs(a) < tolerance) {
-				if (abs(b) >= tolerance) {
-					roots[0] = -c / b;
-					return 1;
-				}
-				if (abs(c) < tolerance)
-					return -1; 
-				return 0; 
-			}
-			var q = b * b - 4 * a * c;
-			if (q < 0)
-				return 0; 
-			q = sqrt(q);
-			if (b < 0)
-				q = -q;
-			q = (b + q) * -0.5;
-			var n = 0;
-			if (abs(q) >= tolerance)
-				roots[n++] = c / q;
-			if (abs(a) >= tolerance)
-				roots[n++] = q / a;
-			return n; 
-		},
-
-		solveCubic: function(a, b, c, d, roots, tolerance) {
-			if (abs(a) < tolerance)
-				return Numerical.solveQuadratic(b, c, d, roots, tolerance);
-			b /= a;
-			c /= a;
-			d /= a;
-			var Q = (b * b - 3 * c) / 9,
-				R = (2 * b * b * b - 9 * b * c + 27 * d) / 54,
-				Q3 = Q * Q * Q,
-				R2 = R * R;
-			b /= 3; 
-			if (R2 < Q3) { 
-				var theta = Math.acos(R / sqrt(Q3)),
-					q = -2 * sqrt(Q);
-				roots[0] = q * cos(theta / 3) - b;
-				roots[1] = q * cos((theta + 2 * PI) / 3) - b;
-				roots[2] = q * cos((theta - 2 * PI) / 3) - b;
-				return 3;
-			} else { 
-				var A = -Math.pow(abs(R) + sqrt(R2 - Q3), 1 / 3);
-				if (R < 0) A = -A;
-				var B = (abs(A) < tolerance) ? 0 : Q / A;
-				roots[0] = (A + B) - b;
-				return 1;
-			}
-			return 0;
-		}
-	};
-};
-
-var BlendMode = {
-	process: function(blendMode, srcContext, dstContext, alpha, offset) {
-		var srcCanvas = srcContext.canvas,
-			dstData = dstContext.getImageData(offset.x, offset.y,
-					srcCanvas.width, srcCanvas.height),
-			dst  = dstData.data,
-			src  = srcContext.getImageData(0, 0,
-					srcCanvas.width, srcCanvas.height).data,
-			min = Math.min,
-			max = Math.max,
-			abs = Math.abs,
-			sr, sg, sb, sa, 
-			br, bg, bb, ba, 
-			dr, dg, db;     
-
-		function getLum(r, g, b) {
-			return 0.2989 * r + 0.587 * g + 0.114 * b;
-		}
-
-		function setLum(r, g, b, l) {
-			var d = l - getLum(r, g, b);
-			dr = r + d;
-			dg = g + d;
-			db = b + d;
-			var l = getLum(dr, dg, db),
-				mn = min(dr, dg, db),
-				mx = max(dr, dg, db);
-			if (mn < 0) {
-				var lmn = l - mn;
-				dr = l + (dr - l) * l / lmn;
-				dg = l + (dg - l) * l / lmn;
-				db = l + (db - l) * l / lmn;
-			}
-			if (mx > 255) {
-				var ln = 255 - l, mxl = mx - l;
-				dr = l + (dr - l) * ln / mxl;
-				dg = l + (dg - l) * ln / mxl;
-				db = l + (db - l) * ln / mxl;
-			}
-		}
-
-		function getSat(r, g, b) {
-			return max(r, g, b) - min(r, g, b);
-		}
-
-		function setSat(r, g, b, s) {
-			var col = [r, g, b],
-				mx = max(r, g, b), 
-				mn = min(r, g, b), 
-				md; 
-			mn = mn == r ? 0 : mn == g ? 1 : 2;
-			mx = mx == r ? 0 : mx == g ? 1 : 2;
-			md = min(mn, mx) == 0 ? max(mn, mx) == 1 ? 2 : 1 : 0;
-			if (col[mx] > col[mn]) {
-				col[md] = (col[md] - col[mn]) * s / (col[mx] - col[mn]);
-				col[mx] = s;
-			} else {
-				col[md] = col[mx] = 0;
-			}
-			col[mn] = 0;
-			dr = col[0];
-			dg = col[1];
-			db = col[2];
-		}
-
-		var modes = {
-			multiply: function() {
-				dr = br * sr / 255;
-				dg = bg * sg / 255;
-				db = bb * sb / 255;
-			},
-
-			screen: function() {
-				dr = 255 - (255 - br) * (255 - sr) / 255;
-				dg = 255 - (255 - bg) * (255 - sg) / 255;
-				db = 255 - (255 - bb) * (255 - sb) / 255;
-			},
-
-			overlay: function() {
-				dr = br < 128 ? 2 * br * sr / 255 : 255 - 2 * (255 - br) * (255 - sr) / 255;
-				dg = bg < 128 ? 2 * bg * sg / 255 : 255 - 2 * (255 - bg) * (255 - sg) / 255;
-				db = bb < 128 ? 2 * bb * sb / 255 : 255 - 2 * (255 - bb) * (255 - sb) / 255;
-			},
-
-			'soft-light': function() {
-				var t = sr * br / 255;
-				dr = t + br * (255 - (255 - br) * (255 - sr) / 255 - t) / 255;
-				t = sg * bg / 255;
-				dg = t + bg * (255 - (255 - bg) * (255 - sg) / 255 - t) / 255;
-				t = sb * bb / 255;
-				db = t + bb * (255 - (255 - bb) * (255 - sb) / 255 - t) / 255;
-			},
-
-			'hard-light': function() {
-				dr = sr < 128 ? 2 * sr * br / 255 : 255 - 2 * (255 - sr) * (255 - br) / 255;
-				dg = sg < 128 ? 2 * sg * bg / 255 : 255 - 2 * (255 - sg) * (255 - bg) / 255;
-				db = sb < 128 ? 2 * sb * bb / 255 : 255 - 2 * (255 - sb) * (255 - bb) / 255;
-			},
-
-			'color-dodge': function() {
-				dr = sr == 255 ? sr : min(255, br * 255 / (255 - sr));
-				dg = sg == 255 ? sg : min(255, bg * 255 / (255 - sg));
-				db = sb == 255 ? sb : min(255, bb * 255 / (255 - sb));
-			},
-
-			'color-burn': function() {
-				dr = sr == 0 ? 0 : max(255 - ((255 - br) * 255) / sr, 0);
-				dg = sg == 0 ? 0 : max(255 - ((255 - bg) * 255) / sg, 0);
-				db = sb == 0 ? 0 : max(255 - ((255 - bb) * 255) / sb, 0);
-			},
-
-			darken: function() {
-				dr = br < sr ? br : sr;
-				dg = bg < sg ? bg : sg;
-				db = bb < sb ? bb : sb;
-			},
-
-			lighten: function() {
-				dr = br > sr ? br : sr;
-				dg = bg > sg ? bg : sg;
-				db = bb > sb ? bb : sb;
-			},
-
-			difference: function() {
-				dr = br - sr;
-				if (dr < 0)
-					dr = -dr;
-				dg = bg - sg;
-				if (dg < 0)
-					dg = -dg;
-				db = bb - sb;
-				if (db < 0)
-					db = -db;
-			},
-
-			exclusion: function() {
-				dr = br + sr * (255 - br - br) / 255;
-				dg = bg + sg * (255 - bg - bg) / 255;
-				db = bb + sb * (255 - bb - bb) / 255;
-			},
-
-			hue: function() {
-				setSat(sr, sg, sb, getSat(br, bg, bb));
-				setLum(dr, dg, db, getLum(br, bg, bb));
-			},
-
-			saturation: function() {
-				setSat(br, bg, bb, getSat(sr, sg, sb));
-				setLum(dr, dg, db, getLum(br, bg, bb));
-			},
-
-			luminosity: function() {
-				setLum(br, bg, bb, getLum(sr, sg, sb));
-			},
-
-			color: function() {
-				setLum(sr, sg, sb, getLum(br, bg, bb));
-			},
-
-			add: function() {
-				dr = min(br + sr, 255);
-				dg = min(bg + sg, 255);
-				db = min(bb + sb, 255);
-			},
-
-			subtract: function() {
-				dr = max(br - sr, 0);
-				dg = max(bg - sg, 0);
-				db = max(bb - sb, 0);
-			},
-
-			average: function() {
-				dr = (br + sr) / 2;
-				dg = (bg + sg) / 2;
-				db = (bb + sb) / 2;
-			},
-
-			negation: function() {
-				dr = 255 - abs(255 - sr - br);
-				dg = 255 - abs(255 - sg - bg);
-				db = 255 - abs(255 - sb - bb);
-			}
-		};
-
-		var process = modes[blendMode];
-		if (!process)
-			return;
-
-		for (var i = 0, l = dst.length; i < l; i += 4) {
-			sr = src[i];
-			br = dst[i];
-			sg = src[i + 1];
-			bg = dst[i + 1];
-			sb = src[i + 2];
-			bb = dst[i + 2];
-			sa = src[i + 3];
-			ba = dst[i + 3];
-			process();
-			var a1 = sa * alpha / 255,
-				a2 = 1 - a1;
-			dst[i] = a1 * dr + a2 * br;
-			dst[i + 1] = a1 * dg + a2 * bg;
-			dst[i + 2] = a1 * db + a2 * bb;
-			dst[i + 3] = sa * alpha + a2 * ba;
-		}
-		dstContext.putImageData(dstData, offset.x, offset.y);
-	}
-};
-
-var PaperScript = this.PaperScript = new function() {
-var parse_js=new function(){function W(a,b,c){var d=[];for(var e=0;e<a.length;++e)d.push(b.call(c,a[e],e));return d}function V(c){return/^[a-z_$][a-z0-9_$]*$/i.test(c)&&c!="this"&&!M(d,c)&&!M(b,c)&&!M(a,c)}function U(a,b){var c={};a===!0&&(a={});for(var d in b)M(b,d)&&(c[d]=a&&M(a,d)?a[d]:b[d]);return c}function T(a,b){return b<1?"":Array(b+1).join(a)}function S(a,b){function z(a){var b=a[0],c=r[b];if(!c)throw new Error("Can't find generator for \""+b+'"');y.push(a);var d=c.apply(b,a.slice(1));y.pop();return d}function x(a){var b=a[0],c=a[1];c!=null&&(b=k([g(b),"=",m(c,"seq")]));return b}function w(a){return a?a.length==0?"{}":"{"+e+j(function(){return u(a).join(e)})+e+h("}"):";"}function v(a){var b=a.length;return b==0?"{}":"{"+e+W(a,function(a,d){var f=a[1].length>0,g=j(function(){return h(a[0]?k(["case",z(a[0])+":"]):"default:")},.5)+(f?e+j(function(){return u(a[1]).join(e)}):"");!c&&f&&d<b-1&&(g+=";");return g}).join(e)+e+h("}")}function u(a,b){for(var d=[],e=a.length-1,f=0;f<=e;++f){var g=a[f],i=z(g);i!=";"&&(!c&&f==e&&(g[0]=="while"&&O(g[2])||L(g[0],["for","for-in"])&&O(g[4])||g[0]=="if"&&O(g[2])&&!g[3]||g[0]=="if"&&g[3]&&O(g[3])?i=i.replace(/;*\s*$/,";"):i=i.replace(/;+\s*$/,"")),d.push(i))}return b?d:W(d,h)}function t(a,b,c,d){var e=d||"function";a&&(e+=" "+g(a)),e+="("+l(W(b,g))+")";return k([e,w(c)])}function s(a){if(a[0]=="do")return z(["block",[a]]);var b=a;for(;;){var c=b[0];if(c=="if"){if(!b[3])return z(["block",[a]]);b=b[3]}else if(c=="while"||c=="do")b=b[2];else if(c=="for"||c=="for-in")b=b[4];else break}return z(a)}function q(a){var b=a.toString(10),c=[b.replace(/^0\./,".")],d;Math.floor(a)===a?(c.push("0x"+a.toString(16).toLowerCase(),"0"+a.toString(8)),(d=/^(.*?)(0+)$/.exec(a))&&c.push(d[1]+"e"+d[2].length)):(d=/^0?\.(0+)(.*)$/.exec(a))&&c.push(d[2]+"e-"+(d[1].length+d[2].length),b.substr(b.indexOf(".")));return n(c)}function o(a){if(a[0]=="function"||a[0]=="object"){var b=J(y),c=b.pop(),d=b.pop();while(d){if(d[0]=="stat")return!0;if((d[0]=="seq"||d[0]=="call"||d[0]=="dot"||d[0]=="sub"||d[0]=="conditional")&&d[1]===c||(d[0]=="binary"||d[0]=="assign"||d[0]=="unary-postfix")&&d[2]===c)c=d,d=b.pop();else return!1}}return!M(P,a[0])}function n(a){if(a.length==1)return a[0];if(a.length==2){var b=a[1];a=a[0];return a.length<=b.length?a:b}return n([a[0],n(a.slice(1))])}function m(a){var b=z(a);for(var c=1;c<arguments.length;++c){var d=arguments[c];if(d instanceof Function&&d(a)||a[0]==d)return"("+b+")"}return b}function l(a){return a.join(","+f)}function k(a){if(c)return a.join(" ");var b=[];for(var d=0;d<a.length;++d){var e=a[d+1];b.push(a[d]),e&&(/[a-z0-9_\x24]$/i.test(a[d].toString())&&/^[a-z0-9_\x24]/i.test(e.toString())||/[\+\-]$/.test(a[d].toString())&&/^[\+\-]/.test(e.toString()))&&b.push(" ")}return b.join("")}function j(a,b){b==null&&(b=1),d+=b;try{return a.apply(null,J(arguments,1))}finally{d-=b}}function h(a){a==null&&(a=""),c&&(a=T(" ",b.indent_start+d*b.indent_level)+a);return a}function g(a){return a.toString()}b=U(b,{indent_start:0,indent_level:4,quote_keys:!1,space_colon:!1,beautify:!1});var c=!!b.beautify,d=0,e=c?"\n":"",f=c?" ":"",r={string:Q,num:q,name:g,toplevel:function(a){return u(a).join(e)},splice:function(a){var b=y[y.length-2][0];return M(R,b)?w.apply(this,arguments):W(u(a,!0),function(a,b){return b>0?h(a):a}).join(e)},block:w,"var":function(a){return"var "+l(W(a,x))+";"},"const":function(a){return"const "+l(W(a,x))+";"},"try":function(a,b,c){var d=["try",w(a)];b&&d.push("catch","("+b[0]+")",w(b[1])),c&&d.push("finally",w(c));return k(d)},"throw":function(a){return k(["throw",z(a)])+";"},"new":function(a,b){b=b.length>0?"("+l(W(b,z))+")":"";return k(["new",m(a,"seq","binary","conditional","assign",function(a){var b=N(),c={};try{b.with_walkers({call:function(){throw c},"function":function(){return this}},function(){b.walk(a)})}catch(d){if(d===c)return!0;throw d}})+b])},"switch":function(a,b){return k(["switch","("+z(a)+")",v(b)])},"break":function(a){var b="break";a!=null&&(b+=" "+g(a));return b+";"},"continue":function(a){var b="continue";a!=null&&(b+=" "+g(a));return b+";"},conditional:function(a,b,c){return k([m(a,"assign","seq","conditional"),"?",m(b,"seq"),":",m(c,"seq")])},assign:function(a,b,c){a&&a!==!0?a+="=":a="=";return k([z(b),a,m(c,"seq")])},dot:function(a){var b=z(a),c=1;a[0]=="num"?/\./.test(a[1])||(b+="."):o(a)&&(b="("+b+")");while(c<arguments.length)b+="."+g(arguments[c++]);return b},call:function(a,b){var c=z(a);o(a)&&(c="("+c+")");return c+"("+l(W(b,function(a){return m(a,"seq")}))+")"},"function":t,defun:t,"if":function(a,b,c){var d=["if","("+z(a)+")",c?s(b):z(b)];c&&d.push("else",z(c));return k(d)},"for":function(a,b,c,d){var e=["for"];a=(a!=null?z(a):"").replace(/;*\s*$/,";"+f),b=(b!=null?z(b):"").replace(/;*\s*$/,";"+f),c=(c!=null?z(c):"").replace(/;*\s*$/,"");var g=a+b+c;g=="; ; "&&(g=";;"),e.push("("+g+")",z(d));return k(e)},"for-in":function(a,b,c,d){return k(["for","("+(a?z(a).replace(/;+$/,""):z(b)),"in",z(c)+")",z(d)])},"while":function(a,b){return k(["while","("+z(a)+")",z(b)])},"do":function(a,b){return k(["do",z(b),"while","("+z(a)+")"])+";"},"return":function(a){var b=["return"];a!=null&&b.push(z(a));return k(b)+";"},binary:function(a,b,c){var d=z(b),e=z(c);if(L(b[0],["assign","conditional","seq"])||b[0]=="binary"&&B[a]>B[b[1]])d="("+d+")";if(L(c[0],["assign","conditional","seq"])||c[0]=="binary"&&B[a]>=B[c[1]]&&(c[1]!=a||!L(a,["&&","||","*"])))e="("+e+")";return k([d,a,e])},"unary-prefix":function(a,b){var c=z(b);b[0]=="num"||b[0]=="unary-prefix"&&!M(i,a+b[1])||!o(b)||(c="("+c+")");return a+(p(a.charAt(0))?" ":"")+c},"unary-postfix":function(a,b){var c=z(b);b[0]=="num"||b[0]=="unary-postfix"&&!M(i,a+b[1])||!o(b)||(c="("+c+")");return c+a},sub:function(a,b){var c=z(a);o(a)&&(c="("+c+")");return c+"["+z(b)+"]"},object:function(a){return a.length==0?"{}":"{"+e+j(function(){return W(a,function(a){if(a.length==3)return h(t(a[0],a[1][2],a[1][3],a[2]));var d=a[0],e=z(a[1]);b.quote_keys?d=Q(d):(typeof d=="number"||!c&&+d+""==d)&&parseFloat(d)>=0?d=q(+d):V(d)||(d=Q(d));return h(k(c&&b.space_colon?[d,":",e]:[d+":",e]))}).join(","+e)})+e+h("}")},regexp:function(a,b){return"/"+a+"/"+b},array:function(a){return a.length==0?"[]":k(["[",l(W(a,function(a){return!c&&a[0]=="atom"&&a[1]=="undefined"?"":m(a,"seq")})),"]"])},stat:function(a){return z(a).replace(/;*\s*$/,";")},seq:function(){return l(W(J(arguments),z))},label:function(a,b){return k([g(a),":",z(b)])},"with":function(a,b){return k(["with","("+z(a)+")",z(b)])},atom:function(a){return g(a)}},y=[];return z(a)}function Q(a){var b=0,c=0;a=a.replace(/[\\\b\f\n\r\t\x22\x27]/g,function(a){switch(a){case"\\":return"\\\\";case"\b":return"\\b";case"\f":return"\\f";case"\n":return"\\n";case"\r":return"\\r";case"\t":return"\\t";case'"':++b;return'"';case"'":++c;return"'"}return a});return b>c?"'"+a.replace(/\x27/g,"\\'")+"'":'"'+a.replace(/\x22/g,'\\"')+'"'}function O(a){return!a||a[0]=="block"&&(!a[1]||a[1].length==0)}function N(){function g(a,b){var c={},e;for(e in a)M(a,e)&&(c[e]=d[e],d[e]=a[e]);var f=b();for(e in c)M(c,e)&&(c[e]?d[e]=c[e]:delete d[e]);return f}function f(a){if(a==null)return null;try{e.push(a);var b=a[0],f=d[b];if(f){var g=f.apply(a,a.slice(1));if(g!=null)return g}f=c[b];return f.apply(a,a.slice(1))}finally{e.pop()}}function b(a){var b=[this[0]];a!=null&&b.push(W(a,f));return b}function a(a){return[this[0],W(a,function(a){var b=[a[0]];a.length>1&&(b[1]=f(a[1]));return b})]}var c={string:function(a){return[this[0],a]},num:function(a){return[this[0],a]},name:function(a){return[this[0],a]},toplevel:function(a){return[this[0],W(a,f)]},block:b,splice:b,"var":a,"const":a,"try":function(a,b,c){return[this[0],W(a,f),b!=null?[b[0],W(b[1],f)]:null,c!=null?W(c,f):null]},"throw":function(a){return[this[0],f(a)]},"new":function(a,b){return[this[0],f(a),W(b,f)]},"switch":function(a,b){return[this[0],f(a),W(b,function(a){return[a[0]?f(a[0]):null,W(a[1],f)]})]},"break":function(a){return[this[0],a]},"continue":function(a){return[this[0],a]},conditional:function(a,b,c){return[this[0],f(a),f(b),f(c)]},assign:function(a,b,c){return[this[0],a,f(b),f(c)]},dot:function(a){return[this[0],f(a)].concat(J(arguments,1))},call:function(a,b){return[this[0],f(a),W(b,f)]},"function":function(a,b,c){return[this[0],a,b.slice(),W(c,f)]},defun:function(a,b,c){return[this[0],a,b.slice(),W(c,f)]},"if":function(a,b,c){return[this[0],f(a),f(b),f(c)]},"for":function(a,b,c,d){return[this[0],f(a),f(b),f(c),f(d)]},"for-in":function(a,b,c,d){return[this[0],f(a),f(b),f(c),f(d)]},"while":function(a,b){return[this[0],f(a),f(b)]},"do":function(a,b){return[this[0],f(a),f(b)]},"return":function(a){return[this[0],f(a)]},binary:function(a,b,c){return[this[0],a,f(b),f(c)]},"unary-prefix":function(a,b){return[this[0],a,f(b)]},"unary-postfix":function(a,b){return[this[0],a,f(b)]},sub:function(a,b){return[this[0],f(a),f(b)]},object:function(a){return[this[0],W(a,function(a){return a.length==2?[a[0],f(a[1])]:[a[0],f(a[1]),a[2]]})]},regexp:function(a,b){return[this[0],a,b]},array:function(a){return[this[0],W(a,f)]},stat:function(a){return[this[0],f(a)]},seq:function(){return[this[0]].concat(W(J(arguments),f))},label:function(a,b){return[this[0],a,f(b)]},"with":function(a,b){return[this[0],f(a),f(b)]},atom:function(a){return[this[0],a]}},d={},e=[];return{walk:f,with_walkers:g,parent:function(){return e[e.length-2]},stack:function(){return e}}}function M(a,b){return Object.prototype.hasOwnProperty.call(a,b)}function L(a,b){for(var c=b.length;--c>=0;)if(b[c]===a)return!0;return!1}function K(a){return a.split("")}function J(a,b){return Array.prototype.slice.call(a,b||0)}function I(a){var b={};for(var c=0;c<a.length;++c)b[a[c]]=!0;return b}function H(a){a instanceof Function&&(a=a());for(var b=1,c=arguments.length;--c>0;++b)arguments[b]();return a}function G(a){var b=J(arguments,1);return function(){return a.apply(this,b.concat(J(arguments)))}}function F(a,b,c){function bk(a){try{++d.in_loop;return a()}finally{--d.in_loop}}function bi(a){var b=bg(a),c=d.token.value;if(e("operator")&&M(A,c)){if(bh(b)){g();return p("assign",A[c],b,bi(a))}i("Invalid assignment")}return b}function bh(a){if(!b)return!0;switch(a[0]){case"dot":case"sub":case"new":case"call":return!0;case"name":return a[1]!="this"}}function bg(a){var b=bf(a);if(e("operator","?")){g();var c=bj(!1);m(":");return p("conditional",b,c,bj(!1,a))}return b}function bf(a){return be(Y(!0),0,a)}function be(a,b,c){var f=e("operator")?d.token.value:null;f&&f=="in"&&c&&(f=null);var h=f!=null?B[f]:null;if(h!=null&&h>b){g();var i=be(Y(!0),h,c);return be(p("binary",f,a,i),b,c)}return a}function bd(a,b,c){(b=="++"||b=="--")&&!bh(c)&&i("Invalid use of "+b+" operator");return p(a,b,c)}function bc(a,b){if(e("punc",".")){g();return bc(p("dot",a,bb()),b)}if(e("punc","[")){g();return bc(p("sub",a,H(bj,G(m,"]"))),b)}if(b&&e("punc","(")){g();return bc(p("call",a,Z(")")),!0)}return b&&e("operator")&&M(z,d.token.value)?H(G(bd,"unary-postfix",d.token.value,a),g):a}function bb(){switch(d.token.type){case"name":case"operator":case"keyword":case"atom":return H(d.token.value,g);default:k()}}function ba(){switch(d.token.type){case"num":case"string":return H(d.token.value,g)}return bb()}function _(){var a=!0,c=[];while(!e("punc","}")){a?a=!1:m(",");if(!b&&e("punc","}"))break;var f=d.token.type,h=ba();f!="name"||h!="get"&&h!="set"||!!e("punc",":")?(m(":"),c.push([h,bj(!1)])):c.push([bb(),P(!1),h])}g();return p("object",c)}function $(){return p("array",Z("]",!b,!0))}function Z(a,b,c){var d=!0,f=[];while(!e("punc",a)){d?d=!1:m(",");if(b&&e("punc",a))break;e("punc",",")&&c?f.push(["atom","undefined"]):f.push(bj(!1))}g();return f}function X(){var a=Y(!1),b;e("punc","(")?(g(),b=Z(")")):b=[];return bc(p("new",a,b),!0)}function W(){return p("const",U())}function V(a){return p("var",U(a))}function U(a){var b=[];for(;;){e("name")||k();var c=d.token.value;g(),e("operator","=")?(g(),b.push([c,bj(!1,a)])):b.push([c]);if(!e("punc",","))break;g()}return b}function T(){var a=R(),b,c;if(e("keyword","catch")){g(),m("("),e("name")||i("Name expected");var f=d.token.value;g(),m(")"),b=[f,R()]}e("keyword","finally")&&(g(),c=R()),!b&&!c&&i("Missing catch/finally blocks");return p("try",a,b,c)}function R(){m("{");var a=[];while(!e("punc","}"))e("eof")&&k(),a.push(t());g();return a}function Q(){var a=q(),b=t(),c;e("keyword","else")&&(g(),c=t());return p("if",a,b,c)}function O(a){var b=a[0]=="var"?p("name",a[1][0]):a;g();var c=bj();m(")");return p("for-in",a,b,c,bk(t))}function N(a){m(";");var b=e("punc",";")?null:bj();m(";");var c=e("punc",")")?null:bj();m(")");return p("for",a,b,c,bk(t))}function K(){m("(");var a=null;if(!e("punc",";")){a=e("keyword","var")?(g(),V(!0)):bj(!0,!0);if(e("operator","in"))return O(a)}return N(a)}function I(a){var b;n()||(b=e("name")?d.token.value:null),b!=null?(g(),L(b,d.labels)||i("Label "+b+" without matching loop or statement")):d.in_loop==0&&i(a+" not inside a loop or switch"),o();return p(a,b)}function F(){return p("stat",H(bj,o))}function w(a){d.labels.push(a);var c=d.token,e=t();b&&!M(C,e[0])&&k(c),d.labels.pop();return p("label",a,e)}function s(a){return c?function(){var b=d.token,c=a.apply(this,arguments);c[0]=r(c[0],b,h());return c}:a}function r(a,b,c){return a instanceof E?a:new E(a,b,c)}function q(){m("(");var a=bj();m(")");return a}function p(){return J(arguments)}function o(){e("punc",";")?g():n()||k()}function n(){return!b&&(d.token.nlb||e("eof")||e("punc","}"))}function m(a){return l("punc",a)}function l(a,b){if(e(a,b))return g();j(d.token,"Unexpected token "+d.token.type+", expected "+a)}function k(a){a==null&&(a=d.token),j(a,"Unexpected token: "+a.type+" ("+a.value+")")}function j(a,b){i(b,a.line,a.col)}function i(a,b,c,e){var f=d.input.context();u(a,b!=null?b:f.tokline,c!=null?c:f.tokcol,e!=null?e:f.tokpos)}function h(){return d.prev}function g(){d.prev=d.token,d.peeked?(d.token=d.peeked,d.peeked=null):d.token=d.input();return d.token}function f(){return d.peeked||(d.peeked=d.input())}function e(a,b){return v(d.token,a,b)}var d={input:typeof a=="string"?x(a,!0):a,token:null,prev:null,peeked:null,in_function:0,in_loop:0,labels:[]};d.token=g();var t=s(function(){e("operator","/")&&(d.peeked=null,d.token=d.input(!0));switch(d.token.type){case"num":case"string":case"regexp":case"operator":case"atom":return F();case"name":return v(f(),"punc",":")?w(H(d.token.value,g,g)):F();case"punc":switch(d.token.value){case"{":return p("block",R());case"[":case"(":return F();case";":g();return p("block");default:k()};case"keyword":switch(H(d.token.value,g)){case"break":return I("break");case"continue":return I("continue");case"debugger":o();return p("debugger");case"do":return function(a){l("keyword","while");return p("do",H(q,o),a)}(bk(t));case"for":return K();case"function":return P(!0);case"if":return Q();case"return":d.in_function==0&&i("'return' outside of function");return p("return",e("punc",";")?(g(),null):n()?null:H(bj,o));case"switch":return p("switch",q(),S());case"throw":return p("throw",H(bj,o));case"try":return T();case"var":return H(V,o);case"const":return H(W,o);case"while":return p("while",q(),bk(t));case"with":return p("with",q(),t());default:k()}}}),P=s(function(a){var b=e("name")?H(d.token.value,g):null;a&&!b&&k(),m("(");return p(a?"defun":"function",b,function(a,b){while(!e("punc",")"))a?a=!1:m(","),e("name")||k(),b.push(d.token.value),g();g();return b}(!0,[]),function(){++d.in_function;var a=d.in_loop;d.in_loop=0;var b=R();--d.in_function,d.in_loop=a;return b}())}),S=G(bk,function(){m("{");var a=[],b=null;while(!e("punc","}"))e("eof")&&k(),e("keyword","case")?(g(),b=[],a.push([bj(),b]),m(":")):e("keyword","default")?(g(),m(":"),b=[],a.push([null,b])):(b||k(),b.push(t()));g();return a}),Y=s(function(a){if(e("operator","new")){g();return X()}if(e("operator")&&M(y,d.token.value))return bd("unary-prefix",H(d.token.value,g),Y(a));if(e("punc")){switch(d.token.value){case"(":g();return bc(H(bj,G(m,")")),a);case"[":g();return bc($(),a);case"{":g();return bc(_(),a)}k()}if(e("keyword","function")){g();return bc(P(!1),a)}if(M(D,d.token.type)){var b=d.token.type=="regexp"?p("regexp",d.token.value[0],d.token.value[1]):p(d.token.type,d.token.value);return bc(H(b,g),a)}k()}),bj=s(function(a,b){arguments.length==0&&(a=!0);var c=bi(b);if(a&&e("punc",",")){g();return p("seq",c,bj(!0,b))}return c});return p("toplevel",function(a){while(!e("eof"))a.push(t());return a}([]))}function E(a,b,c){this.name=a,this.start=b,this.end=c}function x(b){function P(a){if(a)return I();y(),v();var b=g();if(!b)return x("eof");if(o(b))return C();if(b=='"'||b=="'")return F();if(M(l,b))return x("punc",h());if(b==".")return L();if(b=="/")return K();if(M(e,b))return J();if(b=="\\"||q(b))return N();B("Unexpected character '"+b+"'")}function O(a,b){try{return b()}catch(c){if(c===w)B(a);else throw c}}function N(){var b=A(r);return M(a,b)?M(i,b)?x("operator",b):M(d,b)?x("atom",b):x("keyword",b):x("name",b)}function L(){h();return o(g())?C("."):x("punc",".")}function K(){h();var a=f.regex_allowed;switch(g()){case"/":f.comments_before.push(G()),f.regex_allowed=a;return P();case"*":f.comments_before.push(H()),f.regex_allowed=a;return P()}return f.regex_allowed?I():J("/")}function J(a){function b(a){if(!g())return a;var c=a+g();if(M(i,c)){h();return b(c)}return a}return x("operator",b(a||h()))}function I(){return O("Unterminated regular expression",function(){var a=!1,b="",c,d=!1;while(c=h(!0))if(a)b+="\\"+c,a=!1;else if(c=="[")d=!0,b+=c;else if(c=="]"&&d)d=!1,b+=c;else{if(c=="/"&&!d)break;c=="\\"?a=!0:b+=c}var e=A(function(a){return M(m,a)});return x("regexp",[b,e])})}function H(){h();return O("Unterminated multiline comment",function(){var a=t("*/",!0),b=f.text.substring(f.pos,a),c=x("comment2",b,!0);f.pos=a+2,f.line+=b.split("\n").length-1,f.newline_before=b.indexOf("\n")>=0;return c})}function G(){h();var a=t("\n"),b;a==-1?(b=f.text.substr(f.pos),f.pos=f.text.length):(b=f.text.substring(f.pos,a),f.pos=a);return x("comment1",b,!0)}function F(){return O("Unterminated string constant",function(){var a=h(),b="";for(;;){var c=h(!0);if(c=="\\")c=D();else if(c==a)break;b+=c}return x("string",b)})}function E(a){var b=0;for(;a>0;--a){var c=parseInt(h(!0),16);isNaN(c)&&B("Invalid hex-character pattern in string"),b=b<<4|c}return b}function D(){var a=h(!0);switch(a){case"n":return"\n";case"r":return"\r";case"t":return"\t";case"b":return"\b";case"v":return"";case"f":return"\f";case"0":return"";case"x":return String.fromCharCode(E(2));case"u":return String.fromCharCode(E(4));case"\n":return"";default:return a}}function C(a){var b=!1,c=!1,d=!1,e=a==".",f=A(function(f,g){if(f=="x"||f=="X")return d?!1:d=!0;if(!d&&(f=="E"||f=="e"))return b?!1:b=c=!0;if(f=="-")return c||g==0&&!a?!0:!1;if(f=="+")return c;c=!1;if(f==".")return!e&&!d?e=!0:!1;return p(f)});a&&(f=a+f);var g=s(f);if(!isNaN(g))return x("num",g);B("Invalid syntax: "+f)}function B(a){u(a,f.tokline,f.tokcol,f.tokpos)}function A(a){var b="",c=g(),d=0;while(c&&a(c,d++))b+=h(),c=g();return b}function y(){while(M(j,g()))h()}function x(a,b,d){f.regex_allowed=a=="operator"&&!M(z,b)||a=="keyword"&&M(c,b)||a=="punc"&&M(k,b);var e={type:a,value:b,line:f.tokline,col:f.tokcol,pos:f.tokpos,nlb:f.newline_before};d||(e.comments_before=f.comments_before,f.comments_before=[]),f.newline_before=!1;return e}function v(){f.tokline=f.line,f.tokcol=f.col,f.tokpos=f.pos}function t(a,b){var c=f.text.indexOf(a,f.pos);if(b&&c==-1)throw w;return c}function n(){return!f.peek()}function h(a){var b=f.text.charAt(f.pos++);if(a&&!b)throw w;b=="\n"?(f.newline_before=!0,++f.line,f.col=0):++f.col;return b}function g(){return f.text.charAt(f.pos)}var f={text:b.replace(/\r\n?|[\n\u2028\u2029]/g,"\n").replace(/^\uFEFF/,""),pos:0,tokpos:0,line:0,tokline:0,col:0,tokcol:0,newline_before:!1,regex_allowed:!1,comments_before:[]};P.context=function(a){a&&(f=a);return f};return P}function v(a,b,c){return a.type==b&&(c==null||a.value==c)}function u(a,b,c,d){throw new t(a,b,c,d)}function t(a,b,c,d){this.message=a,this.line=b,this.col=c,this.pos=d}function s(a){if(f.test(a))return parseInt(a.substr(2),16);if(g.test(a))return parseInt(a.substr(1),8);if(h.test(a))return parseFloat(a)}function r(a){return q(a)||o(a)}function q(a){return a=="$"||a=="_"||n(a)}function p(a){return o(a)||n(a)}function o(a){a=a.charCodeAt(0);return a>=48&&a<=57}function n(a){a=a.charCodeAt(0);return a>=65&&a<=90||a>=97&&a<=122}var a=I(["break","case","catch","const","continue","default","delete","do","else","finally","for","function","if","in","instanceof","new","return","switch","throw","try","typeof","var","void","while","with"]),b=I(["abstract","boolean","byte","char","class","debugger","double","enum","export","extends","final","float","goto","implements","import","int","interface","long","native","package","private","protected","public","short","static","super","synchronized","throws","transient","volatile"]),c=I(["return","new","delete","throw","else","case"]),d=I(["false","null","true","undefined"]),e=I(K("+-*&%=<>!?|~^")),f=/^0x[0-9a-f]+$/i,g=/^0[0-7]+$/,h=/^\d*\.?\d*(?:e[+-]?\d*(?:\d\.?|\.?\d)\d*)?$/i,i=I(["in","instanceof","typeof","new","void","delete","++","--","+","-","!","~","&","|","^","*","/","%",">>","<<",">>>","<",">","<=",">=","==","===","!=","!==","?","=","+=","-=","/=","*=","%=",">>=","<<=",">>>=","|=","^=","&=","&&","||"]),j=I(K(" \n\r\t")),k=I(K("[{}(,.;:")),l=I(K("[]{}(),;:")),m=I(K("gmsiy"));t.prototype.toString=function(){return this.message+" (line: "+this.line+", col: "+this.col+", pos: "+this.pos+")"};var w={},y=I(["typeof","void","delete","--","++","!","~","-","+"]),z=I(["--","++"]),A=function(a,b,c){while(c<a.length)b[a[c]]=a[c].substr(0,a[c].length-1),c++;return b}(["+=","-=","/=","*=","%=",">>=","<<=",">>>=","|=","^=","&="],{"=":!0},0),B=function(a,b){for(var c=0,d=1;c<a.length;++c,++d){var e=a[c];for(var f=0;f<e.length;++f)b[e[f]]=d}return b}([["||"],["&&"],["|"],["^"],["&"],["==","===","!=","!=="],["<",">","<=",">=","in","instanceof"],[">>","<<",">>>"],["+","-"],["*","/","%"]],{}),C=I(["for","do","while","switch"]),D=I(["atom","num","string","regexp","name"]);E.prototype.toString=function(){return this.name};var P=I(["name","array","object","string","dot","sub","call","regexp"]),R=I(["if","while","do","for","for-in","with"]);return{parse:F,gen_code:S,tokenizer:x,ast_walker:N}}
-
-	// Math Operators
-
-	var operators = {
-		'+': 'add',
-		'-': 'subtract',
-		'*': 'multiply',
-		'/': 'divide',
-		'%': 'modulo',
-		'==': 'equals',
-		'!=': 'equals'
-	};
-
-	function $eval(left, operator, right) {
-		var handler = operators[operator];
-		if (left && left[handler]) {
-			var res = left[handler](right);
-			return operator == '!=' ? !res : res;
-		}
-		switch (operator) {
-		case '+': return left + right;
-		case '-': return left - right;
-		case '*': return left * right;
-		case '/': return left / right;
-		case '%': return left % right;
-		case '==': return left == right;
-		case '!=': return left != right;
-		default:
-			throw new Error('Implement Operator: ' + operator);
-		}
-	};
-
-	// Sign Operators
-
-	var signOperators = {
-		'-': 'negate'
-	};
-
-	function $sign(operator, value) {
-		var handler = signOperators[operator];
-		if (value && value[handler]) {
-			return value[handler]();
-		}
-		switch (operator) {
-		case '+': return +value;
-		case '-': return -value;
-		default:
-			throw new Error('Implement Sign Operator: ' + operator);
-		}
-	}
-
-	// AST Helpers
-
-	function isDynamic(exp) {
-		var type = exp[0];
-		return type != 'num' && type != 'string';
-	}
-
-	function handleOperator(operator, left, right) {
-		// Only replace operators with calls to $operator if the left hand side
-		// is potentially an object.
-		if (operators[operator] && isDynamic(left)) {
-			// Replace with call to $operator(left, operator, right):
-			return ['call', ['name', '$eval'],
-					[left, ['string', operator], right]];
-		}
-	}
-
-	/**
-	 * Compiles PaperScript code into JavaScript code.
-	 *
-	 * @name PaperScript.compile
-	 * @function
-	 * @param {String} code The PaperScript code.
-	 * @return {String} The compiled PaperScript as JavaScript code.
-	 */
-	function compile(code) {
-		// Use parse-js to translate the code into a AST structure which is then
-		// walked and parsed for operators to overload. The resulting AST is
-		// translated back to code and evaluated.
-		var ast = parse_js.parse(code),
-			walker = parse_js.ast_walker(),
-			walk = walker.walk;
-
-		ast = walker.with_walkers({
-			'binary': function(operator, left, right) {
-				// Handle simple mathematical operators here:
-				return handleOperator(operator, left = walk(left),
-						right = walk(right))
-						// Always return something since we're walking left and
-						|| [this[0], operator, left, right];
-			},
-
-			'assign': function(operator, left, right) {
-				var res = handleOperator(operator, left = walk(left),
-						right = walk(right));
-				if (res)
-					return [this[0], true, left, res];
-				return [this[0], operator, left, right];
-			},
-
-			'unary-prefix': function(operator, exp) {
-				if (signOperators[operator] && isDynamic(exp)) {
-					return ['call', ['name', '$sign'],
-							[['string', operator], walk(exp)]];
-				}
-			}
-		}, function() {
-			return walk(ast);
-		});
-
-		return parse_js.gen_code(ast, {
-			beautify: true
-		});
-	}
-
-	function evaluate(code, scope) {
-		paper = scope;
-		var view = scope.project.view,
-			res;
-		with (scope) {
-			(function() {
-				var onEditOptions, onSelect, onDeselect, onReselect,
-					onMouseDown, onMouseUp, onMouseDrag, onMouseMove,
-					onKeyDown, onKeyUp, onFrame, onResize;
-				res = eval(compile(code));
-				if (/on(?:Key|Mouse)(?:Up|Down|Move|Drag)/.test(code)) {
-					Base.each(Tool.prototype._events, function(key) {
-						var value = eval(key);
-						if (value) {
-							scope.getTool()[key] = value;
-						}
-					});
-				}
-				if (view) {
-					view.setOnResize(onResize);
-					view.fire('resize', {
-						size: view.size,
-						delta: new Point()
-					});
-					view.setOnFrame(onFrame);
-					view.draw();
-				}
-			}).call(scope);
-		}
-		return res;
-	}
-
-	function request(url, scope) {
-		var xhr = new (window.ActiveXObject || XMLHttpRequest)(
-				'Microsoft.XMLHTTP');
-		xhr.open('GET', url, true);
-		if (xhr.overrideMimeType) {
-			xhr.overrideMimeType('text/plain');
-		}
-		xhr.onreadystatechange = function() {
-			if (xhr.readyState === 4) {
-				return evaluate(xhr.responseText, scope);
-			}
-		};
-		return xhr.send(null);
-	}
-
-	function load() {
-		var scripts = document.getElementsByTagName('script');
-		for (var i = 0, l = scripts.length; i < l; i++) {
-			var script = scripts[i];
-			if (/^text\/(?:x-|)paperscript$/.test(script.type)
-					&& !script.getAttribute('data-paper-loaded')) {
-				var scope = new PaperScope(script);
-				scope.setup(PaperScript.getAttribute(script, 'canvas'));
-				if (script.src) {
-					request(script.src, scope);
-				} else {
-					evaluate(script.innerHTML, scope);
-				}
-				script.setAttribute('data-paper-loaded', true);
-			}
-		}
-	}
-
-	DomEvent.add(window, { load: load });
-
-	function handleAttribute(name) {
-		name += 'Attribute';
-		return function(el, attr) {
-			return el[name](attr) || el[name]('data-paper-' + attr);
-		};
-	}
-
-	return {
-		compile: compile,
-		evaluate: evaluate,
-		load: load,
-		getAttribute: handleAttribute('get'),
-		hasAttribute: handleAttribute('has')
-	};
-
-};
-
-this.load = PaperScript.load;
-
-Base.each(this, function(val, key) {
-	if (val && val.prototype instanceof Base) {
-		val._name = key;
-	}
-});
-
-this.enumerable = true;
-return new (PaperScope.inject(this));
-};
diff --git a/test/tests/ImportSVG.js b/test/tests/ImportSVG.js
index a964224d..e7fd358e 100644
--- a/test/tests/ImportSVG.js
+++ b/test/tests/ImportSVG.js
@@ -12,11 +12,21 @@
 * Distributed under the MIT license. See LICENSE file for details.
 *
 * All rights reserved.
+*
+* This test file created by Stetson-Team-Alpha
 */
 
 module('ImportSVG');
 
-/**
-*TODO: Create SVGs utilizing ImportSVG methods
-* WILL ADD MORE AFTER LEARNING SVG
-*/
+test('Make a circle', function() 
+{
+	var svgDocument = evt.target.ownerDocument;
+	var svgcircle = svgDocument.createElementNS(svgns, "circle");
+	svgCircle.setAttributeNS(null, "cx", 25);
+	svgCircle.setAttributeNS(null, "cy", 25);
+	svgCircle.setAttributeNS(null, "r",  20);
+	svgCircle.setAttributeNS(null, "fill", "green");
+	var circle = new ImportSVG(svgCircle)
+	equals(circle);
+});
+/

From 350fc91c4decef00e80ff63eb67d8b1aac19d7c0 Mon Sep 17 00:00:00 2001
From: Jt Whissel <jtwhissel@gmail.com>
Date: Tue, 25 Sep 2012 16:22:13 -0300
Subject: [PATCH 34/51] Update AUTHORS.md

---
 AUTHORS.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/AUTHORS.md b/AUTHORS.md
index 488ef858..6c907bd9 100644
--- a/AUTHORS.md
+++ b/AUTHORS.md
@@ -7,5 +7,4 @@
 - Jacob Lites <jnightlight@gmail.com>
 - Justin Ridgewell <justinridgewell@gmail.com>
 - Andrew Wagenheim <abwagenheim@gmail.com>
-- Scott Kieronski <baroes0239@gmail.com>
-- Lily the Puppy <scareddoggy@bowwow.bark>
\ No newline at end of file
+- Scott Kieronski <baroes0239@gmail.com>
\ No newline at end of file

From f46c77c699517597be1f05c87429a5f1ca4ed093 Mon Sep 17 00:00:00 2001
From: Justin Ridgewell <justin@ridgewell.name>
Date: Sun, 30 Sep 2012 17:24:18 -0400
Subject: [PATCH 35/51] Reset files to stubs

---
 src/svg/ExportSVG.js    | 109 +--------------
 src/svg/ImportSVG.js    | 285 +++++++---------------------------------
 test/tests/ImportSVG.js |  32 -----
 3 files changed, 49 insertions(+), 377 deletions(-)
 delete mode 100644 test/tests/ImportSVG.js

diff --git a/src/svg/ExportSVG.js b/src/svg/ExportSVG.js
index e4906664..79d88b78 100644
--- a/src/svg/ExportSVG.js
+++ b/src/svg/ExportSVG.js
@@ -6,23 +6,16 @@
  *  var svg=document.createElementNS(NS,"svg");
  */
 
- 
-
 
 var ExportSVG = function()
 {
 	var svgObj = null; // xml dom object (svg typed)
-	//var blarg = this;
 	
 	//initialize the svgObj and what ever else.
-	/*function initialize()
+	function initialize()
 	{
-		var NS = "http://www.w3.org/2000/svg";
-		svgObj = document.createElementNS(NS,"svg");
 		
-		console.log(svgObj);
-
-	};*/
+	};
 	
 	/**
 	 * 
@@ -90,100 +83,8 @@ var ExportSVG = function()
 	 */
     this.exportPath = function(path)
     {
-    	//this.initialize();
-    	//console.log(blarg.svgObj);
-	var pathClone = path.clone();
-	var NS = "http://www.w3.org/2000/svg";
-	svgObj = document.createElementNS(NS,"svg");
-	svgPath = document.createElementNS(NS, "path");
-	
-	//Getting all of the segments(a point, a HandleIn and a HandleOut) in the path
-	var segArray = pathClone.getSegments();
-
-	var pointArray = new Array();
-	var handleInArray = new Array();
-	var handleOutArray = new Array();
-	for(i = 0; i < segArray.length; i++)
-	{	
-		
-		console.log(segArray[i].toString());
-		pointArray[i] = segArray[i].getPoint();
-		handleInArray[i] = segArray[i].getHandleIn();
-		handleOutArray[i] = segArray[i].getHandleOut();
-	}
-	//pointstring is formatted in the way the SVG XML will be reading
-	//Namely, a point and the way to traverse to that point
-	var pointString = "";
-	for(i = 0; i < pointArray.length; i++)
-	{
-		var x = pointArray[i].getX();
-		//x = x - (x % 1); //Possible for simplifying  
-		var y = pointArray[i].getY();
-		//y = y - (x % 1);
-		if(i === 0)
-		{
-			//M is moveto, moving to a point without drawing
-			pointString+= "M " + x + " " + y + " ";
-		}
-		else
-		{
-			//L is lineto, moving to a point with drawing
-			pointString+= "L " + x + " " + y + " ";
-		}
-	}
-	if(pathClone.getClosed())
-	{
-		//Z implies a closed path, connecting the first and last points
-		pointString += "z";
-	}
-	
-	svgPath.setAttribute("d",pointString);
-
-	//If the stroke doesn't have a color, there's no attribute for it
-	if(pathClone.strokeColor != undefined)
-	{
-		//Using rgb, each value between 0 and 1
-		var strokeRed = pathClone.strokeColor.red;
-		var strokeGreen = pathClone.strokeColor.green;
-		var strokeBlue = pathClone.strokeColor.blue;
-		var strokeRGB = RGBtoHex(strokeRed, strokeGreen, strokeBlue);
-		svgPath.setAttribute("stroke", strokeRGB);
-	}
-	
-	//If the fill doesn't have a color, there's no attribute for it
-	if(pathClone.fillColor != undefined)
-	{
-		var fillRed = pathClone.fillColor.red;
-		var fillGreen = pathClone.fillColor.green;
-		var fillBlue = pathClone.fillColor.blue;
-		var fillRGB = RGBtoHex(fillRed, fillGreen, fillBlue);
-		svgPath.setAttribute("fill", fillRGB);
-	}
-	svgPath.setAttribute("stroke-width",pathClone.strokeWidth);
-	svgObj.appendChild(svgPath); //appends path to svgObj
-	return svgObj;
+    	return svgObj;
     };
 
-    function RGBConverter(deciColor)
-    {
-    	//since value is scaled from 0 to 1, must round the
-	//multiplication by 255
-	var decColor = Math.round(deciColor * 255);
-	var hexColor = decColor.toString(16); //to hex
-	//R, G, and B need to take up at 2 characters
-	hexColor = hexColor.length > 1? hexColor : "0" + hexColor;
-	return hexColor;
-    };
-
-    function RGBtoHex(red, green, blue)
-    {
-    	var redVal = RGBConverter(red);
-	var greenVal = RGBConverter(green);
-	var blueVal = RGBConverter(blue);
-	//Returns hex for colors
-	return "#" + redVal + greenVal + blueVal;
-    }
-
-
-    //initialize(); // calls the init function after class is loaded
-};
+    initialize(); // calls the init function after class is loaded
+};
\ No newline at end of file
diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index a0d497a9..08f6f557 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -1,252 +1,55 @@
-/*
-* Paper.js
-*
-* This file is part of Paper.js, a JavaScript Vector Graphics Library,
-* based on Scriptographer.org and designed to be largely API compatible.
-* http://paperjs.org/
-* http://scriptographer.org/
-*
-* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
-* http://lehni.org/ & http://jonathanpuckey.com/
-*
-* Distributed under the MIT license. See LICENSE file for details.
-*
-* All rights reserved.
-*
-*
-*
-* This class and all methods therein designed by Stetson-Team-Alpha
-* @author Stetson-Team-Alpha
-*/
-
 /**
- * @name ImportSVG
- * @class The ImportSVG object represents an object created using the SVG
- * Canvas that will be converted into a Paper.js object. 
- * The SVG object is imported into Paper.js by converting it into items 
- * within groups.
- *
+ *  Imports svg into items with groups
+ *  Stetson Alpha - Paper.js
+ *  
  */
 
-var ImportSVG = this.ImportSVG = Base.extend(/** @Lends ImportSVG# */{
-
-	/**
-	 * Creates a Paper.js object using data parsed from the selected SVG
-	 * Document Object Model (DOM). The SVG object is imported, than a layer
-	 * is created (with groups for the items if needed).
-	 *
-	 * Supports nested groups
-	 *
-	 * @param {SVG DOM} svg An SVG DOM object with parameters
-	 * @return {Layer} A Paper.js layer
-	 */
-
-	importSVG: function(svg)
+var ImportSVG = function()
+{
+	//initialize
+	function initialize()
 	{
-	var layer = new Layer();
-	groups = this.importGroup(svg);
-	layer.addChild(groups);
-
-	return layer;
-	},
+		
+	};
 	
 	/**
-	 * Creates a Paper.js group by parsing a specific GNode of the imported
-	 * SVG DOM
 	 * 
-	 * @name ImportSVG#importGroup
-	 * @function
-	 * @param {XML DOM} svg  A node passed in by the imported SVG
-	 * @return {Group} group A Paper.js group
-	 *
-	 *
+	 * Takes the svg dom obj and parses the data
+	 * to create a layer with groups (if needed) with
+	 * items inside. Should support nested groups.
+	 * 
+	 * takes in a svg object (xml dom)
+	 * returns Paper.js Layer 
 	 */
-	importGroup: function(svg)
-	{
-		var group = new Group();
-		var child;
-		for (var i in svg.childNodes) {
-			child = svg.childNodes[i];
-			if (child.nodeType != 1) {
-				continue;
-			}
-			item = this.importPath(child);
-			group.addChild(item);
-		}
-		
-		return group;
-	},
-
+    this.importSVG = function(svg)
+    {
+    	return layer;
+    };
+	
+	/**
+	 * Creates a Paper.js Group by parsing
+	 * a specific svg g node
+	 * 
+	 * takes in a svg object (xml dom)
+	 * returns Paper.js Group
+	 */
+    function importGroup(svg)
+    {
+    	return group;
+    };
+    
 	/**
 	 * Creates a Paper.js Path by parsing
-	 * a specific SVG node (rectangle, path, circle, polygon, etc.)
-	 * and creating the right Path object based on the SVG type.
-	 *
-	 * @name ImportSVG#importPath
-	 * @function
-	 * @param {XML DOM} svg An SVG object
-	 * @return {Item} item A Paper.js item
+	 * a specific svg node (rect, path, circle, polygon, etc)
+	 * and creating the right path object based on the svg type.
+	 * 
+	 * takes in a svg object (xml dom)
+	 * returns Paper.js Group
 	 */
-	importPath: function(svg)
-	{
-		switch (svg.nodeName.toLowerCase()) {
-			case 'line':
-				item = this._importLine(svg);
-				break;
-			case 'rect':
-				item = this._importRectangle(svg);
-				break;
-			case 'ellipse':
-				item = this._importOval(svg);
-				break;
-			case 'g':
-				item = this.importGroup(svg);
-				break;
-			case 'text':
-				item = this._importText(svg);
-				break;
-			default:
-			break;
-		}
-		
-		return item;
-	},
-
-	/**
-	 * Creates a Path.Circle item in Paper.js using an imported Circle from
-	 * SVG
-	 *
-	 * @name ImportSVG#importCircle
-	 * @function
-	 * @param {XML DOM} svgCircle An SVG circle node
-	 * @return {Path.Circle} circle A Path.Circle item for Paper.js
-	 */
-	_importCircle: function(svgCircle)
-	{
-		var cx		= svgCircle.cx.baseVal.value || 0;
-		var cy		= svgCircle.cy.baseVal.value || 0;
-		var r		= svgCircle.r.baseVal.value || 0;
-		var center	= new Point(cx, cy);
-		var circle	= new Path.Circle(center, r);
-
-		return circle;
-	},
-
-	/**
-	 * Creates a Path.Oval item in Paper.js using an imported Oval from SVG
-	 *
-	 * @name ImportSVG#importOval
-	 * @function
-	 * @param {XML DOM} svgOval An SVG ellipse node
-	 * @return {Path.Oval} oval A Path.Oval item for Paper.js
-	 */
-	_importOval: function(svgOval)
-	{
-		var cx			= svgOval.cx.baseVal.value || 0;
-		var cy			= svgOval.cy.baseVal.value || 0;
-		var rx			= svgOval.rx.baseVal.value || 0;
-		var ry			= svgOval.ry.baseVal.value || 0;
-
-		var center		= new Point(cx, cy);
-		var offset		= new Point(rx, ry);
-		var topLeft		= center.subtract(offset);
-		var bottomRight	= center.add(offset);
-
-		var rect		= new Rectangle(topLeft, bottomRight);
-		var oval		= new Path.Oval(rect);
-
-		return oval;
-	},
-
-	/**
-	 * Creates a Path.Rectangle item from an imported SVG rectangle
-	 *
-	 * @name ImportSVG#importRectangle
-	 * @function
-	 * @param {XML DOM} svgRectangle An SVG rectangle node
-	 * @return {Path.Rectangle} rectangle A Path.Rectangle item for Paper.js
-	 */
-	 /**
-	 * Creates a Path.RoundRectangle item from an imported SVG rectangle
-	 * with rounded corners
-	 *
-	 * @name ImportSVG#importRectangle
-	 * @function
-	 * @param {XML DOM} svgRectangle An SVG rectangle node with rounded
-	 * corners
-	 * @return {Path.RoundRectangle} rectangle A Path.Rectangle item for
-	 * Paper.js
-	 */
-	_importRectangle: function(svgRectangle)
-	{
-		var x			= svgRectangle.x.baseVal.value || 0;
-		var y			= svgRectangle.y.baseVal.value || 0;
-		var rx			= svgRectangle.rx.baseVal.value || 0;
-		var ry			= svgRectangle.ry.baseVal.value || 0;
-		var width		= svgRectangle.width.baseVal.value || 0;
-		var height		= svgRectangle.height.baseVal.value || 0;
-
-		var topLeft		= new Point(x, y);
-		var size		= new Size(width, height);
-		var rectangle	= new Rectangle(topLeft, size);
-
-		if (rx > 0 || ry > 0) {
-			var cornerSize = new Size(rx, ry);
-			rectangle = new Path.RoundRectangle(rectangle, cornerSize);
-		} else {
-			rectangle = new Path.Rectangle(rectangle);
-		}
-
-		return rectangle;
-	},
-
-	/**
-	 * Creates a Path.Line item in Paper.js from an imported SVG line
-	 *
-	 * @name ImportSVG#importLine
-	 * @function
-	 * @param {XML DOM} svgLine An SVG line node
-	 * @return {Path.Line} line A Path.Line item for Paper.js
-	 */
-	_importLine: function(svgLine)
-	{
-		var x1		= svgLine.x1.baseVal.value || 0;
-		var y1		= svgLine.y1.baseVal.value || 0;
-		var x2		= svgLine.x2.baseVal.value || 0;
-		var y2		= svgLine.y2.baseVal.value || 0;
-
-		var from	= new Point(x1, y1);
-		var to		= new Point(x2, y2);
-		var line	= new Path.Line(from, to);
-
-		return line;
-	},
-
-	/**
-	 * Creates a PointText item in Paper.js from an imported SVG text node
-	 *
-	 * @name ImportSVG#importText
-	 * @function
-	 * @param {XML DOM} svgText An SVG text node
-	 * @return {Path.Text} text A PointText item for Paper.js
-	 */
-	_importText: function(svgText)
-	{
-		//TODO: Extend this for multiple values
-		var x	= svgText.x.baseVal.getItem(0).value || 0;
-		var y	= svgText.y.baseVal.getItem(0).value || 0;
-		//END:Todo
-		
-		var dx; //character kerning
-		var dy; //character baseline
-		var rotate; //character rotation
-		var textLength; //the width of the containing box
-		var lengthAdjust; //
-		var textContent = svgText.textContent || "";
-		
-		var topLeft = new Point(x, y);
-		var text = new PointText(topLeft);
-		text.content = textContent;
-		return text;
-	}
-});
+    function importPath(svg)
+    {
+    	return path;
+    };
+	
+    initialize(); // calls the init function after class is loaded
+};
\ No newline at end of file
diff --git a/test/tests/ImportSVG.js b/test/tests/ImportSVG.js
deleted file mode 100644
index e7fd358e..00000000
--- a/test/tests/ImportSVG.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/*
-* Paper.js
-*
-* This file is part of Paper.js, a JavaScript Vector Graphics Library,
-* based on Scriptographer.org and designed to be largely API compatible.
-* http://paperjs.org/
-* http://scriptographer.org/
-*
-* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
-* http://lehni.org/ & http://jonathanpuckey.com/
-*
-* Distributed under the MIT license. See LICENSE file for details.
-*
-* All rights reserved.
-*
-* This test file created by Stetson-Team-Alpha
-*/
-
-module('ImportSVG');
-
-test('Make a circle', function() 
-{
-	var svgDocument = evt.target.ownerDocument;
-	var svgcircle = svgDocument.createElementNS(svgns, "circle");
-	svgCircle.setAttributeNS(null, "cx", 25);
-	svgCircle.setAttributeNS(null, "cy", 25);
-	svgCircle.setAttributeNS(null, "r",  20);
-	svgCircle.setAttributeNS(null, "fill", "green");
-	var circle = new ImportSVG(svgCircle)
-	equals(circle);
-});
-/

From c6c460519e058ca55ab4995d196ae2ad2573372e Mon Sep 17 00:00:00 2001
From: Andrew <jaroles@stetson.edu>
Date: Sun, 30 Sep 2012 17:51:50 -0400
Subject: [PATCH 36/51] Merging all the magic

---
 examples/ExportSVGTests/Circle Testing.html   |  48 ++
 .../ExportSVGTests/Empty Path Testing.html    |  42 ++
 examples/ExportSVGTests/Line Testing.html     |  61 ++
 .../ExportSVGTests/Random Path Testing.html   |  54 ++
 .../Rect and Attribute Testing.html           |  70 ++
 examples/ExportSVGTests/Text Testing.html     |  60 ++
 examples/ExportSVGTests/Transform Test 1.html |  46 ++
 examples/ExportSVGTests/Transform Test 2.html |  41 ++
 .../Circle and Oval Testing.html              |  33 +
 examples/ImportSVGTests/Line Testing.html     |  32 +
 .../ImportSVGTests/Multiple Paths Test 1.html |  49 ++
 .../ImportSVGTests/Multiple Paths Test 2.html |  45 ++
 .../ImportSVGTests/Nested Groups Test.html    |  85 +++
 examples/ImportSVGTests/Rect Testing.html     |  30 +
 examples/ImportSVGTests/Testing.html          |  47 ++
 examples/ImportSVGTests/Text Testing.html     |  27 +
 .../ImportSVGTests/Transform Testing.html     |  29 +
 src/svg/ExportSVG.js                          | 528 +++++++++++++--
 src/svg/ImportSVG.js                          | 622 ++++++++++++++++--
 test/tests/ExportSVG.js                       | 556 ++++++++++++++++
 test/tests/ImportSVG.js                       | 451 +++++++++++++
 21 files changed, 2837 insertions(+), 119 deletions(-)
 create mode 100644 examples/ExportSVGTests/Circle Testing.html
 create mode 100644 examples/ExportSVGTests/Empty Path Testing.html
 create mode 100644 examples/ExportSVGTests/Line Testing.html
 create mode 100644 examples/ExportSVGTests/Random Path Testing.html
 create mode 100644 examples/ExportSVGTests/Rect and Attribute Testing.html
 create mode 100644 examples/ExportSVGTests/Text Testing.html
 create mode 100644 examples/ExportSVGTests/Transform Test 1.html
 create mode 100644 examples/ExportSVGTests/Transform Test 2.html
 create mode 100644 examples/ImportSVGTests/Circle and Oval Testing.html
 create mode 100644 examples/ImportSVGTests/Line Testing.html
 create mode 100644 examples/ImportSVGTests/Multiple Paths Test 1.html
 create mode 100644 examples/ImportSVGTests/Multiple Paths Test 2.html
 create mode 100644 examples/ImportSVGTests/Nested Groups Test.html
 create mode 100644 examples/ImportSVGTests/Rect Testing.html
 create mode 100644 examples/ImportSVGTests/Testing.html
 create mode 100644 examples/ImportSVGTests/Text Testing.html
 create mode 100644 examples/ImportSVGTests/Transform Testing.html
 create mode 100644 test/tests/ExportSVG.js
 create mode 100644 test/tests/ImportSVG.js

diff --git a/examples/ExportSVGTests/Circle Testing.html b/examples/ExportSVGTests/Circle Testing.html
new file mode 100644
index 00000000..b81d0035
--- /dev/null
+++ b/examples/ExportSVGTests/Circle Testing.html	
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Circle Testing</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+
+</head>
+<body>	
+	<canvas id="canvas" width="500px" height="500px"></canvas>
+		<script type="text/paperscript" canvas="canvas">
+		initializePath();
+
+		function initializePath() {
+			var topLeft = new Point(-200, -200);
+			var size = new Size(-150, -100);
+			var rectangle = new Rectangle(topLeft, size);
+			var path = new Path.Oval(rectangle);
+			path.fillColor = 'black';
+		
+			var topLeft = new Point(-5, -400);
+			var size = new Size(-100, -50);
+			var rectangle = new Rectangle(topLeft, size);
+			var path = new Path.Oval(rectangle);
+			path.fillColor = 'yellow';
+		
+			var path = new Path.Circle(new Point(-25, -25), -7);
+			path.fillColor = 'red';
+			
+			var esvg = new ExportSVG();
+		//esvg.exportProject(paper.project);
+			var output = esvg.exportProject(paper.project);
+			console.log(output);
+			var test = document.getElementById('svg')
+			test.innerHTML = "";
+			test.appendChild (output);   
+		}
+		
+		// Reposition the path whenever the window is resized:
+		function onResize(event) {
+		    initializePath();
+		}		
+	</script>
+	<svg id="svg" style="width: 500px; height: 500px">
+	</svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/ExportSVGTests/Empty Path Testing.html b/examples/ExportSVGTests/Empty Path Testing.html
new file mode 100644
index 00000000..da75294e
--- /dev/null
+++ b/examples/ExportSVGTests/Empty Path Testing.html	
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Empty Path Testing</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+
+</head>
+<body>	
+	<canvas id="canvas" width="500px" height="500px"></canvas>
+		<script type="text/paperscript" canvas="canvas">
+		initializePath();
+
+		function initializePath() {
+			var path = new Path();
+			path.strokeColor = 'black';
+			path.add(new Point(30, 30));
+			path.add(new Point(100, 100));
+		
+			var segments = [new Point(30, 90), new Point(100, 150)];
+			var path2 = new Path(segments);
+			path2.strokeColor = 'yellow';
+			
+			
+			var esvg = new ExportSVG();
+		//esvg.exportProject(paper.project);
+			var output = esvg.exportProject(paper.project);
+			console.log(output);
+			var test = document.getElementById('svg')
+			test.innerHTML = "";
+			test.appendChild (output);   
+		}
+		// Reposition the path whenever the window is resized:
+		function onResize(event) {
+		    initializePath();
+		}		
+	</script>
+	<svg id="svg" style="width: 500px; height: 500px">
+	</svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/ExportSVGTests/Line Testing.html b/examples/ExportSVGTests/Line Testing.html
new file mode 100644
index 00000000..97e1a874
--- /dev/null
+++ b/examples/ExportSVGTests/Line Testing.html	
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Line Testing</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+
+</head>
+<body>	
+	<canvas id="canvas" width="500px" height="500px"></canvas>
+		<script type="text/paperscript" canvas="canvas">
+		initializePath();
+
+		function initializePath() {
+			var x1 = 5,
+				x2 = 45,
+				y1 = 5,
+				y2 = 45;
+			var line1 = new Path.Line([x1, y1], [x2, y2]);
+			line1.strokeColor = "blue";
+			line1.strokeWidth = "10px";
+		 
+			var x3 = 20,
+				x4 = 99,
+				y3 = 20,
+				y4 = 77;
+			var line2 = new Path.Line([x3, y3], [x4, y4]);
+			line2.strokeColor = "red";
+			line2.strokeWidth = "2";
+				 
+			var x5 = 50,
+				x6 = 200,
+				y5 = 55,
+				y6 = 300;
+			var line3 = new Path.Line([x5, y5], [x6, y6]);
+			line3.strokeColor = "yellow";
+			line3.strokeWidth = "5px";
+			
+			var esvg = new ExportSVG();
+			//esvg.exportProject(paper.project);
+			var output = esvg.exportProject(paper.project);
+			console.log(output);
+			var test = document.getElementById('svg')
+			test.innerHTML = "";
+			test.appendChild (output);   
+		}
+			 
+
+
+		// Reposition the path whenever the window is resized:
+		function onResize(event) {
+		    initializePath();
+		}
+		
+		
+	</script>
+	<svg id="svg" style="width: 500px; height: 500px">
+	</svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/ExportSVGTests/Random Path Testing.html b/examples/ExportSVGTests/Random Path Testing.html
new file mode 100644
index 00000000..6a38bb85
--- /dev/null
+++ b/examples/ExportSVGTests/Random Path Testing.html	
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Random Path Testing</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+
+</head>
+<body>	
+	<canvas id="canvas" width="500px" height="500px"></canvas>
+		<script type="text/paperscript" canvas="canvas">
+		initializePath();
+
+		function initializePath() {
+			var center = new Point(100, 100);
+			var sides = 3;
+			var radius = 50;
+			var triangle = new Path.RegularPolygon(center, sides, radius);
+			triangle.fillColor = 'black';
+			copy = triangle.clone();
+			copy.strokeColor = 'blue';
+			copy.rotate(45);
+		
+			var center = new Point(100, 300);
+			var sides = 10;
+			var radius = 50;
+			var decahedron = new Path.RegularPolygon(center, sides, radius);
+			decahedron.fillColor = 'black';
+	
+			var center = new Point(100, 400);
+			var points = 6;
+			var radius1 = 20;
+			var radius2 = 50;
+			var path = new Path.Star(center, points, radius1, radius2);
+			path.fillColor = 'black';
+	
+			var esvg = new ExportSVG();
+			var output = esvg.exportProject(paper.project);
+			console.log(output);
+			var test = document.getElementById('svg')
+			test.innerHTML = "";
+			test.appendChild (output);   
+		}
+			
+		// Reposition the path whenever the window is resized:
+		function onResize(event) {
+		    initializePath();
+		}
+	</script>
+	<svg id="svg" style="width: 500px; height: 500px">
+	</svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/ExportSVGTests/Rect and Attribute Testing.html b/examples/ExportSVGTests/Rect and Attribute Testing.html
new file mode 100644
index 00000000..e384fc0e
--- /dev/null
+++ b/examples/ExportSVGTests/Rect and Attribute Testing.html	
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Rectangle Testing</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+
+</head>
+<body>	
+	<canvas id="canvas" width="500px" height="500px"></canvas>
+		<script type="text/paperscript" canvas="canvas">
+		initializePath();
+
+		function initializePath() {
+			var point1 = new Point(10, 10);
+			var size1 = new Size(50, 50);
+			var rectangle1 = new Rectangle(point1, size1);
+			var path1 = new Path.Rectangle(rectangle1);
+			path1.strokeColor = 'black';
+			path1.fillColor = 'red';
+			path1.id = "square1";
+			path1.strokeCap = "square";
+			path1.opacity = ".1";
+			path1.dashArray = "[5, 2]";
+			path1.dashOffset = "0";
+	
+			var point2 = new Point(75, 75);
+			var point22 = new Point(100, 100);
+			var path2 = new Path.Rectangle(point2, point22);
+			path2.strokeColor = 'red';
+			path2.strokeWidth = '4px';
+			path2.fillColor = 'blue';
+			path2.id = "square2";
+			path2.strokeCap = "butt";
+			path2.opacity = "1";
+	
+			var point3 = new Point(150, 150);
+			var size3 = new Size(50, 50);
+			var rectangle3 = new Rectangle(point3, size3);
+			var path3 = new Path.Rectangle(rectangle3);
+			path3.strokeColor = 'blue';
+	
+			var point4 = new Point(200, 200);
+			var size4 = new Size(100, 100);
+			var rectangle4 = new Rectangle(point4, size4);
+			var cornerSize4 = new Size(30, 30);
+			var path4 = new Path.RoundRectangle(rectangle4, cornerSize4);
+			path4.strokeColor= 'yellow';
+			path4.fillColor='purple';
+			
+			var esvg = new ExportSVG();
+			var output = esvg.exportProject(paper.project);
+			console.log(output);
+			var test = document.getElementById('svg')
+			test.innerHTML = "";
+			test.appendChild (output);   
+		}
+			 
+
+
+		// Reposition the path whenever the window is resized:
+		function onResize(event) {
+		    initializePath();
+		}
+	</script>
+	<svg id="svg" style="width: 500px; height: 500px">
+	</svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/ExportSVGTests/Text Testing.html b/examples/ExportSVGTests/Text Testing.html
new file mode 100644
index 00000000..c7c824e7
--- /dev/null
+++ b/examples/ExportSVGTests/Text Testing.html	
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Text Testing</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+
+</head>
+<body>	
+	<canvas id="canvas" width="500" height="350"></canvas>
+		<script type="text/paperscript" canvas="canvas">
+
+		function initializePath() {
+			
+			var text = new PointText(new Point(50, 100));
+			text.fillColor = 'black';
+			text.content = 'This is a test';
+			
+			var text = new PointText(new Point(100, 150));
+			text.fillColor = 'red';
+			text.strokeWidth = '4';
+			text.content = 'This is also a test';
+			
+			radius = 50;
+			center = new Point(100,100);
+			var path2 = new Path.Circle(center,radius);
+			path2.strokeColor = 'black';
+			console.log(path2.getSegments());
+			//copy = path2.clone();
+			//copy.strokeColor = 'blue';
+			point = new Point(120,100);
+			path2.shear(.5, .5);
+			colors = ['red', 'blue', 'green', 'orange'];
+			for (var i in path2.segments) {
+				var p = path2.segments[i].point;
+				var c = new Path.Circle(p, 2);
+				c.fillColor = colors[i];
+			}
+			console.log(path2.segments);			
+			
+			var esvg = new ExportSVG();
+			var output = esvg.exportProject(paper.project);
+			//console.log(output);
+			var test = document.getElementById('svg')
+			test.innerHTML = "";
+			test.appendChild (output);   
+		}
+
+		// Reposition the path whenever the window is resized:
+		function onResize(event) {
+		    initializePath();
+		}
+		
+		
+	</script>
+	<svg id="svg" style="width: 500px; height: 500px">
+	</svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/ExportSVGTests/Transform Test 1.html b/examples/ExportSVGTests/Transform Test 1.html
new file mode 100644
index 00000000..d44566cd
--- /dev/null
+++ b/examples/ExportSVGTests/Transform Test 1.html	
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Transform Testing</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+
+</head>
+<body>	
+	<canvas id="canvas" width="500px" height="500px"></canvas>
+		<script type="text/paperscript" canvas="canvas">
+		initializePath();
+
+		function initializePath() {
+			var circlePath = new Path.Circle(new Point(280, 100), 25);
+			circlePath.strokeColor = 'black';
+			circlePath.fillColor = 'white';
+
+			var clones = 30;
+			var angle = 360 / clones;
+
+			for(var i = 0; i < clones; i++) {
+				var clonedPath = circlePath.clone();
+				clonedPath.rotate(angle * i, circlePath.bounds.topLeft);
+			};
+		
+			var esvg = new ExportSVG();
+		//esvg.exportProject(paper.project);
+			var output = esvg.exportProject(paper.project);
+			console.log(output);
+			var test = document.getElementById('svg')
+			test.innerHTML = "";
+			test.appendChild (output);   
+		}
+		// Reposition the path whenever the window is resized:
+		function onResize(event) {
+		    initializePath();
+		}
+		
+		
+	</script>
+	<svg id="svg" style="width: 500px; height: 500px">
+	</svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/ExportSVGTests/Transform Test 2.html b/examples/ExportSVGTests/Transform Test 2.html
new file mode 100644
index 00000000..9e9da551
--- /dev/null
+++ b/examples/ExportSVGTests/Transform Test 2.html	
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Rectangle Testing</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+
+</head>
+<body>	
+	<canvas id="canvas" width="500px" height="500px"></canvas>
+		<script type="text/paperscript" canvas="canvas">
+		initializePath();
+		function initializePath() {
+			var path = new Path.Rectangle(new Point(50, 50), new Size(100, 50));
+			path.style = {
+				fillColor: 'white',
+				strokeColor: 'black'
+			};
+			var copy = path.clone();
+			copy.strokeColor = 'red';
+			copy.rotate(-45);
+			copy.scale(0.5);
+			var esvg = new ExportSVG();
+		//esvg.exportProject(paper.project);
+			var output = esvg.exportProject(paper.project);
+			console.log(output);
+			var test = document.getElementById('svg')
+			test.innerHTML = "";
+			test.appendChild (output);   
+		}
+			 
+		// Reposition the path whenever the window is resized:
+		function onResize(event) {
+		    initializePath();
+		}
+	</script>
+	<svg id="svg" style="width: 500px; height: 500px">
+	</svg>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/ImportSVGTests/Circle and Oval Testing.html b/examples/ImportSVGTests/Circle and Oval Testing.html
new file mode 100644
index 00000000..3491aa02
--- /dev/null
+++ b/examples/ImportSVGTests/Circle and Oval Testing.html	
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Circle and Oval Testing</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		project.currentStyle = {
+				// strokeColor: 'black',
+				// strokeWidth: 2,
+				// strokeCap: 'round'
+		};
+		var isvg = new ImportSVG;
+		isvg.importSVG(document.getElementById('svg'));
+	</script>
+</head>
+<body>	
+	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:1000px;" id="svg">
+			<circle cx="40" cy="300" r="20" style="fill:orange;stroke:yellow;stroke-width:2px;stroke-dasharray:3px" id="circle1" />
+			<circle cx="60" cy="350" r="30" style="fill:red;stroke:black;stroke-width:5" id="circle2" />
+			<circle cx="160" cy="400" r="60" style="fill:blue;" id="circle3" />
+			<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" id="oval1"/>
+			<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" id="oval2"/>
+			<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" id="oval3"/>
+			<ellipse cx="240" cy="175" rx="220" ry="30" style="fill:yellow" id="oval4"/>
+			<ellipse cx="220" cy="175" rx="190" ry="20" style="fill:white" id="oval5"/>
+			<ellipse cx="300" cy="255" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" id="oval6"/>
+			
+	</svg>
+	<canvas id="canvas" width="500px" height="1000px"></canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/ImportSVGTests/Line Testing.html b/examples/ImportSVGTests/Line Testing.html
new file mode 100644
index 00000000..8a1987ef
--- /dev/null
+++ b/examples/ImportSVGTests/Line Testing.html	
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Line Testing</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		project.currentStyle = {
+				// strokeColor: 'black',
+				// strokeWidth: 2,
+				// strokeCap: 'round'
+		};
+		var isvg = new ImportSVG;
+		isvg.importSVG(document.getElementById('svg'));
+	</script>
+</head>
+<body>	
+	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:1000px;" id="svg">
+	
+			<line x1="4" y1="20" x2="200" y2="200" style="stroke:red;stroke-width:10px;stroke-dasharray: 10px, 4px;stroke-linecap: "butt" id="line1" />
+			<line x1="100" y1="40" x2="250" y2="250" style="stroke:green;stroke-width:5px;stroke-dasharray: 5px,3px,2px;stroke-linecap: "round" id="line2" />
+			<line x1="50" y1="100" x2="200" y2="200" style="stroke:blue;stroke-width:9px;stroke-dasharray: 1px;stroke-linecap: "square" id="line3" />
+			<line x1="4" y1="200" x2="200" y2="200" style="stroke:black;stroke-width:20px;stroke-dasharray: 1px,2px,3px,4px,5px;stroke-linecap: "butt" id="line4" />
+			<line x1="8" y1="275" x2="100" y2="444" style="stroke:orange;stroke-width:11px;stroke-dasharray: 1px;stroke-linecap: "round" id="line5" />
+			<line x1="20" y1="344" x2="50" y2="400" style="stroke:yellow;stroke-width:30px;stroke-dasharray: 5px;stroke-linecap: "square" id="line6" />
+			<line x1="4" y1="400" x2="450" y2="450" style="stroke:purple;stroke-width:1px;stroke-dasharray: 11px, 4px;stroke-linecap: "butt" id="line7" />
+		
+	</svg>
+	<canvas id="canvas" width="500px" height="1000px"></canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/ImportSVGTests/Multiple Paths Test 1.html b/examples/ImportSVGTests/Multiple Paths Test 1.html
new file mode 100644
index 00000000..e8093601
--- /dev/null
+++ b/examples/ImportSVGTests/Multiple Paths Test 1.html	
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Multiple Paths Test</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		project.currentStyle = {
+				// strokeColor: 'black',
+				// strokeWidth: 2,
+				// strokeCap: 'round'
+		};
+		var isvg = new ImportSVG;
+		isvg.importSVG(document.getElementById('svg'));
+	</script>
+</head>
+<body>	
+	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:1000px;" id="svg">
+		<g>
+			<circle cx="100" cy="400" r="100" style="fill:darkred;" id="circle" />
+		<g>
+			<rect x="200" y="20" rx="20" ry="10" width="150px" height="150px" style="fill:green" id="round" />
+			<circle cx="40" cy="100" r="20" style="fill:orange;" id="circle" />
+		</g>
+		</g>
+		<g>
+			<rect x="250" y="180" width="150px" height="150px" fill="blue" style="stroke-dasharray: 10px, 4px; stroke-width:0px;"	id="rect" />
+			<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;stroke-width:-1px" id="oval" />
+		</g>
+			<path d="m 100 350 q 100 -300 100 0 t 100 0 t 50 0" stroke="black" stroke-width="4px" fill="none" id="path" />
+				 
+			<path d="m 100 350 q 100 -300 100 0" stroke="black" stroke-width="4px" fill="none" id="path"/>
+			<path d="m 100 350 c 66.666666 -200 100 -200 100 0" stroke="black" stroke-width="4px" fill="none" />
+					
+			<path d="m 100 350 q 100 -300 100 0 t 100 0 T 350 350" stroke="black" stroke-width="4px" fill="none" />
+			<path d="m 100 350 q 100 -300 100 0 T 300 350 t 50 0" stroke="black" stroke-width="4px" fill="none" />
+			<path d="m 100 350 q 100 -300 100 0 T 300 350 T 350 350" stroke="black" stroke-width="4px" fill="none" />
+			<path d="m 100 350 Q 200 50 200 350 t 100 0 t 50 0" stroke="black" stroke-width="4px" fill="none" />
+			<path d="m 100 350 Q 200 50 200 350 t 100 0 T 350 350" stroke="black" stroke-width="4px" fill="none" />
+			<path d="m 100 350 Q 200 50 200 350 T 300 350 t 50 0" stroke="black" stroke-width="4px" fill="none" />
+			<path d="m 100 350 Q 200 50 200 350 T 300 350 T 350 350" stroke="black" stroke-width="4px" fill="none" />
+			<path d="M 50 75 c 25 -50 25 -50 100 0 s 100 100 100 0 s 25 -50 100 0" stroke="blue" stroke-width="4px" fill="none"/>
+			<text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text">I love SVG</text>
+			
+	</svg>
+	<canvas id="canvas" width="500px" height="1000px"></canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/ImportSVGTests/Multiple Paths Test 2.html b/examples/ImportSVGTests/Multiple Paths Test 2.html
new file mode 100644
index 00000000..76074cd0
--- /dev/null
+++ b/examples/ImportSVGTests/Multiple Paths Test 2.html	
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Stroke Bounds</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		project.currentStyle = {
+				// strokeColor: 'black',
+				// strokeWidth: 2,
+				// strokeCap: 'round'
+		};
+		var isvg = new ImportSVG;
+		isvg.importSVG(document.getElementById('svg'));
+	</script>
+</head>
+<body>	
+	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:1000px;" id="svg">
+		  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
+		  stroke-width="3px" fill="none" />
+		  <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
+		  stroke-width="3px" fill="none" />
+		  <path id="lineBC" d="M 175 200 l 150 0" stroke="red"
+		  stroke-width="3px" fill="none" />
+		  <path id="quadcurveABC" d="M 100 350 q 150 -300 300 0"
+		  stroke="blue" stroke-width="5px" fill="none" />
+  <!-- Mark relevant points -->
+  <g stroke="black" stroke-width="3" fill="black">
+    <circle id="pointA" cx="100" cy="350" r="3" />
+    <circle id="pointB" cx="250" cy="50" r="3" />
+    <circle id="pointC" cx="400" cy="350" r="3" />
+  </g>
+  <!-- Label the points -->
+  <g fill="black" stroke="none"
+  text-anchor="middle">
+    <text font-size="30" font-family="times" x="100" y="350" dx="-30">A</text>
+    <text font-size="30" font-family="times" x="250" y="50" dy="-10">B</text>
+    <text font-size="30" font-family="times" x="400" y="350" dx="30">C</text>
+  </g>
+
+	</svg>
+	<canvas id="canvas" width="500px" height="1000px"></canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/ImportSVGTests/Nested Groups Test.html b/examples/ImportSVGTests/Nested Groups Test.html
new file mode 100644
index 00000000..555e2d5c
--- /dev/null
+++ b/examples/ImportSVGTests/Nested Groups Test.html	
@@ -0,0 +1,85 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Nested Groups Test</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		project.currentStyle = {
+				// strokeColor: 'black',
+				// strokeWidth: 2,
+				// strokeCap: 'round'
+		};
+		var isvg = new ImportSVG;
+		isvg.importSVG(document.getElementById('svg'));
+	</script>
+</head>
+<body>	
+	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:1000px;" id="svg">
+		<g>
+			<circle cx="25" cy="25" r="20" style="fill:orange;" id="circle" />
+			<g>
+				<circle cx="75" cy="25" r="20" style="fill:red;" id="circle" />
+				<g>
+					<circle cx="125" cy="25" r="20" style="fill:pink;" id="circle" />
+					<g>
+						<circle cx="175" cy="25" r="20" style="fill:blue;" id="circle" />
+						<g>
+							<circle cx="225" cy="25" r="20" style="fill:green;" id="circle" />
+							<g>
+								<circle cx="275" cy="25" r="20" style="fill:purple;" id="circle" />
+								<g>
+									<circle cx="25" cy="75" r="20" style="fill:black;" id="circle" />
+									<g>
+										<circle cx="75" cy="75" r="20" style="fill:indigo;" id="circle" />
+										<g>
+											<circle cx="125" cy="75" r="20" style="fill:gold;" id="circle" />
+											<g>
+												<circle cx="175" cy="75" r="20" style="fill:brown;" id="circle" />
+												<g>
+													<circle cx="225" cy="75" r="20" style="fill:darkred;" id="circle" />
+													<g>
+														<circle cx="275" cy="75" r="20" style="fill:darkgreen;" id="circle" />
+														<g>
+															<circle cx="25" cy="125" r="20" style="fill:darkgrey;" id="circle" />
+															<g>
+																<circle cx="75" cy="125" r="20" style="fill:violet;" id="circle" />
+																<g>
+																	<circle cx="125" cy="125" r="20" style="fill:yellow;" id="circle" />
+																	<g>
+																		<circle cx="175" cy="125" r="20" style="fill:lightblue;" id="circle" />
+																		<g>
+																			<circle cx="225" cy="125" r="20" style="fill:lightgreen;" id="circle" />
+																			<g>
+																				<circle cx="275" cy="125" r="20" style="fill:darkblue;" id="circle" />
+																				<g>
+																					<circle cx="25" cy="175" r="20" style="fill:darkorange;" id="circle" />
+																					<g>
+																						<circle cx="75" cy="175" r="20" style="fill:lawngreen;" id="circle" />
+																					</g>
+																				</g>
+																			</g>
+																		</g>
+																	</g>
+																</g>
+															</g>
+														</g>
+													</g>
+												</g>
+											</g>
+										</g>
+									</g>
+								</g>
+							</g>
+						</g>
+					</g>
+				</g>
+			</g>
+		</g>
+	
+	</svg>
+	<canvas id="canvas" width="500px" height="1000px"></canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/ImportSVGTests/Rect Testing.html b/examples/ImportSVGTests/Rect Testing.html
new file mode 100644
index 00000000..dea89180
--- /dev/null
+++ b/examples/ImportSVGTests/Rect Testing.html	
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Rect Testing</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		project.currentStyle = {
+				// strokeColor: 'black',
+				// strokeWidth: 2,
+				// strokeCap: 'round'
+		};
+		var isvg = new ImportSVG;
+		isvg.importSVG(document.getElementById('svg'));
+	</script>
+</head>
+<body>	
+	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:1000px;" id="svg">
+			<rect rx="20" ry="10" width="50px" height="50px" style="fill:green; stroke:black; stroke-width:5px" id="round1" />
+			<rect x="100" y="10" rx="20" ry="10" width="75px" height="75px" style="fill:red; stroke: brown; stroke-width:1px; fill-opacity:.5; stroke-opacity:.9" id="round2" />
+			<rect x="10" y="300" rx="20" ry="10" width="75px" height="150px" style="fill:blue; opacity:.5" id="round3" />
+			<rect x="50" y="100" rx="20" ry="10" width="150px" height="150px" style="fill: orange" id="round4" />
+			<rect x="300" y="10" width="50" height="50px" fill="gold" style="stroke-dasharray: 10, 4; stroke: black; stroke-widthpx:5"	id="rect1" />
+			<rect x="300" y="300" width="100" height="100px" fill="pink" style="stroke-dasharray: 10, 4; stroke-width:50px;"	id="rect2" />
+			<rect x="300" y="180" width="178" height="100px" fill="hotpink" style="stroke-dasharray: 10, 4; stroke-width:10px;"	id="rect3" />
+	</svg>
+	<canvas id="canvas" width="500px" height="1000px"></canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/ImportSVGTests/Testing.html b/examples/ImportSVGTests/Testing.html
new file mode 100644
index 00000000..434107ee
--- /dev/null
+++ b/examples/ImportSVGTests/Testing.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Stroke Bounds</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		project.currentStyle = {
+				// strokeColor: 'black',
+				// strokeWidth: 2,
+				// strokeCap: 'round'
+		};
+		var isvg = new ImportSVG;
+		isvg.importSVG(document.getElementById('svg'));
+	</script>
+</head>
+<body>	
+	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500; height:1000px;" id="svg">
+		<g>
+			<line x1="4" y1="20" x2="200" y2="200" style="stroke:red;stroke-width:10;stroke-dasharray: 10, 4;stroke-linecap: butt" id="line" />
+			<rect x="200" y="20" rx="20" ry="10" width="150" height="150" style="fill:green" id="round" />
+			<circle cx="40" cy="100" r="20" style="fill:orange;" id="circle" />
+		</g>
+		<g>
+			<rect x="250" y="180" width="150" height="150" fill="blue" style="stroke-dasharray: 10, 4; stroke-width:0;"	id="rect" />
+			<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;stroke-width:-1" id="oval" />
+		</g>
+			<path d="m 100 350 q 100 -300 100 0 t 100 0 t 50 0" stroke="black" stroke-width="4" fill="none" id="path" />
+					 
+			<path d="m 100 350 q 100 -300 100 0" stroke="black" stroke-width="4" fill="none" id="path"/>
+			<path d="m 100 350 c 66.666666 -200 100 -200 100 0" stroke="black" stroke-width="4" fill="none" />
+					
+			<path d="m 100 350 q 100 -300 100 0 t 100 0 T 350 350" stroke="black" stroke-width="4" fill="none" />
+			<path d="m 100 350 q 100 -300 100 0 T 300 350 t 50 0" stroke="black" stroke-width="4" fill="none" />
+			<path d="m 100 350 q 100 -300 100 0 T 300 350 T 350 350" stroke="black" stroke-width="4" fill="none" />
+			<path d="m 100 350 Q 200 50 200 350 t 100 0 t 50 0" stroke="black" stroke-width="4" fill="none" />
+			<path d="m 100 350 Q 200 50 200 350 t 100 0 T 350 350" stroke="black" stroke-width="4" fill="none" />
+			<path d="m 100 350 Q 200 50 200 350 T 300 350 t 50 0" stroke="black" stroke-width="4" fill="none" />
+			<path d="m 100 350 Q 200 50 200 350 T 300 350 T 350 350" stroke="black" stroke-width="4" fill="none" />
+			<path d="M 50 75 c 25 -50 25 -50 100 0 s 100 100 100 0 s 25 -50 100 0" stroke="blue" stroke-width="4" fill="none"/>
+			<text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text">I love SVG</text>
+
+	</svg>
+	<canvas id="canvas" width="500" height="1000"></canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/ImportSVGTests/Text Testing.html b/examples/ImportSVGTests/Text Testing.html
new file mode 100644
index 00000000..63a5b21a
--- /dev/null
+++ b/examples/ImportSVGTests/Text Testing.html	
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Text Testing</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		project.currentStyle = {
+				// strokeColor: 'black',
+				// strokeWidth: 2,
+				// strokeCap: 'round'
+		};
+		var isvg = new ImportSVG;
+		isvg.importSVG(document.getElementById('svg'));
+	</script>
+</head>
+<body>	
+	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:1000px;" id="svg">
+		<text x="20" y="15" stroke="green" fill="green" style="font:15px arial;" id="text">Plain SVG Text</text>
+		
+		<text x="20" y="50" fill="red" transform="rotate(30 20,40)">Rotated SVG Text</text>
+  
+	</svg>
+	<canvas id="canvas" width="500" height="1000"></canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/examples/ImportSVGTests/Transform Testing.html b/examples/ImportSVGTests/Transform Testing.html
new file mode 100644
index 00000000..5576486f
--- /dev/null
+++ b/examples/ImportSVGTests/Transform Testing.html	
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+	<title>Circle and Oval Testing</title>
+	<link rel="stylesheet" href="../css/style.css">
+	<script type="text/javascript" src="../../dist/paper.js"></script>
+	<script type="text/paperscript" canvas="canvas">
+		project.currentStyle = {
+				// strokeColor: 'black',
+				// strokeWidth: 2,
+				// strokeCap: 'round'
+		};
+		var isvg = new ImportSVG;
+		isvg.importSVG(document.getElementById('svg'));
+	</script>
+</head>
+<body>	
+	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:1000px;" id="svg">
+	<g transform="scale(5) translate(15, 15) rotate(20) skewX(20) skewY(5)" >
+		<rect x="10" y="10" width="5" height="5" fill="firebrick" />
+		<circle r="10" fill="seagreen" stroke="blue"/>
+		<rect x="5" y="5" width="12" height="2" fill="gray" stroke="silver"/>
+	</g>
+			
+	</svg>
+	<canvas id="canvas" width="500px" height="1000px"></canvas>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/svg/ExportSVG.js b/src/svg/ExportSVG.js
index 79d88b78..9c1346bd 100644
--- a/src/svg/ExportSVG.js
+++ b/src/svg/ExportSVG.js
@@ -1,90 +1,476 @@
-/**
- *  Exports items, layers or whole projects as a svg
- *  Stetson Alpha - Paper.js
- *  
- *  var NS="http://www.w3.org/2000/svg";
- *  var svg=document.createElementNS(NS,"svg");
+ /*
+ * Paper.js
+ *
+ * This file is part of Paper.js, a JavaScript Vector Graphics Library,
+ * based on Scriptographer.org and designed to be largely API compatible.
+ * http://paperjs.org/
+ * http://scriptographer.org/
+ *
+ * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+ * http://lehni.org/ & http://jonathanpuckey.com/
+ *
+ * Distributed under the MIT license. See LICENSE file for details.
+ *
+ * All rights reserved.
+ * 
+ * This class and all methods therein programmed by Stetson-Team-Alpha
+ * @author Stetson-Team-Alpha
  */
 
 
-var ExportSVG = function()
-{
-	var svgObj = null; // xml dom object (svg typed)
-	
-	//initialize the svgObj and what ever else.
-	function initialize()
-	{
-		
-	};
-	
+ /**
+ * @name ExportSVG
+ *
+ * @class The ExportSVG object represents a Paper.js object that will be
+ * converted into an SVG canvas design.
+ * The Paper.js object is converted by changing its items into groups
+ *
+ */
+
+var ExportSVG = this.ExportSVG = Base.extend(/** @Lends ExportSVG# */{
+	//initialize the svgObj
+	initialize: function() {
+		this.NS = 'http://www.w3.org/2000/svg';
+		this.svgObj = document.createElementNS(this.NS, 'svg');
+	},
+
+	/**
+	 * Takes the selected Paper.js project and parses all of its layers and
+	 * groups to be placed into SVG groups, converting the project into one
+	 * SVG group.
+	 *
+	 * @function
+	 * @param {Paper.js Project} project A Paper.js project
+	 * @return {SVG DOM} this.svgObj The imported project converted to an
+	 * SVG project
+	 */
+	exportProject: function(project) {
+		var layerArray = project.layers;
+		var layer;
+		for (var i = 0; i < layerArray.length; ++i) {
+			layer = layerArray[i];
+			this.svgObj.appendChild(this.exportLayer(layer));
+		}
+		return this.svgObj;
+	},
+
 	/**
 	 * 
-	 * Takes the whole project and parses
-	 * all the layers to be put into svg groups and 
-	 * groups into svg groups making all the projects 
-	 * items into one svg.
+	 * Takes the selected Paper.js layer and parses all groups
+	 * and items on the layer into one SVG
 	 * 
-	 * takes in a Paper.js Project
-	 * returns svg object (xml dom)
+	 * @name ExportSVG#exportLayer
+	 * @function
+	 * @param {Paper.js Layer} layer A Paper.js layer
+	 * @return {SVG DOM} this.exportGroup(layer) The layer converted into an
+	 * SVG group
 	 */
-    this.exportProject = function(project)
-    {
-    	return svgObj;
-    };
-	
-    
+	exportLayer: function(layer) {
+		return this.exportGroup(layer);
+	},
+
 	/**
 	 * 
-	 * Takes the layer and then parses all groups
-	 * and items into one svg
+	 * Takes a Paper.js group and puts its items in a SVG file.
 	 * 
-	 * takes in a Paper.js Layer
-	 * returns svg object (xml dom)
+	 * @name ExportSVG#exportGroup
+	 * @function
+	 * @param {Paper.js Group} group A Paper.js group
+	 * @return {SVG DOM} svgG An SVG object
 	 */
-    this.exportLayer = function(layer)
-    {
-    	return svgObj;
-    };
+	exportGroup: function(group) {
+		var svgG = document.createElementNS(this.NS, 'g');
+		var curChild;
+
+		for (var i in group.children) {
+			curChild = group.children[i];
+			if (curChild.children) {
+				svgG.appendChild(this.exportGroup(curChild));
+			} else {
+				svgG.appendChild(this.exportPath(curChild));
+			}
+		}
+		return svgG;
+	},
 	
-    
-	/**
-	 * 
-	 * Takes the group and puts it's items 
-	 * in a svg file.
-	 * 
-	 * takes in a Paper.js Group
-	 * returns svg object (xml dom)
-	 */
-    this.exportGroup = function(group)
-    {
-    	return svgObj;
-    };
-	
-	/**
-	 * 
-	 * Takes the item and puts it in
-	 * a svg file.
-	 * 
-	 * takes in a Paper.js Item
-	 * returns svg object (xml dom)
-	 */
-    this.exportItem = function(item)
-    {
-    	return svgObj;
-    };
-    
 	/**
 	 * 
 	 * Takes the path and puts it in
 	 * a svg file.
 	 * 
-	 * takes in a Paper.js Path
-	 * returns svg object (xml dom)
+	 * @name ExportSVG#exportPath
+	 * @function
+	 * @param {Paper.js Path} path A Paper.js path object
+	 * @return {SVG DOM} svgPath An SVG object of the imported path
 	 */
-    this.exportPath = function(path)
-    {
-    	return svgObj;
-    };
+	exportPath: function(path) {
+		var svgEle;
+		//Getting all of the segments(a point, a HandleIn and a HandleOut) in the path
+		var segArray;
+		var pointArray;
+		var handleInArray;
+		var handleOutArray;
+		//finding the type of path to export
+		if(path.content) {
+			type = 'text';
+		} else {
+			//Values are only defined if the path is not text because
+			// text does not have these values
+			segArray = path.getSegments();
+			pointArray = new Array();
+			handleInArray = new Array();
+			handleOutArray = new Array();
+			for (i = 0; i < segArray.length; i++) {
+				pointArray[i] = segArray[i].getPoint();
+				handleInArray[i] = segArray[i].getHandleIn();
+				handleOutArray[i] = segArray[i].getHandleOut();
+			}
+			var exp = this;
+			var type = exp._determineType(path, segArray, pointArray, handleInArray, handleOutArray);
+		}
+		//switch statement that determines what type of SVG element to add to the SVG Object
+		switch (type) {
+			case 'rect':
+				var width = pointArray[0].getDistance(pointArray[3], false);
+				var height = pointArray[0].getDistance(pointArray[1], false);
+				svgEle = document.createElementNS(this.NS, 'rect');
+				svgEle.setAttribute('x', path.bounds.topLeft.getX());
+				svgEle.setAttribute('y', path.bounds.topLeft.getY());
+				svgEle.setAttribute('width', width);
+				svgEle.setAttribute('height', height);
+				break;
+			case 'roundRect':
+				//d variables and point are used to determine the rounded corners for the rounded rectangle
+				var dx1 = pointArray[1].getDistance(pointArray[6], false);
+				var dx2 = pointArray[0].getDistance(pointArray[7], false);
+				var dx3 = (dx1 - dx2) / 2;
+				var dy1 = pointArray[0].getDistance(pointArray[3], false);
+				var dy2 = pointArray[1].getDistance(pointArray[2], false);
+				var dy3 = (dy1 - dy2) / 2;
+				var point = new Point((pointArray[3].getX() - dx3), (pointArray[2].getY() - dy3)); 
+				var width = Math.round(dx1);
+				var height = Math.round(dy1);
+				var rx = pointArray[3].getX() - point.x;
+				var ry = pointArray[2].getY() - point.y;
+				svgEle = document.createElementNS(this.NS, 'rect');
+				svgEle.setAttribute('x', path.bounds.topLeft.getX());
+				svgEle.setAttribute('y', path.bounds.topLeft.getY());
+				svgEle.setAttribute('rx', rx);
+				svgEle.setAttribute('ry', ry);
+				svgEle.setAttribute('width', width);
+				svgEle.setAttribute('height', height);
+				break;
+			case'line':
+				svgEle = document.createElementNS(this.NS, 'line');
+				svgEle.setAttribute('x1', pointArray[0].getX());
+				svgEle.setAttribute('y1', pointArray[0].getY());
+				svgEle.setAttribute('x2', pointArray[pointArray.length - 1].getX());
+				svgEle.setAttribute('y2', pointArray[pointArray.length - 1].getY());
+				break;
+			case 'circle':
+				svgEle = document.createElementNS(this.NS, 'circle');
+				var radius = (pointArray[0].getDistance(pointArray[2], false)) /2;
+				svgEle.setAttribute('cx', path.bounds.center.x);
+				svgEle.setAttribute('cy', path.bounds.center.y);
+				svgEle.setAttribute('r', radius);
+				break;
+			case 'ellipse':
+				svgEle = document.createElementNS(this.NS, 'ellipse');
+				var radiusX = (pointArray[2].getDistance(pointArray[0], false)) / 2;
+				var radiusY = (pointArray[3].getDistance(pointArray[1], false)) /2;
+				svgEle.setAttribute('cx', path.bounds.center.x);
+				svgEle.setAttribute('cy', path.bounds.center.y);
+				svgEle.setAttribute('rx', radiusX);
+				svgEle.setAttribute('ry', radiusY);
+				break;
+			case 'polyline':
+				svgEle = document.createElementNS(this.NS, 'polyline');
+				var pointString = '';
+				for(i = 0; i < pointArray.length; ++i) {
+					pointString += pointArray[i].getX() + ','  + pointArray[i].getY() + ' ';
+				}
+				svgEle.setAttribute('points', pointString);
+				break;
+			case 'polygon':
+				svgEle = document.createElementNS(this.NS, 'polygon');
+				var pointString = '';
+				for(i = 0; i < pointArray.length; ++i) {
+					pointString += pointArray[i].getX() + ',' + pointArray[i].getY() + ' ';
+				}
+				svgEle.setAttribute('points', pointString);
+				break;
+			case 'text':
+				svgEle = document.createElementNS(this.NS, 'text');
+				svgEle.setAttribute('x', path.getPoint().getX());
+				svgEle.setAttribute('y', path.getPoint().getY());
+				if(path.style.font != undefined) {
+					svgEle.setAttribute('font', path.style.font);
+				}
+				if(path.characterStyle.font != undefined) {
+					svgEle.setAttribute('font-family', path.characterStyle.font);
+				}
+				if(path.characterStyle.fontSize != undefined) {
+					svgEle.setAttribute('font-size',path.characterStyle.fontSize);
+				}
+				svgEle.textContent = path.getContent();
+				break;
+			default:
+				svgEle = document.createElementNS(this.NS, 'path');
+				svgEle = this.pathSetup(path, pointArray, handleInArray, handleOutArray);
+				break;
+		}
+		//If the object is a circle, ellipse, rectangle, or rounded rectangle, it will find the angle 
+		//found by the transformCheck method and make a path that accommodates for the transformed object
+		if(type != 'text' && type != undefined && type != 'polygon' &&  type != 'polyline' && type != 'line') {
+			var angle = this._transformCheck(path, pointArray, type) + 90;
+			console.log(angle);
+			if(angle != 0) {
+				if(type == 'rect' || type == 'roundRect') {
+					svgEle = document.createElementNS(this.NS, 'path');
+					svgEle = this.pathSetup(path, pointArray, handleInArray, handleOutArray);
+				} else {
+					svgEle = document.createElementNS(this.NS, 'path');
+					svgEle = this.pathSetup(path, pointArray, handleInArray, handleOutArray);
+				}
+			} 
+		}
+		if(type == 'text') {
+			svgEle.setAttribute('transform','rotate(' + path.matrix.getRotation() + ',' + path.getPoint().getX() + ',' +path.getPoint().getY() +')');
+		}
+		if(path.id != undefined) {
+			svgEle.setAttribute('id', path.id);
+		}
+		//checks if there is a stroke color in the passed in path
+		//adds an SVG element attribute with the defined stroke color
+		if (path.strokeColor != undefined) {
+			svgEle.setAttribute('stroke', path.strokeColor.toCssString());
+		}
+		//same thing as above except checking for a fill color
+		if (path.fillColor != undefined) {
+			svgEle.setAttribute('fill', path.fillColor.toCssString());
+		} else {
+			svgEle.setAttribute('fill', 'rgba(0,0,0,0)');
+		}
+		//same thing as stroke color except with stroke width
+		if(path.strokeWidth != undefined){
+			svgEle.setAttribute('stroke-width', path.strokeWidth);
+		}
+		//same thing as stroke color except with the path name
+		if(path.name != undefined) {
+			svgEle.setAttribute('name', path.name);
+		}
+		//same thing as stroke color except with the strokeCap
+		if(path.strokeCap != undefined) {
+			svgEle.setAttribute('stroke-linecap', path.strokeCap);
+		}
+		//same thing as stroke color except with the strokeJoin
+		if(path.strokeJoin != undefined) {
+			svgEle.setAttribute('stroke-linejoin', path.strokeJoin);
+		}
+		//same thing as stroke color except with the opacity
+		if(path.opacity != undefined) {
+			svgEle.setAttribute('opacity', path.opacity);
+		}
+		//checks to see if there the dashArray is set, then adds the attribute if there is.
+		if(path.dashArray[0] != undefined) {
+			var dashVals = '';
+			for (var i in path.dashArray) {
+				if(i != path.dashArray.length -1) {
+					dashVals += path.dashArray[i] + ", ";
+				} else {
+					dashVals += path.dashArray[i];
+				}
+			}
+			svgEle.setAttribute('stroke-dasharray', dashVals);
+		}
+		//same thing as stroke color except with the dash offset
+		if(path.dashOffset != undefined) {
+			svgEle.setAttribute('stroke-dashoffset', path.dashOffset);
+		}
+		//same thing as stroke color except with the miter limit
+		if(path.miterLimit != undefined) {
+			svgEle.setAttribute('stroke-miterlimit', path.miterLimit);
+		}
+		//same thing as stroke color except with the visibility
+		if(path.visibility != undefined) {
+			var visString = '';
+			if(path.visibility) {
+				visString = 'visible';
+			} else {
+				visString = 'hidden';
+			}
+			svgEle.setAttribute('visibility', visString);
+		}
+		return svgEle;
+	},
 
-    initialize(); // calls the init function after class is loaded
-};
\ No newline at end of file
+	//Determines whether the object has been transformed or not through determining the angle
+	_determinesIfTransformed: function(path, pointArray, type) {
+		var topMidBoundx = (path.bounds.topRight.getX() + path.bounds.topLeft.getX() )/2;
+		var topMidBoundy = (path.bounds.topRight.getY() + path.bounds.topLeft.getY() )/2;
+		var topMidBound = new Point(topMidBoundx, topMidBoundy);
+		var centerPoint = path.getPosition();
+		var topMidPathx;
+		var topMidPathy;
+		var topMidPath;
+		switch (type) {
+			case 'rect':
+				topMidPathx = (pointArray[1].getX() + pointArray[2].getX() )/2;
+				topMidPathy = (pointArray[1].getY() + pointArray[2].getY() )/2;
+				topMidPath = new Point(topMidPathx, topMidPathy);
+				break;
+			case 'ellipse':
+				topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY());
+				break;
+			case 'circle':
+				topMidPath = new Point(pointArray[1].getX(), pointArray[1].getY());
+				break;
+			case 'roundRect':
+				topMidPathx = (pointArray[3].getX() + pointArray[4].getX())/2;
+				topMidPathy = (pointArray[3].getY() + pointArray[4].getY())/2;
+				topMidPath = new Point(topMidPathx, topMidPathy);
+				break;	
+			default:
+				//Nothing happens here
+				break;
+		}
+		var deltaY = topMidPath.y - centerPoint.getY();
+		var deltaX = topMidPath.x - centerPoint.getX();
+		var angleInDegrees = Math.atan2(deltaY, deltaX) * 180 / Math.PI;
+		return angleInDegrees;
+	},
+	
+	//pointstring is formatted in the way the SVG XML will be reading
+	//Namely, a point and the way to traverse to that point
+	pathSetup: function(path, pointArray, hIArray, hOArray) {
+		var svgPath = document.createElementNS(this.NS, 'path');
+		var pointString = '';
+		var x1;
+		var x2;
+		var y1;
+		var y2;
+		var handleOut1;
+		var handleIn2;
+		pointString += 'M' + pointArray[0].getX() + ',' + pointArray[0].getY() + ' ';
+		//Checks 2 points and the angles in between the 2 points
+		for (i = 0; i < pointArray.length-1; i++) {
+			x1 = pointArray[i].getX();
+			y1 = pointArray[i].getY();
+			x2 = pointArray[i + 1].getX();
+			y2 = pointArray[i + 1].getY();
+			handleOut1 = hOArray[i];
+			handleIn2 = hIArray[i+1];
+			if(handleOut1.getX() == 0 && handleOut1.getY() == 0 && handleIn2.getX() == 0 && handleIn2.getY() ==0) {
+					//L is lineto, moving to a point with drawing
+					pointString+= 'L' + x2 + ',' + y2 + ' ';
+			} else {
+				//c is curveto, relative: handleOut, handleIn - endpoint, endpoint - startpoint
+				pointString+= 'c' + (handleOut1.getX())  + ',' + (handleOut1.getY()) + ' ';
+				pointString+= (x2 - x1 + handleIn2.getX()) + ',' + (y2 - y1 + handleIn2.getY()) + ' ';
+				pointString+= (x2 - x1) + ',' + (y2-y1) +  ' ';
+			}
+		}
+		if (!hOArray[hOArray.length - 1].equals([0,0]) && !hIArray[0].equals([0,0])) {
+			handleOut1 = hOArray[hOArray.length - 1];
+			handleIn2 = hIArray[0];
+			// Bezier curve from last point to first
+			x1 = pointArray[pointArray.length - 1].getX();
+			y1 = pointArray[pointArray.length - 1].getY();
+			x2 = pointArray[0].getX();
+			y2 = pointArray[0].getY();
+			pointString+= 'c' + (handleOut1.getX())  + ',' + (handleOut1.getY()) + ' ';
+			pointString+= (x2 - x1 + handleIn2.getX()) + ',' + (y2 - y1 + handleIn2.getY()) + ' ';
+			pointString+= (x2 - x1) + ',' + (y2-y1) +  ' ';
+		}
+		if (path.getClosed())
+		{
+			//Z implies a closed path, connecting the first and last points
+			pointString += 'z';
+		}
+		svgPath.setAttribute('d',pointString);
+		return svgPath;
+	},	
+
+	/**
+	* Checks the type SVG object created by converting from Paper.js
+	*
+	* @name ExportSVG#checkType
+	* @function
+	* @param {SVG Object Array} segArray An array of objects for the newly
+	* converted SVG object
+	* @return {String} type A string labeling which type of object the 
+	* passed in object is
+	*/
+	_determineType: function(path, segArray, pointArray, handleInArray, handleOutArray) {
+		var type;
+		var dPoint12;
+		var dPoint34;
+		var curves = false;	
+		var segHandleIn;
+		var segHandleOut;
+		for( var i in segArray){
+			//Checks for any curves (if the handles have values). Differentiates between straight objects(line, polyline, rect, and polygon) and
+			//and objects with curves(circle, ellipse, roundedRectangle).
+			segHandleIn = segArray[i].getHandleIn();
+			segHandleOut = segArray[i].getHandleOut();
+			curves = segHandleIn.getX() != 0 || segHandleIn.getY() != 0 ? true : curves;
+			curves = segHandleOut.getX() != 0 || segHandleOut.getY() != 0 ? true : curves;			
+		}
+		//Checks for curves in the passed in segments
+		//Checks if the type of the passed in path is a rounded rectangle, an ellipse, a circle, or if it's simply a path
+		//If there aren't any curves (if curves = false), then it checks if the type is a rectangle, a polygon, a polyline, or simply a line.
+		if(curves){
+			if(segArray.length == 8) {
+				//if the distance between (point0 and point3) and (point7 and point4) are equal then it is a roundedRectangle
+				dPoint12 = Math.round(pointArray[0].getDistance(pointArray[3], false));
+				dPoint34 = Math.round(pointArray[7].getDistance(pointArray[4], false));
+				if(dPoint12 == dPoint34) {
+					type = 'roundRect';
+				}
+			} else if(segArray.length == 4) {
+				//checks if the values of the point have values similar to circles and ellipses
+				var checkPointValues = true;
+				for(i = 0; i < pointArray.length && checkPointValues == true; i++) {
+					if(handleInArray[i].getX() != 0 || handleInArray[i].getY() != 0 && Math.round(Math.abs(handleInArray[i].getX())) === Math.round(Math.abs(handleOutArray[i].getX())) && Math.round(Math.abs(handleInArray[i].getY())) === Math.round(Math.abs(handleOutArray[i].getY()))) {
+						checkPointValues = true;
+					} else {
+						checkPointValues = false;
+					}	
+				}	
+				if(checkPointValues == true) {
+					//if the distance between (point0 and point2) and (point1 and point3) are equal, then it is a circle
+					var d1 = Math.round(pointArray[0].getDistance(pointArray[2], false));
+					var d2 = Math.round(pointArray[1].getDistance(pointArray[3], false));
+					if(d1 == d2) {
+						type = 'circle';
+					} else {
+						type = 'ellipse';
+					}
+				}
+			} 
+		} else if(!curves) {
+			if(segArray.length == 4) {
+				//if the distance between (point0 and point1) and (point2 and point3) are equal, then it is a rectangle
+				dPoint12 = Math.round(pointArray[0].getDistance(pointArray[1], false));
+				dPoint34 = Math.round(pointArray[3].getDistance(pointArray[2], false));
+				if(dPoint12 == dPoint34) {
+					type = 'rect';
+				}
+			} else if(segArray.length >= 3) {
+				//If it is an object with more than 3 segments and the path is closed, it is a polygon
+				if(path.getClosed()) {
+					type = 'polygon';
+				} else {
+					type = 'polyline';
+				}
+			} else {
+				//if all of the handle values are == 0 and there are only 2 segments, it is a line
+				type = 'line';
+			}	
+		} else {
+			type = null;
+		}
+		console.log(type);
+		return type;
+	}
+});
diff --git a/src/svg/ImportSVG.js b/src/svg/ImportSVG.js
index 08f6f557..30277395 100644
--- a/src/svg/ImportSVG.js
+++ b/src/svg/ImportSVG.js
@@ -1,55 +1,581 @@
-/**
- *  Imports svg into items with groups
- *  Stetson Alpha - Paper.js
- *  
- */
+/*
+* Paper.js
+*
+* This file is part of Paper.js, a JavaScript Vector Graphics Library,
+* based on Scriptographer.org and designed to be largely API compatible.
+* http://paperjs.org/
+* http://scriptographer.org/
+*
+* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+* http://lehni.org/ & http://jonathanpuckey.com/
+*
+* Distributed under the MIT license. See LICENSE file for details.
+*
+* All rights reserved.
+*
+*
+*
+* This class and all methods therein designed by Stetson-Team-Alpha
+* @author Stetson-Team-Alpha
+*/
 
-var ImportSVG = function()
-{
-	//initialize
-	function initialize()
-	{
+/**
+* @name ImportSVG
+* @class The ImportSVG object represents an object created using the SVG
+* Canvas that will be converted into a Paper.js object.
+* The SVG object is imported into Paper.js by converting it into items
+* within groups.
+*
+*/
+
+var ImportSVG = this.ImportSVG = Base.extend(/** @Lends ImportSVG# */{
+		/**
+		* Creates a Paper.js object using data parsed from the selected
+		* SVG Document Object Model (DOM). The SVG object is imported, 
+		* than a layer is created (with groups for the items if needed).
+		*
+		* Supports nested groups
+		*
+		* @param {SVG DOM} svg An SVG DOM object with parameters
+		* @return {item} A Paper.js layer
+		*/
+	importSVG: function(svg) {
+		var item;
+		var symbol;
+		switch (svg.nodeName.toLowerCase()) {
+			case 'line':
+				item = this._importLine(svg);
+				break;
+			case 'rect':
+				item = this._importRectangle(svg);
+				break;
+			case 'circle':
+				item = this._importCircle(svg);
+				break;
+			case 'ellipse':
+				item = this._importOval(svg);
+				break;
+			case 'g':
+			case 'svg':
+				item = this._importGroup(svg);
+				break;
+			case 'text':
+				item = this._importText(svg);
+				break;
+			case 'path':
+				item = this._importPath(svg);
+				break;
+			case 'polygon':
+			case 'polyline':
+				item = this._importPoly(svg);
+				break;
+			case 'symbol':
+				item = this._importGroup(svg);
+				this._importAttributesAndStyles(svg, item);
+				symbol = new Symbol(item);
+				item = null;
+			default:
+				//Not supported yet.
+		}
+
+		if (item) {
+			this._importAttributesAndStyles(svg, item);
+		}
+
+		return item;
+	},
+
+		/**
+		* Creates a Paper.js group by parsing a specific GNode of the 
+		* imported SVG DOM
+		*
+		* @name ImportSVG#importGroup
+		* @function
+		* @param {XML DOM} svg A node passed in by the imported SVG
+		* @return {Group} group A Paper.js group
+		*
+		*
+		*/
+	_importGroup: function(svg) {
+		var group = new Group();
+		var child;
+		for (var i in svg.childNodes) {
+			child = svg.childNodes[i];
+			if (child.nodeType != 1) {
+				continue;
+			}
+			item = this.importSVG(child);
+			if (item) {
+				group.addChild(item);
+			}
+		}
+
+		return group;
+	},
+
+		/**
+		* Creates a Path.Circle item in Paper.js using an imported 
+		* Circle from SVG
+		*
+		* @name ImportSVG#importCircle
+		* @function
+		* @param {XML DOM} svgCircle An SVG circle node
+		* @return {Path.Circle} circle A Path.Circle item for Paper.js
+		*/
+	_importCircle: function(svgCircle) {
+		var cx = svgCircle.cx.baseVal.value || 0;
+		var cy = svgCircle.cy.baseVal.value || 0;
+		var r = svgCircle.r.baseVal.value || 0;
+		var center = new Point(cx, cy);
+		var circle = new Path.Circle(center, r);
+
+		return circle;
+	},
+
+	
+	/**
+	* Creates a Path.Oval item in Paper.js using an imported Oval from SVG
+	*
+	* @name ImportSVG#importOval
+	* @function
+	* @param {XML DOM} svgOval An SVG ellipse node
+	* @return {Path.Oval} oval A Path.Oval item for Paper.js
+	*/
+	_importOval: function(svgOval) {
+		var cx = svgOval.cx.baseVal.value || 0;
+		var cy = svgOval.cy.baseVal.value || 0;
+		var rx = svgOval.rx.baseVal.value || 0;
+		var ry = svgOval.ry.baseVal.value || 0;
+
+		var center = new Point(cx, cy);
+		var offset = new Point(rx, ry);
+		var topLeft = center.subtract(offset);
+		var bottomRight = center.add(offset);
+
+		var rect = new Rectangle(topLeft, bottomRight);
+		var oval = new Path.Oval(rect);
+
+		return oval;
+	},
+
+		/**
+		* Creates a Path.Rectangle item from an imported SVG rectangle
+		*
+		* @name ImportSVG#importRectangle
+		* @function
+		* @param {XML DOM} svgRectangle An SVG rectangle node
+		* @return {Path.Rectangle} rectangle A Path.Rectangle item for 
+		* Paper.js
+		*/
+		/**
+		* Creates a Path.RoundRectangle item from an imported SVG 
+		* rectangle with rounded corners
+		*
+		* @name ImportSVG#importRectangle
+		* @function
+		* @param {XML DOM} svgRectangle An SVG rectangle node with 
+		* rounded corners
+		* @return {Path.RoundRectangle} rectangle A Path.Rectangle item
+		* for Paper.js
+		*/
+	_importRectangle: function(svgRectangle) {
+		var x = svgRectangle.x.baseVal.value || 0;
+		var y = svgRectangle.y.baseVal.value || 0;
+		var rx = svgRectangle.rx.baseVal.value || 0;
+		var ry = svgRectangle.ry.baseVal.value || 0;
+		var width = svgRectangle.width.baseVal.value || 0;
+		var height = svgRectangle.height.baseVal.value || 0;
+
+		var topLeft = new Point(x, y);
+		var size = new Size(width, height);
+		var rectangle = new Rectangle(topLeft, size);
+
+		if (rx && ry) {
+			var cornerSize = new Size(rx, ry);
+			rectangle = new Path.RoundRectangle(rectangle, cornerSize);
+		} else {
+			rectangle = new Path.Rectangle(rectangle);
+		}
+
+		return rectangle;
+	},
+
+	/**
+	* Creates a Path.Line item in Paper.js from an imported SVG line
+	*
+	* @name ImportSVG#importLine
+	* @function
+	* @param {XML DOM} svgLine An SVG line node
+	* @return {Path.Line} line A Path.Line item for Paper.js
+	*/
+	_importLine: function(svgLine) {
+		var x1 = svgLine.x1.baseVal.value || 0;
+		var y1 = svgLine.y1.baseVal.value || 0;
+		var x2 = svgLine.x2.baseVal.value || 0;
+		var y2 = svgLine.y2.baseVal.value || 0;
+
+		var from = new Point(x1, y1);
+		var to = new Point(x2, y2);
+		var line = new Path.Line(from, to);
+
+		return line;
+	},
+
+	/**
+	* Creates a PointText item in Paper.js from an imported SVG text node
+	*
+	* @name ImportSVG#importText
+	* @function
+	* @param {XML DOM} svgText An SVG text node
+	* @return {Path.Text} text A PointText item for Paper.js
+	*/
+	_importText: function(svgText) {
+		var x = svgText.x.baseVal.getItem(0).value || 0;
+		var y = svgText.y.baseVal.getItem(0).value || 0;
+
+		var dx = 0;
+		var dy = 0;
+		if (svgText.dx.baseVal.numberOfItems) {
+			dx = svgText.dx.baseVal.getItem(0).value || 0;
+		}
+		if (svgText.dy.baseVal.numberOfItems) {
+			dy = svgText.dy.baseVal.getItem(0).value || 0;
+		}
 		
-	};
-	
+		var textLength = svgText.textLength.baseVal.value || 0;
+		
+		/* Not supported by Paper.js
+		x; //multiple values for x
+		y; //multiple values for y
+		dx; //multiple values for x
+		dy; //multiple values for y
+		var rotate; //character rotation
+		var lengthAdjust;
+		*/
+		var textContent = svgText.textContent || "";
+		var bottomLeft = new Point(x, y);
+		
+		bottomLeft = bottomLeft.add([dx, dy]);
+		bottomLeft = bottomLeft.subtract([textLength / 2, 0]);
+		var text = new PointText(bottomLeft);
+		text.content = textContent;
+
+		return text;
+	},
+
 	/**
-	 * 
-	 * Takes the svg dom obj and parses the data
-	 * to create a layer with groups (if needed) with
-	 * items inside. Should support nested groups.
-	 * 
-	 * takes in a svg object (xml dom)
-	 * returns Paper.js Layer 
-	 */
-    this.importSVG = function(svg)
-    {
-    	return layer;
-    };
-	
+	* Creates a Paper.js Path by parsing
+	* a specific SVG node (rectangle, path, circle, polygon, etc.)
+	* and creating the right Path object based on the SVG type.
+	*
+	* @name ImportSVG#importPath
+	* @function
+	* @param {XML DOM} svg An SVG object
+	* @return {Item} item A Paper.js item
+	*/
+	_importPath: function(svgPath) {
+		var path = new Path();
+		var segments = svgPath.pathSegList;
+		var segment;
+		var j;
+		var relativeToPoint;
+		var controlPoint;
+		var prevCommand;
+		var segmentTo;
+		for (var i = 0; i < segments.numberOfItems; ++i){
+			segment = segments.getItem(i);
+			if (segment.pathSegType == SVGPathSeg.PATHSEG_UNKNOWN) {
+				continue;
+			}
+			if (segment.pathSegType % 2 == 1 && path.segments.length > 0) {
+				relativeToPoint = path.lastSegment.point;
+			} else {
+				relativeToPoint = new Point(0, 0);
+			}
+			segmentTo = new Point(segment.x, segment.y);
+			segmentTo = segmentTo.add(relativeToPoint);
+			switch (segment.pathSegType) {
+				case SVGPathSeg.PATHSEG_CLOSEPATH:
+					path.closePath();
+					break;
+				case SVGPathSeg.PATHSEG_MOVETO_ABS:
+				case SVGPathSeg.PATHSEG_MOVETO_REL:
+					path.moveTo(segmentTo);
+					break;
+				case SVGPathSeg.PATHSEG_LINETO_ABS:
+				case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_ABS:
+				case SVGPathSeg.PATHSEG_LINETO_VERTICAL_ABS:
+				case SVGPathSeg.PATHSEG_LINETO_REL:
+				case SVGPathSeg.PATHSEG_LINETO_HORIZONTAL_REL:
+				case SVGPathSeg.PATHSEG_LINETO_VERTICAL_REL:
+					path.lineTo(segmentTo);
+					break;
+				case SVGPathSeg.PATHSEG_CURVETO_CUBIC_ABS:
+				case SVGPathSeg.PATHSEG_CURVETO_CUBIC_REL:
+					path.cubicCurveTo(
+						relativeToPoint.add([segment.x1, segment.y1]),
+						relativeToPoint.add([segment.x2, segment.y2]),
+						segmentTo
+					);
+					break;
+				case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS:
+				case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL:
+					path.quadraticCurveTo(
+						relativeToPoint.add([segment.x1, segment.y1]),
+						segmentTo
+					);
+					break;
+				case SVGPathSeg.PATHSEG_ARC_ABS:
+				case SVGPathSeg.PATHSEG_ARC_REL:
+					//TODO: Implement Arcs.
+					//TODO: Requires changes in Paper.js's Path to do.
+					//TODO: http://www.w3.org/TR/SVG/implnote.html
+					break;
+				case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_ABS:
+				case SVGPathSeg.PATHSEG_CURVETO_CUBIC_SMOOTH_REL:
+					prevCommand = segments.getItem(i - 1);
+					controlPoint = new Point(prevCommand.x2, prevCommand.y2);
+					controlPoint = controlPoint.subtract([prevCommand.x, prevCommand.y]);
+					controlPoint = controlPoint.add(path.lastSegment.point);
+					controlPoint = path.lastSegment.point.subtract(controlPoint);
+					controlPoint = path.lastSegment.point.add(controlPoint);
+					path.cubicCurveTo(
+						controlPoint,
+						relativeToPoint.add([segment.x2, segment.y2]),
+						segmentTo
+					);
+					break;
+				case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_ABS:
+				case SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_SMOOTH_REL:
+					for (j = i; j >= 0; --j) {
+						prevCommand = segments.getItem(j);
+						if (prevCommand.pathSegType == SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_ABS ||
+							prevCommand.pathSegType == SVGPathSeg.PATHSEG_CURVETO_QUADRATIC_REL
+						) {
+							controlPoint = new Point(prevCommand.x1, prevCommand.y1);
+							controlPoint = controlPoint.subtract([prevCommand.x, prevCommand.y]);
+							controlPoint = controlPoint.add(path.segments[j].point);
+							break;
+						}
+					}
+					for (j; j < i; ++j) {
+						controlPoint = path.segments[j].point.subtract(controlPoint);
+						controlPoint = path.segments[j].point.add(controlPoint);
+					}
+					path.quadraticCurveTo(controlPoint, segmentTo);
+					break;
+			}
+		}
+
+		return path;
+	},
+
 	/**
-	 * Creates a Paper.js Group by parsing
-	 * a specific svg g node
-	 * 
-	 * takes in a svg object (xml dom)
-	 * returns Paper.js Group
+	 * Creates a Path.Poly item in Paper.js using an imported Polygon or
+	 * Polyline SVG node
+	 *
+	 * @name ImportSVG#importPoly
+	 * @function
+	 * @param {XML DOM} svgPoly An SVG polygon or polyline node
+	 * @return {Path.Poly} poly A Path.Poly item for Paper.js
+	 *   - svg polyline node (xml dom)
+	 *   - svg polygon node (xml dom)
+	 * returns a Path item
 	 */
-    function importGroup(svg)
-    {
-    	return group;
-    };
-    
+	_importPoly: function(svgPoly) {
+		var poly = new Path();
+		var points = svgPoly.points;
+		var start = points.getItem(0);
+		var point;
+		poly.moveTo([start.x, start.y]);
+
+		for (var i = 1; i < points.length; ++i) {
+			point = points.getItem(i);
+			poly.lineTo([point.x, point.y]);
+		}
+		if (svgPoly.nodeName.toLowerCase() == 'polygon') {
+			poly.closePath();
+		}
+
+		return poly;
+	},
+
 	/**
-	 * Creates a Paper.js Path by parsing
-	 * a specific svg node (rect, path, circle, polygon, etc)
-	 * and creating the right path object based on the svg type.
-	 * 
-	 * takes in a svg object (xml dom)
-	 * returns Paper.js Group
+	 * Converts various SVG styles and attributes into Paper.js styles and
+	 * attributes
+	 * This method is destructive to item (changes happen to it)
+	 *
+	 * @name ImportSVG#importAttributesAndStyles
+	 * @function
+	 * @param {XML DOM} svg An SVG node
+	 * @param {Item} item A Paper.js item
 	 */
-    function importPath(svg)
-    {
-    	return path;
-    };
-	
-    initialize(); // calls the init function after class is loaded
-};
\ No newline at end of file
+	_importAttributesAndStyles: function(svg, item) {
+		var name,
+			value,
+			cssName;
+		for (var i = 0; i < svg.style.length; ++i) {
+			name = svg.style[i];
+			cssName = name.replace(/-(.)/g, function(match, p) {
+				return p.toUpperCase();
+			});
+			value = svg.style[cssName];
+			this._applyAttributeOrStyle(name, value, item, svg);
+		}
+		for (var i = 0; i < svg.attributes.length; ++i) {
+			name = svg.attributes[i].name;
+			value = svg.attributes[i].value;
+			this._applyAttributeOrStyle(name, value, item, svg);
+		}
+	},
+
+	/**
+	 * Parses an SVG style attibute and applies it to a Paper.js item
+	 * This method is destructive to item (changes happen to it)
+	 *
+	 * @name ImportSVG#applyAttributeOrStyle
+	 * @function
+	 * @param {Style Name} name An SVG style name
+	 * @param {Style Value} value The value of an SVG style
+	 * @param {Item} item A Paper.js item
+	 * @param {XML DOM} svg An SVG node
+	 */
+	 _applyAttributeOrStyle: function(name, value, item, svg) {
+		if (!value) {
+			return;
+		}
+		switch (name) {
+			case 'id':
+				item.name = value;
+				break;
+			case 'fill':
+				if (value != 'none') {
+					item.fillColor = value;
+				}
+				break;
+			case 'stroke':
+				if (value != 'none') {
+					item.strokeColor = value;
+				}
+				break;
+			case 'stroke-width':
+				item.strokeWidth = parseFloat(value, 10);
+				break;
+			case 'stroke-linecap':
+				item.strokeCap = value;
+				break;
+			case 'stroke-linejoin':
+				item.strokeJoin = value;
+				break;
+			case 'stroke-dasharray':
+				value = value.replace(/px/g, '');
+				value = value.replace(/, /g, ',');
+				value = value.replace(/ /g, ',');
+				value = value.split(',');
+				for (var i in value) {
+					value[i] = parseFloat(value[i], 10);
+				}
+				item.dashArray = value;
+				break;
+			case 'stroke-dashoffset':
+				item.dashOffset = parseFloat(value, 10);
+				break;
+			case 'stroke-miterlimit':
+				item.miterLimit = parseFloat(value, 10);
+				break;
+			case 'transform':
+				this._applyTransform(item, svg);
+			case 'opacity':
+				item.opacity = parseFloat(value, 10);
+			case 'visibility':
+				item.visibility = (value == 'visible') ? true : false;
+				break;
+			case 'font':
+			case 'font-family':
+			case 'font-size':
+				//Implemented in characterStyle below.
+				break;
+			default:
+				// Not supported yet.
+				break;
+		}
+		if (item.characterStyle) {
+			switch (name) {
+				case 'font':
+					var text = document.createElement('span');
+					text.style.font = value;
+					for (var i = 0; i < text.style.length; ++i) {
+						var n = text.style[i];
+						this._applyAttributeOrStyle(n, text.style[n], item, svg);
+					}
+					break;
+				case 'font-family':
+					var fonts = value.split(',');
+					fonts[0] = fonts[0].replace(/^\s+|\s+$/g, "");
+					item.characterStyle.font = fonts[0];
+					break;
+				case 'font-size':
+					item.characterStyle.fontSize = parseFloat(value, 10);
+					break;
+			}
+		}
+	},
+
+	/**
+	 * Applies the transformations specified on the SVG node to the newly
+	 * made Paper.js item
+	 * This method is destructive to item
+	 *
+	 * @name ImportSVG#applyTransform
+	 * @function
+	 * @param {XML DOM} An SVG node
+	 * @param {Item} A Paper.js item
+	 */
+	_applyTransform: function(item, svg) {
+		var transforms = svg.transform.baseVal;
+		var transform;
+		var matrix = new Matrix();
+
+		for (var i = 0; i < transforms.numberOfItems; ++i) {
+			transform = transforms.getItem(i);
+			if (transform.type == SVGTransform.SVG_TRANSFORM_UNKNOWN) {
+				continue;
+			}
+			var transformMatrix = new Matrix(
+				transform.matrix.a,
+				transform.matrix.c,
+				transform.matrix.b,
+				transform.matrix.d,
+				transform.matrix.e,
+				transform.matrix.f
+			);
+			switch (transform.type) {
+				case SVGTransform.SVG_TRANSFORM_TRANSLATE:
+					break;
+				case SVGTransform.SVG_TRANSFORM_SCALE:
+					break;
+
+				//Compensate for SVG's theta rotation going the opposite direction
+				case SVGTransform.SVG_TRANSFORM_MATRIX:
+					var temp = transformMatrix.getShearX();
+					transformMatrix.setShearX(transformMatrix.getShearY());
+					transformMatrix.setShearY(temp);
+					break;
+				case SVGTransform.SVG_TRANSFORM_SKEWX:
+					transformMatrix.setShearX(transformMatrix.getShearY());
+					transformMatrix.setShearY(0);
+					break;
+				case SVGTransform.SVG_TRANSFORM_SKEWY:
+					transformMatrix.setShearY(transformMatrix.getShearX());
+					transformMatrix.setShearX(0);
+					break;
+				case SVGTransform.SVG_TRANSFORM_ROTATE:
+					transformMatrix.setShearX(transformMatrix.getShearX() * -1);
+					transformMatrix.setShearY(transformMatrix.getShearY() * -1);
+					break;
+			}
+			matrix.concatenate(transformMatrix);
+		}
+		item.transform(matrix);
+	}
+});
diff --git a/test/tests/ExportSVG.js b/test/tests/ExportSVG.js
new file mode 100644
index 00000000..9bdbda24
--- /dev/null
+++ b/test/tests/ExportSVG.js
@@ -0,0 +1,556 @@
+/**
+* Paper.js
+*
+* This file is part of Paper.js, a JavaScript Vector Graphics Library,
+* based on Scriptographer.org and designed to be largely API compatible.
+* http://paperjs.org/
+* http://scriptographer.org/
+*
+* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+* http://lehni.org/ & http://jonathanpuckey.com/
+*
+* Distributed under the MIT license. See LICENSE file for details.
+*
+* All rights reserved.
+*
+* This test file created by Stetson-Team-Alpha
+*/
+
+module('ExportSVG');
+
+test('compare line path functions', function() {
+	var svgns = 'http://www.w3.org/2000/svg';
+	var shape = document.createElementNS(svgns, 'line');
+	var x1 = 5,
+		x2 = 45,
+		y1 = 5,
+		y2 = 45;
+	shape.setAttribute('x1', x1);
+	shape.setAttribute('y1', y1);
+	shape.setAttribute('x2', x2);
+	shape.setAttribute('y2', y2);
+
+	var line = new Path.Line([x1, y1], [x2, y2]);
+
+	var epjs = new ExportSVG();
+	var exportedLine = epjs.exportPath(line);
+
+	var shapex1 = shape.getAttribute('x1');
+	var shapey1 = shape.getAttribute('y1');
+	var shapex2 = shape.getAttribute('x2');
+	var shapey2 = shape.getAttribute('y2');
+
+	var exportedx1 = exportedLine.getAttribute('x1');
+	var exportedy1 = exportedLine.getAttribute('y1');
+	var exportedx2 = exportedLine.getAttribute('x2');
+	var exportedy2 = exportedLine.getAttribute('y2');
+
+	equals(shapex1, exportedx1);
+	equals(shapey1, exportedy1);
+	equals(shapex2, exportedx2);
+	equals(shapey2, exportedy2);
+
+});
+
+test('compare negative line path functions', function() {
+	var svgns = 'http://www.w3.org/2000/svg';
+	var shape = document.createElementNS(svgns, 'line');
+	var x1 = -5,
+		x2 = -45,
+		y1 = -5,
+		y2 = -45;
+	shape.setAttribute('x1', x1);
+	shape.setAttribute('y1', y1);
+	shape.setAttribute('x2', x2);
+	shape.setAttribute('y2', y2);
+
+	var line = new Path.Line([x1, y1], [x2, y2]);
+
+	var epjs = new ExportSVG();
+	var exportedLine = epjs.exportPath(line);
+
+	var shapex1 = shape.getAttribute('x1');
+	var shapey1 = shape.getAttribute('y1');
+	var shapex2 = shape.getAttribute('x2');
+	var shapey2 = shape.getAttribute('y2');
+
+	var exportedx1 = exportedLine.getAttribute('x1');
+	var exportedy1 = exportedLine.getAttribute('y1');
+	var exportedx2 = exportedLine.getAttribute('x2');
+	var exportedy2 = exportedLine.getAttribute('y2');
+
+	equals(shapex1, exportedx1);
+	equals(shapey1, exportedy1);
+	equals(shapex2, exportedx2);
+	equals(shapey2, exportedy2);
+
+});
+
+test('compare invalid line path functions', function() {
+	var svgns = 'http://www.w3.org/2000/svg';
+	var shape = document.createElementNS(svgns, 'line');
+	var x1 = null,
+		x2 = null,
+		y1 = null,
+		y2 = null;
+	shape.setAttribute('x1', x1);
+	shape.setAttribute('y1', y1);
+	shape.setAttribute('x2', x2);
+	shape.setAttribute('y2', y2);
+	
+	var line = new Path.Line([x1, y1], [x2, y2]);
+
+	var epjs = new ExportSVG();
+	var exportedLine = epjs.exportPath(line);
+
+	var shapex1 = shape.getAttribute('x1');
+	var shapey1 = shape.getAttribute('y1');
+	var shapex2 = shape.getAttribute('x2');
+	var shapey2 = shape.getAttribute('y2');
+
+	var exportedx1 = exportedLine.getAttribute('x1');
+	var exportedy1 = exportedLine.getAttribute('y1');
+	var exportedx2 = exportedLine.getAttribute('x2');
+	var exportedy2 = exportedLine.getAttribute('y2');
+
+	equals(shapex1, exportedx1);
+	equals(shapey1, exportedy1);
+	equals(shapex2, exportedx2);
+	equals(shapey2, exportedy2);
+
+});
+
+/*test('compare rectangle values', function() {
+	var svgns = 'http://www.w3.org/2000/svg';
+	var shape = document.createElementNS(svgns, 'rect');
+	var x = 25,
+		y = 25,
+		width = 100,
+		height = 100;
+	shape.setAttribute('x', x);
+	shape.setAttribute('y', y);
+	shape.setAttribute('width', width);
+	shape.setAttribute('height', height);
+
+	var point = new Point(100, 100);
+	var size = new Size(100, 100);
+	var path = new Path.Rectangle(point, size);
+	
+	var epjs = new ExportSVG();
+	var exportedRectangle = new epjs.exportPath(path);
+
+	var shapex1 = shape.getAttribute('x');
+	var shapey1 = shape.getAttribute('y1');
+	var shapewidth = shape.getAttribute('width');
+	var shapeheight = shape.getAttribute('height');
+
+	var exportedx = exportedRectangle.getAttribute('x1');
+	var exportedy = exportedRectangle.getAttribute('y1');
+
+	var exportedwidth = exportedRectangle.getAttribute('width');
+	var exportedheight = exportedRectangle.getAttribute('height');
+
+	equals(shapex, exportedx);
+	equals(shapey, exportedy);
+	equals(shapewidth, exportedwidth);
+	equals(shapeheight, exportedheight);
+});
+
+test('compare negative rectangle values', function() {
+	var svgns = 'http://www.w3.org/2000/svg';
+	var shape = document.createElementNS(svgns, 'rect');
+	var x = -25,
+		y = -25,
+		width = -100,
+		height = -100;
+	shape.setAttribute('x', x);
+	shape.setAttribute('y', y);
+	shape.setAttribute('width', width);
+	shape.setAttribute('height', height);
+
+	var topLeft = new Point(x, y);
+	var size = new Size(width, height);
+	var rect = new Rectangle(topLeft, size);
+
+	var epjs = new ExportSVG();
+	var exportedRectangle = new epjs.exportPath(rect);
+
+	var shapex = shape.getAttribute('x');
+	var shapey = shape.getAttribute('y');
+	var shapewidth = shape.getAttribute('width');
+	var shapeheight = shape.getAttribute('height');
+
+	var exportedx = exportedRectangle.getAttribute('x');
+	var exportedy = exportedRectangle.getAttribute('y');
+	var exportedwidth = exportedRectangle.getAttribute('width');
+	var exportedheight = exportedRectangle.getAttribute('height');
+
+	equals(shapex, exportedx);
+	equals(shapey, exportedy);
+	equals(shapewidth, exportedwidth);
+	equals(shapeheight, exportedheight);
+});
+
+test('compare invalid rectangle values', function() {
+	var svgns = 'http://www.w3.org/2000/svg';
+	var shape = document.createElementNS(svgns, 'rect');
+	var x = null,
+		y = null,
+		width = null,
+		height = 100;
+	shape.setAttribute('x', x);
+	shape.setAttribute('y', y);
+	shape.setAttribute('width', width);
+	shape.setAttribute('height', height);
+
+	var topLeft = new Point(x, y);
+	var size = new Size(width, height);
+	var rect = new Rectangle(topLeft, size);
+
+	var epjs = new ExportSVG();
+	var exportedRectangle = new epjs.exportPath(rect);
+
+	var shapex = shape.getAttribute('x');
+	var shapey = shape.getAttribute('y');
+	var shapewidth = shape.getAttribute('width');
+	var shapeheight = shape.getAttribute('height');
+
+	var exportedx = exportedRectangle.getAttribute('x');
+	var exportedy = exportedRectangle.getAttribute('y');
+	var exportedwidth = exportedRectangle.getAttribute('width');
+	var exportedheight = exportedRectangle.getAttribute('height');
+
+	equals(shapex, exportedx);
+	equals(shapey, exportedy);
+	equals(shapewidth, exportedwidth);
+	equals(shapeheight, exportedheight);
+});
+
+test('compare rounded rectangle values', function() {
+	var svgns = 'http://www.w3.org/2000/svg';
+	var shape = document.createElementNS(svgns, 'rect');
+	var x = 25,
+		y = 25,
+		rx = 50,
+		ry = 50,
+		width = 100,
+		height = 100;
+	shape.setAttribute('x', x);
+	shape.setAttribute('y', y);
+	shape.setAttribute('rx', rx);
+	shape.setAttribute('ry', ry);
+	shape.setAttribute('width', width);
+	shape.setAttribute('height', height);
+
+	var topLeft = new Point(x, y);
+	var size = new Size(width, height);
+	var cornerSize = new Size(rx, ry);
+	var rect = new Rectangle(topLeft, size);
+	var roundRect = new Path.RoundRectangle(rect, cornerSize);
+
+	var epjs = new ExportSVG();
+	var exportedRectangle = new epjs.exportPath(rect);
+
+	var shapex = shape.getAttribute('x');
+	var shapey = shape.getAttribute('y');
+	var shapecx = shape.getAttribute('rx');
+	var shapecy = shape.getAttribute('ry');
+	var shapewidth = shape.getAttribute('width');
+	var shapeheight = shape.getAttribute('height');
+
+	var exportedx = exportedRectangle.getAttribute('x');
+	var exportedy = exportedRectangle.getAttribute('y');
+	var exportedcx = exportedRectangle.getAttribute('rx');
+	var exportedcy = exportedRectangle.getAttribute('ry');
+	var exportedwidth = exportedRectangle.getAttribute('width');
+	var exportedheight = exportedRectangle.getAttribute('height');
+
+	equals(shapex, exportedx);
+	equals(shapey, exportedy);
+	equals(shapewidth, exportedwidth);
+	equals(shapeheight, exportedheight);
+});
+
+test('compare negative rounded rectangle values', function() {
+	var svgns = 'http://www.w3.org/2000/svg';
+	var shape = document.createElementNS(svgns, 'rect');
+	var x = -25,
+		y = -25,
+		rx = -50,
+		ry = -50,
+		width = -100,
+		height = -100;
+	shape.setAttribute('x', x);
+	shape.setAttribute('y', y);
+	shape.setAttribute('rx', rx);
+	shape.setAttribute('ry', ry);
+	shape.setAttribute('width', width);
+	shape.setAttribute('height', height);
+
+	var topLeft = new Point(x, y);
+	var size = new Size(width, height);
+	var cornerSize = new Size(rx, ry);
+	var rect = new Rectangle(topLeft, size);
+	var roundRect = new Path.RoundRectangle(rect, cornerSize);
+
+	var epjs = new ExportSVG();
+	var exportedRectangle = new epjs.exportPath(rect);
+
+	var shapex = shape.getAttribute('x');
+	var shapey = shape.getAttribute('y');
+	var shapecx = shape.getAttribute('rx');
+	var shapecy = shape.getAttribute('ry');
+	var shapewidth = shape.getAttribute('width');
+	var shapeheight = shape.getAttribute('height');
+
+	var exportedx = exportedRectangle.getAttribute('x');
+	var exportedy = exportedRectangle.getAttribute('y');
+	var exportedcx = exportedRectangle.getAttribute('rx');
+	var exportedcy = exportedRectangle.getAttribute('ry');
+	var exportedwidth = exportedRectangle.getAttribute('width');
+	var exportedheight = exportedRectangle.getAttribute('height');
+
+	equals(shapex, exportedx);
+	equals(shapey, exportedy);
+	equals(shapewidth, exportedwidth);
+	equals(shapeheight, exportedheight);
+});
+
+test('compare invalid rounded rectangle values', function() {
+	var svgns = 'http://www.w3.org/2000/svg';
+	var shape = document.createElementNS(svgns, 'rect');
+	var x = null,
+	y = null,
+	rx = null,
+	ry = null,
+	width = null,
+	height = null;
+	shape.setAttribute('x', x);
+	shape.setAttribute('y', y);
+	shape.setAttribute('rx', rx);
+	shape.setAttribute('ry', ry);
+	shape.setAttribute('width', width);
+	shape.setAttribute('height', height);
+
+	var topLeft = new Point(x, y);
+	var size = new Size(width, height);
+	var cornerSize = new Size(rx, ry);
+	var rect = new Rectangle(topLeft, size);
+	var roundRect = new Path.RoundRectangle(rect, cornerSize);
+
+	var epjs = new ExportSVG();
+	var exportedRectangle = new epjs.exportPath(rect);
+
+	var shapex = shape.getAttribute('x');
+	var shapey = shape.getAttribute('y');
+	var shapecx = shape.getAttribute('rx');
+	var shapecy = shape.getAttribute('ry');
+	var shapewidth = shape.getAttribute('width');
+	var shapeheight = shape.getAttribute('height');
+
+	var exportedx = exportedRectangle.getAttribute('x');
+	var exportedy = exportedRectangle.getAttribute('y');
+	var exportedcx = exportedRectangle.getAttribute('rx');
+	var exportedcy = exportedRectangle.getAttribute('ry');
+	var exportedwidth = exportedRectangle.getAttribute('width');
+	var exportedheight = exportedRectangle.getAttribute('height');
+
+	equals(shapex, exportedx);
+	equals(shapey, exportedy);
+	equals(shapewidth, exportedwidth);
+	equals(shapeheight, exportedheight);
+});*/
+
+test('compare oval values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'ellipse');
+	var cx = 100,
+		cy = 80,
+		rx = 50;
+		ry = 30;
+	shape.setAttribute('cx', cx);
+	shape.setAttribute('cy', cy);
+	shape.setAttribute('rx', rx);
+	shape.setAttribute('ry', ry);
+
+	var center = new Point(cx, cy);
+	var offset = new Point(rx, ry);
+	var topLeft = center.subtract(offset);
+	var bottomRight = center.add(offset);
+
+	var rect = new Rectangle(topLeft, bottomRight);
+	var oval = new Path.Oval(rect);
+
+	var epjs = new ExportSVG();
+	var exportedOval = epjs.exportPath(oval);
+
+	var shapecx = shape.getAttribute('cx');
+	var shapecy = shape.getAttribute('cy');
+	var shaperx = shape.getAttribute('rx');
+	var shapery = shape.getAttribute('ry');
+
+	var exportedcx = exportedOval.getAttribute('cx');
+	var exportedcy = exportedOval.getAttribute('cy');
+	var exportedrx = exportedOval.getAttribute('rx');
+	var exportedry = exportedOval.getAttribute('ry');
+
+	equals(shapecx, exportedcx);
+	equals(shapecy, exportedcy);
+	equals(shaperx, exportedrx);
+	equals(shapery, exportedry);
+
+});
+
+test('compare circle values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'circle');
+	var cx = 100,
+		cy = 80,
+		r = 50;	
+	shape.setAttribute('cx', cx);
+	shape.setAttribute('cy', cy);
+	shape.setAttribute('r', r);
+
+	var center = new Point(cx, cy);
+	var circle = new Path.Circle(center, r);
+
+	var epjs = new ExportSVG();
+	var exportedCircle = epjs.exportPath(circle);
+
+	var shapecx = shape.getAttribute('cx');
+	var shapecy = shape.getAttribute('cy');
+	var shaper = shape.getAttribute('r');
+
+	var exportedcx = exportedCircle.getAttribute('cx');
+	var exportedcy = exportedCircle.getAttribute('cy');
+	var exportedr = exportedCircle.getAttribute('r');
+
+	equals(shapecx, exportedcx);
+	equals(shapecy, exportedcy);
+	equals(shaper, exportedr);
+
+});
+
+test('compare polygon values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'polygon');
+	var svgpoints = "100,10 40,180 190,60 10,60 160,180";
+	shape.setAttribute('points', svgpoints);
+
+	var poly = new Path();
+	var points = shape.points;
+	var start = points.getItem(0)
+	var point;
+	poly.moveTo([start.x, start.y]);
+
+	for (var i = 1; i < points.length; ++i) {
+		point = points.getItem(i);
+		poly.lineTo([point.x, point.y]);
+	}
+	if (shape.nodeName.toLowerCase() == 'polygon') {
+		poly.closePath();
+	}
+
+	var epjs = new ExportSVG();
+	var exportedPolygon = epjs.exportPath(poly);
+
+	var svgPoints = shape.getAttribute('points');
+
+	var exportedPoints = shape.getAttribute('points');
+
+	equals(svgPoints, exportedPoints);
+	
+});
+
+test('compare negative polygon values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'polygon');
+	var svgpoints = "-100,-10 -40,-180 -190,-60 -10,-60 -160,-180";
+	shape.setAttribute('points', svgpoints);
+
+	var poly = new Path();
+	var points = shape.points;
+	var start = points.getItem(0)
+	var point;
+	poly.moveTo([start.x, start.y]);
+
+	for (var i = 1; i < points.length; ++i) {
+		point = points.getItem(i);
+		poly.lineTo([point.x, point.y]);
+	}
+	if (shape.nodeName.toLowerCase() == 'polygon') {
+		poly.closePath();
+	}
+
+	var epjs = new ExportSVG();
+	var exportedPolygon = epjs.exportPath(poly);
+
+	var svgPoints = shape.getAttribute('points');
+
+	var exportedPoints = shape.getAttribute('points');
+
+	equals(svgPoints, exportedPoints);
+
+});
+
+test('compare polyline values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'polyline');
+	var svgpoints = "5,5 45,45 5,45 45,5";
+	shape.setAttribute('points', svgpoints);
+
+	var poly = new Path();
+	var points = shape.points;
+	var start = points.getItem(0)
+	var point;
+	poly.moveTo([start.x, start.y]);
+
+	for (var i = 1; i < points.length; ++i) {
+		point = points.getItem(i);
+		poly.lineTo([point.x, point.y]);
+	}
+	if (shape.nodeName.toLowerCase() == 'polygon') {
+		poly.closePath();
+	}
+
+	var epjs = new ExportSVG();
+	var exportedPolygon = epjs.exportPath(poly);
+
+	var svgPoints = shape.getAttribute('points');
+
+	var exportedPoints = shape.getAttribute('points');
+
+	equals(svgPoints, exportedPoints);
+
+});
+
+test('compare negative polyline values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'polyline');
+	var svgpoints = "-5,-5 -45,-45 -5,-45 -45,-5";
+	shape.setAttribute('points', svgpoints);
+
+	var poly = new Path();
+	var points = shape.points;
+	var start = points.getItem(0)
+	var point;
+	poly.moveTo([start.x, start.y]);
+
+	for (var i = 1; i < points.length; ++i) {
+		point = points.getItem(i);
+		poly.lineTo([point.x, point.y]);
+	}
+	if (shape.nodeName.toLowerCase() == 'polygon') {
+		poly.closePath();
+	}
+
+	var epjs = new ExportSVG();
+	var exportedPolygon = epjs.exportPath(poly);
+
+	var svgPoints = shape.getAttribute('points');
+
+	var exportedPoints = shape.getAttribute('points');
+
+	equals(svgPoints, exportedPoints);
+
+});
diff --git a/test/tests/ImportSVG.js b/test/tests/ImportSVG.js
new file mode 100644
index 00000000..0f3f613f
--- /dev/null
+++ b/test/tests/ImportSVG.js
@@ -0,0 +1,451 @@
+/*
+* Paper.js
+*
+* This file is part of Paper.js, a JavaScript Vector Graphics Library,
+* based on Scriptographer.org and designed to be largely API compatible.
+* http://paperjs.org/
+* http://scriptographer.org/
+*
+* Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+* http://lehni.org/ & http://jonathanpuckey.com/
+*
+* Distributed under the MIT license. See LICENSE file for details.
+*
+* All rights reserved.
+*
+* This test file created by Stetson-Team-Alpha
+*/
+
+module('ImportSVG');
+
+test('make an svg line', function() {
+	var svgns = 'http://www.w3.org/2000/svg';
+   	var shape = document.createElementNS(svgns, 'line');
+	var x1 = 5,
+		x2 = 45,
+		y1 = 5,
+		y2 = 45;
+   	shape.setAttribute('x1', x1);
+ 	shape.setAttribute('y1', y1);
+ 	shape.setAttribute('x2', x2);
+   	shape.setAttribute('y2', y2);
+
+	var isvg = new ImportSVG();
+	var importedLine = isvg.importSVG(shape);
+
+	var line = new Path.Line([x1, y1], [x2, y2]);
+
+	compareSegmentLists(importedLine.segments, line.segments, true);
+});
+
+test('make an svg line with invalid values', function() {
+	var svgns = 'http://www.w3.org/2000/svg';
+	var shape = document.createElementNS(svgns, 'line');
+	shape.setAttribute('x1', null);
+	shape.setAttribute('y1', null);
+	shape.setAttribute('x2', null);
+	shape.setAttribute('y2', null);
+
+	var isvg = new ImportSVG();
+	var importedLine = isvg.importSVG(shape);
+
+	var line = new Path.Line([0, 0], [0, 0]);
+
+	compareSegmentLists(importedLine.segments, line.segments, true);
+
+});
+
+test('compare rectangle values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'rect');
+	var x = 25,
+		y = 25,
+		width = 100,
+		height = 100;
+	shape.setAttribute('x', x);
+	shape.setAttribute('y', y);
+	shape.setAttribute('width', width);
+	shape.setAttribute('height', height);
+
+	var isvg = new ImportSVG();
+	var importedRectangle = isvg.importSVG(shape);
+
+	var topLeft = new Point(x, y);
+	var size = new Size(width, height);
+	var rectangle = new Rectangle(topLeft, size);
+	var realRectangle = new Path.Rectangle(rectangle);
+
+	compareSegmentLists(importedRectangle.segments, realRectangle.segments, true);
+});
+
+
+test('compare negative rectangle values', function() {
+        var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'rect');
+	var x = -925,
+		y = -111,
+		width = -100,
+		height = -18;
+	shape.setAttribute('x', x);
+	shape.setAttribute('y', y);
+	shape.setAttribute('width', width);
+	shape.setAttribute('height', height);
+
+	var isvg = new ImportSVG();
+	var importedRectangle = isvg.importSVG(shape);
+        var topLeft = new Point(x, y);
+        var size = new Size(width, height);
+        var rectangle = new Rectangle(topLeft, size);
+        var realRectangle = new Path.Rectangle(rectangle);
+	
+	compareSegmentLists(importedRectangle.segments, realRectangle.segments, true);
+																				});
+
+
+test('compare invalid rectangle values', function() {
+        var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'rect');
+
+	shape.setAttribute('x', null);
+	shape.setAttribute('y', null);
+	shape.setAttribute('width', null);
+	shape.setAttribute('height', null);
+
+        var isvg = new ImportSVG();
+	var importedRectangle = isvg.importSVG(shape);
+	
+	var topLeft = new Point(0, 0);
+	var size = new Size(0, 0);
+	var rectangle = new Rectangle(topLeft, size);
+	var realRectangle = new Path.Rectangle(rectangle);
+
+	compareSegmentLists(importedRectangle.segments, realRectangle.segments, true);
+																				});
+
+test('compare round rectangle values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'rect');
+	var x = 25,
+		y = 25,
+		rx = 50,
+		ry = 50,
+		width = 100,
+		height = 100;
+	shape.setAttribute('x', x);
+	shape.setAttribute('y', y);
+	shape.setAttribute('rx', rx);
+	shape.setAttribute('ry', ry);
+	shape.setAttribute('width', width);
+	shape.setAttribute('height', height);
+
+	var isvg = new ImportSVG();
+	var importedRectangle = isvg.importSVG(shape);
+
+	var topLeft = new Point(x, y);
+	var size = new Size(width, height);
+	var cornerSize = new Size(rx, ry);
+	var rectangle = new Rectangle(topLeft, size);
+	var roundRect = new Path.RoundRectangle(rectangle, cornerSize);
+
+	compareSegmentLists(importedRectangle.segments, roundRect.segments, true);
+});
+
+test('compare negative round rectangle values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'rect');
+	var x = -25,
+		y = -25,
+		rx = -50,
+		ry = -50,
+		width = -100,
+		height = -100;
+	shape.setAttribute('x', x);
+	shape.setAttribute('y', y);
+	shape.setAttribute('rx', rx);
+	shape.setAttribute('ry', ry);
+	shape.setAttribute('width', width);
+	shape.setAttribute('height', height);
+
+	var isvg = new ImportSVG();
+	var importedRectangle = isvg.importSVG(shape);
+
+	var topLeft = new Point(x, y);
+	var size = new Size(width, height);
+	var cornerSize = new Size(rx, ry);
+	var rectangle = new Rectangle(topLeft, size);
+	var roundRect = new Path.RoundRectangle(rectangle, cornerSize);
+
+	compareSegmentLists(importedRectangle.segments, roundRect.segments, true);
+});
+
+test('compare invalid round rectangle values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'rect');
+	var x = null,
+		y = null,
+		rx = null,
+		ry = null,
+		width = null,
+		height = null;
+	shape.setAttribute('x', x);
+	shape.setAttribute('y', y);
+	shape.setAttribute('rx', 1);
+	shape.setAttribute('ry', 1);
+	shape.setAttribute('width', width);
+	shape.setAttribute('height', height);
+
+	var isvg = new ImportSVG();
+	var importedRectangle = isvg.importSVG(shape);
+
+	var topLeft = new Point(x, y);
+	var size = new Size(width, height);
+	var cornerSize = new Size(rx, ry);
+	var rectangle = new Rectangle(topLeft, size);
+	var roundRect = new Path.RoundRectangle(rectangle, cornerSize);
+
+	compareSegmentLists(importedRectangle.segments, roundRect.segments, true);
+});
+
+test('compare oval values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'ellipse');
+	var cx = 300,
+		cy = 80,
+		rx = 100,
+		ry = 50;
+	shape.setAttribute('cx', cx);
+	shape.setAttribute('cy', cy);
+	shape.setAttribute('rx', rx);
+	shape.setAttribute('ry', ry);
+
+	var isvg = new ImportSVG();
+	var importedOval = isvg.importSVG(shape);
+
+	var center = new Point(cx, cy);
+	var offset = new Point(rx, ry);
+	var topLeft = center.subtract(offset);
+	var bottomRight = center.add(offset);
+
+	var rect = new Rectangle(topLeft, bottomRight);
+	var oval = new Path.Oval(rect);
+
+	compareSegmentLists(importedOval.segments, oval.segments, true);
+
+
+});
+
+test('compare negative oval values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'ellipse');
+	var cx = -111,
+		cy = -2,
+		rx = -292,
+		ry = -1;
+	shape.setAttribute('cx', cx);
+	shape.setAttribute('cy', cy);
+	shape.setAttribute('rx', rx);
+	shape.setAttribute('ry', ry);
+
+	var isvg = new ImportSVG();
+	var importedOval = isvg.importSVG(shape);
+
+	var center = new Point(cx, cy);
+	var offset = new Point(rx, ry);
+	var topLeft = center.subtract(offset);
+	var bottomRight = center.add(offset);
+
+	var rect = new Rectangle(topLeft, bottomRight);
+	var oval = new Path.Oval(rect);
+
+	compareSegmentLists(importedOval.segments, oval.segments, true);
+
+});
+
+test('compare invalid oval values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'ellipse');
+	shape.setAttribute('cx', null);
+	shape.setAttribute('cy', null);
+	shape.setAttribute('rx', null);
+	shape.setAttribute('ry', null);
+
+	var isvg = new ImportSVG();
+	var importedOval = isvg.importSVG(shape);
+
+	var center = new Point(0, 0);
+	var offset = new Point(0, 0);
+	var topLeft = center.subtract(offset);
+	var bottomRight = center.add(offset);
+
+	var rect = new Rectangle(topLeft, bottomRight);
+	var oval = new Path.Oval(rect);
+
+	compareSegmentLists(importedOval.segments, oval.segments, true);
+
+});
+
+test('compare circle values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'circle');
+	var cx = 100,
+		cy = 80,
+		r = 50;	
+	shape.setAttribute('cx', cx);
+	shape.setAttribute('cy', cy);
+	shape.setAttribute('r', r);
+
+	var isvg = new ImportSVG();
+	var importedCircle = isvg.importSVG(shape);
+
+	var center = new Point(cx, cy);
+	var circle = new Path.Circle(center, r);
+
+	compareSegmentLists(importedCircle.segments, circle.segments, true);
+
+});
+
+test('compare negative circle values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'circle');
+	var cx = -234,
+	cy = -77,
+	r = -1110;
+	shape.setAttribute('cx', cx);
+	shape.setAttribute('cy', cy);
+	shape.setAttribute('r', r);
+
+	var isvg = new ImportSVG();
+	var importedCircle = isvg.importSVG(shape);
+
+	var center = new Point(cx, cy);
+	var circle = new Path.Circle(center, r);
+
+	compareSegmentLists(importedCircle.segments, circle.segments, true);
+
+});
+
+
+test('compare invalid circle values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'circle');
+	shape.setAttribute('cx', null);
+	shape.setAttribute('cy', null);
+	shape.setAttribute('r', null);
+
+	var isvg = new ImportSVG();
+	var importedCircle = isvg.importSVG(shape);
+
+	var center = new Point(0, 0);
+	var circle = new Path.Circle(center, 0);
+
+	compareSegmentLists(importedCircle.segments, circle.segments, true);
+
+});
+
+test('compare polygon values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'polygon');
+	var svgpoints = "100,10 40,180 190,60 10,60 160,180";
+	shape.setAttribute('points', svgpoints);
+
+	var isvg = new ImportSVG();
+	var importedPolygon = isvg.importSVG(shape);
+
+	var poly = new Path();
+	var points = shape.points;
+	var start = points.getItem(0)
+	var point;
+	poly.moveTo([start.x, start.y]);
+
+	for (var i = 1; i < points.length; ++i) {
+		point = points.getItem(i);
+		poly.lineTo([point.x, point.y]);
+	}
+	if (shape.nodeName.toLowerCase() == 'polygon') {
+		poly.closePath();
+	}
+
+	compareSegmentLists(importedPolygon.segments, poly.segments, true);
+
+});
+
+test('compare negative polygon values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'polygon');
+	var svgpoints = "-100,-10 -40,-180 -190,-60 -10,-60 -160,-180";
+	shape.setAttribute('points', svgpoints);
+
+	var isvg = new ImportSVG();
+	var importedPolygon = isvg.importSVG(shape);
+
+	var poly = new Path();
+	var points = shape.points;
+	var start = points.getItem(0)
+	var point;
+	poly.moveTo([start.x, start.y]);
+
+	for (var i = 1; i < points.length; ++i) {
+		point = points.getItem(i);
+		poly.lineTo([point.x, point.y]);
+	}
+	if (shape.nodeName.toLowerCase() == 'polygon') {
+		poly.closePath();
+	}
+
+	compareSegmentLists(importedPolygon.segments, poly.segments, true);
+
+});
+
+test('compare polyline values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'polyline');
+	var svgpoints = "5,5 45,45 5,45 45,5";
+	shape.setAttribute('points', svgpoints);
+
+	var isvg = new ImportSVG();
+	var importedPolyline = isvg.importSVG(shape);
+
+	var poly = new Path();
+	var points = shape.points;
+	var start = points.getItem(0)
+	var point;
+	poly.moveTo([start.x, start.y]);
+
+	for (var i = 1; i < points.length; ++i) {
+		point = points.getItem(i);
+		poly.lineTo([point.x, point.y]);
+	}
+	if (shape.nodeName.toLowerCase() == 'polygon') {
+		poly.closePath();
+	}
+
+	compareSegmentLists(importedPolyline.segments, poly.segments, true);
+
+});
+
+	test('compare negative polyline values', function() {
+	var svgns = 'http://www.w3.org/2000/svg'
+	var shape = document.createElementNS(svgns, 'polyline');
+	var svgpoints = "-5,-5 -45,-45 -5,-45 -45,-5";
+	shape.setAttribute('points', svgpoints);
+
+	var isvg = new ImportSVG();
+	var importedPolyline = isvg.importSVG(shape);
+
+	var poly = new Path();
+	var points = shape.points;
+	var start = points.getItem(0)
+	var point;
+	poly.moveTo([start.x, start.y]);
+
+	for (var i = 1; i < points.length; ++i) {
+		point = points.getItem(i);
+		poly.lineTo([point.x, point.y]);
+	}
+	if (shape.nodeName.toLowerCase() == 'polygon') {
+		poly.closePath();
+	}
+
+	compareSegmentLists(importedPolyline.segments, poly.segments, true);
+
+});

From 71edb9ed88fdd188b0d707551dd15fc8864ac35a Mon Sep 17 00:00:00 2001
From: skierons <skierons@stetson.edu>
Date: Sun, 30 Sep 2012 19:01:08 -0300
Subject: [PATCH 37/51] Added the Import/Export to the load script

---
 test/tests/load.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/test/tests/load.js b/test/tests/load.js
index f08f287a..26d33e03 100644
--- a/test/tests/load.js
+++ b/test/tests/load.js
@@ -27,3 +27,6 @@
 /*#*/ include('PlacedSymbol.js');
 
 /*#*/ include('HitResult.js');
+
+/*#*/ include('ImportSVG.js');
+/*#*/ include('ExportSVG.js');

From a1bb8651a3716f8cc9c58774ea18acafdd0f22ba Mon Sep 17 00:00:00 2001
From: skierons <skierons@stetson.edu>
Date: Sun, 30 Sep 2012 19:05:21 -0300
Subject: [PATCH 38/51] Update src/svg/ExportSVG.js

---
 src/svg/ExportSVG.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/svg/ExportSVG.js b/src/svg/ExportSVG.js
index 9c1346bd..fb24a2ee 100644
--- a/src/svg/ExportSVG.js
+++ b/src/svg/ExportSVG.js
@@ -44,6 +44,7 @@ var ExportSVG = this.ExportSVG = Base.extend(/** @Lends ExportSVG# */{
 	 * @return {SVG DOM} this.svgObj The imported project converted to an
 	 * SVG project
 	 */
+	 //TODO: Implement symbols and Gradients
 	exportProject: function(project) {
 		var layerArray = project.layers;
 		var layer;
@@ -222,7 +223,9 @@ var ExportSVG = this.ExportSVG = Base.extend(/** @Lends ExportSVG# */{
 		//If the object is a circle, ellipse, rectangle, or rounded rectangle, it will find the angle 
 		//found by the transformCheck method and make a path that accommodates for the transformed object
 		if(type != 'text' && type != undefined && type != 'polygon' &&  type != 'polyline' && type != 'line') {
-			var angle = this._transformCheck(path, pointArray, type) + 90;
+			//TODO: Need to implement exported transforms for circle, ellipse, and rectangles instead of 
+			//making them paths
+			var angle = this._determineIfTransformed(path, pointArray, type) + 90;
 			console.log(angle);
 			if(angle != 0) {
 				if(type == 'rect' || type == 'roundRect') {
@@ -305,7 +308,7 @@ var ExportSVG = this.ExportSVG = Base.extend(/** @Lends ExportSVG# */{
 	},
 
 	//Determines whether the object has been transformed or not through determining the angle
-	_determinesIfTransformed: function(path, pointArray, type) {
+	_determineIfTransformed: function(path, pointArray, type) {
 		var topMidBoundx = (path.bounds.topRight.getX() + path.bounds.topLeft.getX() )/2;
 		var topMidBoundy = (path.bounds.topRight.getY() + path.bounds.topLeft.getY() )/2;
 		var topMidBound = new Point(topMidBoundx, topMidBoundy);

From 19c4449165fc372ddd9f2036f1a61a55697b809b Mon Sep 17 00:00:00 2001
From: skierons <skierons@stetson.edu>
Date: Sun, 30 Sep 2012 19:09:58 -0300
Subject: [PATCH 39/51] Update dist/paper.js

---
 dist/paper.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/dist/paper.js b/dist/paper.js
index e69de29b..d2dbb9ac 100644
--- a/dist/paper.js
+++ b/dist/paper.js
@@ -0,0 +1,3 @@
+// Paper.js loader for development, as produced by the build/load.sh script
+document.write('<script type="text/javascript" src="../../lib/prepro.js"></script>');
+document.write('<script type="text/javascript" src="../../src/load.js"></script>');
\ No newline at end of file

From 8bafd1d73d58e032d2b41df5f2c8cfa6cc321bb3 Mon Sep 17 00:00:00 2001
From: Andrew <jaroles@stetson.edu>
Date: Sun, 30 Sep 2012 20:56:59 -0400
Subject: [PATCH 40/51] Setting up for merge

---
 build/.gitignore                          |    3 -
 build/build.sh                            |   38 -
 build/dist.sh                             |   21 -
 build/docs.sh                             |   38 -
 build/jsdoc-toolkit                       |    1 -
 build/load.sh                             |   22 -
 build/parse-js.sh                         |   20 -
 build/prepro.js                           |  174 -
 build/preprocess.sh                       |   51 -
 build/zip.sh                              |   39 -
 dist/.gitignore                           |    3 -
 dist/docs/classes/CharacterStyle.html     |  569 --
 dist/docs/classes/Color.html              |  712 ---
 dist/docs/classes/CompoundPath.html       | 4382 --------------
 dist/docs/classes/Curve.html              |  878 ---
 dist/docs/classes/CurveLocation.html      |  505 --
 dist/docs/classes/Event.html              |   73 -
 dist/docs/classes/Gradient.html           |  200 -
 dist/docs/classes/GradientColor.html      |  465 --
 dist/docs/classes/GradientStop.html       |  258 -
 dist/docs/classes/GrayColor.html          |  749 ---
 dist/docs/classes/Group.html              | 3587 -----------
 dist/docs/classes/HitResult.html          |  242 -
 dist/docs/classes/HsbColor.html           |  766 ---
 dist/docs/classes/HslColor.html           |  730 ---
 dist/docs/classes/Item.html               | 3289 ----------
 dist/docs/classes/Key.html                |  100 -
 dist/docs/classes/KeyEvent.html           |  220 -
 dist/docs/classes/Layer.html              | 3588 -----------
 dist/docs/classes/Line.html               |  329 -
 dist/docs/classes/Matrix.html             | 1824 ------
 dist/docs/classes/PaperScope.html         |  475 --
 dist/docs/classes/PaperScript.html        |  137 -
 dist/docs/classes/ParagraphStyle.html     |   92 -
 dist/docs/classes/Path.html               | 6698 ---------------------
 dist/docs/classes/PathItem.html           | 4279 -------------
 dist/docs/classes/PathStyle.html          |  497 --
 dist/docs/classes/PlacedItem.html         | 3493 -----------
 dist/docs/classes/PlacedSymbol.html       | 3620 -----------
 dist/docs/classes/Point.html              | 2196 -------
 dist/docs/classes/PointText.html          | 3688 ------------
 dist/docs/classes/Project.html            |  567 --
 dist/docs/classes/Raster.html             | 4204 -------------
 dist/docs/classes/Rectangle.html          | 1380 -----
 dist/docs/classes/RgbColor.html           |  765 ---
 dist/docs/classes/Segment.html            |  544 --
 dist/docs/classes/Size.html               | 1247 ----
 dist/docs/classes/Symbol.html             |  271 -
 dist/docs/classes/TextItem.html           | 3600 -----------
 dist/docs/classes/Tool.html               |  584 --
 dist/docs/classes/ToolEvent.html          |  406 --
 dist/docs/classes/View.html               |  538 --
 dist/docs/classes/global.html             |  529 --
 dist/docs/classes/index.html              |   96 -
 dist/docs/index.html                      |   13 -
 dist/docs/resources/css/assets/bullet.gif |  Bin 44 -> 0 bytes
 dist/docs/resources/css/codemirror.css    |  141 -
 dist/docs/resources/css/paperscript.css   |   64 -
 dist/docs/resources/css/reference.css     |  128 -
 dist/docs/resources/css/style.css         |   86 -
 dist/docs/resources/js/bootstrap.js       | 4040 -------------
 dist/docs/resources/js/codemirror.js      |    1 -
 dist/docs/resources/js/paper.js           |    0
 dist/docs/resources/js/reference.js       |  258 -
 dist/paper.js                             |    3 -
 lib/bootstrap.js                          |  411 --
 lib/parse-js-min.js                       |   14 -
 lib/parse-js-unicode.js                   | 1997 ------
 lib/parse-js.js                           | 1916 ------
 lib/prepro.js                             |   43 -
 lib/stats.js                              |   10 -
 node.js/index.js                          |   58 -
 72 files changed, 72965 deletions(-)
 delete mode 100644 build/.gitignore
 delete mode 100755 build/build.sh
 delete mode 100755 build/dist.sh
 delete mode 100755 build/docs.sh
 delete mode 160000 build/jsdoc-toolkit
 delete mode 100755 build/load.sh
 delete mode 100755 build/parse-js.sh
 delete mode 100755 build/prepro.js
 delete mode 100755 build/preprocess.sh
 delete mode 100755 build/zip.sh
 delete mode 100644 dist/.gitignore
 delete mode 100644 dist/docs/classes/CharacterStyle.html
 delete mode 100644 dist/docs/classes/Color.html
 delete mode 100644 dist/docs/classes/CompoundPath.html
 delete mode 100644 dist/docs/classes/Curve.html
 delete mode 100644 dist/docs/classes/CurveLocation.html
 delete mode 100644 dist/docs/classes/Event.html
 delete mode 100644 dist/docs/classes/Gradient.html
 delete mode 100644 dist/docs/classes/GradientColor.html
 delete mode 100644 dist/docs/classes/GradientStop.html
 delete mode 100644 dist/docs/classes/GrayColor.html
 delete mode 100644 dist/docs/classes/Group.html
 delete mode 100644 dist/docs/classes/HitResult.html
 delete mode 100644 dist/docs/classes/HsbColor.html
 delete mode 100644 dist/docs/classes/HslColor.html
 delete mode 100644 dist/docs/classes/Item.html
 delete mode 100644 dist/docs/classes/Key.html
 delete mode 100644 dist/docs/classes/KeyEvent.html
 delete mode 100644 dist/docs/classes/Layer.html
 delete mode 100644 dist/docs/classes/Line.html
 delete mode 100644 dist/docs/classes/Matrix.html
 delete mode 100644 dist/docs/classes/PaperScope.html
 delete mode 100644 dist/docs/classes/PaperScript.html
 delete mode 100644 dist/docs/classes/ParagraphStyle.html
 delete mode 100644 dist/docs/classes/Path.html
 delete mode 100644 dist/docs/classes/PathItem.html
 delete mode 100644 dist/docs/classes/PathStyle.html
 delete mode 100644 dist/docs/classes/PlacedItem.html
 delete mode 100644 dist/docs/classes/PlacedSymbol.html
 delete mode 100644 dist/docs/classes/Point.html
 delete mode 100644 dist/docs/classes/PointText.html
 delete mode 100644 dist/docs/classes/Project.html
 delete mode 100644 dist/docs/classes/Raster.html
 delete mode 100644 dist/docs/classes/Rectangle.html
 delete mode 100644 dist/docs/classes/RgbColor.html
 delete mode 100644 dist/docs/classes/Segment.html
 delete mode 100644 dist/docs/classes/Size.html
 delete mode 100644 dist/docs/classes/Symbol.html
 delete mode 100644 dist/docs/classes/TextItem.html
 delete mode 100644 dist/docs/classes/Tool.html
 delete mode 100644 dist/docs/classes/ToolEvent.html
 delete mode 100644 dist/docs/classes/View.html
 delete mode 100644 dist/docs/classes/global.html
 delete mode 100644 dist/docs/classes/index.html
 delete mode 100644 dist/docs/index.html
 delete mode 100644 dist/docs/resources/css/assets/bullet.gif
 delete mode 100644 dist/docs/resources/css/codemirror.css
 delete mode 100644 dist/docs/resources/css/paperscript.css
 delete mode 100644 dist/docs/resources/css/reference.css
 delete mode 100644 dist/docs/resources/css/style.css
 delete mode 100644 dist/docs/resources/js/bootstrap.js
 delete mode 100644 dist/docs/resources/js/codemirror.js
 delete mode 100644 dist/docs/resources/js/paper.js
 delete mode 100644 dist/docs/resources/js/reference.js
 delete mode 100644 dist/paper.js
 delete mode 100644 lib/bootstrap.js
 delete mode 100644 lib/parse-js-min.js
 delete mode 100644 lib/parse-js-unicode.js
 delete mode 100644 lib/parse-js.js
 delete mode 100644 lib/prepro.js
 delete mode 100644 lib/stats.js
 delete mode 100644 node.js/index.js

diff --git a/build/.gitignore b/build/.gitignore
deleted file mode 100644
index baa4f768..00000000
--- a/build/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-/scriptographer.sh
-/*.tmproj
-/sync.sh
diff --git a/build/build.sh b/build/build.sh
deleted file mode 100755
index e57127be..00000000
--- a/build/build.sh
+++ /dev/null
@@ -1,38 +0,0 @@
-#!/bin/sh
-
-# Paper.js
-#
-# This file is part of Paper.js, a JavaScript Vector Graphics Library,
-# based on Scriptographer.org and designed to be largely API compatible.
-# http://scriptographer.org/
-#
-# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
-# http://lehni.org/ & http://jonathanpuckey.com/
-#
-# Distributed under the MIT license. See LICENSE file for details.
-#
-# All rights reserved.
-
-# Usage:
-# build.sh MODE
-#
-# MODE:
-#	commented		Preprocessed but still formated and commented
-#	stripped		Formated but without comments (default)
-#	compressed		Uses UglifyJS to reduce file size
-
-if [ $# -eq 0 ]
-then
-	MODE="stripped"
-else
-	MODE=$1
-fi
-
-# Create the dist folder if it does not exist yet.
-if [ ! -d ../dist/ ]
-then
-	mkdir ../dist/
-fi
-
-./preprocess.sh $MODE ../src/paper.js ../dist/paper.js '{ "browser": true }'
-#./preprocess.sh $MODE ../src/paper.js ../dist/paper-server.js '{ "server": true }'
diff --git a/build/dist.sh b/build/dist.sh
deleted file mode 100755
index 6283502a..00000000
--- a/build/dist.sh
+++ /dev/null
@@ -1,21 +0,0 @@
-#!/bin/sh
-
-# Paper.js
-#
-# This file is part of Paper.js, a JavaScript Vector Graphics Library,
-# based on Scriptographer.org and designed to be largely API compatible.
-# http://scriptographer.org/
-#
-# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
-# http://lehni.org/ & http://jonathanpuckey.com/
-#
-# Distributed under the MIT license. See LICENSE file for details.
-#
-# All rights reserved.
-
-echo "Building paper.js"
-./build.sh
-echo "Building docs"
-./docs.sh
-echo "Zipping paperjs.zip"
-./zip.sh
diff --git a/build/docs.sh b/build/docs.sh
deleted file mode 100755
index b55606a0..00000000
--- a/build/docs.sh
+++ /dev/null
@@ -1,38 +0,0 @@
-#!/bin/sh
-
-# Paper.js
-#
-# This file is part of Paper.js, a JavaScript Vector Graphics Library,
-# based on Scriptographer.org and designed to be largely API compatible.
-# http://scriptographer.org/
-#
-# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
-# http://lehni.org/ & http://jonathanpuckey.com/
-#
-# Distributed under the MIT license. See LICENSE file for details.
-#
-# All rights reserved.
-
-# Generate documentation
-#
-# MODE:
-#	docs			Generates the JS API docs - Default
-#	serverdocs		Generates the website templates for the online JS API docs
-
-if [ $# -eq 0 ]
-then
-	MODE="docs"
-else
-	MODE=$1
-fi
-
-cd jsdoc-toolkit
-java -jar jsrun.jar app/run.js -c=conf/$MODE.conf -D="renderMode:$MODE"
-cd ..
-
-if [ $MODE = "docs" ]
-then
-	# Build paper.js library for documentation
-	./preprocess.sh stripped ../src/paper.js ../dist/docs/resources/js/paper.js\
-		'{ "browser": true }'
-fi
diff --git a/build/jsdoc-toolkit b/build/jsdoc-toolkit
deleted file mode 160000
index 55bd0b74..00000000
--- a/build/jsdoc-toolkit
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 55bd0b74e927683748aeace6e89a57e618d1f78f
diff --git a/build/load.sh b/build/load.sh
deleted file mode 100755
index 8ed8a3cc..00000000
--- a/build/load.sh
+++ /dev/null
@@ -1,22 +0,0 @@
-#!/bin/sh
-
-# Paper.js
-#
-# This file is part of Paper.js, a JavaScript Vector Graphics Library,
-# based on Scriptographer.org and designed to be largely API compatible.
-# http://scriptographer.org/
-#
-# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
-# http://lehni.org/ & http://jonathanpuckey.com/
-#
-# Distributed under the MIT license. See LICENSE file for details.
-#
-# All rights reserved.
-
-# Generate a paper.js file that uses load.js to directly load the library
-# through the seperate source files in the src directory. Very useful during
-# development of the library itself.
-
-echo "// Paper.js loader for development, as produced by the build/load.sh script
-document.write('<script type=\"text/javascript\" src=\"../../lib/prepro.js\"></script>');
-document.write('<script type=\"text/javascript\" src=\"../../src/load.js\"></script>');" > ../dist/paper.js;
\ No newline at end of file
diff --git a/build/parse-js.sh b/build/parse-js.sh
deleted file mode 100755
index 7410b68a..00000000
--- a/build/parse-js.sh
+++ /dev/null
@@ -1,20 +0,0 @@
-#!/bin/sh
-
-# Paper.js
-#
-# This file is part of Paper.js, a JavaScript Vector Graphics Library,
-# based on Scriptographer.org and designed to be largely API compatible.
-# http://scriptographer.org/
-#
-# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
-# http://lehni.org/ & http://jonathanpuckey.com/
-#
-# Distributed under the MIT license. See LICENSE file for details.
-#
-# All rights reserved.
-
-# Generate a paper.js file that uses load.js to directly load the library
-# through the seperate source files in the src directory. Very useful during
-# development of the library itself.
-
-./preprocess.sh compressed ../lib/parse-js.js ../lib/parse-js-min.js '{}'
diff --git a/build/prepro.js b/build/prepro.js
deleted file mode 100755
index 1ba879dd..00000000
--- a/build/prepro.js
+++ /dev/null
@@ -1,174 +0,0 @@
-#! /usr/bin/env node
-/*
- * Paper.js
- *
- * This file is part of Paper.js, a JavaScript Vector Graphics Library,
- * based on Scriptographer.org and designed to be largely API compatible.
- * http://paperjs.org/
- * http://scriptographer.org/
- *
- * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
- * http://lehni.org/ & http://jonathanpuckey.com/
- *
- * Distributed under the MIT license. See LICENSE file for details.
- *
- * All rights reserved.
- */
-
-/**
- * Prepro.js - A simple preprocesssor for JavaScript that speaks JavaScript,
- * written in JavaScript, allowing preprocessing to either happen at build time
- * or compile time. Very useful for libraries that are built for distribution,
- * but can be also compiled from seperate sources directly for development,
- * supporting build time switches.
- */
-
-// Required libs
-
-var fs = require('fs'),
-	path = require('path');
-
-// Parse arguments
-
-var args = process.argv.slice(2),
-	options = {},
-	files = [],
-	strip = false;
-
-while (args.length > 0) {
-	var arg = args.shift();
-	switch (arg) {
-	case '-d':
-		// Definitions are provided as JSON and supposed to be object literals
-		var def = JSON.parse(args.shift());
-		// Merge new definitions into options object.
-		for (var key in def)
-			options[key] = def[key];
-		break;	
-	case '-c':
-		strip = true;
-		break;
-	default:
-		files.push(arg);
-	}
-}
-
-// Preprocessing
-
-var code = [],
-	out = [];
-
-function include(base, file) {
-	// Compose a pathname from base and file, which is specified relatively,
-	// and normalize the new path, to get rid of ..
-	file = path.normalize(path.join(base, file));
-	var content = fs.readFileSync(file).toString();
-	content.split(/\r\n|\n|\r/mg).forEach(function(line) {
-		// See if our line starts with the preprocess prefix.
-		var match = line.match(/^\s*\/\*#\*\/\s*(.*)$/);
-		if (match) {
-			// Check if the preprocessing line is an include statement, and if
-			// so, handle it straight away
-			line = match[1];
-			if (match = line.match(/^include\(['"]([^;]*)['"]\);?$/)) {
-				// Pass on the dirname of the current file as the new base
-				include(path.dirname(file), match[1]);
-			} else {
-				// Any other preprocessing code is simply added, for later 
-				// evaluation.
-				code.push(line);
-			}
-		} else {
-			// Perhaps we need to replace some values? Supported formats are:
-			// /*#=*/ options.NAME (outside comments)
-			// *#=* options.NAME (inside comments)
-			line = line.replace(/\/?\*#=\*\/?\s*options\.([\w]*)/g,
-				function(all, name) {
-					return options[name];
-				}
-			);
-			// Now add a statement that when evaluated writes out this code line
-			code.push('out.push(' + JSON.stringify(line) + ');');
-		}
-	});
-}
-
-// Include all files. Everything else happens from there, through include()
-files.forEach(function(file) {
-	include(path.resolve(), file);
-});
-
-// Evaluate the resulting code: Calls puts() and writes the result to stdout.
-eval(code.join('\n'));
-
-// Convert the resulting lines to one string again.
-var out = out.join('\n');
-
-if (strip) {
-	out = stripComments(out);
-	// Strip empty lines that contain only white space and line breaks, as they
-	// are left-overs from comment removal.
-	out = out.replace(/^[ \t]+(\r\n|\n|\r)/gm, function(all) {
-		return '';
-	});
-	// Replace a sequence of more than two line breaks with only two.
-	out = out.replace(/(\r\n|\n|\r)(\r\n|\n|\r)+/g, function(all, lineBreak) {
-		return lineBreak + lineBreak;
-	});
-}
-
-// Write the result out
-process.stdout.write(out);
-
-/**
- * Strips comments out of JavaScript code, based on:
- * http://james.padolsey.com/javascript/removing-comments-in-javascript/
-*/
-function stripComments(str) {
-	str = ('__' + str + '__').split('');
-	var singleQuote = false,
-		doubleQuote = false,
-		blockComment = false,
-		lineComment = false,
-		preserveComment = false;
-	for (var i = 0, l = str.length; i < l; i++) {
-		if (singleQuote) {
-			if (str[i] == "'" && str[i - 1] !== '\\')
-				singleQuote = false;
-		} else if (doubleQuote) {
-			if (str[i] == '"' && str[i - 1] !== '\\')
-				doubleQuote = false;
-		} else if (blockComment) {
-			// Is the block comment closing?
-			if (str[i] == '*' && str[i + 1] == '/') {
-				if (!preserveComment)
-					str[i] = str[i + 1] = '';
-				blockComment = preserveComment = false;
-			} else if (!preserveComment) {
-				str[i] = '';
-			}
-		} else if (lineComment) {
-			// One-line comments end with the line-break
-			if (str[i + 1] == '\n' || str[i + 1] == '\r')
-				lineComment = false;
-			str[i] = '';
-		} else {
-			doubleQuote = str[i] == '"';
-			singleQuote = str[i] == "'";
-			if (!blockComment && str[i] == '/') {
-				if (str[i + 1] == '*') {
-					// Do not filter out conditional comments and comments marked
-					// as protected (/*! */)
-					preserveComment = str[i + 2] == '@' || str[i + 2] == '!';
-					if (!preserveComment)
-						str[i] = '';
-					blockComment = true;
-				} else if (str[i + 1] == '/') {
-					str[i] = '';
-					lineComment = true;
-				}
-	 		}
-		}
- 	}
-	return str.join('').slice(2, -2);
-}
diff --git a/build/preprocess.sh b/build/preprocess.sh
deleted file mode 100755
index 860fdd73..00000000
--- a/build/preprocess.sh
+++ /dev/null
@@ -1,51 +0,0 @@
-#!/bin/sh
-
-# Paper.js
-#
-# This file is part of Paper.js, a JavaScript Vector Graphics Library,
-# based on Scriptographer.org and designed to be largely API compatible.
-# http://scriptographer.org/
-#
-# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
-# http://lehni.org/ & http://jonathanpuckey.com/
-#
-# Distributed under the MIT license. See LICENSE file for details.
-#
-# All rights reserved.
-
-# preprocess.sh
-#
-# A simple code preprocessing wrapper that uses a combination of cpp, jssrip.py
-# and sed to preprocess JavaScript files containing C-style preprocess macros
-# (#include, #ifdef, etc.). Three options offer control over wether comments
-# are preserved or stripped and whitespaces are compressed.
-#
-# Usage:
-# preprocess.sh MODE SOURCE DESTINATION ARGUMENTS
-#
-# ARGUMENTS:
-#	e.g. "-DBROWSER"
-#
-# MODE:
-#	commented		Preprocessed but still formated and commented
-#	stripped		Formated but without comments
-#	compressed		Uses UglifyJS to reduce file size
-
-VERSION=0.22
-DATE=$(git log -1 --pretty=format:%ad)
-
-COMMAND="./prepro.js -d '{ \"version\": $VERSION, \"date\": \"$DATE\" }' -d '$4' $2"
-
-case $1 in
-	stripped)
-		eval "$COMMAND -c" > $3
-		;;
-	commented)
-		eval $COMMAND > $3
-		;;
-	compressed)
-		eval $COMMAND > temp.js
-		../../uglifyjs/bin/uglifyjs temp.js --extra --unsafe --reserved-names "$eval,$sign" > $3
-		rm temp.js
-		;;
-esac
diff --git a/build/zip.sh b/build/zip.sh
deleted file mode 100755
index afc07257..00000000
--- a/build/zip.sh
+++ /dev/null
@@ -1,39 +0,0 @@
-#!/bin/sh
-
-# Paper.js
-#
-# This file is part of Paper.js, a JavaScript Vector Graphics Library,
-# based on Scriptographer.org and designed to be largely API compatible.
-# http://scriptographer.org/
-#
-# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
-# http://lehni.org/ & http://jonathanpuckey.com/
-#
-# Distributed under the MIT license. See LICENSE file for details.
-#
-# All rights reserved.
-
-if [ -f paperjs.zip ]
-then
-	rm paperjs.zip
-fi
-# Create a temporary folder to copy all files in for zipping
-mkdir zip
-cd zip
-BASE=../..
-# Copy license over
-cp $BASE/LICENSE.txt .
-# Make library folder and copy paper.js there
-mkdir lib
-cp $BASE/dist/paper.js lib
-# Copy examples over
-cp -r $BASE/examples .
-# Replace ../../dist/ with ../../lib/ in each example
-find examples -type f -print0 | xargs -0 perl -i -pe 's/\.\.\/\.\.\/dist\//\.\.\/\.\.\/lib\//g'
-# Copy docs over
-cp -r $BASE/dist/docs .
-# Zip the whole thing
-zip -9 -r $BASE/dist/paperjs.zip * LICENSE.txt -x "*/.DS_Store"
-cd ..
-# Remove the temporary folder again
-rm -fr zip
diff --git a/dist/.gitignore b/dist/.gitignore
deleted file mode 100644
index 61f11ea6..00000000
--- a/dist/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-/paper-server.js
-/serverdocs/
-/paperjs.zip
diff --git a/dist/docs/classes/CharacterStyle.html b/dist/docs/classes/CharacterStyle.html
deleted file mode 100644
index 359b7469..00000000
--- a/dist/docs/classes/CharacterStyle.html
+++ /dev/null
@@ -1,569 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>CharacterStyle</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>CharacterStyle</h1>
-
-<p> Extends <b><a href="../classes/PathStyle.html"><tt>PathStyle</tt></a></b></p>
-
-<p>The CharacterStyle object represents the character style of a text
-item (<a href="../classes/TextItem.html#characterstyle"><tt>textItem.characterStyle</tt></a>)</p>
-<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var text = new PointText(new Point(50, 50));
-text.content = 'Hello world.';
-text.characterStyle = {
-	fontSize: 50,
-	fillColor: 'black',
-};</pre>
-
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="font-member" class="member">
-<div id="font-link" class="member-link">
-<a name="font" href="#" onClick="return toggleMember('font', false);"><tt><b>font</b></tt></a>
-</div>
-<div id="font-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('font', false);"><tt><b>font</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('font', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The font of the character style.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'sans-serif'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="fontsize-member" class="member">
-<div id="fontsize-link" class="member-link">
-<a name="fontsize" href="#" onClick="return toggleMember('fontsize', false);"><tt><b>fontSize</b></tt></a>
-</div>
-<div id="fontsize-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fontsize', false);"><tt><b>fontSize</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fontsize', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The font size of the character style in points.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>10</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/PathStyle.html"><tt>PathStyle</tt></a></h2>
-
-	
-	<h3>Stroke Style</h3>
-
-<div id="strokecolor-member" class="member">
-<div id="strokecolor-link" class="member-link">
-<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-<div id="strokecolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the stroke color of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to RGB red:
-circle.strokeColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokewidth-member" class="member">
-<div id="strokewidth-link" class="member-link">
-<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-<div id="strokewidth-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The width of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's stroke width:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to black:
-circle.strokeColor = 'black';
-
-// Set its stroke width to 10:
-circle.strokeWidth = 10;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokecap-member" class="member">
-<div id="strokecap-link" class="member-link">
-<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-<div id="strokecap-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
-have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'butt'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('round', 'square', 'butt')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke caps:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-var line = new Path(new Point(80, 50), new Point(420, 50));
-line.strokeColor = 'black';
-line.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-line.selected = true;
-
-// Set the stroke cap of the line to be round:
-line.strokeCap = 'round';
-
-// Copy the path and set its stroke cap to be square:
-var line2 = line.clone();
-line2.position.y += 50;
-line2.strokeCap = 'square';
-
-// Make another copy and set its stroke cap to be butt:
-var line2 = line.clone();
-line2.position.y += 100;
-line2.strokeCap = 'butt';
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokejoin-member" class="member">
-<div id="strokejoin-link" class="member-link">
-<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-<div id="strokejoin-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the corners of paths when they have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'miter'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt> ('miter', 'round', 'bevel')
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke joins:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-var path = new Path();
-path.add(new Point(80, 100));
-path.add(new Point(120, 40));
-path.add(new Point(160, 100));
-path.strokeColor = 'black';
-path.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-path.selected = true;
-
-var path2 = path.clone();
-path2.position.x += path2.bounds.width * 1.5;
-path2.strokeJoin = 'round';
-
-var path3 = path2.clone();
-path3.position.x += path3.bounds.width * 1.5;
-path3.strokeJoin = 'bevel';
-</script>
-<div class="canvas"><canvas width="516" height="120" id="canvas-3"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="dashoffset-member" class="member">
-<div id="dashoffset-link" class="member-link">
-<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-<div id="dashoffset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The dash offset of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>0</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="dasharray-member" class="member">
-<div id="dasharray-link" class="member-link">
-<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-<div id="dasharray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>[]</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Array</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-var path = new Path.Circle(new Point(80, 50), 40);
-path.strokeWidth = 2;
-path.strokeColor = 'black';
-
-// Set the dashed stroke to [10pt dash, 4pt gap]:
-path.dashArray = [10, 4];
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="miterlimit-member" class="member">
-<div id="miterlimit-link" class="member-link">
-<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-<div id="miterlimit-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The miter limit of the stroke.</p>
-<p>When two line segments meet at a sharp angle and miter joins have been
-specified for <a href="../classes/PathStyle.html#strokejoin" onclick="return toggleMember('strokejoin', true);"><tt>strokeJoin</tt></a>, it is possible for the miter to extend
-far beyond the <a href="../classes/PathStyle.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a> of the path. The miterLimit imposes a
-limit on the ratio of the miter length to the <a href="../classes/PathStyle.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>10</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Fill Style</h3>
-
-<div id="fillcolor-member" class="member">
-<div id="fillcolor-link" class="member-link">
-<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-<div id="fillcolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The fill color.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the fill color of a path to red:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-5">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set the fill color of the circle to RGB red:
-circle.fillColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Color.html b/dist/docs/classes/Color.html
deleted file mode 100644
index c230d9b0..00000000
--- a/dist/docs/classes/Color.html
+++ /dev/null
@@ -1,712 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Color</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Color</h1>
-
-<p>All properties and functions that expect color values accept
-instances of the different color classes such as <a href="../classes/RgbColor.html"><tt>RgbColor</tt></a>,
-<a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> and <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>, and also accept named colors
-and hex values as strings which are then converted to instances of
-<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> internally.</p>
-<p>
-<b>Example</b> &mdash; Named color values:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-// Create a circle shaped path at {x: 80, y: 50}
-// with a radius of 30.
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// Pass a color name to the fillColor property, which is internally
-// converted to an RgbColor.
-circle.fillColor = 'green';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Hex color values:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-// Create a circle shaped path at {x: 80, y: 50}
-// with a radius of 30.
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// Pass a hex string to the fillColor property, which is internally
-// converted to an RgbColor.
-circle.fillColor = '#ff0000';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-</div>
-
-
-
-<!-- ============================== properties ========================= -->
-	<div class="reference-members"><h2>Operators</h2>
-		
-			<div id="equals-member" class="member">
-<div id="equals-link" class="member-link">
-<a name="equals" href="#" onClick="return toggleMember('equals', false);"><tt><tt><b>==</b> Color</tt></tt></a>
-</div>
-<div id="equals-description" class="member-description hidden">
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('equals', false);"><tt><b>==</b> Color</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Checks if the component color values of the color are the
-same as those of the supplied one.</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-		
-		
-	</div>
-
-
-</div>
-</div>
-
-		
-	</div>
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="type-member" class="member">
-<div id="type-link" class="member-link">
-<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
-</div>
-<div id="type-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Returns the type of the color as a string.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('rgb', 'hsb', 'gray')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var color = new RgbColor(1, 0, 0);
-console.log(color.type); // 'rgb'</pre>
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="alpha-member" class="member">
-<div id="alpha-link" class="member-link">
-<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
-</div>
-<div id="alpha-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
-colors of the different subclasses support alpha values.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A filled path with a half transparent stroke:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// Fill the circle with red and give it a 20pt green stroke:
-circle.style = {
-	fillColor: 'red',
-	strokeColor: 'green',
-	strokeWidth: 20
-};
-
-// Make the stroke half transparent:
-circle.strokeColor.alpha = 0.5;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>RGB Components</h3>
-
-<div id="red-member" class="member">
-<div id="red-link" class="member-link">
-<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
-</div>
-<div id="red-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of red in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the amount of red in a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.fillColor = 'blue';
-
-// Blue + red = purple:
-circle.fillColor.red = 1;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="green-member" class="member">
-<div id="green-link" class="member-link">
-<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
-</div>
-<div id="green-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of green in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the amount of green in a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// First we set the fill color to red:
-circle.fillColor = 'red';
-
-// Red + green = yellow:
-circle.fillColor.green = 1;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="blue-member" class="member">
-<div id="blue-link" class="member-link">
-<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
-</div>
-<div id="blue-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of blue in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the amount of blue in a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-5">
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// First we set the fill color to red:
-circle.fillColor = 'red';
-
-// Red + blue = purple:
-circle.fillColor.blue = 1;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Gray Components</h3>
-
-<div id="gray-member" class="member">
-<div id="gray-link" class="member-link">
-<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
-</div>
-<div id="gray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of gray in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>HSB Components</h3>
-
-<div id="hue-member" class="member">
-<div id="hue-link" class="member-link">
-<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
-</div>
-<div id="hue-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The hue of the color as a value in degrees between <tt>0</tt> and
-<tt>360</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the hue of a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-6">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.fillColor = 'red';
-circle.fillColor.hue += 30;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Hue cycling:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-7">
-// Create a rectangle shaped path, using the dimensions
-// of the view:
-var path = new Path.Rectangle(view.bounds);
-path.fillColor = 'red';
-
-function onFrame(event) {
-	path.fillColor.hue += 0.5;
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="saturation-member" class="member">
-<div id="saturation-link" class="member-link">
-<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
-</div>
-<div id="saturation-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="brightness-member" class="member">
-<div id="brightness-link" class="member-link">
-<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
-</div>
-<div id="brightness-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>HSL Components</h3>
-
-<div id="lightness-member" class="member">
-<div id="lightness-link" class="member-link">
-<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
-</div>
-<div id="lightness-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the color object
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="hasalpha-member" class="member">
-<div id="hasalpha-link" class="member-link">
-<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
-</div>
-<div id="hasalpha-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the color has an alpha value.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<h3>String Representations</h3>
-
-<div id="tostring-member" class="member">
-<div id="tostring-link" class="member-link">
-<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-<div id="tostring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the color.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="tocssstring-member" class="member">
-<div id="tocssstring-link" class="member-link">
-<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
-</div>
-<div id="tocssstring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A css string representation of the color.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/CompoundPath.html b/dist/docs/classes/CompoundPath.html
deleted file mode 100644
index 302ea309..00000000
--- a/dist/docs/classes/CompoundPath.html
+++ /dev/null
@@ -1,4382 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>CompoundPath</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>CompoundPath</h1>
-
-<p> Extends <b><a href="../classes/PathItem.html"><tt>PathItem</tt></a></b>, <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
-
-<p>A compound path contains two or more paths, holes are drawn
-where the paths overlap. All the paths in a compound path take on the
-style of the backmost path and can be accessed through its
-<a href="../classes/Item.html#children"><tt>item.children</tt></a> list.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="compoundpath-member" class="member">
-<div id="compoundpath-link" class="member-link">
-<a name="compoundpath" href="#" onClick="return toggleMember('compoundpath', false);"><tt><b>CompoundPath</b>([paths])</tt></a>
-</div>
-<div id="compoundpath-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('compoundpath', false);"><tt><b>CompoundPath</b>([paths])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('compoundpath', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a new compound path item and places it in the active layer.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>paths:</tt> 
-Array of <a href="../classes/Path.html"><tt>Path</tt></a> objects
-&mdash;&nbsp;the paths to place within the compound path.
-&mdash;&nbsp;optional
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> &mdash; Create a circle shaped path with a hole in it:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-var circle = new Path.Circle(new Point(50, 50), 30);
-var innerCircle = new Path.Circle(new Point(50, 50), 10);
-var compoundPath = new CompoundPath([circle, innerCircle]);
-compoundPath.fillColor = 'red';
-
-// Move the inner circle 5pt to the right:
-compoundPath.children[1].position.x += 5;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="simplify-member" class="member">
-<div id="simplify-link" class="member-link">
-<a name="simplify" href="#" onClick="return toggleMember('simplify', false);"><tt><b>simplify</b>()</tt></a>
-</div>
-<div id="simplify-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('simplify', false);"><tt><b>simplify</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('simplify', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>If this is a compound path with only one path inside,
-the path is moved outside and the compound path is erased.</p>
-<p>Otherwise, the compound path is returned unmodified.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a> / <a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the simplified compound path
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-
-<!-- =========================== inherited methods ========================= -->
-<div class="reference-members"><h2>Methods inherited from <a href="../classes/PathItem.html"><tt>PathItem</tt></a></h2>
-
-	
-<div id="smooth-member" class="member">
-<div id="smooth-link" class="member-link">
-<a name="smooth" href="#" onClick="return toggleMember('smooth', false);"><tt><b>smooth</b>()</tt></a>
-</div>
-<div id="smooth-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('smooth', false);"><tt><b>smooth</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('smooth', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Smooth bezier curves without changing the amount of segments or their
-points, by only smoothing and adjusting their handle points, for both
-open ended and closed paths.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Smoothing a closed shape:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-// Create a rectangular path with its top-left point at
-// {x: 30, y: 25} and a size of {width: 50, height: 50}:
-var path = new Path.Rectangle(new Point(30, 25), new Size(50, 50));
-path.strokeColor = 'black';
-
-// Select the path, so we can see its handles:
-path.selected = true;
-
-// Create a copy of the path and move it 100pt to the right:
-var copy = path.clone();
-copy.position.x += 100;
-
-// Smooth the segments of the copy:
-copy.smooth();
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-var path = new Path();
-path.strokeColor = 'black';
-
-path.add(new Point(30, 50));
-
-var y = 5;
-var x = 3;
-
-for (var i = 0; i < 28; i++) {
-    y *= -1.1;
-    x *= 1.1;
-    path.lineBy(x, y);
-}
-
-// Create a copy of the path and move it 100pt down:
-var copy = path.clone();
-copy.position.y += 120;
-
-// Set its stroke color to red:
-copy.strokeColor = 'red';
-
-// Smooth the segments of the copy:
-copy.smooth();
-</script>
-<div class="canvas"><canvas width="516" height="220" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<h3>Postscript Style Drawing Commands</h3>
-
-<div id="moveto-point-member" class="member">
-<div id="moveto-point-link" class="member-link">
-<a name="moveto-point" href="#" onClick="return toggleMember('moveto-point', false);"><tt><b>moveTo</b>(point)</tt></a>
-</div>
-<div id="moveto-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('moveto-point', false);"><tt><b>moveTo</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveto-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>If called on a <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, a new <a href="../classes/Path.html"><tt>Path</tt></a> is created as a
-child and the point is added as its first segment. On a normal empty
-<a href="../classes/Path.html"><tt>Path</tt></a>, the point is simply added as its first segment.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="lineto-point-member" class="member">
-<div id="lineto-point-link" class="member-link">
-<a name="lineto-point" href="#" onClick="return toggleMember('lineto-point', false);"><tt><b>lineTo</b>(point)</tt></a>
-</div>
-<div id="lineto-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lineto-point', false);"><tt><b>lineTo</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lineto-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="cubiccurveto-handle1-handle2-to-member" class="member">
-<div id="cubiccurveto-handle1-handle2-to-link" class="member-link">
-<a name="cubiccurveto-handle1-handle2-to" href="#" onClick="return toggleMember('cubiccurveto-handle1-handle2-to', false);"><tt><b>cubicCurveTo</b>(handle1, handle2, to)</tt></a>
-</div>
-<div id="cubiccurveto-handle1-handle2-to-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('cubiccurveto-handle1-handle2-to', false);"><tt><b>cubicCurveTo</b>(handle1, handle2, to)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('cubiccurveto-handle1-handle2-to', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds a cubic bezier curve to the path, defined by two handles and a to
-point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>handle1:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>handle2:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="quadraticcurveto-handle-to-member" class="member">
-<div id="quadraticcurveto-handle-to-link" class="member-link">
-<a name="quadraticcurveto-handle-to" href="#" onClick="return toggleMember('quadraticcurveto-handle-to', false);"><tt><b>quadraticCurveTo</b>(handle, to)</tt></a>
-</div>
-<div id="quadraticcurveto-handle-to-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('quadraticcurveto-handle-to', false);"><tt><b>quadraticCurveTo</b>(handle, to)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('quadraticcurveto-handle-to', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds a quadratic bezier curve to the path, defined by a handle and a to
-point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>handle:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="curveto-through-to-member" class="member">
-<div id="curveto-through-to-link" class="member-link">
-<a name="curveto-through-to" href="#" onClick="return toggleMember('curveto-through-to', false);"><tt><b>curveTo</b>(through, to[, parameter])</tt></a>
-</div>
-<div id="curveto-through-to-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('curveto-through-to', false);"><tt><b>curveTo</b>(through, to[, parameter])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveto-through-to', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Draws a curve from the position of the last segment point in the path
-that goes through the specified <tt>through</tt> point, to the specified
-<tt>to</tt> point by adding one segment to the path.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>through:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the point through which the curve should go
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the point where the curve should end
-
-</li>
-
-<li>
-<tt>parameter:</tt> 
-<tt>Number</tt>
-
-&mdash;&nbsp;optional, default: <tt>0.5</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-var myPath;
-function onMouseDrag(event) {
-	// If we created a path before, remove it:
-	if (myPath) {
-	    myPath.remove();
-	}
-
-	// Create a new path and add a segment point to it
-	// at {x: 150, y: 150):
-	myPath = new Path();
-	myPath.add(150, 150);
-
-	// Draw a curve through the position of the mouse to 'toPoint'
-	var toPoint = new Point(350, 150);
-	myPath.curveTo(event.point, toPoint);
-
-	// Select the path, so we can see its segments:
-	myPath.selected = true;
-}
-
-// When the mouse is released, deselect the path
-// and set its stroke-color to black:
-function onMouseUp(event) {
-	myPath.selected = false;
-	myPath.strokeColor = 'black';
-}
-</script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-3"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="arcto-through-to-member" class="member">
-<div id="arcto-through-to-link" class="member-link">
-<a name="arcto-through-to" href="#" onClick="return toggleMember('arcto-through-to', false);"><tt><b>arcTo</b>(through, to)</tt></a>
-</div>
-<div id="arcto-through-to-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('arcto-through-to', false);"><tt><b>arcTo</b>(through, to)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcto-through-to', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Draws an arc from the position of the last segment point in the path that
-goes through the specified <tt>through</tt> point, to the specified
-<tt>to</tt> point by adding one or more segments to the path.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>through:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the point where the arc should pass through
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the point where the arc should end
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-var path = new Path();
-path.strokeColor = 'black';
-
-var firstPoint = new Point(30, 75);
-path.add(firstPoint);
-
-// The point through which we will create the arc:
-var throughPoint = new Point(40, 40);
-
-// The point at which the arc will end:
-var toPoint = new Point(130, 75);
-
-// Draw an arc through 'throughPoint' to 'toPoint'
-path.arcTo(throughPoint, toPoint);
-
-// Add a red circle shaped path at the position of 'throughPoint':
-var circle = new Path.Circle(throughPoint, 3);
-circle.fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-5">
-var myPath;
-function onMouseDrag(event) {
-	// If we created a path before, remove it:
-	if (myPath) {
-	    myPath.remove();
-	}
-
-	// Create a new path and add a segment point to it
-	// at {x: 150, y: 150):
-	myPath = new Path();
-	myPath.add(150, 150);
-
-	// Draw an arc through the position of the mouse to 'toPoint'
-	var toPoint = new Point(350, 150);
-	myPath.arcTo(event.point, toPoint);
-
-	// Select the path, so we can see its segments:
-	myPath.selected = true;
-}
-
-// When the mouse is released, deselect the path
-// and fill it with black.
-function onMouseUp(event) {
-	myPath.selected = false;
-	myPath.fillColor = 'black';
-}
-</script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-5"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="arcto-to-member" class="member">
-<div id="arcto-to-link" class="member-link">
-<a name="arcto-to" href="#" onClick="return toggleMember('arcto-to', false);"><tt><b>arcTo</b>(to[, clockwise])</tt></a>
-</div>
-<div id="arcto-to-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('arcto-to', false);"><tt><b>arcTo</b>(to[, clockwise])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcto-to', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Draws an arc from the position of the last segment point in the path to
-the specified point by adding one or more segments to the path.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>to:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the point where the arc should end
-
-</li>
-
-<li>
-<tt>clockwise:</tt> 
-<tt>Boolean</tt>
-&mdash;&nbsp;specifies whether the arc should be
-       drawn in clockwise direction.
-&mdash;&nbsp;optional, default: <tt>true</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-6">
-var path = new Path();
-path.strokeColor = 'black';
-
-path.add(new Point(30, 75));
-path.arcTo(new Point(130, 75));
-
-var path2 = new Path();
-path2.strokeColor = 'red';
-path2.add(new Point(180, 25));
-
-// To draw an arc in anticlockwise direction,
-// we pass 'false' as the second argument to arcTo:
-path2.arcTo(new Point(280, 25), false);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-7">
-var myPath;
-
-// The mouse has to move at least 20 points before
-// the next mouse drag event is fired:
-tool.minDistance = 20;
-
-// When the user clicks, create a new path and add
-// the current mouse position to it as its first segment:
-function onMouseDown(event) {
-	myPath = new Path();
-	myPath.strokeColor = 'black';
-	myPath.add(event.point);
-}
-
-// On each mouse drag event, draw an arc to the current
-// position of the mouse:
-function onMouseDrag(event) {
-	myPath.arcTo(event.point);
-}
-</script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-7"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="closepath-member" class="member">
-<div id="closepath-link" class="member-link">
-<a name="closepath" href="#" onClick="return toggleMember('closepath', false);"><tt><b>closePath</b>()</tt></a>
-</div>
-<div id="closepath-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('closepath', false);"><tt><b>closePath</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('closepath', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Closes the path. When closed, Paper.js connects the first and last
-segments.</p>
-	
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Path.html#closed"><tt>path.closed</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Relative Drawing Commands</h3>
-
-<div id="moveby-point-member" class="member">
-<div id="moveby-point-link" class="member-link">
-<a name="moveby-point" href="#" onClick="return toggleMember('moveby-point', false);"><tt><b>moveBy</b>(point)</tt></a>
-</div>
-<div id="moveby-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('moveby-point', false);"><tt><b>moveBy</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveby-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>If called on a <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, a new <a href="../classes/Path.html"><tt>Path</tt></a> is created as a
-child and the point is added as its first segment relative to the
-position of the last segment of the current path.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="lineby-vector-member" class="member">
-<div id="lineby-vector-link" class="member-link">
-<a name="lineby-vector" href="#" onClick="return toggleMember('lineby-vector', false);"><tt><b>lineBy</b>(vector)</tt></a>
-</div>
-<div id="lineby-vector-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lineby-vector', false);"><tt><b>lineBy</b>(vector)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lineby-vector', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds a segment relative to the last segment point of the path.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>vector:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The vector which is added to the position of the
-       last segment of the path, to become the new segment.
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-8">
-var path = new Path();
-path.strokeColor = 'black';
-
-// Add a segment at {x: 50, y: 50}
-path.add(25, 25);
-
-// Add a segment relative to the last segment of the path.
-// 50 in x direction and 0 in y direction, becomes {x: 75, y: 25}
-path.lineBy(50, 0);
-
-// 0 in x direction and 50 in y direction, becomes {x: 75, y: 75}
-path.lineBy(0, 50);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Drawing a spiral using lineBy:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-9">
-var path = new Path();
-path.strokeColor = 'black';
-
-// Add the first segment at {x: 50, y: 50}
-path.add(view.center);
-
-// Loop 500 times:
-for (var i = 0; i < 500; i++) {
-	// Create a vector with an ever increasing length
-	// and an angle in increments of 45 degrees
-	var vector = new Point({
-	    angle: i * 45,
-	    length: i / 2
-	});
-	// Add the vector relatively to the last segment point:
-	path.lineBy(vector);
-}
-
-// Smooth the handles of the path:
-path.smooth();
-
-// Uncomment the following line and click on 'run' to see
-// the construction of the path:
-// path.selected = true;
-</script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-9"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="curveby-throughVector-toVector-member" class="member">
-<div id="curveby-throughVector-toVector-link" class="member-link">
-<a name="curveby-throughVector-toVector" href="#" onClick="return toggleMember('curveby-throughVector-toVector', false);"><tt><b>curveBy</b>(throughVector, toVector[, parameter])</tt></a>
-</div>
-<div id="curveby-throughVector-toVector-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('curveby-throughVector-toVector', false);"><tt><b>curveBy</b>(throughVector, toVector[, parameter])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveby-throughVector-toVector', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>throughVector:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>toVector:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>parameter:</tt> 
-<tt>Number</tt>
-
-&mdash;&nbsp;optional, default: <tt>0.5</tt>
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="arcby-throughVector-toVector-member" class="member">
-<div id="arcby-throughVector-toVector-link" class="member-link">
-<a name="arcby-throughVector-toVector" href="#" onClick="return toggleMember('arcby-throughVector-toVector', false);"><tt><b>arcBy</b>(throughVector, toVector)</tt></a>
-</div>
-<div id="arcby-throughVector-toVector-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('arcby-throughVector-toVector', false);"><tt><b>arcBy</b>(throughVector, toVector)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcby-throughVector-toVector', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>throughVector:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>toVector:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-</div>
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="id-member" class="member">
-<div id="id-link" class="member-link">
-<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-<div id="id-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The unique id of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="name-member" class="member">
-<div id="name-link" class="member-link">
-<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-<div id="name-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The name of the item. If the item has a name, it can be accessed by name
-through its parent's children list.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-10">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and add path to it as a child:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="position-member" class="member">
-<div id="position-link" class="member-link">
-<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-<div id="position-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item's position within the project. This is the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the position of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-11">
-// Create a circle at position { x: 10, y: 10 }
-var circle = new Path.Circle(new Point(10, 10), 10);
-circle.fillColor = 'red';
-
-// Move the circle to { x: 20, y: 20 }
-circle.position = new Point(20, 20);
-
-// Move the circle 100 points to the right and 50 points down
-circle.position += new Point(100, 50);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Changing the x coordinate of an item's position:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-12">
-// Create a circle at position { x: 20, y: 20 }
-var circle = new Path.Circle(new Point(20, 20), 10);
-circle.fillColor = 'red';
-
-// Move the circle 100 points to the right
-circle.position.x += 100;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="style-member" class="member">
-<div id="style-link" class="member-link">
-<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-<div id="style-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The path style of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-13">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.style = {
-	fillColor: 'blue',
-	strokeColor: 'red',
-	strokeWidth: 5
-};
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Copying the style of another item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-14">
-var path = new Path.Circle(new Point(50, 50), 30);
-path.fillColor = 'red';
-
-var path2 = new Path.Circle(new Point(180, 50), 20);
-// Copy the path style of path:
-path2.style = path.style;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Applying the same style object to multiple items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-15">
-var myStyle = {
-	fillColor: 'red',
-	strokeColor: 'blue',
-	strokeWidth: 4
-};
-
-var path = new Path.Circle(new Point(80, 50), 30);
-path.style = myStyle;
-
-var path2 = new Path.Circle(new Point(150, 50), 20);
-path2.style = myStyle;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="visible-member" class="member">
-<div id="visible-link" class="member-link">
-<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-<div id="visible-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
-item won't be drawn.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>true</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Hiding an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-16">
-var path = new Path.Circle(new Point(50, 50), 20);
-path.fillColor = 'red';
-
-// Hide the path:
-path.visible = false;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="blendmode-member" class="member">
-<div id="blendmode-link" class="member-link">
-<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-<div id="blendmode-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The blend mode of the item.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'normal'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
-'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
-'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
-'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's blend mode:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-17">
-// Create a white rectangle in the background
-// with the same dimensions as the view:
-var background = new Path.Rectangle(view.bounds);
-background.fillColor = 'white';
-
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.fillColor = 'blue';
-
-// Set the blend mode of circle2:
-circle2.blendMode = 'multiply';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="opacity-member" class="member">
-<div id="opacity-link" class="member-link">
-<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-<div id="opacity-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Making an item 50% transparent:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-18">
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.style = {
-	fillColor: 'blue',
-	strokeColor: 'green',
-	strokeWidth: 10
-};
-
-// Make circle2 50% transparent:
-circle2.opacity = 0.5;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="guide-member" class="member">
-<div id="guide-link" class="member-link">
-<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-<div id="guide-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item functions as a guide. When set to
-<tt>true</tt>, the item will be drawn at the end as a guide.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="selected-member" class="member">
-<div id="selected-link" class="member-link">
-<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-<div id="selected-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether an item is selected and will also return <tt>true</tt>
-if the item is partially selected (groups with some selected or partially
-selected paths).</p>
-<p>Paper.js draws the visual outlines of selected items on top of your
-project. This can be useful for debugging, as it allows you to see the
-construction of paths, position of path curves, individual segment points
-and bounding boxes of symbol and raster items.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Selecting an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-19">
-var path = new Path.Circle(new Size(80, 50), 35);
-path.selected = true; // Select the path
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="clipmask-member" class="member">
-<div id="clipmask-link" class="member-link">
-<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-<div id="clipmask-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item defines a clip mask. This can only be set on
-paths, compound paths, and text frame objects, and only if the item is
-already contained within a clipping group.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Project Hierarchy</h3>
-
-<div id="project-member" class="member">
-<div id="project-link" class="member-link">
-<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-<div id="project-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The project that this item belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Project.html"><tt>Project</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="layer-member" class="member">
-<div id="layer-link" class="member-link">
-<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-<div id="layer-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The layer that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Layer.html"><tt>Layer</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="parent-member" class="member">
-<div id="parent-link" class="member-link">
-<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-<div id="parent-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var path = new Path();
-
-// New items are placed in the active layer:
-console.log(path.parent == project.activeLayer); // true
-
-var group = new Group();
-group.addChild(path);
-
-// Now the parent of the path has become the group:
-console.log(path.parent == group); // true</pre>
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="children-member" class="member">
-<div id="children-link" class="member-link">
-<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-<div id="children-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The children items contained within this item. Items that define a
-<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
-<p><b>Please note:</b> The children array should not be modified directly
-using array functions. To remove single items from the children list, use
-<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
-<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
-<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Accessing items in the children array:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-20">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// Access the path through the group's children array:
-group.children[0].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Accessing children by name:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-21">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'orange';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Passing an array of items to item.children:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-22">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-var group = new Group();
-group.children = [path];
-
-// The path is the first child of the group:
-group.firstChild.fillColor = 'green';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="firstchild-member" class="member">
-<div id="firstchild-link" class="member-link">
-<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-<div id="firstchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The first item contained within this item. This is a shortcut for
-accessing <tt>item.children[0]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="lastchild-member" class="member">
-<div id="lastchild-link" class="member-link">
-<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-<div id="lastchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The last item contained within this item.This is a shortcut for
-accessing <tt>item.children[item.children.length - 1]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="nextsibling-member" class="member">
-<div id="nextsibling-link" class="member-link">
-<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-<div id="nextsibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The next item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="previoussibling-member" class="member">
-<div id="previoussibling-link" class="member-link">
-<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-<div id="previoussibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The previous item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="index-member" class="member">
-<div id="index-link" class="member-link">
-<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-<div id="index-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The index of this item within the list of its parent's children.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Bounding Rectangles</h3>
-
-<div id="bounds-member" class="member">
-<div id="bounds-link" class="member-link">
-<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-<div id="bounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item excluding stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokebounds-member" class="member">
-<div id="strokebounds-link" class="member-link">
-<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-<div id="strokebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="handlebounds-member" class="member">
-<div id="handlebounds-link" class="member-link">
-<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-<div id="handlebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including handles.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Stroke Style</h3>
-
-<div id="strokecolor-member" class="member">
-<div id="strokecolor-link" class="member-link">
-<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-<div id="strokecolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the stroke color of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-23">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to RGB red:
-circle.strokeColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokewidth-member" class="member">
-<div id="strokewidth-link" class="member-link">
-<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-<div id="strokewidth-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The width of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's stroke width:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-24">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to black:
-circle.strokeColor = 'black';
-
-// Set its stroke width to 10:
-circle.strokeWidth = 10;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokecap-member" class="member">
-<div id="strokecap-link" class="member-link">
-<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-<div id="strokecap-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
-have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'butt'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('round', 'square', 'butt')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke caps:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-25">
-var line = new Path(new Point(80, 50), new Point(420, 50));
-line.strokeColor = 'black';
-line.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-line.selected = true;
-
-// Set the stroke cap of the line to be round:
-line.strokeCap = 'round';
-
-// Copy the path and set its stroke cap to be square:
-var line2 = line.clone();
-line2.position.y += 50;
-line2.strokeCap = 'square';
-
-// Make another copy and set its stroke cap to be butt:
-var line2 = line.clone();
-line2.position.y += 100;
-line2.strokeCap = 'butt';
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-25"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokejoin-member" class="member">
-<div id="strokejoin-link" class="member-link">
-<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-<div id="strokejoin-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the corners of paths when they have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'miter'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt> ('miter', 'round', 'bevel')
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke joins:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-26">
-var path = new Path();
-path.add(new Point(80, 100));
-path.add(new Point(120, 40));
-path.add(new Point(160, 100));
-path.strokeColor = 'black';
-path.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-path.selected = true;
-
-var path2 = path.clone();
-path2.position.x += path2.bounds.width * 1.5;
-path2.strokeJoin = 'round';
-
-var path3 = path2.clone();
-path3.position.x += path3.bounds.width * 1.5;
-path3.strokeJoin = 'bevel';
-</script>
-<div class="canvas"><canvas width="516" height="120" id="canvas-26"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="dashoffset-member" class="member">
-<div id="dashoffset-link" class="member-link">
-<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-<div id="dashoffset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The dash offset of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>0</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="dasharray-member" class="member">
-<div id="dasharray-link" class="member-link">
-<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-<div id="dasharray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>[]</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Array</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-27">
-var path = new Path.Circle(new Point(80, 50), 40);
-path.strokeWidth = 2;
-path.strokeColor = 'black';
-
-// Set the dashed stroke to [10pt dash, 4pt gap]:
-path.dashArray = [10, 4];
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="miterlimit-member" class="member">
-<div id="miterlimit-link" class="member-link">
-<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-<div id="miterlimit-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The miter limit of the stroke.</p>
-<p>When two line segments meet at a sharp angle and miter joins have been
-specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
-extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
-miterLimit imposes a limit on the ratio of the miter length to the
-<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>10</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Fill Style</h3>
-
-<div id="fillcolor-member" class="member">
-<div id="fillcolor-link" class="member-link">
-<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-<div id="fillcolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The fill color of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the fill color of a path to red:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-28">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set the fill color of the circle to RGB red:
-circle.fillColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-<!-- =========================== inherited methods ========================= -->
-<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Clones the item within the same project and places the copy above the
-item.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Cloning items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-29">
-var circle = new Path.Circle(new Point(50, 50), 10);
-circle.fillColor = 'red';
-
-// Make 20 copies of the circle:
-for (var i = 0; i < 20; i++) {
-	var copy = circle.clone();
-
-	// Distribute the copies horizontally, so we can see them:
-	copy.position.x += i * copy.bounds.width;
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="copyto-item-member" class="member">
-<div id="copyto-item-link" class="member-link">
-<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-<div id="copyto-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>When passed a project, copies the item to the project,
-or duplicates it within the same project. When passed an item,
-copies the item into the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
-&mdash;&nbsp;the item or project to
-copy the item to
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rasterize-member" class="member">
-<div id="rasterize-link" class="member-link">
-<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-<div id="rasterize-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rasterizes the item into a newly created Raster object. The item itself
-is not removed after rasterization.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>resolution:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the resolution of the raster in dpi
-&mdash;&nbsp;optional, default: <tt>72</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Rasterizing an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-30">
-var circle = new Path.Circle(new Point(80, 50), 5);
-circle.fillColor = 'red';
-
-// Create a rasterized version of the path:
-var raster = circle.rasterize();
-
-// Move it 100pt to the right:
-raster.position.x += 100;
-
-// Scale the path and the raster by 300%, so we can compare them:
-circle.scale(5);
-raster.scale(5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-30"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="hittest-point-member" class="member">
-<div id="hittest-point-link" class="member-link">
-<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-<div id="hittest-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Perform a hit test on the item (and its children, if it is a
-<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
-<p>The optional options object allows you to control the specifics of the
-hit test and may contain a combination of the following values:</p>
-<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
-points.</p>
-<p><b>options.type:</b> Only hit test again a certain item
-type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
-<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
-<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
-items, taking into account stroke width.</p>
-<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
-<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
-<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
-(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
-<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
-last segment points of open path items.</p>
-<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
-side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
-(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
-<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
-<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The point where the hit test should be performed
-
-</li>
-
-<li>
-<tt>options:</tt> 
-<tt>Object</tt>
-
-&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
-tolerance: 2 }</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
-information about what exactly was hit or <tt>null</tt> if nothing was
-hit.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Operations</h3>
-
-<div id="addchild-item-member" class="member">
-<div id="addchild-item-link" class="member-link">
-<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-<div id="addchild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified item as a child of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be added as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchild-index-item-member" class="member">
-<div id="insertchild-index-item-link" class="member-link">
-<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-<div id="insertchild-index-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="addchildren-items-member" class="member">
-<div id="addchildren-items-link" class="member-link">
-<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-<div id="addchildren-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified items as children of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>items:</tt> 
-<tt>item</tt>
-&mdash;&nbsp;The items to be added as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchildren-index-items-member" class="member">
-<div id="insertchildren-index-items-link" class="member-link">
-<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-<div id="insertchildren-index-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified items as children of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>items:</tt> 
-Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-&mdash;&nbsp;The items to be appended as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertabove-item-member" class="member">
-<div id="insertabove-item-link" class="member-link">
-<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-<div id="insertabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertbelow-item-member" class="member">
-<div id="insertbelow-item-link" class="member-link">
-<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-<div id="insertbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendtop-item-member" class="member">
-<div id="appendtop-item-link" class="member-link">
-<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-<div id="appendtop-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it above all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendbottom-item-member" class="member">
-<div id="appendbottom-item-link" class="member-link">
-<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-<div id="appendbottom-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it below all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="moveabove-item-member" class="member">
-<div id="moveabove-item-link" class="member-link">
-<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-<div id="moveabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="movebelow-item-member" class="member">
-<div id="movebelow-item-link" class="member-link">
-<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-<div id="movebelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves the item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item below which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="remove-member" class="member">
-<div id="remove-link" class="member-link">
-<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-<div id="remove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item from the project. If the item has children, they are also
-removed.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-member" class="member">
-<div id="removechildren-link" class="member-link">
-<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-<div id="removechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-from-member" class="member">
-<div id="removechildren-from-link" class="member-link">
-<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-<div id="removechildren-from-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the children from the specified <tt>from</tt> index to the
-<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>from:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the beginning index, inclusive
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the ending index, exclusive
-&mdash;&nbsp;optional, default: <tt>children.length</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="reversechildren-member" class="member">
-<div id="reversechildren-link" class="member-link">
-<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-<div id="reversechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Reverses the order of the item's children</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Tests</h3>
-
-<div id="haschildren-member" class="member">
-<div id="haschildren-link" class="member-link">
-<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-<div id="haschildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item contains any children items.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isabove-item-member" class="member">
-<div id="isabove-item-link" class="member-link">
-<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-<div id="isabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if this item is above the specified item in the stacking order
-of the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isbelow-item-member" class="member">
-<div id="isbelow-item-link" class="member-link">
-<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-<div id="isbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is below the specified item in the stacking order of
-the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isparent-item-member" class="member">
-<div id="isparent-item-link" class="member-link">
-<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-<div id="isparent-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is the parent of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="ischild-item-member" class="member">
-<div id="ischild-item-link" class="member-link">
-<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-<div id="ischild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is a child of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isdescendant-item-member" class="member">
-<div id="isdescendant-item-link" class="member-link">
-<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-<div id="isdescendant-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is contained within the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isancestor-item-member" class="member">
-<div id="isancestor-item-link" class="member-link">
-<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-<div id="isancestor-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is an ancestor of the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
-item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isgroupedwith-item-member" class="member">
-<div id="isgroupedwith-item-link" class="member-link">
-<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-<div id="isgroupedwith-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the item is grouped with the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Transform Functions</h3>
-
-<div id="scale-scale-member" class="member">
-<div id="scale-scale-link" class="member-link">
-<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-<div id="scale-scale-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given value from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>scale:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item from its center point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-31">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path by 150% from its center point
-circle.scale(1.5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-31"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Scaling an item from a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-32">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path 150% from its bottom left corner
-circle.scale(1.5, circle.bounds.bottomLeft);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-32"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="scale-hor-ver-member" class="member">
-<div id="scale-hor-ver-link" class="member-link">
-<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="scale-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given values from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal scale factor
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item horizontally by 300%:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-33">
-// Create a circle shaped path at { x: 100, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(100, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path horizontally by 300%
-circle.scale(3, 1);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="translate-delta-member" class="member">
-<div id="translate-delta-link" class="member-link">
-<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-<div id="translate-delta-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Translates (moves) the item by the given offset point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>delta:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the offset to translate the item by
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rotate-angle-member" class="member">
-<div id="rotate-angle-link" class="member-link">
-<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-<div id="rotate-angle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rotates the item by a given angle around the given point.</p>
-<p>Angles are oriented clockwise and measured in degrees.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>angle:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the rotation angle
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Rotating an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-34">
-// Create a rectangle shaped path with its top left
-// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
-var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
-path.fillColor = 'black';
-
-// Rotate the path by 30 degrees:
-path.rotate(30);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-34"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Rotating an item around a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-35">
-// Create a rectangle shaped path with its top left
-// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
-var topLeft = new Point(175, 50);
-var size = new Size(100, 100);
-var path = new Path.Rectangle(topLeft, size);
-path.fillColor = 'black';
-
-// Draw a circle shaped path in the center of the view,
-// to show the rotation point:
-var circle = new Path.Circle(view.center, 5);
-circle.fillColor = 'white';
-
-// Each frame rotate the path 3 degrees around the center point
-// of the view:
-function onFrame(event) {
-	path.rotate(3, view.center);
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-35"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="shear-point-member" class="member">
-<div id="shear-point-link" class="member-link">
-<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-<div id="shear-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given value from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="shear-hor-ver-member" class="member">
-<div id="shear-hor-ver-link" class="member-link">
-<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="shear-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given values from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal shear factor.
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical shear factor.
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="transform-matrix-flags-member" class="member">
-<div id="transform-matrix-flags-link" class="member-link">
-<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-<div id="transform-matrix-flags-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>matrix:</tt> 
-<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-
-
-</li>
-
-<li>
-<tt>flags:</tt> 
-
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="fitbounds-rectangle-member" class="member">
-<div id="fitbounds-rectangle-link" class="member-link">
-<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-<div id="fitbounds-rectangle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
-rectangle, without changing its aspect ratio.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rectangle:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-
-
-</li>
-
-<li>
-<tt>fill:</tt> 
-<tt>Boolean</tt>
-
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-36">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-37">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds, true);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-37"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-38">
-var path = new Path.Circle(new Point(80, 50), 30);
-path.fillColor = 'red';
-
-// Fit the path to the bounding rectangle of the view:
-path.fitBounds(view.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-38"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<h3>Remove On Event</h3>
-
-<div id="removeon-object-member" class="member">
-<div id="removeon-object-link" class="member-link">
-<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-<div id="removeon-object-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the events specified in the passed object literal
-occur.</p>
-<p>The object literal can contain the following values:</p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
-fired: <tt>object.move = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
-fired: <tt>object.drag = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
-fired: <tt>object.down = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
-fired: <tt>object.up = true</tt></p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>object:</tt> 
-<tt>Object</tt>
-
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-39">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path on the next onMouseDrag or onMouseDown event:
-	path.removeOn({
-		drag: true,
-		down: true
-	});
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-39"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonmove-member" class="member">
-<div id="removeonmove-link" class="member-link">
-<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-<div id="removeonmove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Move your mouse below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-40">
-function onMouseMove(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next move event, automatically remove the path:
-	path.removeOnMove();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-40"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondown-member" class="member">
-<div id="removeondown-link" class="member-link">
-<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-<div id="removeondown-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-41">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, next time the mouse is pressed:
-	path.removeOnDown();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-41"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondrag-member" class="member">
-<div id="removeondrag-link" class="member-link">
-<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-<div id="removeondrag-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-42">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next drag event, automatically remove the path:
-	path.removeOnDrag();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-42"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonup-member" class="member">
-<div id="removeonup-link" class="member-link">
-<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-<div id="removeonup-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-43">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, when the mouse is released:
-	path.removeOnUp();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-43"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-</div>
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Curve.html b/dist/docs/classes/Curve.html
deleted file mode 100644
index 97d51079..00000000
--- a/dist/docs/classes/Curve.html
+++ /dev/null
@@ -1,878 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Curve</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Curve</h1>
-
-<p>The Curve object represents the parts of a path that are connected by
-two following <a href="../classes/Segment.html"><tt>Segment</tt></a> objects. The curves of a path can be accessed
-through its <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array.</p>
-<p>While a segment describe the anchor point and its incoming and outgoing
-handles, a Curve object describes the curve passing between two such
-segments. Curves and segments represent two different ways of looking at the
-same thing, but focusing on different aspects. Curves for example offer many
-convenient ways to work with parts of the path, finding lengths, positions or
-tangents at given offsets.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7-member" class="member">
-<div id="curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7-link" class="member-link">
-<a name="curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7" href="#" onClick="return toggleMember('curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7', false);"><tt><b>Curve</b>(segment1, segment2, arg2, arg3, arg4, arg5, arg6, arg7)</tt></a>
-</div>
-<div id="curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7', false);"><tt><b>Curve</b>(segment1, segment2, arg2, arg3, arg4, arg5, arg6, arg7)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a new curve object.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>segment1:</tt> 
-<a href="../classes/Segment.html"><tt>Segment</tt></a>
-
-
-</li>
-
-<li>
-<tt>segment2:</tt> 
-<a href="../classes/Segment.html"><tt>Segment</tt></a>
-
-
-</li>
-
-<li>
-<tt>arg2:</tt> 
-
-
-
-</li>
-
-<li>
-<tt>arg3:</tt> 
-
-
-
-</li>
-
-<li>
-<tt>arg4:</tt> 
-
-
-
-</li>
-
-<li>
-<tt>arg5:</tt> 
-
-
-
-</li>
-
-<li>
-<tt>arg6:</tt> 
-
-
-
-</li>
-
-<li>
-<tt>arg7:</tt> 
-
-
-
-</li>
-
-</ul>
-
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="point1-member" class="member">
-<div id="point1-link" class="member-link">
-<a name="point1" href="#" onClick="return toggleMember('point1', false);"><tt><b>point1</b></tt></a>
-</div>
-<div id="point1-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('point1', false);"><tt><b>point1</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point1', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The first anchor point of the curve.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="point2-member" class="member">
-<div id="point2-link" class="member-link">
-<a name="point2" href="#" onClick="return toggleMember('point2', false);"><tt><b>point2</b></tt></a>
-</div>
-<div id="point2-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('point2', false);"><tt><b>point2</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point2', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The second anchor point of the curve.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="handle1-member" class="member">
-<div id="handle1-link" class="member-link">
-<a name="handle1" href="#" onClick="return toggleMember('handle1', false);"><tt><b>handle1</b></tt></a>
-</div>
-<div id="handle1-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('handle1', false);"><tt><b>handle1</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handle1', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The handle point that describes the tangent in the first anchor point.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="handle2-member" class="member">
-<div id="handle2-link" class="member-link">
-<a name="handle2" href="#" onClick="return toggleMember('handle2', false);"><tt><b>handle2</b></tt></a>
-</div>
-<div id="handle2-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('handle2', false);"><tt><b>handle2</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handle2', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The handle point that describes the tangent in the second anchor point.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="segment1-member" class="member">
-<div id="segment1-link" class="member-link">
-<a name="segment1" href="#" onClick="return toggleMember('segment1', false);"><tt><b>segment1</b></tt></a>
-</div>
-<div id="segment1-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('segment1', false);"><tt><b>segment1</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment1', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The first segment of the curve.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Segment.html"><tt>Segment</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="segment2-member" class="member">
-<div id="segment2-link" class="member-link">
-<a name="segment2" href="#" onClick="return toggleMember('segment2', false);"><tt><b>segment2</b></tt></a>
-</div>
-<div id="segment2-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('segment2', false);"><tt><b>segment2</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment2', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The second segment of the curve.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Segment.html"><tt>Segment</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="path-member" class="member">
-<div id="path-link" class="member-link">
-<a name="path" href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
-</div>
-<div id="path-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The path that the curve belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Path.html"><tt>Path</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="index-member" class="member">
-<div id="index-link" class="member-link">
-<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-<div id="index-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The index of the curve in the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="next-member" class="member">
-<div id="next-link" class="member-link">
-<a name="next" href="#" onClick="return toggleMember('next', false);"><tt><b>next</b></tt></a>
-</div>
-<div id="next-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('next', false);"><tt><b>next</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('next', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The next curve in the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array that the curve
-belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Curve.html"><tt>Curve</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="previous-member" class="member">
-<div id="previous-link" class="member-link">
-<a name="previous" href="#" onClick="return toggleMember('previous', false);"><tt><b>previous</b></tt></a>
-</div>
-<div id="previous-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('previous', false);"><tt><b>previous</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previous', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The previous curve in the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array that the curve
-belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Curve.html"><tt>Curve</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="selected-member" class="member">
-<div id="selected-link" class="member-link">
-<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-<div id="selected-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the handles of the curve are selected.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="length-member" class="member">
-<div id="length-link" class="member-link">
-<a name="length" href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
-</div>
-<div id="length-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('length', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The approximated length of the curve in points.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="islinear-member" class="member">
-<div id="islinear-link" class="member-link">
-<a name="islinear" href="#" onClick="return toggleMember('islinear', false);"><tt><b>isLinear</b>()</tt></a>
-</div>
-<div id="islinear-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('islinear', false);"><tt><b>isLinear</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('islinear', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if this curve is linear, meaning it does not define any curve
-handle.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the curve is linear, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="getparameterat-offset-member" class="member">
-<div id="getparameterat-offset-link" class="member-link">
-<a name="getparameterat-offset" href="#" onClick="return toggleMember('getparameterat-offset', false);"><tt><b>getParameterAt</b>(offset[, start])</tt></a>
-</div>
-<div id="getparameterat-offset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getparameterat-offset', false);"><tt><b>getParameterAt</b>(offset[, start])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getparameterat-offset', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>offset:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>start:</tt> 
-<tt>Number</tt>
-
-&mdash;&nbsp;optional
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Number</tt></tt>
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="getpoint-parameter-member" class="member">
-<div id="getpoint-parameter-link" class="member-link">
-<a name="getpoint-parameter" href="#" onClick="return toggleMember('getpoint-parameter', false);"><tt><b>getPoint</b>(parameter)</tt></a>
-</div>
-<div id="getpoint-parameter-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getpoint-parameter', false);"><tt><b>getPoint</b>(parameter)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getpoint-parameter', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns the point on the curve at the specified position.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>parameter:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the position at which to find the point as
-       a value between <tt>0</tt> and <tt>1</tt>.
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="gettangent-parameter-member" class="member">
-<div id="gettangent-parameter-link" class="member-link">
-<a name="gettangent-parameter" href="#" onClick="return toggleMember('gettangent-parameter', false);"><tt><b>getTangent</b>(parameter)</tt></a>
-</div>
-<div id="gettangent-parameter-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('gettangent-parameter', false);"><tt><b>getTangent</b>(parameter)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gettangent-parameter', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns the tangent point on the curve at the specified position.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>parameter:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the position at which to find the tangent
-       point as a value between <tt>0</tt> and <tt>1</tt>.
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="getnormal-parameter-member" class="member">
-<div id="getnormal-parameter-link" class="member-link">
-<a name="getnormal-parameter" href="#" onClick="return toggleMember('getnormal-parameter', false);"><tt><b>getNormal</b>(parameter)</tt></a>
-</div>
-<div id="getnormal-parameter-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getnormal-parameter', false);"><tt><b>getNormal</b>(parameter)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getnormal-parameter', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns the normal point on the curve at the specified position.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>parameter:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the position at which to find the normal
-       point as a value between <tt>0</tt> and <tt>1</tt>.
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="getparameter-point-member" class="member">
-<div id="getparameter-point-link" class="member-link">
-<a name="getparameter-point" href="#" onClick="return toggleMember('getparameter-point', false);"><tt><b>getParameter</b>(point)</tt></a>
-</div>
-<div id="getparameter-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getparameter-point', false);"><tt><b>getParameter</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getparameter-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Number</tt></tt>
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="reverse-member" class="member">
-<div id="reverse-link" class="member-link">
-<a name="reverse" href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
-</div>
-<div id="reverse-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reverse', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a reversed version of the curve, without modifying the curve
-itself.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Curve.html"><tt>Curve</tt></a></tt>&nbsp;&mdash;&nbsp;a reversed version of the curve
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a copy of the curve.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Curve.html"><tt>Curve</tt></a></tt>
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="tostring-member" class="member">
-<div id="tostring-link" class="member-link">
-<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-<div id="tostring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the curve.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/CurveLocation.html b/dist/docs/classes/CurveLocation.html
deleted file mode 100644
index 86dbcaae..00000000
--- a/dist/docs/classes/CurveLocation.html
+++ /dev/null
@@ -1,505 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>CurveLocation</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>CurveLocation</h1>
-
-<p>CurveLocation objects describe a location on <a href="../classes/Curve.html"><tt>Curve</tt></a>
-objects, as defined by the curve <a href="../classes/CurveLocation.html#parameter" onclick="return toggleMember('parameter', true);"><tt>parameter</tt></a>, a value between
-<tt>0</tt> (beginning of the curve) and <tt>1</tt> (end of the curve). If
-the curve is part of a <a href="../classes/Path.html"><tt>Path</tt></a> item, its <a href="../classes/CurveLocation.html#index" onclick="return toggleMember('index', true);"><tt>index</tt></a> inside the
-<a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array is also provided.</p>
-<p>The class is in use in many places, such as
-<a href="../classes/Path.html#getlocationat-offset"><tt>path.getLocationAt(offset)</tt></a>, Path#getNearestLocation(point), etc.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="curvelocation-curve-parameter-point-distance-member" class="member">
-<div id="curvelocation-curve-parameter-point-distance-link" class="member-link">
-<a name="curvelocation-curve-parameter-point-distance" href="#" onClick="return toggleMember('curvelocation-curve-parameter-point-distance', false);"><tt><b>CurveLocation</b>(curve, parameter, point, distance)</tt></a>
-</div>
-<div id="curvelocation-curve-parameter-point-distance-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('curvelocation-curve-parameter-point-distance', false);"><tt><b>CurveLocation</b>(curve, parameter, point, distance)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curvelocation-curve-parameter-point-distance', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a new CurveLocation object.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>curve:</tt> 
-<a href="../classes/Curve.html"><tt>Curve</tt></a>
-
-
-</li>
-
-<li>
-<tt>parameter:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>distance:</tt> 
-
-
-
-</li>
-
-</ul>
-
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="segment-member" class="member">
-<div id="segment-link" class="member-link">
-<a name="segment" href="#" onClick="return toggleMember('segment', false);"><tt><b>segment</b></tt></a>
-</div>
-<div id="segment-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('segment', false);"><tt><b>segment</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The segment of the curve which is closer to the described location.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Segment.html"><tt>Segment</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="curve-member" class="member">
-<div id="curve-link" class="member-link">
-<a name="curve" href="#" onClick="return toggleMember('curve', false);"><tt><b>curve</b></tt></a>
-</div>
-<div id="curve-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('curve', false);"><tt><b>curve</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curve', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The curve by which the location is defined.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Curve.html"><tt>Curve</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="path-member" class="member">
-<div id="path-link" class="member-link">
-<a name="path" href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
-</div>
-<div id="path-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The path this curve belongs to, if any.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="index-member" class="member">
-<div id="index-link" class="member-link">
-<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-<div id="index-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The index of the curve within the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> list, if the
-curve is part of a <a href="../classes/Path.html"><tt>Path</tt></a> item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Index</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="offset-member" class="member">
-<div id="offset-link" class="member-link">
-<a name="offset" href="#" onClick="return toggleMember('offset', false);"><tt><b>offset</b></tt></a>
-</div>
-<div id="offset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('offset', false);"><tt><b>offset</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('offset', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The length of the path from its beginning up to the location described
-by this object.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="curveoffset-member" class="member">
-<div id="curveoffset-link" class="member-link">
-<a name="curveoffset" href="#" onClick="return toggleMember('curveoffset', false);"><tt><b>curveOffset</b></tt></a>
-</div>
-<div id="curveoffset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('curveoffset', false);"><tt><b>curveOffset</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveoffset', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The length of the curve from its beginning up to the location described
-by this object.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="parameter-member" class="member">
-<div id="parameter-link" class="member-link">
-<a name="parameter" href="#" onClick="return toggleMember('parameter', false);"><tt><b>parameter</b></tt></a>
-</div>
-<div id="parameter-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('parameter', false);"><tt><b>parameter</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parameter', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The curve parameter, as used by various bezier curve calculations. It is
-value between <tt>0</tt> (beginning of the curve) and <tt>1</tt> (end of
-the curve).</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="point-member" class="member">
-<div id="point-link" class="member-link">
-<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
-</div>
-<div id="point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The point which is defined by the <a href="../classes/CurveLocation.html#curve" onclick="return toggleMember('curve', true);"><tt>curve</tt></a> and
-<a href="../classes/CurveLocation.html#parameter" onclick="return toggleMember('parameter', true);"><tt>parameter</tt></a>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="tangent-member" class="member">
-<div id="tangent-link" class="member-link">
-<a name="tangent" href="#" onClick="return toggleMember('tangent', false);"><tt><b>tangent</b></tt></a>
-</div>
-<div id="tangent-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tangent', false);"><tt><b>tangent</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tangent', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The tangential vector to the <a href="../classes/CurveLocation.html#curve" onclick="return toggleMember('curve', true);"><tt>curve</tt></a> at the given location.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="normal-member" class="member">
-<div id="normal-link" class="member-link">
-<a name="normal" href="#" onClick="return toggleMember('normal', false);"><tt><b>normal</b></tt></a>
-</div>
-<div id="normal-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('normal', false);"><tt><b>normal</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('normal', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The normal vector to the <a href="../classes/CurveLocation.html#curve" onclick="return toggleMember('curve', true);"><tt>curve</tt></a> at the given location.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="distance-member" class="member">
-<div id="distance-link" class="member-link">
-<a name="distance" href="#" onClick="return toggleMember('distance', false);"><tt><b>distance</b></tt></a>
-</div>
-<div id="distance-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('distance', false);"><tt><b>distance</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('distance', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The distance from the queried point to the returned location.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="tostring-member" class="member">
-<div id="tostring-link" class="member-link">
-<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-<div id="tostring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the curve location.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Event.html b/dist/docs/classes/Event.html
deleted file mode 100644
index d0848eb9..00000000
--- a/dist/docs/classes/Event.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Event</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Event</h1>
-
-
-
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="modifiers-member" class="member">
-<div id="modifiers-link" class="member-link">
-<a name="modifiers" href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
-</div>
-<div id="modifiers-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modifiers', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>object</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Gradient.html b/dist/docs/classes/Gradient.html
deleted file mode 100644
index f95530ea..00000000
--- a/dist/docs/classes/Gradient.html
+++ /dev/null
@@ -1,200 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Gradient</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Gradient</h1>
-
-<p>The Gradient object.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="gradient-stops-member" class="member">
-<div id="gradient-stops-link" class="member-link">
-<a name="gradient-stops" href="#" onClick="return toggleMember('gradient-stops', false);"><tt><b>Gradient</b>(stops[, type])</tt></a>
-</div>
-<div id="gradient-stops-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('gradient-stops', false);"><tt><b>Gradient</b>(stops[, type])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gradient-stops', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a gradient object</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>stops:</tt> 
-Array of <a href="../classes/GradientStop.html"><tt>GradientStop</tt></a> objects
-
-
-</li>
-
-<li>
-<tt>type:</tt> 
-<tt>String</tt>
-&mdash;&nbsp;'linear' or 'radial'
-&mdash;&nbsp;optional, default: <tt>'linear'</tt>
-</li>
-
-</ul>
-
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-<!-- ============================== properties ========================= -->
-	<div class="reference-members"><h2>Operators</h2>
-		
-			<div id="equals-member" class="member">
-<div id="equals-link" class="member-link">
-<a name="equals" href="#" onClick="return toggleMember('equals', false);"><tt><tt><b>==</b> Gradient</tt></tt></a>
-</div>
-<div id="equals-description" class="member-description hidden">
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('equals', false);"><tt><b>==</b> Gradient</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Checks whether the gradient is equal to the supplied gradient.</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> they are equal, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-		
-		
-	</div>
-
-
-</div>
-</div>
-
-		
-	</div>
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="stops-member" class="member">
-<div id="stops-link" class="member-link">
-<a name="stops" href="#" onClick="return toggleMember('stops', false);"><tt><b>stops</b></tt></a>
-</div>
-<div id="stops-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('stops', false);"><tt><b>stops</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('stops', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The gradient stops on the gradient ramp.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/GradientStop.html"><tt>GradientStop</tt></a> objects
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Gradient.html"><tt>Gradient</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the gradient
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/GradientColor.html b/dist/docs/classes/GradientColor.html
deleted file mode 100644
index 76f32a67..00000000
--- a/dist/docs/classes/GradientColor.html
+++ /dev/null
@@ -1,465 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>GradientColor</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>GradientColor</h1>
-
-<p>The GradientColor object.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="gradientcolor-gradient-origin-destination-member" class="member">
-<div id="gradientcolor-gradient-origin-destination-link" class="member-link">
-<a name="gradientcolor-gradient-origin-destination" href="#" onClick="return toggleMember('gradientcolor-gradient-origin-destination', false);"><tt><b>GradientColor</b>(gradient, origin, destination[, hilite])</tt></a>
-</div>
-<div id="gradientcolor-gradient-origin-destination-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('gradientcolor-gradient-origin-destination', false);"><tt><b>GradientColor</b>(gradient, origin, destination[, hilite])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gradientcolor-gradient-origin-destination', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a gradient color object.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>gradient:</tt> 
-<a href="../classes/Gradient.html"><tt>Gradient</tt></a>
-
-
-</li>
-
-<li>
-<tt>origin:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>destination:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>hilite:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> &mdash; Applying a linear gradient color containing evenly distributed color stops:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-// Define two points which we will be using to construct
-// the path and to position the gradient color:
-var topLeft = view.center - [80, 80];
-var bottomRight = view.center + [80, 80];
-
-// Create a rectangle shaped path between
-// the topLeft and bottomRight points:
-var path = new Path.Rectangle(topLeft, bottomRight);
-
-// Create the gradient, passing it an array of colors to be converted
-// to evenly distributed color stops:
-var gradient = new Gradient(['yellow', 'red', 'blue']);
-
-// Have the gradient color run between the topLeft and
-// bottomRight points we defined earlier:
-var gradientColor = new GradientColor(gradient, topLeft, bottomRight);
-
-// Set the fill color of the path to the gradient color:
-path.fillColor = gradientColor;
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-0"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Applying a radial gradient color containing unevenly distributed color stops:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-// Create a circle shaped path at the center of the view
-// with a radius of 80:
-var path = new Path.Circle(view.center, 80);
-
-// The stops array: yellow mixes with red between 0 and 15%,
-// 15% to 30% is pure red, red mixes with black between 30% to 100%:
-var stops = [['yellow', 0], ['red', 0.15], ['red', 0.3], ['black', 0.9]];
-
-// Create a radial gradient using the color stops array:
-var gradient = new Gradient(stops, 'radial');
-
-// We will use the center point of the circle shaped path as
-// the origin point for our gradient color
-var from = path.position;
-
-// The destination point of the gradient color will be the
-// center point of the path + 80pt in horizontal direction:
-var to = path.position + [80, 0];
-
-// Create the gradient color:
-var gradientColor = new GradientColor(gradient, from, to);
-
-// Set the fill color of the path to the gradient color:
-path.fillColor = gradientColor;
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-1"></canvas></div>
-</div>
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="origin-member" class="member">
-<div id="origin-link" class="member-link">
-<a name="origin" href="#" onClick="return toggleMember('origin', false);"><tt><b>origin</b></tt></a>
-</div>
-<div id="origin-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('origin', false);"><tt><b>origin</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('origin', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The origin point of the gradient.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Move the origin point of the gradient, by moving your mouse over the view below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-// Create a rectangle shaped path with the same dimensions as
-// that of the view and fill it with a gradient color:
-var path = new Path.Rectangle(view.bounds);
-var gradient = new Gradient(['yellow', 'red', 'blue']);
-
-// Have the gradient color run from the top left point of the view,
-// to the bottom right point of the view:
-var from = view.bounds.topLeft;
-var to = view.bounds.bottomRight;
-var gradientColor = new GradientColor(gradient, from, to);
-path.fillColor = gradientColor;
-
-function onMouseMove(event) {
-	// Set the origin point of the path's gradient color
-	// to the position of the mouse:
-	path.fillColor.origin = event.point;
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="destination-member" class="member">
-<div id="destination-link" class="member-link">
-<a name="destination" href="#" onClick="return toggleMember('destination', false);"><tt><b>destination</b></tt></a>
-</div>
-<div id="destination-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('destination', false);"><tt><b>destination</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('destination', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The destination point of the gradient.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Move the destination point of the gradient, by moving your mouse over the view below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-// Create a circle shaped path at the center of the view,
-// using 40% of the height of the view as its radius
-// and fill it with a radial gradient color:
-var path = new Path.Circle(view.center, view.bounds.height * 0.4);
-
-var gradient = new Gradient(['yellow', 'red', 'black'], 'radial');
-var from = view.center;
-var to = view.bounds.bottomRight;
-var gradientColor = new GradientColor(gradient, from, to);
-path.fillColor = gradientColor;
-
-function onMouseMove(event) {
-	// Set the origin point of the path's gradient color
-	// to the position of the mouse:
-	path.fillColor.destination = event.point;
-}
-</script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-3"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="hilite-member" class="member">
-<div id="hilite-link" class="member-link">
-<a name="hilite" href="#" onClick="return toggleMember('hilite', false);"><tt><b>hilite</b></tt></a>
-</div>
-<div id="hilite-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hilite', false);"><tt><b>hilite</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hilite', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The hilite point of the gradient.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Move the hilite point of the gradient, by moving your mouse over the view below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-// Create a circle shaped path at the center of the view,
-// using 40% of the height of the view as its radius
-// and fill it with a radial gradient color:
-var path = new Path.Circle(view.center, view.bounds.height * 0.4);
-var gradient = new Gradient(['yellow', 'red', 'black'], 'radial');
-var from = path.position;
-var to = path.bounds.rightCenter;
-var gradientColor = new GradientColor(gradient, from, to);
-path.fillColor = gradientColor;
-
-function onMouseMove(event) {
-	// Set the origin hilite of the path's gradient color
-	// to the position of the mouse:
-	path.fillColor.hilite = event.point;
-}
-</script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-4"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/GradientColor.html"><tt>GradientColor</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the gradient color
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="equals-color-member" class="member">
-<div id="equals-color-link" class="member-link">
-<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
-</div>
-<div id="equals-color-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the gradient color has the same properties as that of the
-supplied one.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>color:</tt> 
-<a href="../classes/GradientColor.html"><tt>GradientColor</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the GradientColor is the same, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="transform-matrix-member" class="member">
-<div id="transform-matrix-link" class="member-link">
-<a name="transform-matrix" href="#" onClick="return toggleMember('transform-matrix', false);"><tt><b>transform</b>(matrix)</tt></a>
-</div>
-<div id="transform-matrix-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('transform-matrix', false);"><tt><b>transform</b>(matrix)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the gradient color by the specified matrix.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>matrix:</tt> 
-<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-&mdash;&nbsp;the matrix to transform the gradient color by
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/GradientStop.html b/dist/docs/classes/GradientStop.html
deleted file mode 100644
index 0e879e34..00000000
--- a/dist/docs/classes/GradientStop.html
+++ /dev/null
@@ -1,258 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>GradientStop</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>GradientStop</h1>
-
-<p>The GradientStop object.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="gradientstop-member" class="member">
-<div id="gradientstop-link" class="member-link">
-<a name="gradientstop" href="#" onClick="return toggleMember('gradientstop', false);"><tt><b>GradientStop</b>([color[, rampPoint]])</tt></a>
-</div>
-<div id="gradientstop-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('gradientstop', false);"><tt><b>GradientStop</b>([color[, rampPoint]])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gradientstop', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a GradientStop object.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>color:</tt> 
-<a href="../classes/Color.html"><tt>Color</tt></a>
-&mdash;&nbsp;the color of the stop
-&mdash;&nbsp;optional, default: <tt>new RgbColor(0, 0, 0)</tt>
-</li>
-
-<li>
-<tt>rampPoint:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the position of the stop on the gradient
-                              ramp {@default 0}
-&mdash;&nbsp;optional, default: <tt>0</tt>
-</li>
-
-</ul>
-
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="ramppoint-member" class="member">
-<div id="ramppoint-link" class="member-link">
-<a name="ramppoint" href="#" onClick="return toggleMember('ramppoint', false);"><tt><b>rampPoint</b></tt></a>
-</div>
-<div id="ramppoint-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('ramppoint', false);"><tt><b>rampPoint</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ramppoint', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The ramp-point of the gradient stop as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Animating a gradient's ramp points:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-// Create a circle shaped path at the center of the view,
-// using 40% of the height of the view as its radius
-// and fill it with a radial gradient color:
-var path = new Path.Circle(view.center, view.bounds.height * 0.4);
-
-// Prepare the gradient color and apply it to the path:
-var colors = [['yellow', 0.05], ['red', 0.2], ['black', 1]];
-var gradient = new Gradient(colors, 'radial');
-var from = path.position;
-var to = path.bounds.rightCenter;
-var gradientColor = new GradientColor(gradient, from, to);
-path.fillColor = gradientColor;
-
-// This function is called each frame of the animation:
-function onFrame(event) {
-	var blackStop = gradient.stops[2];
-	// Animate the rampPoint between 0.7 and 0.9:
-	blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
-
-	// Animate the rampPoint between 0.2 and 0.4
-	var redStop = gradient.stops[1];
-	redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
-}
-</script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-0"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="color-member" class="member">
-<div id="color-link" class="member-link">
-<a name="color" href="#" onClick="return toggleMember('color', false);"><tt><b>color</b></tt></a>
-</div>
-<div id="color-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('color', false);"><tt><b>color</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('color', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color of the gradient stop.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Color.html"><tt>Color</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Animating a gradient's ramp points:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-// Create a circle shaped path at the center of the view,
-// using 40% of the height of the view as its radius
-// and fill it with a radial gradient color:
-var path = new Path.Circle(view.center, view.bounds.height * 0.4);
-
-// Create a radial gradient that mixes red and black evenly:
-var gradient = new Gradient(['red', 'black'], 'radial');
-
-// Fill the path with a gradient color that runs from its center,
-// to the right center of its bounding rectangle:
-var from = path.position;
-var to = path.bounds.rightCenter;
-var gradientColor = new GradientColor(gradient, from, to);
-path.fillColor = gradientColor;
-
-// This function is called each frame of the animation:
-function onFrame(event) {
-	// Change the hue of the first stop's color:
-	gradient.stops[0].color.hue += 1;
-}
-</script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-1"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/GradientColor.html"><tt>GradientColor</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the gradient-stop
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/GrayColor.html b/dist/docs/classes/GrayColor.html
deleted file mode 100644
index c3987ba6..00000000
--- a/dist/docs/classes/GrayColor.html
+++ /dev/null
@@ -1,749 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>GrayColor</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>GrayColor</h1>
-
-<p> Extends <b><a href="../classes/Color.html"><tt>Color</tt></a></b></p>
-
-<p>A GrayColor object is used to represent any gray color value.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="graycolor-gray-member" class="member">
-<div id="graycolor-gray-link" class="member-link">
-<a name="graycolor-gray" href="#" onClick="return toggleMember('graycolor-gray', false);"><tt><b>GrayColor</b>(gray[, alpha])</tt></a>
-</div>
-<div id="graycolor-gray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('graycolor-gray', false);"><tt><b>GrayColor</b>(gray[, alpha])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('graycolor-gray', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a GrayColor object</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>gray:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the amount of gray in the color as a value
-between <tt>0</tt> and <tt>1</tt>
-
-</li>
-
-<li>
-<tt>alpha:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the alpha of the color as a value between
-<tt>0</tt> and <tt>1</tt>
-&mdash;&nbsp;optional
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> &mdash; Creating a GrayColor:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-// Create a circle shaped path at {x: 80, y: 50}
-// with a radius of 30:
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// Create a GrayColor with 50% gray:
-circle.fillColor = new GrayColor(0.5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="gray-member" class="member">
-<div id="gray-link" class="member-link">
-<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
-</div>
-<div id="gray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of gray in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
-
-	
-<div id="type-member" class="member">
-<div id="type-link" class="member-link">
-<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
-</div>
-<div id="type-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Returns the type of the color as a string.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('rgb', 'hsb', 'gray')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var color = new RgbColor(1, 0, 0);
-console.log(color.type); // 'rgb'</pre>
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="alpha-member" class="member">
-<div id="alpha-link" class="member-link">
-<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
-</div>
-<div id="alpha-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
-colors of the different subclasses support alpha values.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A filled path with a half transparent stroke:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// Fill the circle with red and give it a 20pt green stroke:
-circle.style = {
-	fillColor: 'red',
-	strokeColor: 'green',
-	strokeWidth: 20
-};
-
-// Make the stroke half transparent:
-circle.strokeColor.alpha = 0.5;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-	<h3>RGB Components</h3>
-
-<div id="red-member" class="member">
-<div id="red-link" class="member-link">
-<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
-</div>
-<div id="red-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of red in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the amount of red in a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.fillColor = 'blue';
-
-// Blue + red = purple:
-circle.fillColor.red = 1;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="green-member" class="member">
-<div id="green-link" class="member-link">
-<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
-</div>
-<div id="green-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of green in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the amount of green in a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// First we set the fill color to red:
-circle.fillColor = 'red';
-
-// Red + green = yellow:
-circle.fillColor.green = 1;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="blue-member" class="member">
-<div id="blue-link" class="member-link">
-<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
-</div>
-<div id="blue-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of blue in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the amount of blue in a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// First we set the fill color to red:
-circle.fillColor = 'red';
-
-// Red + blue = purple:
-circle.fillColor.blue = 1;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-	<h3>HSB Components</h3>
-
-<div id="hue-member" class="member">
-<div id="hue-link" class="member-link">
-<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
-</div>
-<div id="hue-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The hue of the color as a value in degrees between <tt>0</tt> and
-<tt>360</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the hue of a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-5">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.fillColor = 'red';
-circle.fillColor.hue += 30;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Hue cycling:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-6">
-// Create a rectangle shaped path, using the dimensions
-// of the view:
-var path = new Path.Rectangle(view.bounds);
-path.fillColor = 'red';
-
-function onFrame(event) {
-	path.fillColor.hue += 0.5;
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="saturation-member" class="member">
-<div id="saturation-link" class="member-link">
-<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
-</div>
-<div id="saturation-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="brightness-member" class="member">
-<div id="brightness-link" class="member-link">
-<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
-</div>
-<div id="brightness-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>HSL Components</h3>
-
-<div id="lightness-member" class="member">
-<div id="lightness-link" class="member-link">
-<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
-</div>
-<div id="lightness-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-<!-- =========================== inherited methods ========================= -->
-<div class="reference-members"><h2>Methods inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
-
-	
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the color object
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="hasalpha-member" class="member">
-<div id="hasalpha-link" class="member-link">
-<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
-</div>
-<div id="hasalpha-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the color has an alpha value.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="equals-color-member" class="member">
-<div id="equals-color-link" class="member-link">
-<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
-</div>
-<div id="equals-color-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the component color values of the color are the
-same as those of the supplied one.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>color:</tt> 
-<a href="../classes/Color.html"><tt>Color</tt></a>
-&mdash;&nbsp;the color to compare with
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>String Representations</h3>
-
-<div id="tostring-member" class="member">
-<div id="tostring-link" class="member-link">
-<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-<div id="tostring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the color.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="tocssstring-member" class="member">
-<div id="tocssstring-link" class="member-link">
-<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
-</div>
-<div id="tocssstring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A css string representation of the color.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-</div>
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Group.html b/dist/docs/classes/Group.html
deleted file mode 100644
index 426e459f..00000000
--- a/dist/docs/classes/Group.html
+++ /dev/null
@@ -1,3587 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Group</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Group</h1>
-
-<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
-
-<p>A Group is a collection of items. When you transform a Group, its
-children are treated as a single unit without changing their relative
-positions.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="group-member" class="member">
-<div id="group-link" class="member-link">
-<a name="group" href="#" onClick="return toggleMember('group', false);"><tt><b>Group</b>([children])</tt></a>
-</div>
-<div id="group-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('group', false);"><tt><b>Group</b>([children])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('group', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a new Group item and places it at the top of the active layer.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>children:</tt> 
-Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-&mdash;&nbsp;An array of children that will be added to the
-newly created group.
-&mdash;&nbsp;optional
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> &mdash; Create a group containing two paths:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-var path = new Path(new Point(100, 100), new Point(100, 200));
-var path2 = new Path(new Point(50, 150), new Point(150, 150));
-
-// Create a group from the two paths:
-var group = new Group([path, path2]);
-
-// Set the stroke color of all items in the group:
-group.strokeColor = 'black';
-
-// Move the group to the center of the view:
-group.position = view.center;
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-0"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Click in the view to add a path to the group, which in turn is rotated every frame:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-var group = new Group();
-
-function onMouseDown(event) {
-	// Create a new circle shaped path at the position
-	// of the mouse:
-	var path = new Path.Circle(event.point, 5);
-	path.fillColor = 'black';
-
-	// Add the path to the group's children list:
-	group.addChild(path);
-}
-
-function onFrame(event) {
-	// Rotate the group by 1 degree from
-	// the centerpoint of the view:
-	group.rotate(1, view.center);
-}
-</script>
-<div class="canvas"><canvas width="516" height="320" id="canvas-1"></canvas></div>
-</div>
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="clipped-member" class="member">
-<div id="clipped-link" class="member-link">
-<a name="clipped" href="#" onClick="return toggleMember('clipped', false);"><tt><b>clipped</b></tt></a>
-</div>
-<div id="clipped-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clipped', false);"><tt><b>clipped</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipped', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the group item is to be clipped.</p>
-<p>When setting to <tt>true</tt>, the first child in the group is
-automatically defined as the clipping mask.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="id-member" class="member">
-<div id="id-link" class="member-link">
-<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-<div id="id-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The unique id of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="name-member" class="member">
-<div id="name-link" class="member-link">
-<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-<div id="name-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The name of the item. If the item has a name, it can be accessed by name
-through its parent's children list.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and add path to it as a child:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="position-member" class="member">
-<div id="position-link" class="member-link">
-<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-<div id="position-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item's position within the project. This is the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the position of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-// Create a circle at position { x: 10, y: 10 }
-var circle = new Path.Circle(new Point(10, 10), 10);
-circle.fillColor = 'red';
-
-// Move the circle to { x: 20, y: 20 }
-circle.position = new Point(20, 20);
-
-// Move the circle 100 points to the right and 50 points down
-circle.position += new Point(100, 50);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Changing the x coordinate of an item's position:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-// Create a circle at position { x: 20, y: 20 }
-var circle = new Path.Circle(new Point(20, 20), 10);
-circle.fillColor = 'red';
-
-// Move the circle 100 points to the right
-circle.position.x += 100;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="style-member" class="member">
-<div id="style-link" class="member-link">
-<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-<div id="style-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The path style of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-5">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.style = {
-	fillColor: 'blue',
-	strokeColor: 'red',
-	strokeWidth: 5
-};
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Copying the style of another item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-6">
-var path = new Path.Circle(new Point(50, 50), 30);
-path.fillColor = 'red';
-
-var path2 = new Path.Circle(new Point(180, 50), 20);
-// Copy the path style of path:
-path2.style = path.style;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Applying the same style object to multiple items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-7">
-var myStyle = {
-	fillColor: 'red',
-	strokeColor: 'blue',
-	strokeWidth: 4
-};
-
-var path = new Path.Circle(new Point(80, 50), 30);
-path.style = myStyle;
-
-var path2 = new Path.Circle(new Point(150, 50), 20);
-path2.style = myStyle;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="visible-member" class="member">
-<div id="visible-link" class="member-link">
-<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-<div id="visible-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
-item won't be drawn.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>true</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Hiding an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-8">
-var path = new Path.Circle(new Point(50, 50), 20);
-path.fillColor = 'red';
-
-// Hide the path:
-path.visible = false;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="blendmode-member" class="member">
-<div id="blendmode-link" class="member-link">
-<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-<div id="blendmode-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The blend mode of the item.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'normal'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
-'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
-'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
-'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's blend mode:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-9">
-// Create a white rectangle in the background
-// with the same dimensions as the view:
-var background = new Path.Rectangle(view.bounds);
-background.fillColor = 'white';
-
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.fillColor = 'blue';
-
-// Set the blend mode of circle2:
-circle2.blendMode = 'multiply';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="opacity-member" class="member">
-<div id="opacity-link" class="member-link">
-<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-<div id="opacity-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Making an item 50% transparent:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-10">
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.style = {
-	fillColor: 'blue',
-	strokeColor: 'green',
-	strokeWidth: 10
-};
-
-// Make circle2 50% transparent:
-circle2.opacity = 0.5;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="guide-member" class="member">
-<div id="guide-link" class="member-link">
-<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-<div id="guide-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item functions as a guide. When set to
-<tt>true</tt>, the item will be drawn at the end as a guide.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="selected-member" class="member">
-<div id="selected-link" class="member-link">
-<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-<div id="selected-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether an item is selected and will also return <tt>true</tt>
-if the item is partially selected (groups with some selected or partially
-selected paths).</p>
-<p>Paper.js draws the visual outlines of selected items on top of your
-project. This can be useful for debugging, as it allows you to see the
-construction of paths, position of path curves, individual segment points
-and bounding boxes of symbol and raster items.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Selecting an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-11">
-var path = new Path.Circle(new Size(80, 50), 35);
-path.selected = true; // Select the path
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="clipmask-member" class="member">
-<div id="clipmask-link" class="member-link">
-<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-<div id="clipmask-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item defines a clip mask. This can only be set on
-paths, compound paths, and text frame objects, and only if the item is
-already contained within a clipping group.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Project Hierarchy</h3>
-
-<div id="project-member" class="member">
-<div id="project-link" class="member-link">
-<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-<div id="project-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The project that this item belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Project.html"><tt>Project</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="layer-member" class="member">
-<div id="layer-link" class="member-link">
-<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-<div id="layer-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The layer that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Layer.html"><tt>Layer</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="parent-member" class="member">
-<div id="parent-link" class="member-link">
-<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-<div id="parent-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var path = new Path();
-
-// New items are placed in the active layer:
-console.log(path.parent == project.activeLayer); // true
-
-var group = new Group();
-group.addChild(path);
-
-// Now the parent of the path has become the group:
-console.log(path.parent == group); // true</pre>
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="children-member" class="member">
-<div id="children-link" class="member-link">
-<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-<div id="children-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The children items contained within this item. Items that define a
-<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
-<p><b>Please note:</b> The children array should not be modified directly
-using array functions. To remove single items from the children list, use
-<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
-<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
-<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Accessing items in the children array:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-12">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// Access the path through the group's children array:
-group.children[0].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Accessing children by name:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-13">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'orange';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Passing an array of items to item.children:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-14">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-var group = new Group();
-group.children = [path];
-
-// The path is the first child of the group:
-group.firstChild.fillColor = 'green';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="firstchild-member" class="member">
-<div id="firstchild-link" class="member-link">
-<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-<div id="firstchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The first item contained within this item. This is a shortcut for
-accessing <tt>item.children[0]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="lastchild-member" class="member">
-<div id="lastchild-link" class="member-link">
-<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-<div id="lastchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The last item contained within this item.This is a shortcut for
-accessing <tt>item.children[item.children.length - 1]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="nextsibling-member" class="member">
-<div id="nextsibling-link" class="member-link">
-<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-<div id="nextsibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The next item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="previoussibling-member" class="member">
-<div id="previoussibling-link" class="member-link">
-<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-<div id="previoussibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The previous item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="index-member" class="member">
-<div id="index-link" class="member-link">
-<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-<div id="index-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The index of this item within the list of its parent's children.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Bounding Rectangles</h3>
-
-<div id="bounds-member" class="member">
-<div id="bounds-link" class="member-link">
-<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-<div id="bounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item excluding stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokebounds-member" class="member">
-<div id="strokebounds-link" class="member-link">
-<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-<div id="strokebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="handlebounds-member" class="member">
-<div id="handlebounds-link" class="member-link">
-<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-<div id="handlebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including handles.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Stroke Style</h3>
-
-<div id="strokecolor-member" class="member">
-<div id="strokecolor-link" class="member-link">
-<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-<div id="strokecolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the stroke color of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-15">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to RGB red:
-circle.strokeColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokewidth-member" class="member">
-<div id="strokewidth-link" class="member-link">
-<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-<div id="strokewidth-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The width of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's stroke width:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-16">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to black:
-circle.strokeColor = 'black';
-
-// Set its stroke width to 10:
-circle.strokeWidth = 10;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokecap-member" class="member">
-<div id="strokecap-link" class="member-link">
-<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-<div id="strokecap-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
-have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'butt'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('round', 'square', 'butt')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke caps:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-17">
-var line = new Path(new Point(80, 50), new Point(420, 50));
-line.strokeColor = 'black';
-line.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-line.selected = true;
-
-// Set the stroke cap of the line to be round:
-line.strokeCap = 'round';
-
-// Copy the path and set its stroke cap to be square:
-var line2 = line.clone();
-line2.position.y += 50;
-line2.strokeCap = 'square';
-
-// Make another copy and set its stroke cap to be butt:
-var line2 = line.clone();
-line2.position.y += 100;
-line2.strokeCap = 'butt';
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-17"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokejoin-member" class="member">
-<div id="strokejoin-link" class="member-link">
-<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-<div id="strokejoin-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the corners of paths when they have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'miter'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt> ('miter', 'round', 'bevel')
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke joins:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-18">
-var path = new Path();
-path.add(new Point(80, 100));
-path.add(new Point(120, 40));
-path.add(new Point(160, 100));
-path.strokeColor = 'black';
-path.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-path.selected = true;
-
-var path2 = path.clone();
-path2.position.x += path2.bounds.width * 1.5;
-path2.strokeJoin = 'round';
-
-var path3 = path2.clone();
-path3.position.x += path3.bounds.width * 1.5;
-path3.strokeJoin = 'bevel';
-</script>
-<div class="canvas"><canvas width="516" height="120" id="canvas-18"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="dashoffset-member" class="member">
-<div id="dashoffset-link" class="member-link">
-<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-<div id="dashoffset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The dash offset of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>0</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="dasharray-member" class="member">
-<div id="dasharray-link" class="member-link">
-<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-<div id="dasharray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>[]</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Array</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-19">
-var path = new Path.Circle(new Point(80, 50), 40);
-path.strokeWidth = 2;
-path.strokeColor = 'black';
-
-// Set the dashed stroke to [10pt dash, 4pt gap]:
-path.dashArray = [10, 4];
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="miterlimit-member" class="member">
-<div id="miterlimit-link" class="member-link">
-<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-<div id="miterlimit-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The miter limit of the stroke.</p>
-<p>When two line segments meet at a sharp angle and miter joins have been
-specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
-extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
-miterLimit imposes a limit on the ratio of the miter length to the
-<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>10</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Fill Style</h3>
-
-<div id="fillcolor-member" class="member">
-<div id="fillcolor-link" class="member-link">
-<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-<div id="fillcolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The fill color of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the fill color of a path to red:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-20">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set the fill color of the circle to RGB red:
-circle.fillColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-<!-- =========================== inherited methods ========================= -->
-<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Clones the item within the same project and places the copy above the
-item.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Cloning items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-21">
-var circle = new Path.Circle(new Point(50, 50), 10);
-circle.fillColor = 'red';
-
-// Make 20 copies of the circle:
-for (var i = 0; i < 20; i++) {
-	var copy = circle.clone();
-
-	// Distribute the copies horizontally, so we can see them:
-	copy.position.x += i * copy.bounds.width;
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="copyto-item-member" class="member">
-<div id="copyto-item-link" class="member-link">
-<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-<div id="copyto-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>When passed a project, copies the item to the project,
-or duplicates it within the same project. When passed an item,
-copies the item into the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
-&mdash;&nbsp;the item or project to
-copy the item to
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rasterize-member" class="member">
-<div id="rasterize-link" class="member-link">
-<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-<div id="rasterize-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rasterizes the item into a newly created Raster object. The item itself
-is not removed after rasterization.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>resolution:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the resolution of the raster in dpi
-&mdash;&nbsp;optional, default: <tt>72</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Rasterizing an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-22">
-var circle = new Path.Circle(new Point(80, 50), 5);
-circle.fillColor = 'red';
-
-// Create a rasterized version of the path:
-var raster = circle.rasterize();
-
-// Move it 100pt to the right:
-raster.position.x += 100;
-
-// Scale the path and the raster by 300%, so we can compare them:
-circle.scale(5);
-raster.scale(5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="hittest-point-member" class="member">
-<div id="hittest-point-link" class="member-link">
-<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-<div id="hittest-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Perform a hit test on the item (and its children, if it is a
-<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
-<p>The optional options object allows you to control the specifics of the
-hit test and may contain a combination of the following values:</p>
-<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
-points.</p>
-<p><b>options.type:</b> Only hit test again a certain item
-type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
-<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
-<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
-items, taking into account stroke width.</p>
-<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
-<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
-<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
-(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
-<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
-last segment points of open path items.</p>
-<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
-side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
-(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
-<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
-<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The point where the hit test should be performed
-
-</li>
-
-<li>
-<tt>options:</tt> 
-<tt>Object</tt>
-
-&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
-tolerance: 2 }</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
-information about what exactly was hit or <tt>null</tt> if nothing was
-hit.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Operations</h3>
-
-<div id="addchild-item-member" class="member">
-<div id="addchild-item-link" class="member-link">
-<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-<div id="addchild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified item as a child of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be added as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchild-index-item-member" class="member">
-<div id="insertchild-index-item-link" class="member-link">
-<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-<div id="insertchild-index-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="addchildren-items-member" class="member">
-<div id="addchildren-items-link" class="member-link">
-<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-<div id="addchildren-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified items as children of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>items:</tt> 
-<tt>item</tt>
-&mdash;&nbsp;The items to be added as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchildren-index-items-member" class="member">
-<div id="insertchildren-index-items-link" class="member-link">
-<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-<div id="insertchildren-index-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified items as children of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>items:</tt> 
-Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-&mdash;&nbsp;The items to be appended as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertabove-item-member" class="member">
-<div id="insertabove-item-link" class="member-link">
-<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-<div id="insertabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertbelow-item-member" class="member">
-<div id="insertbelow-item-link" class="member-link">
-<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-<div id="insertbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendtop-item-member" class="member">
-<div id="appendtop-item-link" class="member-link">
-<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-<div id="appendtop-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it above all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendbottom-item-member" class="member">
-<div id="appendbottom-item-link" class="member-link">
-<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-<div id="appendbottom-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it below all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="moveabove-item-member" class="member">
-<div id="moveabove-item-link" class="member-link">
-<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-<div id="moveabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="movebelow-item-member" class="member">
-<div id="movebelow-item-link" class="member-link">
-<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-<div id="movebelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves the item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item below which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="remove-member" class="member">
-<div id="remove-link" class="member-link">
-<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-<div id="remove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item from the project. If the item has children, they are also
-removed.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-member" class="member">
-<div id="removechildren-link" class="member-link">
-<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-<div id="removechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-from-member" class="member">
-<div id="removechildren-from-link" class="member-link">
-<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-<div id="removechildren-from-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the children from the specified <tt>from</tt> index to the
-<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>from:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the beginning index, inclusive
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the ending index, exclusive
-&mdash;&nbsp;optional, default: <tt>children.length</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="reversechildren-member" class="member">
-<div id="reversechildren-link" class="member-link">
-<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-<div id="reversechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Reverses the order of the item's children</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Tests</h3>
-
-<div id="haschildren-member" class="member">
-<div id="haschildren-link" class="member-link">
-<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-<div id="haschildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item contains any children items.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isabove-item-member" class="member">
-<div id="isabove-item-link" class="member-link">
-<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-<div id="isabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if this item is above the specified item in the stacking order
-of the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isbelow-item-member" class="member">
-<div id="isbelow-item-link" class="member-link">
-<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-<div id="isbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is below the specified item in the stacking order of
-the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isparent-item-member" class="member">
-<div id="isparent-item-link" class="member-link">
-<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-<div id="isparent-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is the parent of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="ischild-item-member" class="member">
-<div id="ischild-item-link" class="member-link">
-<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-<div id="ischild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is a child of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isdescendant-item-member" class="member">
-<div id="isdescendant-item-link" class="member-link">
-<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-<div id="isdescendant-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is contained within the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isancestor-item-member" class="member">
-<div id="isancestor-item-link" class="member-link">
-<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-<div id="isancestor-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is an ancestor of the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
-item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isgroupedwith-item-member" class="member">
-<div id="isgroupedwith-item-link" class="member-link">
-<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-<div id="isgroupedwith-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the item is grouped with the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Transform Functions</h3>
-
-<div id="scale-scale-member" class="member">
-<div id="scale-scale-link" class="member-link">
-<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-<div id="scale-scale-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given value from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>scale:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item from its center point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-23">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path by 150% from its center point
-circle.scale(1.5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Scaling an item from a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-24">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path 150% from its bottom left corner
-circle.scale(1.5, circle.bounds.bottomLeft);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="scale-hor-ver-member" class="member">
-<div id="scale-hor-ver-link" class="member-link">
-<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="scale-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given values from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal scale factor
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item horizontally by 300%:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-25">
-// Create a circle shaped path at { x: 100, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(100, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path horizontally by 300%
-circle.scale(3, 1);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="translate-delta-member" class="member">
-<div id="translate-delta-link" class="member-link">
-<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-<div id="translate-delta-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Translates (moves) the item by the given offset point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>delta:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the offset to translate the item by
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rotate-angle-member" class="member">
-<div id="rotate-angle-link" class="member-link">
-<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-<div id="rotate-angle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rotates the item by a given angle around the given point.</p>
-<p>Angles are oriented clockwise and measured in degrees.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>angle:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the rotation angle
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Rotating an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-26">
-// Create a rectangle shaped path with its top left
-// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
-var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
-path.fillColor = 'black';
-
-// Rotate the path by 30 degrees:
-path.rotate(30);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Rotating an item around a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-27">
-// Create a rectangle shaped path with its top left
-// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
-var topLeft = new Point(175, 50);
-var size = new Size(100, 100);
-var path = new Path.Rectangle(topLeft, size);
-path.fillColor = 'black';
-
-// Draw a circle shaped path in the center of the view,
-// to show the rotation point:
-var circle = new Path.Circle(view.center, 5);
-circle.fillColor = 'white';
-
-// Each frame rotate the path 3 degrees around the center point
-// of the view:
-function onFrame(event) {
-	path.rotate(3, view.center);
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-27"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="shear-point-member" class="member">
-<div id="shear-point-link" class="member-link">
-<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-<div id="shear-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given value from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="shear-hor-ver-member" class="member">
-<div id="shear-hor-ver-link" class="member-link">
-<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="shear-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given values from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal shear factor.
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical shear factor.
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="transform-matrix-flags-member" class="member">
-<div id="transform-matrix-flags-link" class="member-link">
-<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-<div id="transform-matrix-flags-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>matrix:</tt> 
-<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-
-
-</li>
-
-<li>
-<tt>flags:</tt> 
-
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="fitbounds-rectangle-member" class="member">
-<div id="fitbounds-rectangle-link" class="member-link">
-<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-<div id="fitbounds-rectangle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
-rectangle, without changing its aspect ratio.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rectangle:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-
-
-</li>
-
-<li>
-<tt>fill:</tt> 
-<tt>Boolean</tt>
-
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-28">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-29">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds, true);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-30">
-var path = new Path.Circle(new Point(80, 50), 30);
-path.fillColor = 'red';
-
-// Fit the path to the bounding rectangle of the view:
-path.fitBounds(view.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-30"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<h3>Remove On Event</h3>
-
-<div id="removeon-object-member" class="member">
-<div id="removeon-object-link" class="member-link">
-<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-<div id="removeon-object-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the events specified in the passed object literal
-occur.</p>
-<p>The object literal can contain the following values:</p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
-fired: <tt>object.move = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
-fired: <tt>object.drag = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
-fired: <tt>object.down = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
-fired: <tt>object.up = true</tt></p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>object:</tt> 
-<tt>Object</tt>
-
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-31">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path on the next onMouseDrag or onMouseDown event:
-	path.removeOn({
-		drag: true,
-		down: true
-	});
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-31"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonmove-member" class="member">
-<div id="removeonmove-link" class="member-link">
-<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-<div id="removeonmove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Move your mouse below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-32">
-function onMouseMove(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next move event, automatically remove the path:
-	path.removeOnMove();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-32"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondown-member" class="member">
-<div id="removeondown-link" class="member-link">
-<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-<div id="removeondown-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-33">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, next time the mouse is pressed:
-	path.removeOnDown();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-33"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondrag-member" class="member">
-<div id="removeondrag-link" class="member-link">
-<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-<div id="removeondrag-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-34">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next drag event, automatically remove the path:
-	path.removeOnDrag();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-34"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonup-member" class="member">
-<div id="removeonup-link" class="member-link">
-<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-<div id="removeonup-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-35">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, when the mouse is released:
-	path.removeOnUp();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-35"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-</div>
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/HitResult.html b/dist/docs/classes/HitResult.html
deleted file mode 100644
index 78b14184..00000000
--- a/dist/docs/classes/HitResult.html
+++ /dev/null
@@ -1,242 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>HitResult</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>HitResult</h1>
-
-<p>A HitResult object contains information about the results of a hit
-test. It is returned by <a href="../classes/Item.html#hittest-point"><tt>item.hitTest(point)</tt></a> and
-<a href="../classes/Project.html#hittest-point"><tt>project.hitTest(point)</tt></a>.</p>
-
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="type-member" class="member">
-<div id="type-link" class="member-link">
-<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
-</div>
-<div id="type-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Describes the type of the hit result. For example, if you hit a segment
-point, the type would be 'segment'.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('segment', 'handle-in', 'handle-out', 'stroke', 'fill',
-'bounds', 'center')</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="name-member" class="member">
-<div id="name-link" class="member-link">
-<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-<div id="name-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>If the HitResult has a <a href="../classes/HitResult.html#type"><tt>hitResult.type</tt></a> of 'bounds', this property
-describes which corner of the bounding rectangle was hit.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('top-left', 'top-right', 'bottom-left', 'bottom-right',
-'left-center', 'top-center', 'right-center', 'bottom-center')</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="item-member" class="member">
-<div id="item-link" class="member-link">
-<a name="item" href="#" onClick="return toggleMember('item', false);"><tt><b>item</b></tt></a>
-</div>
-<div id="item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('item', false);"><tt><b>item</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('item', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item that was hit.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="location-member" class="member">
-<div id="location-link" class="member-link">
-<a name="location" href="#" onClick="return toggleMember('location', false);"><tt><b>location</b></tt></a>
-</div>
-<div id="location-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('location', false);"><tt><b>location</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('location', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>If the HitResult has a type of 'stroke', this property gives more
-information about the exact position that was hit on the path.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="segment-member" class="member">
-<div id="segment-link" class="member-link">
-<a name="segment" href="#" onClick="return toggleMember('segment', false);"><tt><b>segment</b></tt></a>
-</div>
-<div id="segment-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('segment', false);"><tt><b>segment</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>If the HitResult has a type of 'stroke', 'segment', 'handle-in' or
-'handle-out', this property refers to the Segment that was hit or that
-is closest to the hitResult.location on the curve.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Segment.html"><tt>Segment</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="point-member" class="member">
-<div id="point-link" class="member-link">
-<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
-</div>
-<div id="point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The hit point.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/HsbColor.html b/dist/docs/classes/HsbColor.html
deleted file mode 100644
index b02271d5..00000000
--- a/dist/docs/classes/HsbColor.html
+++ /dev/null
@@ -1,766 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>HsbColor</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>HsbColor</h1>
-
-<p> Extends <b><a href="../classes/Color.html"><tt>Color</tt></a></b></p>
-
-<p>An HsbColor object is used to represent any HSB color value.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="hsbcolor-hue-saturation-brightness-member" class="member">
-<div id="hsbcolor-hue-saturation-brightness-link" class="member-link">
-<a name="hsbcolor-hue-saturation-brightness" href="#" onClick="return toggleMember('hsbcolor-hue-saturation-brightness', false);"><tt><b>HsbColor</b>(hue, saturation, brightness[, alpha])</tt></a>
-</div>
-<div id="hsbcolor-hue-saturation-brightness-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hsbcolor-hue-saturation-brightness', false);"><tt><b>HsbColor</b>(hue, saturation, brightness[, alpha])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hsbcolor-hue-saturation-brightness', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates an HsbColor object</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hue:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the hue of the color as a value in degrees between
-<tt>0</tt> and <tt>360</tt>.
-
-</li>
-
-<li>
-<tt>saturation:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the saturation of the color as a value
-between <tt>0</tt> and <tt>1</tt>
-
-</li>
-
-<li>
-<tt>brightness:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the brightness of the color as a value
-between <tt>0</tt> and <tt>1</tt>
-
-</li>
-
-<li>
-<tt>alpha:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the alpha of the color as a value between
-<tt>0</tt> and <tt>1</tt>
-&mdash;&nbsp;optional
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> &mdash; Creating an HsbColor:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-// Create a circle shaped path at {x: 80, y: 50}
-// with a radius of 30:
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// Create an HsbColor with a hue of 90 degrees, a saturation
-// 100% and a brightness of 100%:
-circle.fillColor = new HsbColor(90, 1, 1);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="hue-member" class="member">
-<div id="hue-link" class="member-link">
-<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
-</div>
-<div id="hue-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The hue of the color as a value in degrees between <tt>0</tt> and
-<tt>360</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the hue of a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.fillColor = 'red';
-circle.fillColor.hue += 30;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Hue cycling:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-// Create a rectangle shaped path, using the dimensions
-// of the view:
-var path = new Path.Rectangle(view.bounds);
-path.fillColor = 'red';
-
-function onFrame(event) {
-	path.fillColor.hue += 0.5;
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="saturation-member" class="member">
-<div id="saturation-link" class="member-link">
-<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
-</div>
-<div id="saturation-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="brightness-member" class="member">
-<div id="brightness-link" class="member-link">
-<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
-</div>
-<div id="brightness-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
-
-	
-<div id="type-member" class="member">
-<div id="type-link" class="member-link">
-<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
-</div>
-<div id="type-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Returns the type of the color as a string.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('rgb', 'hsb', 'gray')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var color = new RgbColor(1, 0, 0);
-console.log(color.type); // 'rgb'</pre>
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="alpha-member" class="member">
-<div id="alpha-link" class="member-link">
-<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
-</div>
-<div id="alpha-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
-colors of the different subclasses support alpha values.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A filled path with a half transparent stroke:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// Fill the circle with red and give it a 20pt green stroke:
-circle.style = {
-	fillColor: 'red',
-	strokeColor: 'green',
-	strokeWidth: 20
-};
-
-// Make the stroke half transparent:
-circle.strokeColor.alpha = 0.5;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-	<h3>RGB Components</h3>
-
-<div id="red-member" class="member">
-<div id="red-link" class="member-link">
-<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
-</div>
-<div id="red-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of red in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the amount of red in a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.fillColor = 'blue';
-
-// Blue + red = purple:
-circle.fillColor.red = 1;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="green-member" class="member">
-<div id="green-link" class="member-link">
-<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
-</div>
-<div id="green-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of green in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the amount of green in a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-5">
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// First we set the fill color to red:
-circle.fillColor = 'red';
-
-// Red + green = yellow:
-circle.fillColor.green = 1;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="blue-member" class="member">
-<div id="blue-link" class="member-link">
-<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
-</div>
-<div id="blue-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of blue in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the amount of blue in a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-6">
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// First we set the fill color to red:
-circle.fillColor = 'red';
-
-// Red + blue = purple:
-circle.fillColor.blue = 1;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Gray Components</h3>
-
-<div id="gray-member" class="member">
-<div id="gray-link" class="member-link">
-<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
-</div>
-<div id="gray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of gray in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>HSL Components</h3>
-
-<div id="lightness-member" class="member">
-<div id="lightness-link" class="member-link">
-<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
-</div>
-<div id="lightness-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-<!-- =========================== inherited methods ========================= -->
-<div class="reference-members"><h2>Methods inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
-
-	
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the color object
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="hasalpha-member" class="member">
-<div id="hasalpha-link" class="member-link">
-<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
-</div>
-<div id="hasalpha-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the color has an alpha value.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="equals-color-member" class="member">
-<div id="equals-color-link" class="member-link">
-<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
-</div>
-<div id="equals-color-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the component color values of the color are the
-same as those of the supplied one.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>color:</tt> 
-<a href="../classes/Color.html"><tt>Color</tt></a>
-&mdash;&nbsp;the color to compare with
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>String Representations</h3>
-
-<div id="tostring-member" class="member">
-<div id="tostring-link" class="member-link">
-<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-<div id="tostring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the color.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="tocssstring-member" class="member">
-<div id="tocssstring-link" class="member-link">
-<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
-</div>
-<div id="tocssstring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A css string representation of the color.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-</div>
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/HslColor.html b/dist/docs/classes/HslColor.html
deleted file mode 100644
index c22ca01c..00000000
--- a/dist/docs/classes/HslColor.html
+++ /dev/null
@@ -1,730 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>HslColor</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>HslColor</h1>
-
-<p> Extends <b><a href="../classes/Color.html"><tt>Color</tt></a></b></p>
-
-<p>An HslColor object is used to represent any HSL color value.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="hslcolor-hue-saturation-lightness-member" class="member">
-<div id="hslcolor-hue-saturation-lightness-link" class="member-link">
-<a name="hslcolor-hue-saturation-lightness" href="#" onClick="return toggleMember('hslcolor-hue-saturation-lightness', false);"><tt><b>HslColor</b>(hue, saturation, lightness[, alpha])</tt></a>
-</div>
-<div id="hslcolor-hue-saturation-lightness-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hslcolor-hue-saturation-lightness', false);"><tt><b>HslColor</b>(hue, saturation, lightness[, alpha])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hslcolor-hue-saturation-lightness', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates an HslColor object</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hue:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the hue of the color as a value in degrees between
-<tt>0</tt> and <tt>360</tt>.
-
-</li>
-
-<li>
-<tt>saturation:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the saturation of the color as a value
-between <tt>0</tt> and <tt>1</tt>
-
-</li>
-
-<li>
-<tt>lightness:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the lightness of the color as a value
-between <tt>0</tt> and <tt>1</tt>
-
-</li>
-
-<li>
-<tt>alpha:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the alpha of the color as a value between
-<tt>0</tt> and <tt>1</tt>
-&mdash;&nbsp;optional
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> &mdash; Creating an HslColor:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-// Create a circle shaped path at {x: 80, y: 50}
-// with a radius of 30:
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// Create an HslColor with a hue of 90 degrees, a saturation
-// 100% and a lightness of 50%:
-circle.fillColor = new HslColor(90, 1, 0.5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="hue-member" class="member">
-<div id="hue-link" class="member-link">
-<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
-</div>
-<div id="hue-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The hue of the color as a value in degrees between <tt>0</tt> and
-<tt>360</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="saturation-member" class="member">
-<div id="saturation-link" class="member-link">
-<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
-</div>
-<div id="saturation-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="lightness-member" class="member">
-<div id="lightness-link" class="member-link">
-<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
-</div>
-<div id="lightness-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
-
-	
-<div id="type-member" class="member">
-<div id="type-link" class="member-link">
-<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
-</div>
-<div id="type-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Returns the type of the color as a string.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('rgb', 'hsb', 'gray')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var color = new RgbColor(1, 0, 0);
-console.log(color.type); // 'rgb'</pre>
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="alpha-member" class="member">
-<div id="alpha-link" class="member-link">
-<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
-</div>
-<div id="alpha-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
-colors of the different subclasses support alpha values.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A filled path with a half transparent stroke:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// Fill the circle with red and give it a 20pt green stroke:
-circle.style = {
-	fillColor: 'red',
-	strokeColor: 'green',
-	strokeWidth: 20
-};
-
-// Make the stroke half transparent:
-circle.strokeColor.alpha = 0.5;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-	<h3>RGB Components</h3>
-
-<div id="red-member" class="member">
-<div id="red-link" class="member-link">
-<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
-</div>
-<div id="red-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of red in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the amount of red in a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.fillColor = 'blue';
-
-// Blue + red = purple:
-circle.fillColor.red = 1;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="green-member" class="member">
-<div id="green-link" class="member-link">
-<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
-</div>
-<div id="green-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of green in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the amount of green in a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// First we set the fill color to red:
-circle.fillColor = 'red';
-
-// Red + green = yellow:
-circle.fillColor.green = 1;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="blue-member" class="member">
-<div id="blue-link" class="member-link">
-<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
-</div>
-<div id="blue-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of blue in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the amount of blue in a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// First we set the fill color to red:
-circle.fillColor = 'red';
-
-// Red + blue = purple:
-circle.fillColor.blue = 1;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Gray Components</h3>
-
-<div id="gray-member" class="member">
-<div id="gray-link" class="member-link">
-<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
-</div>
-<div id="gray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of gray in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="brightness-member" class="member">
-<div id="brightness-link" class="member-link">
-<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
-</div>
-<div id="brightness-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-<!-- =========================== inherited methods ========================= -->
-<div class="reference-members"><h2>Methods inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
-
-	
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the color object
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="hasalpha-member" class="member">
-<div id="hasalpha-link" class="member-link">
-<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
-</div>
-<div id="hasalpha-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the color has an alpha value.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="equals-color-member" class="member">
-<div id="equals-color-link" class="member-link">
-<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
-</div>
-<div id="equals-color-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the component color values of the color are the
-same as those of the supplied one.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>color:</tt> 
-<a href="../classes/Color.html"><tt>Color</tt></a>
-&mdash;&nbsp;the color to compare with
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>String Representations</h3>
-
-<div id="tostring-member" class="member">
-<div id="tostring-link" class="member-link">
-<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-<div id="tostring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the color.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="tocssstring-member" class="member">
-<div id="tocssstring-link" class="member-link">
-<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
-</div>
-<div id="tocssstring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A css string representation of the color.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-</div>
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Item.html b/dist/docs/classes/Item.html
deleted file mode 100644
index 43952d74..00000000
--- a/dist/docs/classes/Item.html
+++ /dev/null
@@ -1,3289 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Item</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Item</h1>
-
-<p>The Item type allows you to access and modify the items in
-Paper.js projects. Its functionality is inherited by different project
-item types such as <a href="../classes/Path.html"><tt>Path</tt></a>, <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, <a href="../classes/Group.html"><tt>Group</tt></a>,
-<a href="../classes/Layer.html"><tt>Layer</tt></a> and <a href="../classes/Raster.html"><tt>Raster</tt></a>. They each add a layer of functionality that
-is unique to their type, but share the underlying properties and functions
-that they inherit from Item.</p>
-
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="id-member" class="member">
-<div id="id-link" class="member-link">
-<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-<div id="id-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The unique id of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="name-member" class="member">
-<div id="name-link" class="member-link">
-<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-<div id="name-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The name of the item. If the item has a name, it can be accessed by name
-through its parent's children list.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and add path to it as a child:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="position-member" class="member">
-<div id="position-link" class="member-link">
-<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-<div id="position-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item's position within the project. This is the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the position of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-// Create a circle at position { x: 10, y: 10 }
-var circle = new Path.Circle(new Point(10, 10), 10);
-circle.fillColor = 'red';
-
-// Move the circle to { x: 20, y: 20 }
-circle.position = new Point(20, 20);
-
-// Move the circle 100 points to the right and 50 points down
-circle.position += new Point(100, 50);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Changing the x coordinate of an item's position:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-// Create a circle at position { x: 20, y: 20 }
-var circle = new Path.Circle(new Point(20, 20), 10);
-circle.fillColor = 'red';
-
-// Move the circle 100 points to the right
-circle.position.x += 100;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="style-member" class="member">
-<div id="style-link" class="member-link">
-<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-<div id="style-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The path style of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.style = {
-	fillColor: 'blue',
-	strokeColor: 'red',
-	strokeWidth: 5
-};
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Copying the style of another item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-var path = new Path.Circle(new Point(50, 50), 30);
-path.fillColor = 'red';
-
-var path2 = new Path.Circle(new Point(180, 50), 20);
-// Copy the path style of path:
-path2.style = path.style;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Applying the same style object to multiple items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-5">
-var myStyle = {
-	fillColor: 'red',
-	strokeColor: 'blue',
-	strokeWidth: 4
-};
-
-var path = new Path.Circle(new Point(80, 50), 30);
-path.style = myStyle;
-
-var path2 = new Path.Circle(new Point(150, 50), 20);
-path2.style = myStyle;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="visible-member" class="member">
-<div id="visible-link" class="member-link">
-<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-<div id="visible-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
-item won't be drawn.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>true</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Hiding an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-6">
-var path = new Path.Circle(new Point(50, 50), 20);
-path.fillColor = 'red';
-
-// Hide the path:
-path.visible = false;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="blendmode-member" class="member">
-<div id="blendmode-link" class="member-link">
-<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-<div id="blendmode-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The blend mode of the item.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'normal'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
-'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
-'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
-'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's blend mode:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-7">
-// Create a white rectangle in the background
-// with the same dimensions as the view:
-var background = new Path.Rectangle(view.bounds);
-background.fillColor = 'white';
-
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.fillColor = 'blue';
-
-// Set the blend mode of circle2:
-circle2.blendMode = 'multiply';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="opacity-member" class="member">
-<div id="opacity-link" class="member-link">
-<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-<div id="opacity-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Making an item 50% transparent:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-8">
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.style = {
-	fillColor: 'blue',
-	strokeColor: 'green',
-	strokeWidth: 10
-};
-
-// Make circle2 50% transparent:
-circle2.opacity = 0.5;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="guide-member" class="member">
-<div id="guide-link" class="member-link">
-<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-<div id="guide-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item functions as a guide. When set to
-<tt>true</tt>, the item will be drawn at the end as a guide.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="selected-member" class="member">
-<div id="selected-link" class="member-link">
-<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-<div id="selected-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether an item is selected and will also return <tt>true</tt>
-if the item is partially selected (groups with some selected or partially
-selected paths).</p>
-<p>Paper.js draws the visual outlines of selected items on top of your
-project. This can be useful for debugging, as it allows you to see the
-construction of paths, position of path curves, individual segment points
-and bounding boxes of symbol and raster items.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Selecting an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-9">
-var path = new Path.Circle(new Size(80, 50), 35);
-path.selected = true; // Select the path
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="clipmask-member" class="member">
-<div id="clipmask-link" class="member-link">
-<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-<div id="clipmask-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item defines a clip mask. This can only be set on
-paths, compound paths, and text frame objects, and only if the item is
-already contained within a clipping group.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Project Hierarchy</h3>
-
-<div id="project-member" class="member">
-<div id="project-link" class="member-link">
-<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-<div id="project-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The project that this item belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Project.html"><tt>Project</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="layer-member" class="member">
-<div id="layer-link" class="member-link">
-<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-<div id="layer-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The layer that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Layer.html"><tt>Layer</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="parent-member" class="member">
-<div id="parent-link" class="member-link">
-<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-<div id="parent-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var path = new Path();
-
-// New items are placed in the active layer:
-console.log(path.parent == project.activeLayer); // true
-
-var group = new Group();
-group.addChild(path);
-
-// Now the parent of the path has become the group:
-console.log(path.parent == group); // true</pre>
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="children-member" class="member">
-<div id="children-link" class="member-link">
-<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-<div id="children-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The children items contained within this item. Items that define a
-<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
-<p><b>Please note:</b> The children array should not be modified directly
-using array functions. To remove single items from the children list, use
-<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
-<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
-<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Accessing items in the children array:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-10">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// Access the path through the group's children array:
-group.children[0].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Accessing children by name:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-11">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'orange';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Passing an array of items to item.children:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-12">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-var group = new Group();
-group.children = [path];
-
-// The path is the first child of the group:
-group.firstChild.fillColor = 'green';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="firstchild-member" class="member">
-<div id="firstchild-link" class="member-link">
-<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-<div id="firstchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The first item contained within this item. This is a shortcut for
-accessing <tt>item.children[0]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="lastchild-member" class="member">
-<div id="lastchild-link" class="member-link">
-<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-<div id="lastchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The last item contained within this item.This is a shortcut for
-accessing <tt>item.children[item.children.length - 1]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="nextsibling-member" class="member">
-<div id="nextsibling-link" class="member-link">
-<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-<div id="nextsibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The next item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="previoussibling-member" class="member">
-<div id="previoussibling-link" class="member-link">
-<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-<div id="previoussibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The previous item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="index-member" class="member">
-<div id="index-link" class="member-link">
-<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-<div id="index-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The index of this item within the list of its parent's children.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Bounding Rectangles</h3>
-
-<div id="bounds-member" class="member">
-<div id="bounds-link" class="member-link">
-<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-<div id="bounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item excluding stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="strokebounds-member" class="member">
-<div id="strokebounds-link" class="member-link">
-<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-<div id="strokebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="handlebounds-member" class="member">
-<div id="handlebounds-link" class="member-link">
-<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-<div id="handlebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including handles.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Stroke Style</h3>
-
-<div id="strokecolor-member" class="member">
-<div id="strokecolor-link" class="member-link">
-<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-<div id="strokecolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the stroke color of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-13">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to RGB red:
-circle.strokeColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="strokewidth-member" class="member">
-<div id="strokewidth-link" class="member-link">
-<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-<div id="strokewidth-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The width of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's stroke width:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-14">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to black:
-circle.strokeColor = 'black';
-
-// Set its stroke width to 10:
-circle.strokeWidth = 10;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="strokecap-member" class="member">
-<div id="strokecap-link" class="member-link">
-<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-<div id="strokecap-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
-have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'butt'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('round', 'square', 'butt')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke caps:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-15">
-var line = new Path(new Point(80, 50), new Point(420, 50));
-line.strokeColor = 'black';
-line.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-line.selected = true;
-
-// Set the stroke cap of the line to be round:
-line.strokeCap = 'round';
-
-// Copy the path and set its stroke cap to be square:
-var line2 = line.clone();
-line2.position.y += 50;
-line2.strokeCap = 'square';
-
-// Make another copy and set its stroke cap to be butt:
-var line2 = line.clone();
-line2.position.y += 100;
-line2.strokeCap = 'butt';
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-15"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="strokejoin-member" class="member">
-<div id="strokejoin-link" class="member-link">
-<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-<div id="strokejoin-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the corners of paths when they have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'miter'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt> ('miter', 'round', 'bevel')
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke joins:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-16">
-var path = new Path();
-path.add(new Point(80, 100));
-path.add(new Point(120, 40));
-path.add(new Point(160, 100));
-path.strokeColor = 'black';
-path.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-path.selected = true;
-
-var path2 = path.clone();
-path2.position.x += path2.bounds.width * 1.5;
-path2.strokeJoin = 'round';
-
-var path3 = path2.clone();
-path3.position.x += path3.bounds.width * 1.5;
-path3.strokeJoin = 'bevel';
-</script>
-<div class="canvas"><canvas width="516" height="120" id="canvas-16"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="dashoffset-member" class="member">
-<div id="dashoffset-link" class="member-link">
-<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-<div id="dashoffset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The dash offset of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>0</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="dasharray-member" class="member">
-<div id="dasharray-link" class="member-link">
-<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-<div id="dasharray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>[]</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Array</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-17">
-var path = new Path.Circle(new Point(80, 50), 40);
-path.strokeWidth = 2;
-path.strokeColor = 'black';
-
-// Set the dashed stroke to [10pt dash, 4pt gap]:
-path.dashArray = [10, 4];
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="miterlimit-member" class="member">
-<div id="miterlimit-link" class="member-link">
-<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-<div id="miterlimit-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The miter limit of the stroke.</p>
-<p>When two line segments meet at a sharp angle and miter joins have been
-specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
-extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
-miterLimit imposes a limit on the ratio of the miter length to the
-<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>10</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Fill Style</h3>
-
-<div id="fillcolor-member" class="member">
-<div id="fillcolor-link" class="member-link">
-<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-<div id="fillcolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The fill color of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the fill color of a path to red:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-18">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set the fill color of the circle to RGB red:
-circle.fillColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Clones the item within the same project and places the copy above the
-item.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Cloning items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-19">
-var circle = new Path.Circle(new Point(50, 50), 10);
-circle.fillColor = 'red';
-
-// Make 20 copies of the circle:
-for (var i = 0; i < 20; i++) {
-	var copy = circle.clone();
-
-	// Distribute the copies horizontally, so we can see them:
-	copy.position.x += i * copy.bounds.width;
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="copyto-item-member" class="member">
-<div id="copyto-item-link" class="member-link">
-<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-<div id="copyto-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>When passed a project, copies the item to the project,
-or duplicates it within the same project. When passed an item,
-copies the item into the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
-&mdash;&nbsp;the item or project to
-copy the item to
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="rasterize-member" class="member">
-<div id="rasterize-link" class="member-link">
-<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-<div id="rasterize-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rasterizes the item into a newly created Raster object. The item itself
-is not removed after rasterization.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>resolution:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the resolution of the raster in dpi
-&mdash;&nbsp;optional, default: <tt>72</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Rasterizing an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-20">
-var circle = new Path.Circle(new Point(80, 50), 5);
-circle.fillColor = 'red';
-
-// Create a rasterized version of the path:
-var raster = circle.rasterize();
-
-// Move it 100pt to the right:
-raster.position.x += 100;
-
-// Scale the path and the raster by 300%, so we can compare them:
-circle.scale(5);
-raster.scale(5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="hittest-point-member" class="member">
-<div id="hittest-point-link" class="member-link">
-<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-<div id="hittest-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Perform a hit test on the item (and its children, if it is a
-<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
-<p>The optional options object allows you to control the specifics of the
-hit test and may contain a combination of the following values:</p>
-<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
-points.</p>
-<p><b>options.type:</b> Only hit test again a certain item
-type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
-<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
-<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
-items, taking into account stroke width.</p>
-<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
-<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
-<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
-(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
-<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
-last segment points of open path items.</p>
-<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
-side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
-(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
-<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
-<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The point where the hit test should be performed
-
-</li>
-
-<li>
-<tt>options:</tt> 
-<tt>Object</tt>
-
-&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
-tolerance: 2 }</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
-information about what exactly was hit or <tt>null</tt> if nothing was
-hit.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<h3>Hierarchy Operations</h3>
-
-<div id="addchild-item-member" class="member">
-<div id="addchild-item-link" class="member-link">
-<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-<div id="addchild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified item as a child of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be added as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="insertchild-index-item-member" class="member">
-<div id="insertchild-index-item-link" class="member-link">
-<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-<div id="insertchild-index-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="addchildren-items-member" class="member">
-<div id="addchildren-items-link" class="member-link">
-<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-<div id="addchildren-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified items as children of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>items:</tt> 
-<tt>item</tt>
-&mdash;&nbsp;The items to be added as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="insertchildren-index-items-member" class="member">
-<div id="insertchildren-index-items-link" class="member-link">
-<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-<div id="insertchildren-index-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified items as children of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>items:</tt> 
-Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-&mdash;&nbsp;The items to be appended as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="insertabove-item-member" class="member">
-<div id="insertabove-item-link" class="member-link">
-<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-<div id="insertabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="insertbelow-item-member" class="member">
-<div id="insertbelow-item-link" class="member-link">
-<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-<div id="insertbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="remove-member" class="member">
-<div id="remove-link" class="member-link">
-<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-<div id="remove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item from the project. If the item has children, they are also
-removed.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="removechildren-member" class="member">
-<div id="removechildren-link" class="member-link">
-<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-<div id="removechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="removechildren-from-member" class="member">
-<div id="removechildren-from-link" class="member-link">
-<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-<div id="removechildren-from-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the children from the specified <tt>from</tt> index to the
-<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>from:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the beginning index, inclusive
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the ending index, exclusive
-&mdash;&nbsp;optional, default: <tt>children.length</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="reversechildren-member" class="member">
-<div id="reversechildren-link" class="member-link">
-<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-<div id="reversechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Reverses the order of the item's children</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<h3>Hierarchy Tests</h3>
-
-<div id="haschildren-member" class="member">
-<div id="haschildren-link" class="member-link">
-<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-<div id="haschildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item contains any children items.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="isabove-item-member" class="member">
-<div id="isabove-item-link" class="member-link">
-<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-<div id="isabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if this item is above the specified item in the stacking order
-of the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="isbelow-item-member" class="member">
-<div id="isbelow-item-link" class="member-link">
-<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-<div id="isbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is below the specified item in the stacking order of
-the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="isparent-item-member" class="member">
-<div id="isparent-item-link" class="member-link">
-<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-<div id="isparent-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is the parent of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="ischild-item-member" class="member">
-<div id="ischild-item-link" class="member-link">
-<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-<div id="ischild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is a child of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="isdescendant-item-member" class="member">
-<div id="isdescendant-item-link" class="member-link">
-<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-<div id="isdescendant-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is contained within the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="isancestor-item-member" class="member">
-<div id="isancestor-item-link" class="member-link">
-<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-<div id="isancestor-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is an ancestor of the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
-item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="isgroupedwith-item-member" class="member">
-<div id="isgroupedwith-item-link" class="member-link">
-<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-<div id="isgroupedwith-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the item is grouped with the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<h3>Transform Functions</h3>
-
-<div id="scale-scale-member" class="member">
-<div id="scale-scale-link" class="member-link">
-<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-<div id="scale-scale-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given value from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>scale:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item from its center point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-21">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path by 150% from its center point
-circle.scale(1.5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Scaling an item from a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-22">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path 150% from its bottom left corner
-circle.scale(1.5, circle.bounds.bottomLeft);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="scale-hor-ver-member" class="member">
-<div id="scale-hor-ver-link" class="member-link">
-<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="scale-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given values from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal scale factor
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item horizontally by 300%:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-23">
-// Create a circle shaped path at { x: 100, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(100, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path horizontally by 300%
-circle.scale(3, 1);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="translate-delta-member" class="member">
-<div id="translate-delta-link" class="member-link">
-<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-<div id="translate-delta-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Translates (moves) the item by the given offset point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>delta:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the offset to translate the item by
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="rotate-angle-member" class="member">
-<div id="rotate-angle-link" class="member-link">
-<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-<div id="rotate-angle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rotates the item by a given angle around the given point.</p>
-<p>Angles are oriented clockwise and measured in degrees.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>angle:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the rotation angle
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Rotating an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-24">
-// Create a rectangle shaped path with its top left
-// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
-var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
-path.fillColor = 'black';
-
-// Rotate the path by 30 degrees:
-path.rotate(30);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Rotating an item around a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-25">
-// Create a rectangle shaped path with its top left
-// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
-var topLeft = new Point(175, 50);
-var size = new Size(100, 100);
-var path = new Path.Rectangle(topLeft, size);
-path.fillColor = 'black';
-
-// Draw a circle shaped path in the center of the view,
-// to show the rotation point:
-var circle = new Path.Circle(view.center, 5);
-circle.fillColor = 'white';
-
-// Each frame rotate the path 3 degrees around the center point
-// of the view:
-function onFrame(event) {
-	path.rotate(3, view.center);
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-25"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="shear-point-member" class="member">
-<div id="shear-point-link" class="member-link">
-<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-<div id="shear-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given value from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="shear-hor-ver-member" class="member">
-<div id="shear-hor-ver-link" class="member-link">
-<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="shear-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given values from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal shear factor.
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical shear factor.
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="transform-matrix-flags-member" class="member">
-<div id="transform-matrix-flags-link" class="member-link">
-<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-<div id="transform-matrix-flags-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>matrix:</tt> 
-<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-
-
-</li>
-
-<li>
-<tt>flags:</tt> 
-
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="fitbounds-rectangle-member" class="member">
-<div id="fitbounds-rectangle-link" class="member-link">
-<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-<div id="fitbounds-rectangle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
-rectangle, without changing its aspect ratio.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rectangle:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-
-
-</li>
-
-<li>
-<tt>fill:</tt> 
-<tt>Boolean</tt>
-
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-26">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-27">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds, true);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-28">
-var path = new Path.Circle(new Point(80, 50), 30);
-path.fillColor = 'red';
-
-// Fit the path to the bounding rectangle of the view:
-path.fitBounds(view.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-28"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<h3>Remove On Event</h3>
-
-<div id="removeon-object-member" class="member">
-<div id="removeon-object-link" class="member-link">
-<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-<div id="removeon-object-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the events specified in the passed object literal
-occur.</p>
-<p>The object literal can contain the following values:</p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
-fired: <tt>object.move = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
-fired: <tt>object.drag = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
-fired: <tt>object.down = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
-fired: <tt>object.up = true</tt></p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>object:</tt> 
-<tt>Object</tt>
-
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-29">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path on the next onMouseDrag or onMouseDown event:
-	path.removeOn({
-		drag: true,
-		down: true
-	});
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-29"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="removeonmove-member" class="member">
-<div id="removeonmove-link" class="member-link">
-<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-<div id="removeonmove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Move your mouse below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-30">
-function onMouseMove(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next move event, automatically remove the path:
-	path.removeOnMove();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-30"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="removeondown-member" class="member">
-<div id="removeondown-link" class="member-link">
-<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-<div id="removeondown-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-31">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, next time the mouse is pressed:
-	path.removeOnDown();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-31"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="removeondrag-member" class="member">
-<div id="removeondrag-link" class="member-link">
-<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-<div id="removeondrag-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-32">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next drag event, automatically remove the path:
-	path.removeOnDrag();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-32"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="removeonup-member" class="member">
-<div id="removeonup-link" class="member-link">
-<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-<div id="removeonup-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-33">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, when the mouse is released:
-	path.removeOnUp();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-33"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Key.html b/dist/docs/classes/Key.html
deleted file mode 100644
index 4f5f511f..00000000
--- a/dist/docs/classes/Key.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Key</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Key</h1>
-
-
-
-</div>
-
-
-
-
-
-
-
-
-	<div class="reference-members"><h2>Static Methods</h2>
-		
-			
-<div id="isdown-key-member" class="member">
-<div id="isdown-key-link" class="member-link">
-<a name="isdown-key" href="#" onClick="return toggleMember('isdown-key', false);"><tt><b>Key.isDown</b>(key)</tt></a>
-</div>
-<div id="isdown-key-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isdown-key', false);"><tt><b>Key.isDown</b>(key)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdown-key', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified key is pressed.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>key:</tt> 
-<tt>String</tt>
-&mdash;&nbsp;One of: 'backspace', 'enter', 'shift', 'control',
-'option', 'pause', 'caps-lock', 'escape', 'space', 'end', 'home',
-'left', 'up', 'right', 'down', 'delete', 'command'
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the key is pressed, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Whenever the user clicks, create a circle shaped path. If the 'a' key is pressed, fill it with red, otherwise fill it with blue:
-</p>
-
-
-<pre class="code">function onMouseDown(event) {
-	var path = new Path.Circle(event.point, 10);
-	if(Key.isDown('a')) {
-		path.fillColor = 'red';
-	} else {
-		path.fillColor = 'blue';
-	}
-}</pre>
-
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/KeyEvent.html b/dist/docs/classes/KeyEvent.html
deleted file mode 100644
index 3a19161f..00000000
--- a/dist/docs/classes/KeyEvent.html
+++ /dev/null
@@ -1,220 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>KeyEvent</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>KeyEvent</h1>
-
-<p> Extends <b><a href="../classes/Event.html"><tt>Event</tt></a></b></p>
-
-<p>KeyEvent The KeyEvent object is received by the <a href="../classes/Tool.html"><tt>Tool</tt></a>'s
-keyboard handlers <a href="../classes/Tool.html#onkeydown"><tt>tool.onKeyDown</tt></a>, <a href="../classes/Tool.html#onkeyup"><tt>tool.onKeyUp</tt></a>,
-The KeyEvent object is the only parameter passed to these functions
-and contains information about the keyboard event.</p>
-
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="type-member" class="member">
-<div id="type-link" class="member-link">
-<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
-</div>
-<div id="type-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The type of key event.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('keydown', 'keyup')</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="character-member" class="member">
-<div id="character-link" class="member-link">
-<a name="character" href="#" onClick="return toggleMember('character', false);"><tt><b>character</b></tt></a>
-</div>
-<div id="character-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('character', false);"><tt><b>character</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('character', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The string character of the key that caused this key event.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="key-member" class="member">
-<div id="key-link" class="member-link">
-<a name="key" href="#" onClick="return toggleMember('key', false);"><tt><b>key</b></tt></a>
-</div>
-<div id="key-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('key', false);"><tt><b>key</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('key', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The key that caused this key event.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="tostring-member" class="member">
-<div id="tostring-link" class="member-link">
-<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-<div id="tostring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the key event.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
-
-	
-<div id="modifiers-member" class="member">
-<div id="modifiers-link" class="member-link">
-<a name="modifiers" href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
-</div>
-<div id="modifiers-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modifiers', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>object</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Layer.html b/dist/docs/classes/Layer.html
deleted file mode 100644
index 3f626910..00000000
--- a/dist/docs/classes/Layer.html
+++ /dev/null
@@ -1,3588 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Layer</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Layer</h1>
-
-<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b>, <b><a href="../classes/Group.html"><tt>Group</tt></a></b></p>
-
-<p>The Layer item represents a layer in a Paper.js project.</p>
-<p>The layer which is currently active can be accessed through
-<a href="../classes/Project.html#activelayer"><tt>project.activeLayer</tt></a>.</p>
-<p>An array of all layers in a project can be accessed through
-<a href="../classes/Project.html#layers"><tt>project.layers</tt></a>.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="layer-member" class="member">
-<div id="layer-link" class="member-link">
-<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>Layer</b>([children])</tt></a>
-</div>
-<div id="layer-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('layer', false);"><tt><b>Layer</b>([children])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a new Layer item and places it at the end of the
-<a href="../classes/Project.html#layers"><tt>project.layers</tt></a> array. The newly created layer will be activated,
-so all newly created items will be placed within it.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>children:</tt> 
-Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-&mdash;&nbsp;An array of items that will be added to the
-newly created layer.
-&mdash;&nbsp;optional
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var layer = new Layer();</pre>
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="activate-member" class="member">
-<div id="activate-link" class="member-link">
-<a name="activate" href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
-</div>
-<div id="activate-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activate', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Activates the layer.</p>
-	
-	
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var layer = new Layer();
-layer.activate();
-console.log(project.activeLayer == layer); // true</pre>
-
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="id-member" class="member">
-<div id="id-link" class="member-link">
-<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-<div id="id-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The unique id of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="name-member" class="member">
-<div id="name-link" class="member-link">
-<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-<div id="name-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The name of the item. If the item has a name, it can be accessed by name
-through its parent's children list.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and add path to it as a child:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="position-member" class="member">
-<div id="position-link" class="member-link">
-<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-<div id="position-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item's position within the project. This is the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the position of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-// Create a circle at position { x: 10, y: 10 }
-var circle = new Path.Circle(new Point(10, 10), 10);
-circle.fillColor = 'red';
-
-// Move the circle to { x: 20, y: 20 }
-circle.position = new Point(20, 20);
-
-// Move the circle 100 points to the right and 50 points down
-circle.position += new Point(100, 50);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Changing the x coordinate of an item's position:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-// Create a circle at position { x: 20, y: 20 }
-var circle = new Path.Circle(new Point(20, 20), 10);
-circle.fillColor = 'red';
-
-// Move the circle 100 points to the right
-circle.position.x += 100;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="style-member" class="member">
-<div id="style-link" class="member-link">
-<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-<div id="style-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The path style of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.style = {
-	fillColor: 'blue',
-	strokeColor: 'red',
-	strokeWidth: 5
-};
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Copying the style of another item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-var path = new Path.Circle(new Point(50, 50), 30);
-path.fillColor = 'red';
-
-var path2 = new Path.Circle(new Point(180, 50), 20);
-// Copy the path style of path:
-path2.style = path.style;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Applying the same style object to multiple items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-5">
-var myStyle = {
-	fillColor: 'red',
-	strokeColor: 'blue',
-	strokeWidth: 4
-};
-
-var path = new Path.Circle(new Point(80, 50), 30);
-path.style = myStyle;
-
-var path2 = new Path.Circle(new Point(150, 50), 20);
-path2.style = myStyle;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="visible-member" class="member">
-<div id="visible-link" class="member-link">
-<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-<div id="visible-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
-item won't be drawn.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>true</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Hiding an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-6">
-var path = new Path.Circle(new Point(50, 50), 20);
-path.fillColor = 'red';
-
-// Hide the path:
-path.visible = false;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="blendmode-member" class="member">
-<div id="blendmode-link" class="member-link">
-<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-<div id="blendmode-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The blend mode of the item.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'normal'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
-'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
-'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
-'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's blend mode:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-7">
-// Create a white rectangle in the background
-// with the same dimensions as the view:
-var background = new Path.Rectangle(view.bounds);
-background.fillColor = 'white';
-
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.fillColor = 'blue';
-
-// Set the blend mode of circle2:
-circle2.blendMode = 'multiply';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="opacity-member" class="member">
-<div id="opacity-link" class="member-link">
-<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-<div id="opacity-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Making an item 50% transparent:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-8">
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.style = {
-	fillColor: 'blue',
-	strokeColor: 'green',
-	strokeWidth: 10
-};
-
-// Make circle2 50% transparent:
-circle2.opacity = 0.5;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="guide-member" class="member">
-<div id="guide-link" class="member-link">
-<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-<div id="guide-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item functions as a guide. When set to
-<tt>true</tt>, the item will be drawn at the end as a guide.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="selected-member" class="member">
-<div id="selected-link" class="member-link">
-<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-<div id="selected-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether an item is selected and will also return <tt>true</tt>
-if the item is partially selected (groups with some selected or partially
-selected paths).</p>
-<p>Paper.js draws the visual outlines of selected items on top of your
-project. This can be useful for debugging, as it allows you to see the
-construction of paths, position of path curves, individual segment points
-and bounding boxes of symbol and raster items.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Selecting an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-9">
-var path = new Path.Circle(new Size(80, 50), 35);
-path.selected = true; // Select the path
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="clipmask-member" class="member">
-<div id="clipmask-link" class="member-link">
-<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-<div id="clipmask-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item defines a clip mask. This can only be set on
-paths, compound paths, and text frame objects, and only if the item is
-already contained within a clipping group.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Project Hierarchy</h3>
-
-<div id="project-member" class="member">
-<div id="project-link" class="member-link">
-<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-<div id="project-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The project that this item belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Project.html"><tt>Project</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="layer-member" class="member">
-<div id="layer-link" class="member-link">
-<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-<div id="layer-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The layer that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Layer.html"><tt>Layer</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="parent-member" class="member">
-<div id="parent-link" class="member-link">
-<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-<div id="parent-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var path = new Path();
-
-// New items are placed in the active layer:
-console.log(path.parent == project.activeLayer); // true
-
-var group = new Group();
-group.addChild(path);
-
-// Now the parent of the path has become the group:
-console.log(path.parent == group); // true</pre>
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="children-member" class="member">
-<div id="children-link" class="member-link">
-<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-<div id="children-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The children items contained within this item. Items that define a
-<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
-<p><b>Please note:</b> The children array should not be modified directly
-using array functions. To remove single items from the children list, use
-<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
-<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
-<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Accessing items in the children array:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-10">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// Access the path through the group's children array:
-group.children[0].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Accessing children by name:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-11">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'orange';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Passing an array of items to item.children:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-12">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-var group = new Group();
-group.children = [path];
-
-// The path is the first child of the group:
-group.firstChild.fillColor = 'green';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="firstchild-member" class="member">
-<div id="firstchild-link" class="member-link">
-<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-<div id="firstchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The first item contained within this item. This is a shortcut for
-accessing <tt>item.children[0]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="lastchild-member" class="member">
-<div id="lastchild-link" class="member-link">
-<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-<div id="lastchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The last item contained within this item.This is a shortcut for
-accessing <tt>item.children[item.children.length - 1]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="nextsibling-member" class="member">
-<div id="nextsibling-link" class="member-link">
-<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-<div id="nextsibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The next item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="previoussibling-member" class="member">
-<div id="previoussibling-link" class="member-link">
-<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-<div id="previoussibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The previous item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="index-member" class="member">
-<div id="index-link" class="member-link">
-<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-<div id="index-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The index of this item within the list of its parent's children.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Bounding Rectangles</h3>
-
-<div id="bounds-member" class="member">
-<div id="bounds-link" class="member-link">
-<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-<div id="bounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item excluding stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokebounds-member" class="member">
-<div id="strokebounds-link" class="member-link">
-<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-<div id="strokebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="handlebounds-member" class="member">
-<div id="handlebounds-link" class="member-link">
-<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-<div id="handlebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including handles.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Stroke Style</h3>
-
-<div id="strokecolor-member" class="member">
-<div id="strokecolor-link" class="member-link">
-<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-<div id="strokecolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the stroke color of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-13">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to RGB red:
-circle.strokeColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokewidth-member" class="member">
-<div id="strokewidth-link" class="member-link">
-<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-<div id="strokewidth-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The width of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's stroke width:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-14">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to black:
-circle.strokeColor = 'black';
-
-// Set its stroke width to 10:
-circle.strokeWidth = 10;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokecap-member" class="member">
-<div id="strokecap-link" class="member-link">
-<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-<div id="strokecap-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
-have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'butt'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('round', 'square', 'butt')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke caps:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-15">
-var line = new Path(new Point(80, 50), new Point(420, 50));
-line.strokeColor = 'black';
-line.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-line.selected = true;
-
-// Set the stroke cap of the line to be round:
-line.strokeCap = 'round';
-
-// Copy the path and set its stroke cap to be square:
-var line2 = line.clone();
-line2.position.y += 50;
-line2.strokeCap = 'square';
-
-// Make another copy and set its stroke cap to be butt:
-var line2 = line.clone();
-line2.position.y += 100;
-line2.strokeCap = 'butt';
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-15"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokejoin-member" class="member">
-<div id="strokejoin-link" class="member-link">
-<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-<div id="strokejoin-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the corners of paths when they have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'miter'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt> ('miter', 'round', 'bevel')
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke joins:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-16">
-var path = new Path();
-path.add(new Point(80, 100));
-path.add(new Point(120, 40));
-path.add(new Point(160, 100));
-path.strokeColor = 'black';
-path.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-path.selected = true;
-
-var path2 = path.clone();
-path2.position.x += path2.bounds.width * 1.5;
-path2.strokeJoin = 'round';
-
-var path3 = path2.clone();
-path3.position.x += path3.bounds.width * 1.5;
-path3.strokeJoin = 'bevel';
-</script>
-<div class="canvas"><canvas width="516" height="120" id="canvas-16"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="dashoffset-member" class="member">
-<div id="dashoffset-link" class="member-link">
-<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-<div id="dashoffset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The dash offset of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>0</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="dasharray-member" class="member">
-<div id="dasharray-link" class="member-link">
-<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-<div id="dasharray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>[]</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Array</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-17">
-var path = new Path.Circle(new Point(80, 50), 40);
-path.strokeWidth = 2;
-path.strokeColor = 'black';
-
-// Set the dashed stroke to [10pt dash, 4pt gap]:
-path.dashArray = [10, 4];
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="miterlimit-member" class="member">
-<div id="miterlimit-link" class="member-link">
-<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-<div id="miterlimit-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The miter limit of the stroke.</p>
-<p>When two line segments meet at a sharp angle and miter joins have been
-specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
-extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
-miterLimit imposes a limit on the ratio of the miter length to the
-<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>10</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Fill Style</h3>
-
-<div id="fillcolor-member" class="member">
-<div id="fillcolor-link" class="member-link">
-<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-<div id="fillcolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The fill color of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the fill color of a path to red:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-18">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set the fill color of the circle to RGB red:
-circle.fillColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-<!-- =========================== inherited methods ========================= -->
-<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Clones the item within the same project and places the copy above the
-item.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Cloning items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-19">
-var circle = new Path.Circle(new Point(50, 50), 10);
-circle.fillColor = 'red';
-
-// Make 20 copies of the circle:
-for (var i = 0; i < 20; i++) {
-	var copy = circle.clone();
-
-	// Distribute the copies horizontally, so we can see them:
-	copy.position.x += i * copy.bounds.width;
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="copyto-item-member" class="member">
-<div id="copyto-item-link" class="member-link">
-<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-<div id="copyto-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>When passed a project, copies the item to the project,
-or duplicates it within the same project. When passed an item,
-copies the item into the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
-&mdash;&nbsp;the item or project to
-copy the item to
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rasterize-member" class="member">
-<div id="rasterize-link" class="member-link">
-<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-<div id="rasterize-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rasterizes the item into a newly created Raster object. The item itself
-is not removed after rasterization.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>resolution:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the resolution of the raster in dpi
-&mdash;&nbsp;optional, default: <tt>72</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Rasterizing an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-20">
-var circle = new Path.Circle(new Point(80, 50), 5);
-circle.fillColor = 'red';
-
-// Create a rasterized version of the path:
-var raster = circle.rasterize();
-
-// Move it 100pt to the right:
-raster.position.x += 100;
-
-// Scale the path and the raster by 300%, so we can compare them:
-circle.scale(5);
-raster.scale(5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="hittest-point-member" class="member">
-<div id="hittest-point-link" class="member-link">
-<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-<div id="hittest-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Perform a hit test on the item (and its children, if it is a
-<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
-<p>The optional options object allows you to control the specifics of the
-hit test and may contain a combination of the following values:</p>
-<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
-points.</p>
-<p><b>options.type:</b> Only hit test again a certain item
-type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
-<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
-<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
-items, taking into account stroke width.</p>
-<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
-<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
-<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
-(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
-<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
-last segment points of open path items.</p>
-<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
-side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
-(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
-<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
-<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The point where the hit test should be performed
-
-</li>
-
-<li>
-<tt>options:</tt> 
-<tt>Object</tt>
-
-&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
-tolerance: 2 }</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
-information about what exactly was hit or <tt>null</tt> if nothing was
-hit.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Operations</h3>
-
-<div id="addchild-item-member" class="member">
-<div id="addchild-item-link" class="member-link">
-<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-<div id="addchild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified item as a child of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be added as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchild-index-item-member" class="member">
-<div id="insertchild-index-item-link" class="member-link">
-<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-<div id="insertchild-index-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="addchildren-items-member" class="member">
-<div id="addchildren-items-link" class="member-link">
-<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-<div id="addchildren-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified items as children of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>items:</tt> 
-<tt>item</tt>
-&mdash;&nbsp;The items to be added as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchildren-index-items-member" class="member">
-<div id="insertchildren-index-items-link" class="member-link">
-<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-<div id="insertchildren-index-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified items as children of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>items:</tt> 
-Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-&mdash;&nbsp;The items to be appended as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertabove-item-member" class="member">
-<div id="insertabove-item-link" class="member-link">
-<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-<div id="insertabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertbelow-item-member" class="member">
-<div id="insertbelow-item-link" class="member-link">
-<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-<div id="insertbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendtop-item-member" class="member">
-<div id="appendtop-item-link" class="member-link">
-<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-<div id="appendtop-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it above all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendbottom-item-member" class="member">
-<div id="appendbottom-item-link" class="member-link">
-<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-<div id="appendbottom-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it below all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="moveabove-item-member" class="member">
-<div id="moveabove-item-link" class="member-link">
-<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-<div id="moveabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="movebelow-item-member" class="member">
-<div id="movebelow-item-link" class="member-link">
-<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-<div id="movebelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves the item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item below which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="remove-member" class="member">
-<div id="remove-link" class="member-link">
-<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-<div id="remove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item from the project. If the item has children, they are also
-removed.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-member" class="member">
-<div id="removechildren-link" class="member-link">
-<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-<div id="removechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-from-member" class="member">
-<div id="removechildren-from-link" class="member-link">
-<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-<div id="removechildren-from-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the children from the specified <tt>from</tt> index to the
-<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>from:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the beginning index, inclusive
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the ending index, exclusive
-&mdash;&nbsp;optional, default: <tt>children.length</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="reversechildren-member" class="member">
-<div id="reversechildren-link" class="member-link">
-<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-<div id="reversechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Reverses the order of the item's children</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Tests</h3>
-
-<div id="haschildren-member" class="member">
-<div id="haschildren-link" class="member-link">
-<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-<div id="haschildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item contains any children items.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isabove-item-member" class="member">
-<div id="isabove-item-link" class="member-link">
-<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-<div id="isabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if this item is above the specified item in the stacking order
-of the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isbelow-item-member" class="member">
-<div id="isbelow-item-link" class="member-link">
-<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-<div id="isbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is below the specified item in the stacking order of
-the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isparent-item-member" class="member">
-<div id="isparent-item-link" class="member-link">
-<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-<div id="isparent-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is the parent of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="ischild-item-member" class="member">
-<div id="ischild-item-link" class="member-link">
-<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-<div id="ischild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is a child of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isdescendant-item-member" class="member">
-<div id="isdescendant-item-link" class="member-link">
-<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-<div id="isdescendant-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is contained within the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isancestor-item-member" class="member">
-<div id="isancestor-item-link" class="member-link">
-<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-<div id="isancestor-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is an ancestor of the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
-item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isgroupedwith-item-member" class="member">
-<div id="isgroupedwith-item-link" class="member-link">
-<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-<div id="isgroupedwith-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the item is grouped with the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Transform Functions</h3>
-
-<div id="scale-scale-member" class="member">
-<div id="scale-scale-link" class="member-link">
-<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-<div id="scale-scale-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given value from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>scale:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item from its center point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-21">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path by 150% from its center point
-circle.scale(1.5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Scaling an item from a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-22">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path 150% from its bottom left corner
-circle.scale(1.5, circle.bounds.bottomLeft);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="scale-hor-ver-member" class="member">
-<div id="scale-hor-ver-link" class="member-link">
-<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="scale-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given values from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal scale factor
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item horizontally by 300%:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-23">
-// Create a circle shaped path at { x: 100, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(100, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path horizontally by 300%
-circle.scale(3, 1);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="translate-delta-member" class="member">
-<div id="translate-delta-link" class="member-link">
-<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-<div id="translate-delta-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Translates (moves) the item by the given offset point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>delta:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the offset to translate the item by
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rotate-angle-member" class="member">
-<div id="rotate-angle-link" class="member-link">
-<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-<div id="rotate-angle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rotates the item by a given angle around the given point.</p>
-<p>Angles are oriented clockwise and measured in degrees.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>angle:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the rotation angle
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Rotating an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-24">
-// Create a rectangle shaped path with its top left
-// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
-var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
-path.fillColor = 'black';
-
-// Rotate the path by 30 degrees:
-path.rotate(30);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Rotating an item around a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-25">
-// Create a rectangle shaped path with its top left
-// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
-var topLeft = new Point(175, 50);
-var size = new Size(100, 100);
-var path = new Path.Rectangle(topLeft, size);
-path.fillColor = 'black';
-
-// Draw a circle shaped path in the center of the view,
-// to show the rotation point:
-var circle = new Path.Circle(view.center, 5);
-circle.fillColor = 'white';
-
-// Each frame rotate the path 3 degrees around the center point
-// of the view:
-function onFrame(event) {
-	path.rotate(3, view.center);
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-25"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="shear-point-member" class="member">
-<div id="shear-point-link" class="member-link">
-<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-<div id="shear-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given value from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="shear-hor-ver-member" class="member">
-<div id="shear-hor-ver-link" class="member-link">
-<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="shear-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given values from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal shear factor.
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical shear factor.
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="transform-matrix-flags-member" class="member">
-<div id="transform-matrix-flags-link" class="member-link">
-<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-<div id="transform-matrix-flags-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>matrix:</tt> 
-<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-
-
-</li>
-
-<li>
-<tt>flags:</tt> 
-
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="fitbounds-rectangle-member" class="member">
-<div id="fitbounds-rectangle-link" class="member-link">
-<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-<div id="fitbounds-rectangle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
-rectangle, without changing its aspect ratio.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rectangle:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-
-
-</li>
-
-<li>
-<tt>fill:</tt> 
-<tt>Boolean</tt>
-
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-26">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-27">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds, true);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-28">
-var path = new Path.Circle(new Point(80, 50), 30);
-path.fillColor = 'red';
-
-// Fit the path to the bounding rectangle of the view:
-path.fitBounds(view.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-28"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<h3>Remove On Event</h3>
-
-<div id="removeon-object-member" class="member">
-<div id="removeon-object-link" class="member-link">
-<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-<div id="removeon-object-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the events specified in the passed object literal
-occur.</p>
-<p>The object literal can contain the following values:</p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
-fired: <tt>object.move = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
-fired: <tt>object.drag = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
-fired: <tt>object.down = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
-fired: <tt>object.up = true</tt></p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>object:</tt> 
-<tt>Object</tt>
-
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-29">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path on the next onMouseDrag or onMouseDown event:
-	path.removeOn({
-		drag: true,
-		down: true
-	});
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-29"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonmove-member" class="member">
-<div id="removeonmove-link" class="member-link">
-<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-<div id="removeonmove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Move your mouse below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-30">
-function onMouseMove(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next move event, automatically remove the path:
-	path.removeOnMove();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-30"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondown-member" class="member">
-<div id="removeondown-link" class="member-link">
-<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-<div id="removeondown-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-31">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, next time the mouse is pressed:
-	path.removeOnDown();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-31"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondrag-member" class="member">
-<div id="removeondrag-link" class="member-link">
-<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-<div id="removeondrag-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-32">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next drag event, automatically remove the path:
-	path.removeOnDrag();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-32"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonup-member" class="member">
-<div id="removeonup-link" class="member-link">
-<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-<div id="removeonup-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-33">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, when the mouse is released:
-	path.removeOnUp();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-33"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-</div>
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/Group.html"><tt>Group</tt></a></h2>
-
-	
-<div id="clipped-member" class="member">
-<div id="clipped-link" class="member-link">
-<a name="clipped" href="#" onClick="return toggleMember('clipped', false);"><tt><b>clipped</b></tt></a>
-</div>
-<div id="clipped-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clipped', false);"><tt><b>clipped</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipped', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the group item is to be clipped.</p>
-<p>When setting to <tt>true</tt>, the first child in the group is
-automatically defined as the clipping mask.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Line.html b/dist/docs/classes/Line.html
deleted file mode 100644
index fc195f83..00000000
--- a/dist/docs/classes/Line.html
+++ /dev/null
@@ -1,329 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Line</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Line</h1>
-
-<p>The Line object represents..</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="line-point1-point2-member" class="member">
-<div id="line-point1-point2-link" class="member-link">
-<a name="line-point1-point2" href="#" onClick="return toggleMember('line-point1-point2', false);"><tt><b>Line</b>(point1, point2[, infinite])</tt></a>
-</div>
-<div id="line-point1-point2-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('line-point1-point2', false);"><tt><b>Line</b>(point1, point2[, infinite])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('line-point1-point2', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a Line object.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point1:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>point2:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>infinite:</tt> 
-<tt>Boolean</tt>
-
-&mdash;&nbsp;optional, default: <tt>true</tt>
-</li>
-
-</ul>
-
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="point-member" class="member">
-<div id="point-link" class="member-link">
-<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
-</div>
-<div id="point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The starting point of the line</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="vector-member" class="member">
-<div id="vector-link" class="member-link">
-<a name="vector" href="#" onClick="return toggleMember('vector', false);"><tt><b>vector</b></tt></a>
-</div>
-<div id="vector-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('vector', false);"><tt><b>vector</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('vector', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The vector of the line</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="infinite-member" class="member">
-<div id="infinite-link" class="member-link">
-<a name="infinite" href="#" onClick="return toggleMember('infinite', false);"><tt><b>infinite</b></tt></a>
-</div>
-<div id="infinite-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('infinite', false);"><tt><b>infinite</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('infinite', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the line extends infinitely</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="intersect-line-member" class="member">
-<div id="intersect-line-link" class="member-link">
-<a name="intersect-line" href="#" onClick="return toggleMember('intersect-line', false);"><tt><b>intersect</b>(line)</tt></a>
-</div>
-<div id="intersect-line-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('intersect-line', false);"><tt><b>intersect</b>(line)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('intersect-line', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>line:</tt> 
-<a href="../classes/Line.html"><tt>Line</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the intersection point of the lines
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="getside-point-member" class="member">
-<div id="getside-point-link" class="member-link">
-<a name="getside-point" href="#" onClick="return toggleMember('getside-point', false);"><tt><b>getSide</b>(point)</tt></a>
-</div>
-<div id="getside-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getside-point', false);"><tt><b>getSide</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getside-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Number</tt></tt>
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="getdistance-point-member" class="member">
-<div id="getdistance-point-link" class="member-link">
-<a name="getdistance-point" href="#" onClick="return toggleMember('getdistance-point', false);"><tt><b>getDistance</b>(point)</tt></a>
-</div>
-<div id="getdistance-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getdistance-point', false);"><tt><b>getDistance</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getdistance-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Number</tt></tt>
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Matrix.html b/dist/docs/classes/Matrix.html
deleted file mode 100644
index 844dc516..00000000
--- a/dist/docs/classes/Matrix.html
+++ /dev/null
@@ -1,1824 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Matrix</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Matrix</h1>
-
-<p>An affine transform performs a linear mapping from 2D coordinates
-to other 2D coordinates that preserves the "straightness" and
-"parallelness" of lines.</p>
-<p>Such a coordinate transformation can be represented by a 3 row by 3
-column matrix with an implied last row of [ 0 0 1 ]. This matrix
-transforms source coordinates (x,y) into destination coordinates (x',y')
-by considering them to be a column vector and multiplying the coordinate
-vector by the matrix according to the following process:</p>
-<pre class="code">
-     [ x ]   [ a  b  tx ] [ x ]   [ a * x + b * y + tx ]
-     [ y ] = [ c  d  ty ] [ y ] = [ c * x + d * y + ty ]
-     [ 1 ]   [ 0  0  1  ] [ 1 ]   [         1          ]
-</pre>
-<p>This class is optimized for speed and minimizes calculations based on its
-knowledge of the underlying matrix (as opposed to say simply performing
-matrix multiplication).</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="matrix-a-c-b-d-tx-ty-member" class="member">
-<div id="matrix-a-c-b-d-tx-ty-link" class="member-link">
-<a name="matrix-a-c-b-d-tx-ty" href="#" onClick="return toggleMember('matrix-a-c-b-d-tx-ty', false);"><tt><b>Matrix</b>(a, c, b, d, tx, ty)</tt></a>
-</div>
-<div id="matrix-a-c-b-d-tx-ty-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('matrix-a-c-b-d-tx-ty', false);"><tt><b>Matrix</b>(a, c, b, d, tx, ty)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('matrix-a-c-b-d-tx-ty', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a 2D affine transform.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>a:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The scaleX coordinate of the transform
-
-</li>
-
-<li>
-<tt>c:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The shearY coordinate of the transform
-
-</li>
-
-<li>
-<tt>b:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The shearX coordinate of the transform
-
-</li>
-
-<li>
-<tt>d:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The scaleY coordinate of the transform
-
-</li>
-
-<li>
-<tt>tx:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The translateX coordinate of the transform
-
-</li>
-
-<li>
-<tt>ty:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The translateY coordinate of the transform
-
-</li>
-
-</ul>
-
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="scalex-member" class="member">
-<div id="scalex-link" class="member-link">
-<a name="scalex" href="#" onClick="return toggleMember('scalex', false);"><tt><b>scaleX</b></tt></a>
-</div>
-<div id="scalex-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scalex', false);"><tt><b>scaleX</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scalex', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The scaling factor in the x-direction (<tt>a</tt>).</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="scaley-member" class="member">
-<div id="scaley-link" class="member-link">
-<a name="scaley" href="#" onClick="return toggleMember('scaley', false);"><tt><b>scaleY</b></tt></a>
-</div>
-<div id="scaley-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scaley', false);"><tt><b>scaleY</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scaley', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The scaling factor in the y-direction (<tt>d</tt>).</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="shearx-member" class="member">
-<div id="shearx-link" class="member-link">
-<a name="shearx" href="#" onClick="return toggleMember('shearx', false);"><tt><b>shearX</b></tt></a>
-</div>
-<div id="shearx-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shearx', false);"><tt><b>shearX</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shearx', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="sheary-member" class="member">
-<div id="sheary-link" class="member-link">
-<a name="sheary" href="#" onClick="return toggleMember('sheary', false);"><tt><b>shearY</b></tt></a>
-</div>
-<div id="sheary-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('sheary', false);"><tt><b>shearY</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('sheary', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="translatex-member" class="member">
-<div id="translatex-link" class="member-link">
-<a name="translatex" href="#" onClick="return toggleMember('translatex', false);"><tt><b>translateX</b></tt></a>
-</div>
-<div id="translatex-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('translatex', false);"><tt><b>translateX</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translatex', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The translation in the x-direction (<tt>tx</tt>).</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="translatey-member" class="member">
-<div id="translatey-link" class="member-link">
-<a name="translatey" href="#" onClick="return toggleMember('translatey', false);"><tt><b>translateY</b></tt></a>
-</div>
-<div id="translatey-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('translatey', false);"><tt><b>translateY</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translatey', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The translation in the y-direction (<tt>ty</tt>).</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="values-member" class="member">
-<div id="values-link" class="member-link">
-<a name="values" href="#" onClick="return toggleMember('values', false);"><tt><b>values</b></tt></a>
-</div>
-<div id="values-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('values', false);"><tt><b>values</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('values', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The transform values as an array, in the same sequence as they are passed
-to {@link #initialize(a, c, b, d, tx, ty)}.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="rotation-member" class="member">
-<div id="rotation-link" class="member-link">
-<a name="rotation" href="#" onClick="return toggleMember('rotation', false);"><tt><b>rotation</b></tt></a>
-</div>
-<div id="rotation-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rotation', false);"><tt><b>rotation</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotation', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The rotation angle of the matrix. If a non-uniform rotation is applied as
-a result of a shear() or scale() command, undefined is returned, as the
-resulting transformation cannot be expressed in one rotation angle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;A copy of this transform.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="set-a-c-b-d-tx-ty-member" class="member">
-<div id="set-a-c-b-d-tx-ty-link" class="member-link">
-<a name="set-a-c-b-d-tx-ty" href="#" onClick="return toggleMember('set-a-c-b-d-tx-ty', false);"><tt><b>set</b>(a, c, b, d, tx, ty)</tt></a>
-</div>
-<div id="set-a-c-b-d-tx-ty-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('set-a-c-b-d-tx-ty', false);"><tt><b>set</b>(a, c, b, d, tx, ty)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('set-a-c-b-d-tx-ty', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Sets this transform to the matrix specified by the 6 values.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>a:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The scaleX coordinate of the transform
-
-</li>
-
-<li>
-<tt>c:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The shearY coordinate of the transform
-
-</li>
-
-<li>
-<tt>b:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The shearX coordinate of the transform
-
-</li>
-
-<li>
-<tt>d:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The scaleY coordinate of the transform
-
-</li>
-
-<li>
-<tt>tx:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The translateX coordinate of the transform
-
-</li>
-
-<li>
-<tt>ty:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The translateY coordinate of the transform
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="scale-scale-member" class="member">
-<div id="scale-scale-link" class="member-link">
-<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-<div id="scale-scale-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Concatentates this transform with a scaling transformation.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>scale:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The scaling factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The center for the scaling transformation
-&mdash;&nbsp;optional
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="scale-hor-ver-member" class="member">
-<div id="scale-hor-ver-link" class="member-link">
-<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="scale-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Concatentates this transform with a scaling transformation.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The horizontal scaling factor
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The vertical scaling factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The center for the scaling transformation
-&mdash;&nbsp;optional
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="translate-point-member" class="member">
-<div id="translate-point-link" class="member-link">
-<a name="translate-point" href="#" onClick="return toggleMember('translate-point', false);"><tt><b>translate</b>(point)</tt></a>
-</div>
-<div id="translate-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('translate-point', false);"><tt><b>translate</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Concatentates this transform with a translate transformation.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The vector to translate by
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="translate-dx-dy-member" class="member">
-<div id="translate-dx-dy-link" class="member-link">
-<a name="translate-dx-dy" href="#" onClick="return toggleMember('translate-dx-dy', false);"><tt><b>translate</b>(dx, dy)</tt></a>
-</div>
-<div id="translate-dx-dy-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('translate-dx-dy', false);"><tt><b>translate</b>(dx, dy)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-dx-dy', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Concatentates this transform with a translate transformation.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>dx:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The distance to translate in the x direction
-
-</li>
-
-<li>
-<tt>dy:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The distance to translate in the y direction
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="rotate-angle-center-member" class="member">
-<div id="rotate-angle-center-link" class="member-link">
-<a name="rotate-angle-center" href="#" onClick="return toggleMember('rotate-angle-center', false);"><tt><b>rotate</b>(angle, center)</tt></a>
-</div>
-<div id="rotate-angle-center-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rotate-angle-center', false);"><tt><b>rotate</b>(angle, center)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle-center', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Concatentates this transform with a rotation transformation around an
-anchor point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>angle:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The angle of rotation measured in degrees
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The anchor point to rotate around
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="rotate-angle-x-y-member" class="member">
-<div id="rotate-angle-x-y-link" class="member-link">
-<a name="rotate-angle-x-y" href="#" onClick="return toggleMember('rotate-angle-x-y', false);"><tt><b>rotate</b>(angle, x, y)</tt></a>
-</div>
-<div id="rotate-angle-x-y-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rotate-angle-x-y', false);"><tt><b>rotate</b>(angle, x, y)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle-x-y', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Concatentates this transform with a rotation transformation around an
-anchor point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>angle:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The angle of rotation measured in degrees
-
-</li>
-
-<li>
-<tt>x:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The x coordinate of the anchor point
-
-</li>
-
-<li>
-<tt>y:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The y coordinate of the anchor point
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="shear-point-member" class="member">
-<div id="shear-point-link" class="member-link">
-<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-<div id="shear-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Concatentates this transform with a shear transformation.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The shear factor in x and y direction
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The center for the shear transformation
-&mdash;&nbsp;optional
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="shear-hor-ver-member" class="member">
-<div id="shear-hor-ver-link" class="member-link">
-<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="shear-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Concatentates this transform with a shear transformation.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The horizontal shear factor
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The vertical shear factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The center for the shear transformation
-&mdash;&nbsp;optional
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="tostring-member" class="member">
-<div id="tostring-link" class="member-link">
-<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-<div id="tostring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of this transform.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="concatenate-mx-member" class="member">
-<div id="concatenate-mx-link" class="member-link">
-<a name="concatenate-mx" href="#" onClick="return toggleMember('concatenate-mx', false);"><tt><b>concatenate</b>(mx)</tt></a>
-</div>
-<div id="concatenate-mx-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('concatenate-mx', false);"><tt><b>concatenate</b>(mx)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('concatenate-mx', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Concatenates an affine transform to this transform.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>mx:</tt> 
-<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-&mdash;&nbsp;The transform to concatenate
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="preconcatenate-mx-member" class="member">
-<div id="preconcatenate-mx-link" class="member-link">
-<a name="preconcatenate-mx" href="#" onClick="return toggleMember('preconcatenate-mx', false);"><tt><b>preConcatenate</b>(mx)</tt></a>
-</div>
-<div id="preconcatenate-mx-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('preconcatenate-mx', false);"><tt><b>preConcatenate</b>(mx)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('preconcatenate-mx', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Pre-concatenates an affine transform to this transform.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>mx:</tt> 
-<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-&mdash;&nbsp;The transform to preconcatenate
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="transform-point-member" class="member">
-<div id="transform-point-link" class="member-link">
-<a name="transform-point" href="#" onClick="return toggleMember('transform-point', false);"><tt><b>transform</b>(point)</tt></a>
-</div>
-<div id="transform-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('transform-point', false);"><tt><b>transform</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transforms a point and returns the result.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The point to be transformed
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;The transformed point
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="transform-src-srcOff-dst-dstOff-numPts-member" class="member">
-<div id="transform-src-srcOff-dst-dstOff-numPts-link" class="member-link">
-<a name="transform-src-srcOff-dst-dstOff-numPts" href="#" onClick="return toggleMember('transform-src-srcOff-dst-dstOff-numPts', false);"><tt><b>transform</b>(src, srcOff, dst, dstOff, numPts)</tt></a>
-</div>
-<div id="transform-src-srcOff-dst-dstOff-numPts-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('transform-src-srcOff-dst-dstOff-numPts', false);"><tt><b>transform</b>(src, srcOff, dst, dstOff, numPts)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-src-srcOff-dst-dstOff-numPts', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transforms an array of coordinates by this matrix and stores the results
-into the destination array, which is also returned.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>src:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The array containing the source points
-       as x, y value pairs
-
-</li>
-
-<li>
-<tt>srcOff:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The offset to the first point to be transformed
-
-</li>
-
-<li>
-<tt>dst:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The array into which to store the transformed
-       point pairs
-
-</li>
-
-<li>
-<tt>dstOff:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The offset of the location of the first
-       transformed point in the destination array
-
-</li>
-
-<li>
-<tt>numPts:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The number of points to tranform
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;The dst array, containing the transformed coordinates.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="inversetransform-point-member" class="member">
-<div id="inversetransform-point-link" class="member-link">
-<a name="inversetransform-point" href="#" onClick="return toggleMember('inversetransform-point', false);"><tt><b>inverseTransform</b>(point)</tt></a>
-</div>
-<div id="inversetransform-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('inversetransform-point', false);"><tt><b>inverseTransform</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('inversetransform-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inverse transforms a point and returns the result.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The point to be transformed
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="isidentity-member" class="member">
-<div id="isidentity-link" class="member-link">
-<a name="isidentity" href="#" onClick="return toggleMember('isidentity', false);"><tt><b>isIdentity</b>()</tt></a>
-</div>
-<div id="isidentity-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isidentity', false);"><tt><b>isIdentity</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isidentity', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;Whether this transform is the identity transform
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="isinvertible-member" class="member">
-<div id="isinvertible-link" class="member-link">
-<a name="isinvertible" href="#" onClick="return toggleMember('isinvertible', false);"><tt><b>isInvertible</b>()</tt></a>
-</div>
-<div id="isinvertible-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isinvertible', false);"><tt><b>isInvertible</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isinvertible', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns whether the transform is invertible. A transform is not
-invertible if the determinant is 0 or any value is non-finite or NaN.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;Whether the transform is invertible
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="issingular-member" class="member">
-<div id="issingular-link" class="member-link">
-<a name="issingular" href="#" onClick="return toggleMember('issingular', false);"><tt><b>isSingular</b>()</tt></a>
-</div>
-<div id="issingular-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('issingular', false);"><tt><b>isSingular</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('issingular', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the matrix is singular or not. Singular matrices cannot be
-inverted.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;Whether the matrix is singular
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="createinverse-member" class="member">
-<div id="createinverse-link" class="member-link">
-<a name="createinverse" href="#" onClick="return toggleMember('createinverse', false);"><tt><b>createInverse</b>()</tt></a>
-</div>
-<div id="createinverse-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('createinverse', false);"><tt><b>createInverse</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('createinverse', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inverts the transformation of the matrix. If the matrix is not invertible
-(in which case <a href="../classes/Matrix.html#issingular" onclick="return toggleMember('issingular', true);"><tt>isSingular</tt></a>() returns true), <tt>null </tt> is
-returned.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;The inverted matrix, or <tt>null </tt>, if the matrix is
-        singular
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="settoscale-hor-ver-member" class="member">
-<div id="settoscale-hor-ver-link" class="member-link">
-<a name="settoscale-hor-ver" href="#" onClick="return toggleMember('settoscale-hor-ver', false);"><tt><b>setToScale</b>(hor, ver)</tt></a>
-</div>
-<div id="settoscale-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('settoscale-hor-ver', false);"><tt><b>setToScale</b>(hor, ver)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('settoscale-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Sets this transform to a scaling transformation.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The horizontal scaling factor
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The vertical scaling factor
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="settotranslation-dx-dy-member" class="member">
-<div id="settotranslation-dx-dy-link" class="member-link">
-<a name="settotranslation-dx-dy" href="#" onClick="return toggleMember('settotranslation-dx-dy', false);"><tt><b>setToTranslation</b>(dx, dy)</tt></a>
-</div>
-<div id="settotranslation-dx-dy-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('settotranslation-dx-dy', false);"><tt><b>setToTranslation</b>(dx, dy)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('settotranslation-dx-dy', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Sets this transform to a translation transformation.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>dx:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The distance to translate in the x direction
-
-</li>
-
-<li>
-<tt>dy:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The distance to translate in the y direction
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="settoshear-hor-ver-member" class="member">
-<div id="settoshear-hor-ver-link" class="member-link">
-<a name="settoshear-hor-ver" href="#" onClick="return toggleMember('settoshear-hor-ver', false);"><tt><b>setToShear</b>(hor, ver)</tt></a>
-</div>
-<div id="settoshear-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('settoshear-hor-ver', false);"><tt><b>setToShear</b>(hor, ver)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('settoshear-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Sets this transform to a shearing transformation.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The horizontal shear factor
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The vertical shear factor
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="settorotation-angle-x-y-member" class="member">
-<div id="settorotation-angle-x-y-link" class="member-link">
-<a name="settorotation-angle-x-y" href="#" onClick="return toggleMember('settorotation-angle-x-y', false);"><tt><b>setToRotation</b>(angle, x, y)</tt></a>
-</div>
-<div id="settorotation-angle-x-y-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('settorotation-angle-x-y', false);"><tt><b>setToRotation</b>(angle, x, y)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('settorotation-angle-x-y', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Sets this transform to a rotation transformation.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>angle:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The angle of rotation measured in degrees
-
-</li>
-
-<li>
-<tt>x:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The x coordinate of the anchor point
-
-</li>
-
-<li>
-<tt>y:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The y coordinate of the anchor point
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="applytocontext-ctx-member" class="member">
-<div id="applytocontext-ctx-link" class="member-link">
-<a name="applytocontext-ctx" href="#" onClick="return toggleMember('applytocontext-ctx', false);"><tt><b>applyToContext</b>(ctx[, reset])</tt></a>
-</div>
-<div id="applytocontext-ctx-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('applytocontext-ctx', false);"><tt><b>applyToContext</b>(ctx[, reset])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('applytocontext-ctx', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Applies this matrix to the specified Canvas Context.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>ctx:</tt> 
-<tt>CanvasRenderingContext2D</tt>
-
-
-</li>
-
-<li>
-<tt>reset:</tt> 
-<tt>Boolean</tt>
-
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-	<div class="reference-members"><h2>Static Methods</h2>
-		
-			
-<div id="getscaleinstance-hor-ver-member" class="member">
-<div id="getscaleinstance-hor-ver-link" class="member-link">
-<a name="getscaleinstance-hor-ver" href="#" onClick="return toggleMember('getscaleinstance-hor-ver', false);"><tt><b>Matrix.getScaleInstance</b>(hor, ver)</tt></a>
-</div>
-<div id="getscaleinstance-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getscaleinstance-hor-ver', false);"><tt><b>Matrix.getScaleInstance</b>(hor, ver)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getscaleinstance-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Creates a transform representing a scaling transformation.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The horizontal scaling factor
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The vertical scaling factor
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;A transform representing a scaling
-        transformation
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="gettranslateinstance-dx-dy-member" class="member">
-<div id="gettranslateinstance-dx-dy-link" class="member-link">
-<a name="gettranslateinstance-dx-dy" href="#" onClick="return toggleMember('gettranslateinstance-dx-dy', false);"><tt><b>Matrix.getTranslateInstance</b>(dx, dy)</tt></a>
-</div>
-<div id="gettranslateinstance-dx-dy-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('gettranslateinstance-dx-dy', false);"><tt><b>Matrix.getTranslateInstance</b>(dx, dy)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gettranslateinstance-dx-dy', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Creates a transform representing a translation transformation.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>dx:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The distance to translate in the x direction
-
-</li>
-
-<li>
-<tt>dy:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The distance to translate in the y direction
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;A transform representing a translation
-        transformation
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="getshearinstance-hor-ver-center-member" class="member">
-<div id="getshearinstance-hor-ver-center-link" class="member-link">
-<a name="getshearinstance-hor-ver-center" href="#" onClick="return toggleMember('getshearinstance-hor-ver-center', false);"><tt><b>Matrix.getShearInstance</b>(hor, ver, center)</tt></a>
-</div>
-<div id="getshearinstance-hor-ver-center-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getshearinstance-hor-ver-center', false);"><tt><b>Matrix.getShearInstance</b>(hor, ver, center)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getshearinstance-hor-ver-center', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Creates a transform representing a shearing transformation.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The horizontal shear factor
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The vertical shear factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;A transform representing a shearing transformation
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="getrotateinstance-angle-x-y-member" class="member">
-<div id="getrotateinstance-angle-x-y-link" class="member-link">
-<a name="getrotateinstance-angle-x-y" href="#" onClick="return toggleMember('getrotateinstance-angle-x-y', false);"><tt><b>Matrix.getRotateInstance</b>(angle, x, y)</tt></a>
-</div>
-<div id="getrotateinstance-angle-x-y-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getrotateinstance-angle-x-y', false);"><tt><b>Matrix.getRotateInstance</b>(angle, x, y)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getrotateinstance-angle-x-y', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Creates a transform representing a rotation transformation.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>angle:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The angle of rotation measured in degrees
-
-</li>
-
-<li>
-<tt>x:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The x coordinate of the anchor point
-
-</li>
-
-<li>
-<tt>y:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The y coordinate of the anchor point
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;A transform representing a rotation transformation
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/PaperScope.html b/dist/docs/classes/PaperScope.html
deleted file mode 100644
index e32769d1..00000000
--- a/dist/docs/classes/PaperScope.html
+++ /dev/null
@@ -1,475 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>PaperScope</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>PaperScope</h1>
-
-<p>The <tt>PaperScope</tt> class represents the scope associated with a
-Paper context. When working with PaperScript, these scopes are automatically
-created for us, and through clever scoping the properties and methods of the
-active scope seem to become part of the global scope.</p>
-<p>When working with normal JavaScript code, <tt>PaperScope</tt> objects need to
-be manually created and handled.</p>
-<p>Paper classes can only be accessed through <tt>PaperScope</tt> objects. Thus
-in PaperScript they are global, while in JavaScript, they are available on
-the global <a href="../classes/global.html#paper"><tt>paper</tt></a> object. For JavaScript you can use
-<a href="../classes/PaperScope.html#install-scope"><tt>paperScope.install(scope)</tt></a> to install the Paper classes and objects
-on the global scope. Note that when working with more than one scope, this
-still works for classes, but not for objects like <a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a>,
-since they are not updated in the injected scope if scopes are switched.</p>
-<p>The global <a href="../classes/global.html#paper"><tt>paper</tt></a> object is simply a reference to the currently active
-<tt>PaperScope</tt>.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="paperscope-member" class="member">
-<div id="paperscope-link" class="member-link">
-<a name="paperscope" href="#" onClick="return toggleMember('paperscope', false);"><tt><b>PaperScope</b>()</tt></a>
-</div>
-<div id="paperscope-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('paperscope', false);"><tt><b>PaperScope</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('paperscope', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a PaperScope object.</p>
-
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="version-member" class="member">
-<div id="version-link" class="member-link">
-<a name="version" href="#" onClick="return toggleMember('version', false);"><tt><b>version</b></tt></a>
-</div>
-<div id="version-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('version', false);"><tt><b>version</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('version', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The version of Paper.js, as a float number.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="project-member" class="member">
-<div id="project-link" class="member-link">
-<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-<div id="project-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The currently active project.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Project.html"><tt>Project</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="projects-member" class="member">
-<div id="projects-link" class="member-link">
-<a name="projects" href="#" onClick="return toggleMember('projects', false);"><tt><b>projects</b></tt></a>
-</div>
-<div id="projects-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('projects', false);"><tt><b>projects</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('projects', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The list of all open projects within the current Paper.js context.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Project.html"><tt>Project</tt></a> objects
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="view-member" class="member">
-<div id="view-link" class="member-link">
-<a name="view" href="#" onClick="return toggleMember('view', false);"><tt><b>view</b></tt></a>
-</div>
-<div id="view-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('view', false);"><tt><b>view</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('view', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The active view of the active project.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/View.html"><tt>View</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="views-member" class="member">
-<div id="views-link" class="member-link">
-<a name="views" href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
-</div>
-<div id="views-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('views', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The list of view of the active project.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/View.html"><tt>View</tt></a> objects
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="tool-member" class="member">
-<div id="tool-link" class="member-link">
-<a name="tool" href="#" onClick="return toggleMember('tool', false);"><tt><b>tool</b></tt></a>
-</div>
-<div id="tool-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tool', false);"><tt><b>tool</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tool', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The reference to the active tool.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Tool.html"><tt>Tool</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="tools-member" class="member">
-<div id="tools-link" class="member-link">
-<a name="tools" href="#" onClick="return toggleMember('tools', false);"><tt><b>tools</b></tt></a>
-</div>
-<div id="tools-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tools', false);"><tt><b>tools</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tools', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The list of available tools.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Tool.html"><tt>Tool</tt></a> objects
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="install-scope-member" class="member">
-<div id="install-scope-link" class="member-link">
-<a name="install-scope" href="#" onClick="return toggleMember('install-scope', false);"><tt><b>install</b>(scope)</tt></a>
-</div>
-<div id="install-scope-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('install-scope', false);"><tt><b>install</b>(scope)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('install-scope', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Injects the paper scope into any other given scope. Can be used for
-examle to inject the currently active PaperScope into the window's global
-scope, to emulate PaperScript-style globally accessible Paper classes and
-objects:</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>scope:</tt> 
-
-
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">paper.install(window);</pre>
-
-</div>
-</div>
-</div>
-		
-			
-<div id="setup-canvas-member" class="member">
-<div id="setup-canvas-link" class="member-link">
-<a name="setup-canvas" href="#" onClick="return toggleMember('setup-canvas', false);"><tt><b>setup</b>(canvas)</tt></a>
-</div>
-<div id="setup-canvas-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('setup-canvas', false);"><tt><b>setup</b>(canvas)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('setup-canvas', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Sets up an empty project for us. If a canvas is provided, it also creates
-a <a href="../classes/View.html"><tt>View</tt></a> for it, both linked to this scope.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>canvas:</tt> 
-<tt>HTMLCanvasElement</tt>
-&mdash;&nbsp;The canvas this scope should be
-associated with.
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-	<div class="reference-members"><h2>Static Methods</h2>
-		
-			
-<div id="get-id-member" class="member">
-<div id="get-id-link" class="member-link">
-<a name="get-id" href="#" onClick="return toggleMember('get-id', false);"><tt><b>PaperScope.get</b>(id)</tt></a>
-</div>
-<div id="get-id-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('get-id', false);"><tt><b>PaperScope.get</b>(id)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('get-id', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Retrieves a PaperScope object with the given id or associated with
-the passed canvas element.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>id:</tt> 
-
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="each-iter-member" class="member">
-<div id="each-iter-link" class="member-link">
-<a name="each-iter" href="#" onClick="return toggleMember('each-iter', false);"><tt><b>PaperScope.each</b>(iter)</tt></a>
-</div>
-<div id="each-iter-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('each-iter', false);"><tt><b>PaperScope.each</b>(iter)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('each-iter', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Iterates over all active scopes and calls the passed iterator
-function for each of them.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>iter:</tt> 
-
-&mdash;&nbsp;the iterator function.
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/PaperScript.html b/dist/docs/classes/PaperScript.html
deleted file mode 100644
index 9714c10d..00000000
--- a/dist/docs/classes/PaperScript.html
+++ /dev/null
@@ -1,137 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>PaperScript</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>PaperScript</h1>
-
-
-
-</div>
-
-
-
-
-
-
-
-
-	<div class="reference-members"><h2>Static Methods</h2>
-		
-			
-<div id="compile-code-member" class="member">
-<div id="compile-code-link" class="member-link">
-<a name="compile-code" href="#" onClick="return toggleMember('compile-code', false);"><tt><b>PaperScript.compile</b>(code)</tt></a>
-</div>
-<div id="compile-code-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('compile-code', false);"><tt><b>PaperScript.compile</b>(code)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('compile-code', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Compiles PaperScript code into JavaScript code.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>code:</tt> 
-<tt>String</tt>
-&mdash;&nbsp;The PaperScript code.
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;The compiled PaperScript as JavaScript code.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="evaluate-code-scope-member" class="member">
-<div id="evaluate-code-scope-link" class="member-link">
-<a name="evaluate-code-scope" href="#" onClick="return toggleMember('evaluate-code-scope', false);"><tt><b>PaperScript.evaluate</b>(code, scope)</tt></a>
-</div>
-<div id="evaluate-code-scope-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('evaluate-code-scope', false);"><tt><b>PaperScript.evaluate</b>(code, scope)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('evaluate-code-scope', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Evaluates parsed PaperScript code in the passed <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
-object. It also installs handlers automatically for us.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>code:</tt> 
-<tt>String</tt>
-&mdash;&nbsp;The PaperScript code.
-
-</li>
-
-<li>
-<tt>scope:</tt> 
-<a href="../classes/PaperScript.html"><tt>PaperScript</tt></a>
-&mdash;&nbsp;The scope in which the code is executed.
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Object</tt></tt>&nbsp;&mdash;&nbsp;The result of the code evaluation.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/ParagraphStyle.html b/dist/docs/classes/ParagraphStyle.html
deleted file mode 100644
index b0b4aa4d..00000000
--- a/dist/docs/classes/ParagraphStyle.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>ParagraphStyle</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>ParagraphStyle</h1>
-
-<p>The ParagraphStyle object represents the paragraph style of a text
-item (<a href="../classes/TextItem.html#paragraphstyle"><tt>textItem.paragraphStyle</tt></a>).</p>
-<p>Currently, the ParagraphStyle object may seem a bit empty, with just the
-<a href="../classes/ParagraphStyle.html#justification" onclick="return toggleMember('justification', true);"><tt>justification</tt></a> property. Yet, we have lots in store for Paper.js
-when it comes to typography. Please stay tuned.</p>
-<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var text = new PointText(new Point(0,0));
-text.fillColor = 'black';
-text.content = 'Hello world.';
-text.paragraphStyle.justification = 'center';</pre>
-
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="justification-member" class="member">
-<div id="justification-link" class="member-link">
-<a name="justification" href="#" onClick="return toggleMember('justification', false);"><tt><b>justification</b></tt></a>
-</div>
-<div id="justification-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('justification', false);"><tt><b>justification</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('justification', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The justification of the paragraph.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'left'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('left', 'right', 'center')</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Path.html b/dist/docs/classes/Path.html
deleted file mode 100644
index a55fc047..00000000
--- a/dist/docs/classes/Path.html
+++ /dev/null
@@ -1,6698 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Path</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Path</h1>
-
-<p> Extends <b><a href="../classes/PathItem.html"><tt>PathItem</tt></a></b>, <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
-
-<p>The Path item represents a path in a Paper.js project.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="path-member" class="member">
-<div id="path-link" class="member-link">
-<a name="path" href="#" onClick="return toggleMember('path', false);"><tt><b>Path</b>([segments])</tt></a>
-</div>
-<div id="path-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('path', false);"><tt><b>Path</b>([segments])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a new Path item and places it at the top of the active layer.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>segments:</tt> 
-Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
-&mdash;&nbsp;An array of segments (or points to be
-converted to segments) that will be added to the path.
-&mdash;&nbsp;optional
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> &mdash; Create an empty path and add segments to it:
-</p>
-
-
-<pre class="code">var path = new Path();
-path.strokeColor = 'black';
-path.add(new Point(30, 30));
-path.add(new Point(100, 100));</pre>
-
-<p>
-<b>Example</b> &mdash; Create a path with two segments:
-</p>
-
-
-<pre class="code">var segments = [new Point(30, 30), new Point(100, 100)];
-var path = new Path(segments);
-path.strokeColor = 'black';</pre>
-
-
-</div>
-</div>
-</div>
-	
-		<h3>Shaped Paths</h3>
-<div id="path-line-pt1-pt2-member" class="member">
-<div id="path-line-pt1-pt2-link" class="member-link">
-<a name="path-line-pt1-pt2" href="#" onClick="return toggleMember('path-line-pt1-pt2', false);"><tt><b>Path.Line</b>(pt1, pt2)</tt></a>
-</div>
-<div id="path-line-pt1-pt2-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('path-line-pt1-pt2', false);"><tt><b>Path.Line</b>(pt1, pt2)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-line-pt1-pt2', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a Path Item with two anchor points forming a line.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>pt1:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the first anchor point of the path
-
-</li>
-
-<li>
-<tt>pt2:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the second anchor point of the path
-
-</li>
-
-</ul>
-
-
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
-</li>
-	
-	</ul>
-
-<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var from = new Point(20, 20);
-var to = new Point(100, 100);
-var path = new Path.Line(from, to);
-path.strokeColor = 'black';</pre>
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="path-rectangle-point-size-member" class="member">
-<div id="path-rectangle-point-size-link" class="member-link">
-<a name="path-rectangle-point-size" href="#" onClick="return toggleMember('path-rectangle-point-size', false);"><tt><b>Path.Rectangle</b>(point, size)</tt></a>
-</div>
-<div id="path-rectangle-point-size-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('path-rectangle-point-size', false);"><tt><b>Path.Rectangle</b>(point, size)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-rectangle-point-size', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a rectangle shaped Path Item from the passed point and size.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>size:</tt> 
-<a href="../classes/Size.html"><tt>Size</tt></a>
-
-
-</li>
-
-</ul>
-
-
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
-</li>
-	
-	</ul>
-
-<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point = new Point(100, 100);
-var size = new Size(100, 100);
-var rectangle = new Rectangle(point, size);
-var path = new Path.Rectangle(rectangle);
-path.strokeColor = 'black';</pre>
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="path-rectangle-point1-point2-member" class="member">
-<div id="path-rectangle-point1-point2-link" class="member-link">
-<a name="path-rectangle-point1-point2" href="#" onClick="return toggleMember('path-rectangle-point1-point2', false);"><tt><b>Path.Rectangle</b>(point1, point2)</tt></a>
-</div>
-<div id="path-rectangle-point1-point2-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('path-rectangle-point1-point2', false);"><tt><b>Path.Rectangle</b>(point1, point2)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-rectangle-point1-point2', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a rectangle shaped Path Item from the passed points. These do not
-necessarily need to be the top left and bottom right corners, the
-constructor figures out how to fit a rectangle between them.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point1:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The first point defining the rectangle
-
-</li>
-
-<li>
-<tt>point2:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The second point defining the rectangle
-
-</li>
-
-</ul>
-
-
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
-</li>
-	
-	</ul>
-
-<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point = new Point(100, 100);
-var point2 = new Point(200, 300);
-var path = new Path.Rectangle(point, point2);
-path.strokeColor = 'black';</pre>
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="path-rectangle-rect-member" class="member">
-<div id="path-rectangle-rect-link" class="member-link">
-<a name="path-rectangle-rect" href="#" onClick="return toggleMember('path-rectangle-rect', false);"><tt><b>Path.Rectangle</b>(rect)</tt></a>
-</div>
-<div id="path-rectangle-rect-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('path-rectangle-rect', false);"><tt><b>Path.Rectangle</b>(rect)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-rectangle-rect', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a rectangle shaped Path Item from the passed abstract
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rect:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-
-
-</li>
-
-</ul>
-
-
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
-</li>
-	
-	</ul>
-
-<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point = new Point(100, 100);
-var size = new Size(100, 100);
-var rectangle = new Rectangle(point, size);
-var path = new Path.Rectangle(rectangle);
-path.strokeColor = 'black';</pre>
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="path-roundrectangle-rect-size-member" class="member">
-<div id="path-roundrectangle-rect-size-link" class="member-link">
-<a name="path-roundrectangle-rect-size" href="#" onClick="return toggleMember('path-roundrectangle-rect-size', false);"><tt><b>Path.RoundRectangle</b>(rect, size)</tt></a>
-</div>
-<div id="path-roundrectangle-rect-size-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('path-roundrectangle-rect-size', false);"><tt><b>Path.RoundRectangle</b>(rect, size)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-roundrectangle-rect-size', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a rectangular Path Item with rounded corners.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rect:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-
-
-</li>
-
-<li>
-<tt>size:</tt> 
-<a href="../classes/Size.html"><tt>Size</tt></a>
-&mdash;&nbsp;the size of the rounded corners
-
-</li>
-
-</ul>
-
-
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
-</li>
-	
-	</ul>
-
-<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point = new Point(100, 100);
-var size = new Size(100, 100);
-var rectangle = new Rectangle(point, size);
-var cornerSize = new Size(30, 30);
-var path = new Path.RoundRectangle(rectangle, cornerSize);</pre>
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="path-oval-rect-member" class="member">
-<div id="path-oval-rect-link" class="member-link">
-<a name="path-oval-rect" href="#" onClick="return toggleMember('path-oval-rect', false);"><tt><b>Path.Oval</b>(rect[, circumscribed])</tt></a>
-</div>
-<div id="path-oval-rect-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('path-oval-rect', false);"><tt><b>Path.Oval</b>(rect[, circumscribed])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-oval-rect', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates an oval shaped Path Item.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rect:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-
-
-</li>
-
-<li>
-<tt>circumscribed:</tt> 
-<tt>Boolean</tt>
-&mdash;&nbsp;when set to <tt>true</tt> the
-       oval shaped path will be created so the rectangle fits into
-       it. When set to <tt>false</tt> the oval path will fit within
-       the rectangle.
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-
-</ul>
-
-
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
-</li>
-	
-	</ul>
-
-<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var topLeft = new Point(100, 100);
-var size = new Size(150, 100);
-var rectangle = new Rectangle(topLeft, size);
-var path = new Path.Oval(rectangle);
-path.fillColor = 'black';</pre>
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="path-circle-center-radius-member" class="member">
-<div id="path-circle-center-radius-link" class="member-link">
-<a name="path-circle-center-radius" href="#" onClick="return toggleMember('path-circle-center-radius', false);"><tt><b>Path.Circle</b>(center, radius)</tt></a>
-</div>
-<div id="path-circle-center-radius-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('path-circle-center-radius', false);"><tt><b>Path.Circle</b>(center, radius)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-circle-center-radius', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a circle shaped Path Item.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the center point of the circle
-
-</li>
-
-<li>
-<tt>radius:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the radius of the circle
-
-</li>
-
-</ul>
-
-
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
-</li>
-	
-	</ul>
-
-<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var path = new Path.Circle(new Point(100, 100), 50);</pre>
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="path-arc-from-through-to-member" class="member">
-<div id="path-arc-from-through-to-link" class="member-link">
-<a name="path-arc-from-through-to" href="#" onClick="return toggleMember('path-arc-from-through-to', false);"><tt><b>Path.Arc</b>(from, through, to)</tt></a>
-</div>
-<div id="path-arc-from-through-to-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('path-arc-from-through-to', false);"><tt><b>Path.Arc</b>(from, through, to)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-arc-from-through-to', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a circular arc shaped Path Item.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>from:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the starting point of the circular arc
-
-</li>
-
-<li>
-<tt>through:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the point the arc passes through
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the end point of the arc
-
-</li>
-
-</ul>
-
-
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
-</li>
-	
-	</ul>
-
-<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var start = new Point(0, 0);
-var through = new Point(100, 100);
-var to = new Point(200, 150);
-var path = new Path.Arc(start, through, to);
-path.strokeColor = 'black';</pre>
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="path-regularpolygon-center-numSides-radius-member" class="member">
-<div id="path-regularpolygon-center-numSides-radius-link" class="member-link">
-<a name="path-regularpolygon-center-numSides-radius" href="#" onClick="return toggleMember('path-regularpolygon-center-numSides-radius', false);"><tt><b>Path.RegularPolygon</b>(center, numSides, radius)</tt></a>
-</div>
-<div id="path-regularpolygon-center-numSides-radius-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('path-regularpolygon-center-numSides-radius', false);"><tt><b>Path.RegularPolygon</b>(center, numSides, radius)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-regularpolygon-center-numSides-radius', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a regular polygon shaped Path Item.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the center point of the polygon
-
-</li>
-
-<li>
-<tt>numSides:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the number of sides of the polygon
-
-</li>
-
-<li>
-<tt>radius:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the radius of the polygon
-
-</li>
-
-</ul>
-
-
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
-</li>
-	
-	</ul>
-
-<p>
-<b>Example</b> &mdash; Create a triangle shaped path
-</p>
-
-
-<pre class="code">var center = new Point(100, 100);
-var sides = 3;
-var radius = 50;
-var triangle = new Path.RegularPolygon(center, sides, radius);
-triangle.fillColor = 'black';</pre>
-
-<p>
-<b>Example</b> &mdash; Create a decahedron shaped path
-</p>
-
-
-<pre class="code">var center = new Point(100, 100);
-var sides = 10;
-var radius = 50;
-var decahedron = new Path.RegularPolygon(center, sides, radius);
-decahedron.fillColor = 'black';</pre>
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="path-star-center-numPoints-radius1-radius2-member" class="member">
-<div id="path-star-center-numPoints-radius1-radius2-link" class="member-link">
-<a name="path-star-center-numPoints-radius1-radius2" href="#" onClick="return toggleMember('path-star-center-numPoints-radius1-radius2', false);"><tt><b>Path.Star</b>(center, numPoints, radius1, radius2)</tt></a>
-</div>
-<div id="path-star-center-numPoints-radius1-radius2-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('path-star-center-numPoints-radius1-radius2', false);"><tt><b>Path.Star</b>(center, numPoints, radius1, radius2)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-star-center-numPoints-radius1-radius2', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a star shaped Path Item.</p>
-<p>The largest of <tt>radius1</tt> and <tt>radius2</tt> will be the outer
-radius of the star. The smallest of radius1 and radius2 will be the
-inner radius.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the center point of the star
-
-</li>
-
-<li>
-<tt>numPoints:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the number of points of the star
-
-</li>
-
-<li>
-<tt>radius1:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>radius2:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-</ul>
-
-
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
-</li>
-	
-	</ul>
-
-<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var center = new Point(100, 100);
-var points = 6;
-var radius1 = 20;
-var radius2 = 50;
-var path = new Path.Star(center, points, radius1, radius2);
-path.fillColor = 'black';</pre>
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="segments-member" class="member">
-<div id="segments-link" class="member-link">
-<a name="segments" href="#" onClick="return toggleMember('segments', false);"><tt><b>segments</b></tt></a>
-</div>
-<div id="segments-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('segments', false);"><tt><b>segments</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segments', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The segments contained within the path.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="firstsegment-member" class="member">
-<div id="firstsegment-link" class="member-link">
-<a name="firstsegment" href="#" onClick="return toggleMember('firstsegment', false);"><tt><b>firstSegment</b></tt></a>
-</div>
-<div id="firstsegment-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('firstsegment', false);"><tt><b>firstSegment</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstsegment', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The first Segment contained within the path.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Segment.html"><tt>Segment</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="lastsegment-member" class="member">
-<div id="lastsegment-link" class="member-link">
-<a name="lastsegment" href="#" onClick="return toggleMember('lastsegment', false);"><tt><b>lastSegment</b></tt></a>
-</div>
-<div id="lastsegment-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lastsegment', false);"><tt><b>lastSegment</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastsegment', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The last Segment contained within the path.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Segment.html"><tt>Segment</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="curves-member" class="member">
-<div id="curves-link" class="member-link">
-<a name="curves" href="#" onClick="return toggleMember('curves', false);"><tt><b>curves</b></tt></a>
-</div>
-<div id="curves-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('curves', false);"><tt><b>curves</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curves', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The curves contained within the path.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Curve.html"><tt>Curve</tt></a> objects
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="firstcurve-member" class="member">
-<div id="firstcurve-link" class="member-link">
-<a name="firstcurve" href="#" onClick="return toggleMember('firstcurve', false);"><tt><b>firstCurve</b></tt></a>
-</div>
-<div id="firstcurve-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('firstcurve', false);"><tt><b>firstCurve</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstcurve', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The first Curve contained within the path.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Curve.html"><tt>Curve</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="lastcurve-member" class="member">
-<div id="lastcurve-link" class="member-link">
-<a name="lastcurve" href="#" onClick="return toggleMember('lastcurve', false);"><tt><b>lastCurve</b></tt></a>
-</div>
-<div id="lastcurve-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lastcurve', false);"><tt><b>lastCurve</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastcurve', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The last Curve contained within the path.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Curve.html"><tt>Curve</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="closed-member" class="member">
-<div id="closed-link" class="member-link">
-<a name="closed" href="#" onClick="return toggleMember('closed', false);"><tt><b>closed</b></tt></a>
-</div>
-<div id="closed-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('closed', false);"><tt><b>closed</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('closed', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the path is closed. If it is closed, Paper.js connects
-the first and last segments.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-var myPath = new Path();
-myPath.strokeColor = 'black';
-myPath.add(new Point(50, 75));
-myPath.add(new Point(100, 25));
-myPath.add(new Point(150, 75));
-
-// Close the path:
-myPath.closed = true;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="fullyselected-member" class="member">
-<div id="fullyselected-link" class="member-link">
-<a name="fullyselected" href="#" onClick="return toggleMember('fullyselected', false);"><tt><b>fullySelected</b></tt></a>
-</div>
-<div id="fullyselected-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fullyselected', false);"><tt><b>fullySelected</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fullyselected', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the path and all its segments are selected.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A path is fully selected, if all of its segments are selected:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-var path = new Path.Circle(new Size(80, 50), 35);
-path.fullySelected = true;
-
-var path2 = new Path.Circle(new Size(180, 50), 35);
-path2.fullySelected = true;
-
-// Deselect the second segment of the second path:
-path2.segments[1].selected = false;
-
-// If the path is fully selected (which it is),
-// set its fill color to red:
-if (path.fullySelected) {
-	path.fillColor = 'red';
-}
-
-// If the second path is fully selected (which it isn't, since we just
-// deselected its second segment),
-// set its fill color to red:
-if (path2.fullySelected) {
-	path2.fillColor = 'red';
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="clockwise-member" class="member">
-<div id="clockwise-link" class="member-link">
-<a name="clockwise" href="#" onClick="return toggleMember('clockwise', false);"><tt><b>clockwise</b></tt></a>
-</div>
-<div id="clockwise-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clockwise', false);"><tt><b>clockwise</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clockwise', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the path is oriented clock-wise.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="length-member" class="member">
-<div id="length-link" class="member-link">
-<a name="length" href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
-</div>
-<div id="length-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('length', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The length of the perimeter of the path.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="add-segment-member" class="member">
-<div id="add-segment-link" class="member-link">
-<a name="add-segment" href="#" onClick="return toggleMember('add-segment', false);"><tt><b>add</b>(segment)</tt></a>
-</div>
-<div id="add-segment-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('add-segment', false);"><tt><b>add</b>(segment)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('add-segment', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds one or more segments to the end of the <a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array of
-this path.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>segment:</tt> 
-<a href="../classes/Segment.html"><tt>Segment</tt></a> / <a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the segment or point to be added.
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>&nbsp;&mdash;&nbsp;the added segment. This is not necessarily the same
-object, e.g. if the segment to be added already belongs to another path.
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Adding segments to a path using point objects:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-var path = new Path();
-path.strokeColor = 'black';
-
-// Add a segment at {x: 30, y: 75}
-path.add(new Point(30, 75));
-
-// Add two segments in one go at {x: 100, y: 20}
-// and {x: 170, y: 75}:
-path.add(new Point(100, 20), new Point(170, 75));
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Adding segments to a path using arrays containing number pairs:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-var path = new Path();
-path.strokeColor = 'black';
-
-// Add a segment at {x: 30, y: 75}
-path.add([30, 75]);
-
-// Add two segments in one go at {x: 100, y: 20}
-// and {x: 170, y: 75}:
-path.add([100, 20], [170, 75]);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Adding segments to a path using objects:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-var path = new Path();
-path.strokeColor = 'black';
-
-// Add a segment at {x: 30, y: 75}
-path.add({x: 30, y: 75});
-
-// Add two segments in one go at {x: 100, y: 20}
-// and {x: 170, y: 75}:
-path.add({x: 100, y: 20}, {x: 170, y: 75});
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Adding a segment with handles to a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-5">
-var path = new Path();
-path.strokeColor = 'black';
-
-path.add(new Point(30, 75));
-
-// Add a segment with handles:
-var point = new Point(100, 20);
-var handleIn = new Point(-50, 0);
-var handleOut = new Point(50, 0);
-var added = path.add(new Segment(point, handleIn, handleOut));
-
-// Select the added segment, so we can see its handles:
-added.selected = true;
-
-path.add(new Point(170, 75));
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="insert-index-segment-member" class="member">
-<div id="insert-index-segment-link" class="member-link">
-<a name="insert-index-segment" href="#" onClick="return toggleMember('insert-index-segment', false);"><tt><b>insert</b>(index, segment)</tt></a>
-</div>
-<div id="insert-index-segment-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insert-index-segment', false);"><tt><b>insert</b>(index, segment)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insert-index-segment', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts one or more segments at a given index in the list of this path's
-segments.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the index at which to insert the segment.
-
-</li>
-
-<li>
-<tt>segment:</tt> 
-<a href="../classes/Segment.html"><tt>Segment</tt></a> / <a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the segment or point to be inserted.
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>&nbsp;&mdash;&nbsp;the added segment. This is not necessarily the same
-object, e.g. if the segment to be added already belongs to another path.
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Inserting a segment:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-6">
-var myPath = new Path();
-myPath.strokeColor = 'black';
-myPath.add(new Point(50, 75));
-myPath.add(new Point(150, 75));
-
-// Insert a new segment into myPath at index 1:
-myPath.insert(1, new Point(100, 25));
-
-// Select the segment which we just inserted:
-myPath.segments[1].selected = true;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Inserting multiple segments:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-7">
-var myPath = new Path();
-myPath.strokeColor = 'black';
-myPath.add(new Point(50, 75));
-myPath.add(new Point(150, 75));
-
-// Insert two segments into myPath at index 1:
-myPath.insert(1, [80, 25], [120, 25]);
-
-// Select the segments which we just inserted:
-myPath.segments[1].selected = true;
-myPath.segments[2].selected = true;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="addsegments-segments-member" class="member">
-<div id="addsegments-segments-link" class="member-link">
-<a name="addsegments-segments" href="#" onClick="return toggleMember('addsegments-segments', false);"><tt><b>addSegments</b>(segments)</tt></a>
-</div>
-<div id="addsegments-segments-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addsegments-segments', false);"><tt><b>addSegments</b>(segments)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addsegments-segments', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds an array of segments (or types that can be converted to segments)
-to the end of the <a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>segments:</tt> 
-Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array of the added segments. These segments are
-not necessarily the same objects, e.g. if the segment to be added already
-belongs to another path.
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Adding an array of Point objects:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-8">
-var path = new Path();
-path.strokeColor = 'black';
-var points = [new Point(30, 50), new Point(170, 50)];
-path.addSegments(points);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Adding an array of [x, y] arrays:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-9">
-var path = new Path();
-path.strokeColor = 'black';
-var array = [[30, 75], [100, 20], [170, 75]];
-path.addSegments(array);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Adding segments from one path to another:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-10">
-var path = new Path();
-path.strokeColor = 'black';
-path.addSegments([[30, 75], [100, 20], [170, 75]]);
-
-var path2 = new Path();
-path2.strokeColor = 'red';
-
-// Add the second and third segments of path to path2:
-path2.add(path.segments[1], path.segments[2]);
-
-// Move path2 30pt to the right:
-path2.position.x += 30;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="insertsegments-index-segments-member" class="member">
-<div id="insertsegments-index-segments-link" class="member-link">
-<a name="insertsegments-index-segments" href="#" onClick="return toggleMember('insertsegments-index-segments', false);"><tt><b>insertSegments</b>(index, segments)</tt></a>
-</div>
-<div id="insertsegments-index-segments-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertsegments-index-segments', false);"><tt><b>insertSegments</b>(index, segments)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertsegments-index-segments', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts an array of segments at a given index in the path's
-<a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the index at which to insert the segments.
-
-</li>
-
-<li>
-<tt>segments:</tt> 
-Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
-&mdash;&nbsp;the segments to be inserted.
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array of the added segments. These segments are
-not necessarily the same objects, e.g. if the segment to be added already
-belongs to another path.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="removesegment-index-member" class="member">
-<div id="removesegment-index-link" class="member-link">
-<a name="removesegment-index" href="#" onClick="return toggleMember('removesegment-index', false);"><tt><b>removeSegment</b>(index)</tt></a>
-</div>
-<div id="removesegment-index-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removesegment-index', false);"><tt><b>removeSegment</b>(index)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removesegment-index', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the segment at the specified index of the path's
-<a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the index of the segment to be removed
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>&nbsp;&mdash;&nbsp;the removed segment
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Removing a segment from a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-11">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var path = new Path.Circle(new Point(80, 50), 35);
-path.strokeColor = 'black';
-
-// Remove its second segment:
-path.removeSegment(1);
-
-// Select the path, so we can see its segments:
-path.selected = true;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="removesegments-member" class="member">
-<div id="removesegments-link" class="member-link">
-<a name="removesegments" href="#" onClick="return toggleMember('removesegments', false);"><tt><b>removeSegments</b>()</tt></a>
-</div>
-<div id="removesegments-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removesegments', false);"><tt><b>removeSegments</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removesegments', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes all segments from the path's <a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed segments
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="removesegments-from-member" class="member">
-<div id="removesegments-from-link" class="member-link">
-<a name="removesegments-from" href="#" onClick="return toggleMember('removesegments-from', false);"><tt><b>removeSegments</b>(from[, to])</tt></a>
-</div>
-<div id="removesegments-from-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removesegments-from', false);"><tt><b>removeSegments</b>(from[, to])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removesegments-from', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the segments from the specified <tt>from</tt> index to the
-<tt>to</tt> index from the path's <a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>from:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the beginning index, inclusive
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the ending index, exclusive
-&mdash;&nbsp;optional, default: <tt>segments.length</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed segments
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Removing segments from a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-12">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var path = new Path.Circle(new Point(80, 50), 35);
-path.strokeColor = 'black';
-
-// Remove the segments from index 1 till index 2:
-path.removeSegments(1, 2);
-
-// Select the path, so we can see its segments:
-path.selected = true;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="flatten-maxDistance-member" class="member">
-<div id="flatten-maxDistance-link" class="member-link">
-<a name="flatten-maxDistance" href="#" onClick="return toggleMember('flatten-maxDistance', false);"><tt><b>flatten</b>(maxDistance)</tt></a>
-</div>
-<div id="flatten-maxDistance-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('flatten-maxDistance', false);"><tt><b>flatten</b>(maxDistance)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('flatten-maxDistance', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Converts the curves in a path to straight lines with an even distribution
-of points. The distance between the produced segments is as close as
-possible to the value specified by the <tt>maxDistance</tt> parameter.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>maxDistance:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the maximum distance between the points
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Flattening a circle shaped path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-13">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var path = new Path.Circle(new Size(80, 50), 35);
-
-// Select the path, so we can inspect its segments:
-path.selected = true;
-
-// Create a copy of the path and move it 150 points to the right:
-var copy = path.clone();
-copy.position.x += 150;
-
-// Convert its curves to points, with a max distance of 20:
-copy.flatten(20);
-
-// Select the copy, so we can inspect its segments:
-copy.selected = true;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="simplify-member" class="member">
-<div id="simplify-link" class="member-link">
-<a name="simplify" href="#" onClick="return toggleMember('simplify', false);"><tt><b>simplify</b>([tolerance])</tt></a>
-</div>
-<div id="simplify-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('simplify', false);"><tt><b>simplify</b>([tolerance])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('simplify', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Smooths a path by simplifying it. The <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array is
-analyzed and replaced by a more optimal set of segments, reducing memory
-usage and speeding up drawing.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>tolerance:</tt> 
-<tt>Number</tt>
-
-&mdash;&nbsp;optional, default: <tt>2.5</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below to draw to draw a line, when you release the mouse, the is made smooth using path.simplify():
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-14">
-var path;
-function onMouseDown(event) {
-	// If we already made a path before, deselect it:
-	if (path) {
-		path.selected = false;
-	}
-
-	// Create a new path and add the position of the mouse
-	// as its first segment. Select it, so we can see the
-	// segment points:
-	path = new Path();
-	path.strokeColor = 'black';
-	path.add(event.point);
-	path.selected = true;
-}
-
-function onMouseDrag(event) {
-	// On every drag event, add a segment to the path
-	// at the position of the mouse:
-	path.add(event.point);
-}
-
-function onMouseUp(event) {
-	// When the mouse is released, simplify the path:
-	path.simplify();
-	path.selected = true;
-}
-</script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-14"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="reverse-member" class="member">
-<div id="reverse-link" class="member-link">
-<a name="reverse" href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
-</div>
-<div id="reverse-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reverse', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Reverses the segments of the path.</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="join-path-member" class="member">
-<div id="join-path-link" class="member-link">
-<a name="join-path" href="#" onClick="return toggleMember('join-path', false);"><tt><b>join</b>(path)</tt></a>
-</div>
-<div id="join-path-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('join-path', false);"><tt><b>join</b>(path)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('join-path', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Joins the path with the specified path, which will be removed in the
-process.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>path:</tt> 
-<a href="../classes/Path.html"><tt>Path</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Joining two paths:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-15">
-var path = new Path([30, 25], [30, 75]);
-path.strokeColor = 'black';
-
-var path2 = new Path([200, 25], [200, 75]);
-path2.strokeColor = 'black';
-
-// Join the paths:
-path.join(path2);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Joining two paths that share a point at the start or end of their segments array:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-16">
-var path = new Path([30, 25], [30, 75]);
-path.strokeColor = 'black';
-
-var path2 = new Path([30, 25], [80, 25]);
-path2.strokeColor = 'black';
-
-// Join the paths:
-path.join(path2);
-
-// After joining, path with have 3 segments, since it
-// shared its first segment point with the first
-// segment point of path2.
-
-// Select the path to show that they have joined:
-path.selected = true;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Joining two paths that connect at two points:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-17">
-var path = new Path([30, 25], [80, 25], [80, 75]);
-path.strokeColor = 'black';
-
-var path2 = new Path([30, 25], [30, 75], [80, 75]);
-path2.strokeColor = 'black';
-
-// Join the paths:
-path.join(path2);
-
-// Because the paths were joined at two points, the path is closed
-// and has 4 segments.
-
-// Select the path to show that they have joined:
-path.selected = true;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<h3>Positions on Paths and Curves</h3>
-
-<div id="getlocationat-offset-member" class="member">
-<div id="getlocationat-offset-link" class="member-link">
-<a name="getlocationat-offset" href="#" onClick="return toggleMember('getlocationat-offset', false);"><tt><b>getLocationAt</b>(offset[, isParameter])</tt></a>
-</div>
-<div id="getlocationat-offset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getlocationat-offset', false);"><tt><b>getLocationAt</b>(offset[, isParameter])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getlocationat-offset', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>offset:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>isParameter:</tt> 
-<tt>Boolean</tt>
-
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a></tt>
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="getpointat-offset-member" class="member">
-<div id="getpointat-offset-link" class="member-link">
-<a name="getpointat-offset" href="#" onClick="return toggleMember('getpointat-offset', false);"><tt><b>getPointAt</b>(offset[, isParameter])</tt></a>
-</div>
-<div id="getpointat-offset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getpointat-offset', false);"><tt><b>getPointAt</b>(offset[, isParameter])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getpointat-offset', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Get the point on the path at the given offset.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>offset:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>isParameter:</tt> 
-<tt>Boolean</tt>
-
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the point at the given offset
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Finding the point on a path at a given offset:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-18">
-// Create an arc shaped path:
-var path = new Path();
-path.strokeColor = 'black';
-path.add(new Point(40, 100));
-path.arcTo(new Point(150, 100));
-
-// We're going to be working with a third of the length
-// of the path as the offset:
-var offset = path.length / 3;
-
-// Find the point on the path:
-var point = path.getPointAt(offset);
-
-// Create a small circle shaped path at the point:
-var circle = new Path.Circle(point, 3);
-circle.fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="150" id="canvas-18"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Iterating over the length of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-19">
-// Create an arc shaped path:
-var path = new Path();
-path.strokeColor = 'black';
-path.add(new Point(40, 100));
-path.arcTo(new Point(150, 100));
-
-var amount = 5;
-var length = path.length;
-for (var i = 0; i < amount + 1; i++) {
-	var offset = i / amount * length;
-
-	// Find the point on the path at the given offset:
-	var point = path.getPointAt(offset);
-
-	// Create a small circle shaped path at the point:
-	var circle = new Path.Circle(point, 3);
-	circle.fillColor = 'red';
-}
-</script>
-<div class="canvas"><canvas width="516" height="150" id="canvas-19"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="gettangentat-offset-member" class="member">
-<div id="gettangentat-offset-link" class="member-link">
-<a name="gettangentat-offset" href="#" onClick="return toggleMember('gettangentat-offset', false);"><tt><b>getTangentAt</b>(offset[, isParameter])</tt></a>
-</div>
-<div id="gettangentat-offset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('gettangentat-offset', false);"><tt><b>getTangentAt</b>(offset[, isParameter])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gettangentat-offset', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Get the tangent to the path at the given offset as a vector
-point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>offset:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>isParameter:</tt> 
-<tt>Boolean</tt>
-
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the tangent vector at the given offset
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Working with the tangent vector at a given offset:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-20">
-// Create an arc shaped path:
-var path = new Path();
-path.strokeColor = 'black';
-path.add(new Point(40, 100));
-path.arcTo(new Point(150, 100));
-
-// We're going to be working with a third of the length
-// of the path as the offset:
-var offset = path.length / 3;
-
-// Find the point on the path:
-var point = path.getPointAt(offset);
-
-// Find the tangent vector at the given offset:
-var tangent = path.getTangentAt(offset);
-
-// Make the tangent vector 60pt long:
-tangent.length = 60;
-
-var path = new Path();
-path.strokeColor = 'red';
-path.add(point);
-path.add(point + tangent);
-</script>
-<div class="canvas"><canvas width="516" height="150" id="canvas-20"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Iterating over the length of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-21">
-// Create an arc shaped path:
-var path = new Path();
-path.strokeColor = 'black';
-path.add(new Point(40, 100));
-path.arcTo(new Point(150, 100));
-
-var amount = 6;
-var length = path.length;
-for (var i = 0; i < amount + 1; i++) {
-	var offset = i / amount * length;
-
-	// Find the point on the path at the given offset:
-	var point = path.getPointAt(offset);
-
-	// Find the normal vector on the path at the given offset:
-	var tangent = path.getTangentAt(offset);
-
-	// Make the tangent vector 60pt long:
-	tangent.length = 60;
-
-	var line = new Path();
-	line.strokeColor = 'red';
-	line.add(point);
-	line.add(point + tangent);
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-21"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="getnormalat-offset-member" class="member">
-<div id="getnormalat-offset-link" class="member-link">
-<a name="getnormalat-offset" href="#" onClick="return toggleMember('getnormalat-offset', false);"><tt><b>getNormalAt</b>(offset[, isParameter])</tt></a>
-</div>
-<div id="getnormalat-offset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getnormalat-offset', false);"><tt><b>getNormalAt</b>(offset[, isParameter])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getnormalat-offset', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Get the normal to the path at the given offset as a vector point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>offset:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>isParameter:</tt> 
-<tt>Boolean</tt>
-
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the normal vector at the given offset
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Working with the normal vector at a given offset:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-22">
-// Create an arc shaped path:
-var path = new Path();
-path.strokeColor = 'black';
-path.add(new Point(40, 100));
-path.arcTo(new Point(150, 100));
-
-// We're going to be working with a third of the length
-// of the path as the offset:
-var offset = path.length / 3;
-
-// Find the point on the path:
-var point = path.getPointAt(offset);
-
-// Find the normal vector at the given offset:
-var normal = path.getNormalAt(offset);
-
-// Make the normal vector 30pt long:
-normal.length = 30;
-
-var path = new Path();
-path.strokeColor = 'red';
-path.add(point);
-path.add(point + normal);
-</script>
-<div class="canvas"><canvas width="516" height="150" id="canvas-22"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Iterating over the length of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-23">
-// Create an arc shaped path:
-var path = new Path();
-path.strokeColor = 'black';
-path.add(new Point(40, 100));
-path.arcTo(new Point(150, 100));
-
-var amount = 10;
-var length = path.length;
-for (var i = 0; i < amount + 1; i++) {
-	var offset = i / amount * length;
-
-	// Find the point on the path at the given offset:
-	var point = path.getPointAt(offset);
-
-	// Find the normal vector on the path at the given offset:
-	var normal = path.getNormalAt(offset);
-
-	// Make the normal vector 30pt long:
-	normal.length = 30;
-
-	var line = new Path();
-	line.strokeColor = 'red';
-	line.add(point);
-	line.add(point + normal);
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-23"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="getnearestlocation-point-member" class="member">
-<div id="getnearestlocation-point-link" class="member-link">
-<a name="getnearestlocation-point" href="#" onClick="return toggleMember('getnearestlocation-point', false);"><tt><b>getNearestLocation</b>(point)</tt></a>
-</div>
-<div id="getnearestlocation-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getnearestlocation-point', false);"><tt><b>getNearestLocation</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getnearestlocation-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns the nearest location on the path to the specified point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-
-&mdash;&nbsp;{Point} The point for which we search the nearest location
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a></tt>&nbsp;&mdash;&nbsp;The location on the path that's the closest to
-the specified point
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="getnearestpoint-point-member" class="member">
-<div id="getnearestpoint-point-link" class="member-link">
-<a name="getnearestpoint-point" href="#" onClick="return toggleMember('getnearestpoint-point', false);"><tt><b>getNearestPoint</b>(point)</tt></a>
-</div>
-<div id="getnearestpoint-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getnearestpoint-point', false);"><tt><b>getNearestPoint</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getnearestpoint-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns the nearest point on the path to the specified point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-
-&mdash;&nbsp;{Point} The point for which we search the nearest point
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;The point on the path that's the closest to the specified
-point
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-
-<!-- =========================== inherited methods ========================= -->
-<div class="reference-members"><h2>Methods inherited from <a href="../classes/PathItem.html"><tt>PathItem</tt></a></h2>
-
-	
-<div id="smooth-member" class="member">
-<div id="smooth-link" class="member-link">
-<a name="smooth" href="#" onClick="return toggleMember('smooth', false);"><tt><b>smooth</b>()</tt></a>
-</div>
-<div id="smooth-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('smooth', false);"><tt><b>smooth</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('smooth', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Smooth bezier curves without changing the amount of segments or their
-points, by only smoothing and adjusting their handle points, for both
-open ended and closed paths.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Smoothing a closed shape:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-24">
-// Create a rectangular path with its top-left point at
-// {x: 30, y: 25} and a size of {width: 50, height: 50}:
-var path = new Path.Rectangle(new Point(30, 25), new Size(50, 50));
-path.strokeColor = 'black';
-
-// Select the path, so we can see its handles:
-path.selected = true;
-
-// Create a copy of the path and move it 100pt to the right:
-var copy = path.clone();
-copy.position.x += 100;
-
-// Smooth the segments of the copy:
-copy.smooth();
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-25">
-var path = new Path();
-path.strokeColor = 'black';
-
-path.add(new Point(30, 50));
-
-var y = 5;
-var x = 3;
-
-for (var i = 0; i < 28; i++) {
-    y *= -1.1;
-    x *= 1.1;
-    path.lineBy(x, y);
-}
-
-// Create a copy of the path and move it 100pt down:
-var copy = path.clone();
-copy.position.y += 120;
-
-// Set its stroke color to red:
-copy.strokeColor = 'red';
-
-// Smooth the segments of the copy:
-copy.smooth();
-</script>
-<div class="canvas"><canvas width="516" height="220" id="canvas-25"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<h3>Postscript Style Drawing Commands</h3>
-
-<div id="moveto-point-member" class="member">
-<div id="moveto-point-link" class="member-link">
-<a name="moveto-point" href="#" onClick="return toggleMember('moveto-point', false);"><tt><b>moveTo</b>(point)</tt></a>
-</div>
-<div id="moveto-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('moveto-point', false);"><tt><b>moveTo</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveto-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>If called on a <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, a new <a href="../classes/Path.html"><tt>Path</tt></a> is created as a
-child and the point is added as its first segment. On a normal empty
-<a href="../classes/Path.html"><tt>Path</tt></a>, the point is simply added as its first segment.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="lineto-point-member" class="member">
-<div id="lineto-point-link" class="member-link">
-<a name="lineto-point" href="#" onClick="return toggleMember('lineto-point', false);"><tt><b>lineTo</b>(point)</tt></a>
-</div>
-<div id="lineto-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lineto-point', false);"><tt><b>lineTo</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lineto-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="cubiccurveto-handle1-handle2-to-member" class="member">
-<div id="cubiccurveto-handle1-handle2-to-link" class="member-link">
-<a name="cubiccurveto-handle1-handle2-to" href="#" onClick="return toggleMember('cubiccurveto-handle1-handle2-to', false);"><tt><b>cubicCurveTo</b>(handle1, handle2, to)</tt></a>
-</div>
-<div id="cubiccurveto-handle1-handle2-to-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('cubiccurveto-handle1-handle2-to', false);"><tt><b>cubicCurveTo</b>(handle1, handle2, to)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('cubiccurveto-handle1-handle2-to', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds a cubic bezier curve to the path, defined by two handles and a to
-point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>handle1:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>handle2:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="quadraticcurveto-handle-to-member" class="member">
-<div id="quadraticcurveto-handle-to-link" class="member-link">
-<a name="quadraticcurveto-handle-to" href="#" onClick="return toggleMember('quadraticcurveto-handle-to', false);"><tt><b>quadraticCurveTo</b>(handle, to)</tt></a>
-</div>
-<div id="quadraticcurveto-handle-to-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('quadraticcurveto-handle-to', false);"><tt><b>quadraticCurveTo</b>(handle, to)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('quadraticcurveto-handle-to', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds a quadratic bezier curve to the path, defined by a handle and a to
-point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>handle:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="curveto-through-to-member" class="member">
-<div id="curveto-through-to-link" class="member-link">
-<a name="curveto-through-to" href="#" onClick="return toggleMember('curveto-through-to', false);"><tt><b>curveTo</b>(through, to[, parameter])</tt></a>
-</div>
-<div id="curveto-through-to-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('curveto-through-to', false);"><tt><b>curveTo</b>(through, to[, parameter])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveto-through-to', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Draws a curve from the position of the last segment point in the path
-that goes through the specified <tt>through</tt> point, to the specified
-<tt>to</tt> point by adding one segment to the path.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>through:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the point through which the curve should go
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the point where the curve should end
-
-</li>
-
-<li>
-<tt>parameter:</tt> 
-<tt>Number</tt>
-
-&mdash;&nbsp;optional, default: <tt>0.5</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-26">
-var myPath;
-function onMouseDrag(event) {
-	// If we created a path before, remove it:
-	if (myPath) {
-	    myPath.remove();
-	}
-
-	// Create a new path and add a segment point to it
-	// at {x: 150, y: 150):
-	myPath = new Path();
-	myPath.add(150, 150);
-
-	// Draw a curve through the position of the mouse to 'toPoint'
-	var toPoint = new Point(350, 150);
-	myPath.curveTo(event.point, toPoint);
-
-	// Select the path, so we can see its segments:
-	myPath.selected = true;
-}
-
-// When the mouse is released, deselect the path
-// and set its stroke-color to black:
-function onMouseUp(event) {
-	myPath.selected = false;
-	myPath.strokeColor = 'black';
-}
-</script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-26"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="arcto-through-to-member" class="member">
-<div id="arcto-through-to-link" class="member-link">
-<a name="arcto-through-to" href="#" onClick="return toggleMember('arcto-through-to', false);"><tt><b>arcTo</b>(through, to)</tt></a>
-</div>
-<div id="arcto-through-to-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('arcto-through-to', false);"><tt><b>arcTo</b>(through, to)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcto-through-to', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Draws an arc from the position of the last segment point in the path that
-goes through the specified <tt>through</tt> point, to the specified
-<tt>to</tt> point by adding one or more segments to the path.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>through:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the point where the arc should pass through
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the point where the arc should end
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-27">
-var path = new Path();
-path.strokeColor = 'black';
-
-var firstPoint = new Point(30, 75);
-path.add(firstPoint);
-
-// The point through which we will create the arc:
-var throughPoint = new Point(40, 40);
-
-// The point at which the arc will end:
-var toPoint = new Point(130, 75);
-
-// Draw an arc through 'throughPoint' to 'toPoint'
-path.arcTo(throughPoint, toPoint);
-
-// Add a red circle shaped path at the position of 'throughPoint':
-var circle = new Path.Circle(throughPoint, 3);
-circle.fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-28">
-var myPath;
-function onMouseDrag(event) {
-	// If we created a path before, remove it:
-	if (myPath) {
-	    myPath.remove();
-	}
-
-	// Create a new path and add a segment point to it
-	// at {x: 150, y: 150):
-	myPath = new Path();
-	myPath.add(150, 150);
-
-	// Draw an arc through the position of the mouse to 'toPoint'
-	var toPoint = new Point(350, 150);
-	myPath.arcTo(event.point, toPoint);
-
-	// Select the path, so we can see its segments:
-	myPath.selected = true;
-}
-
-// When the mouse is released, deselect the path
-// and fill it with black.
-function onMouseUp(event) {
-	myPath.selected = false;
-	myPath.fillColor = 'black';
-}
-</script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-28"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="arcto-to-member" class="member">
-<div id="arcto-to-link" class="member-link">
-<a name="arcto-to" href="#" onClick="return toggleMember('arcto-to', false);"><tt><b>arcTo</b>(to[, clockwise])</tt></a>
-</div>
-<div id="arcto-to-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('arcto-to', false);"><tt><b>arcTo</b>(to[, clockwise])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcto-to', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Draws an arc from the position of the last segment point in the path to
-the specified point by adding one or more segments to the path.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>to:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the point where the arc should end
-
-</li>
-
-<li>
-<tt>clockwise:</tt> 
-<tt>Boolean</tt>
-&mdash;&nbsp;specifies whether the arc should be
-       drawn in clockwise direction.
-&mdash;&nbsp;optional, default: <tt>true</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-29">
-var path = new Path();
-path.strokeColor = 'black';
-
-path.add(new Point(30, 75));
-path.arcTo(new Point(130, 75));
-
-var path2 = new Path();
-path2.strokeColor = 'red';
-path2.add(new Point(180, 25));
-
-// To draw an arc in anticlockwise direction,
-// we pass 'false' as the second argument to arcTo:
-path2.arcTo(new Point(280, 25), false);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-30">
-var myPath;
-
-// The mouse has to move at least 20 points before
-// the next mouse drag event is fired:
-tool.minDistance = 20;
-
-// When the user clicks, create a new path and add
-// the current mouse position to it as its first segment:
-function onMouseDown(event) {
-	myPath = new Path();
-	myPath.strokeColor = 'black';
-	myPath.add(event.point);
-}
-
-// On each mouse drag event, draw an arc to the current
-// position of the mouse:
-function onMouseDrag(event) {
-	myPath.arcTo(event.point);
-}
-</script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-30"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="closepath-member" class="member">
-<div id="closepath-link" class="member-link">
-<a name="closepath" href="#" onClick="return toggleMember('closepath', false);"><tt><b>closePath</b>()</tt></a>
-</div>
-<div id="closepath-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('closepath', false);"><tt><b>closePath</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('closepath', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Closes the path. When closed, Paper.js connects the first and last
-segments.</p>
-	
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Path.html#closed"><tt>path.closed</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Relative Drawing Commands</h3>
-
-<div id="moveby-point-member" class="member">
-<div id="moveby-point-link" class="member-link">
-<a name="moveby-point" href="#" onClick="return toggleMember('moveby-point', false);"><tt><b>moveBy</b>(point)</tt></a>
-</div>
-<div id="moveby-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('moveby-point', false);"><tt><b>moveBy</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveby-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>If called on a <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, a new <a href="../classes/Path.html"><tt>Path</tt></a> is created as a
-child and the point is added as its first segment relative to the
-position of the last segment of the current path.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="lineby-vector-member" class="member">
-<div id="lineby-vector-link" class="member-link">
-<a name="lineby-vector" href="#" onClick="return toggleMember('lineby-vector', false);"><tt><b>lineBy</b>(vector)</tt></a>
-</div>
-<div id="lineby-vector-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lineby-vector', false);"><tt><b>lineBy</b>(vector)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lineby-vector', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds a segment relative to the last segment point of the path.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>vector:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The vector which is added to the position of the
-       last segment of the path, to become the new segment.
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-31">
-var path = new Path();
-path.strokeColor = 'black';
-
-// Add a segment at {x: 50, y: 50}
-path.add(25, 25);
-
-// Add a segment relative to the last segment of the path.
-// 50 in x direction and 0 in y direction, becomes {x: 75, y: 25}
-path.lineBy(50, 0);
-
-// 0 in x direction and 50 in y direction, becomes {x: 75, y: 75}
-path.lineBy(0, 50);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-31"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Drawing a spiral using lineBy:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-32">
-var path = new Path();
-path.strokeColor = 'black';
-
-// Add the first segment at {x: 50, y: 50}
-path.add(view.center);
-
-// Loop 500 times:
-for (var i = 0; i < 500; i++) {
-	// Create a vector with an ever increasing length
-	// and an angle in increments of 45 degrees
-	var vector = new Point({
-	    angle: i * 45,
-	    length: i / 2
-	});
-	// Add the vector relatively to the last segment point:
-	path.lineBy(vector);
-}
-
-// Smooth the handles of the path:
-path.smooth();
-
-// Uncomment the following line and click on 'run' to see
-// the construction of the path:
-// path.selected = true;
-</script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-32"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="curveby-throughVector-toVector-member" class="member">
-<div id="curveby-throughVector-toVector-link" class="member-link">
-<a name="curveby-throughVector-toVector" href="#" onClick="return toggleMember('curveby-throughVector-toVector', false);"><tt><b>curveBy</b>(throughVector, toVector[, parameter])</tt></a>
-</div>
-<div id="curveby-throughVector-toVector-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('curveby-throughVector-toVector', false);"><tt><b>curveBy</b>(throughVector, toVector[, parameter])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveby-throughVector-toVector', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>throughVector:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>toVector:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>parameter:</tt> 
-<tt>Number</tt>
-
-&mdash;&nbsp;optional, default: <tt>0.5</tt>
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="arcby-throughVector-toVector-member" class="member">
-<div id="arcby-throughVector-toVector-link" class="member-link">
-<a name="arcby-throughVector-toVector" href="#" onClick="return toggleMember('arcby-throughVector-toVector', false);"><tt><b>arcBy</b>(throughVector, toVector)</tt></a>
-</div>
-<div id="arcby-throughVector-toVector-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('arcby-throughVector-toVector', false);"><tt><b>arcBy</b>(throughVector, toVector)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcby-throughVector-toVector', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>throughVector:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>toVector:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-</div>
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="id-member" class="member">
-<div id="id-link" class="member-link">
-<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-<div id="id-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The unique id of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="name-member" class="member">
-<div id="name-link" class="member-link">
-<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-<div id="name-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The name of the item. If the item has a name, it can be accessed by name
-through its parent's children list.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-33">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and add path to it as a child:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="position-member" class="member">
-<div id="position-link" class="member-link">
-<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-<div id="position-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item's position within the project. This is the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the position of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-34">
-// Create a circle at position { x: 10, y: 10 }
-var circle = new Path.Circle(new Point(10, 10), 10);
-circle.fillColor = 'red';
-
-// Move the circle to { x: 20, y: 20 }
-circle.position = new Point(20, 20);
-
-// Move the circle 100 points to the right and 50 points down
-circle.position += new Point(100, 50);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-34"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Changing the x coordinate of an item's position:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-35">
-// Create a circle at position { x: 20, y: 20 }
-var circle = new Path.Circle(new Point(20, 20), 10);
-circle.fillColor = 'red';
-
-// Move the circle 100 points to the right
-circle.position.x += 100;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="style-member" class="member">
-<div id="style-link" class="member-link">
-<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-<div id="style-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The path style of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-36">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.style = {
-	fillColor: 'blue',
-	strokeColor: 'red',
-	strokeWidth: 5
-};
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Copying the style of another item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-37">
-var path = new Path.Circle(new Point(50, 50), 30);
-path.fillColor = 'red';
-
-var path2 = new Path.Circle(new Point(180, 50), 20);
-// Copy the path style of path:
-path2.style = path.style;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-37"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Applying the same style object to multiple items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-38">
-var myStyle = {
-	fillColor: 'red',
-	strokeColor: 'blue',
-	strokeWidth: 4
-};
-
-var path = new Path.Circle(new Point(80, 50), 30);
-path.style = myStyle;
-
-var path2 = new Path.Circle(new Point(150, 50), 20);
-path2.style = myStyle;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-38"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="visible-member" class="member">
-<div id="visible-link" class="member-link">
-<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-<div id="visible-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
-item won't be drawn.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>true</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Hiding an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-39">
-var path = new Path.Circle(new Point(50, 50), 20);
-path.fillColor = 'red';
-
-// Hide the path:
-path.visible = false;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-39"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="blendmode-member" class="member">
-<div id="blendmode-link" class="member-link">
-<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-<div id="blendmode-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The blend mode of the item.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'normal'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
-'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
-'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
-'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's blend mode:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-40">
-// Create a white rectangle in the background
-// with the same dimensions as the view:
-var background = new Path.Rectangle(view.bounds);
-background.fillColor = 'white';
-
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.fillColor = 'blue';
-
-// Set the blend mode of circle2:
-circle2.blendMode = 'multiply';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-40"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="opacity-member" class="member">
-<div id="opacity-link" class="member-link">
-<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-<div id="opacity-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Making an item 50% transparent:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-41">
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.style = {
-	fillColor: 'blue',
-	strokeColor: 'green',
-	strokeWidth: 10
-};
-
-// Make circle2 50% transparent:
-circle2.opacity = 0.5;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-41"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="guide-member" class="member">
-<div id="guide-link" class="member-link">
-<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-<div id="guide-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item functions as a guide. When set to
-<tt>true</tt>, the item will be drawn at the end as a guide.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="selected-member" class="member">
-<div id="selected-link" class="member-link">
-<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-<div id="selected-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether an item is selected and will also return <tt>true</tt>
-if the item is partially selected (groups with some selected or partially
-selected paths).</p>
-<p>Paper.js draws the visual outlines of selected items on top of your
-project. This can be useful for debugging, as it allows you to see the
-construction of paths, position of path curves, individual segment points
-and bounding boxes of symbol and raster items.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Selecting an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-42">
-var path = new Path.Circle(new Size(80, 50), 35);
-path.selected = true; // Select the path
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-42"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="clipmask-member" class="member">
-<div id="clipmask-link" class="member-link">
-<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-<div id="clipmask-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item defines a clip mask. This can only be set on
-paths, compound paths, and text frame objects, and only if the item is
-already contained within a clipping group.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Project Hierarchy</h3>
-
-<div id="project-member" class="member">
-<div id="project-link" class="member-link">
-<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-<div id="project-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The project that this item belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Project.html"><tt>Project</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="layer-member" class="member">
-<div id="layer-link" class="member-link">
-<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-<div id="layer-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The layer that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Layer.html"><tt>Layer</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="parent-member" class="member">
-<div id="parent-link" class="member-link">
-<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-<div id="parent-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var path = new Path();
-
-// New items are placed in the active layer:
-console.log(path.parent == project.activeLayer); // true
-
-var group = new Group();
-group.addChild(path);
-
-// Now the parent of the path has become the group:
-console.log(path.parent == group); // true</pre>
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="children-member" class="member">
-<div id="children-link" class="member-link">
-<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-<div id="children-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The children items contained within this item. Items that define a
-<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
-<p><b>Please note:</b> The children array should not be modified directly
-using array functions. To remove single items from the children list, use
-<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
-<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
-<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Accessing items in the children array:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-43">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// Access the path through the group's children array:
-group.children[0].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-43"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Accessing children by name:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-44">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'orange';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-44"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Passing an array of items to item.children:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-45">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-var group = new Group();
-group.children = [path];
-
-// The path is the first child of the group:
-group.firstChild.fillColor = 'green';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-45"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="firstchild-member" class="member">
-<div id="firstchild-link" class="member-link">
-<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-<div id="firstchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The first item contained within this item. This is a shortcut for
-accessing <tt>item.children[0]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="lastchild-member" class="member">
-<div id="lastchild-link" class="member-link">
-<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-<div id="lastchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The last item contained within this item.This is a shortcut for
-accessing <tt>item.children[item.children.length - 1]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="nextsibling-member" class="member">
-<div id="nextsibling-link" class="member-link">
-<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-<div id="nextsibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The next item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="previoussibling-member" class="member">
-<div id="previoussibling-link" class="member-link">
-<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-<div id="previoussibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The previous item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="index-member" class="member">
-<div id="index-link" class="member-link">
-<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-<div id="index-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The index of this item within the list of its parent's children.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Bounding Rectangles</h3>
-
-<div id="bounds-member" class="member">
-<div id="bounds-link" class="member-link">
-<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-<div id="bounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item excluding stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokebounds-member" class="member">
-<div id="strokebounds-link" class="member-link">
-<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-<div id="strokebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="handlebounds-member" class="member">
-<div id="handlebounds-link" class="member-link">
-<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-<div id="handlebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including handles.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Stroke Style</h3>
-
-<div id="strokecolor-member" class="member">
-<div id="strokecolor-link" class="member-link">
-<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-<div id="strokecolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the stroke color of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-46">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to RGB red:
-circle.strokeColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-46"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokewidth-member" class="member">
-<div id="strokewidth-link" class="member-link">
-<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-<div id="strokewidth-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The width of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's stroke width:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-47">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to black:
-circle.strokeColor = 'black';
-
-// Set its stroke width to 10:
-circle.strokeWidth = 10;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-47"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokecap-member" class="member">
-<div id="strokecap-link" class="member-link">
-<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-<div id="strokecap-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
-have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'butt'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('round', 'square', 'butt')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke caps:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-48">
-var line = new Path(new Point(80, 50), new Point(420, 50));
-line.strokeColor = 'black';
-line.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-line.selected = true;
-
-// Set the stroke cap of the line to be round:
-line.strokeCap = 'round';
-
-// Copy the path and set its stroke cap to be square:
-var line2 = line.clone();
-line2.position.y += 50;
-line2.strokeCap = 'square';
-
-// Make another copy and set its stroke cap to be butt:
-var line2 = line.clone();
-line2.position.y += 100;
-line2.strokeCap = 'butt';
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-48"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokejoin-member" class="member">
-<div id="strokejoin-link" class="member-link">
-<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-<div id="strokejoin-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the corners of paths when they have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'miter'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt> ('miter', 'round', 'bevel')
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke joins:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-49">
-var path = new Path();
-path.add(new Point(80, 100));
-path.add(new Point(120, 40));
-path.add(new Point(160, 100));
-path.strokeColor = 'black';
-path.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-path.selected = true;
-
-var path2 = path.clone();
-path2.position.x += path2.bounds.width * 1.5;
-path2.strokeJoin = 'round';
-
-var path3 = path2.clone();
-path3.position.x += path3.bounds.width * 1.5;
-path3.strokeJoin = 'bevel';
-</script>
-<div class="canvas"><canvas width="516" height="120" id="canvas-49"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="dashoffset-member" class="member">
-<div id="dashoffset-link" class="member-link">
-<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-<div id="dashoffset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The dash offset of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>0</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="dasharray-member" class="member">
-<div id="dasharray-link" class="member-link">
-<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-<div id="dasharray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>[]</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Array</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-50">
-var path = new Path.Circle(new Point(80, 50), 40);
-path.strokeWidth = 2;
-path.strokeColor = 'black';
-
-// Set the dashed stroke to [10pt dash, 4pt gap]:
-path.dashArray = [10, 4];
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-50"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="miterlimit-member" class="member">
-<div id="miterlimit-link" class="member-link">
-<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-<div id="miterlimit-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The miter limit of the stroke.</p>
-<p>When two line segments meet at a sharp angle and miter joins have been
-specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
-extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
-miterLimit imposes a limit on the ratio of the miter length to the
-<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>10</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Fill Style</h3>
-
-<div id="fillcolor-member" class="member">
-<div id="fillcolor-link" class="member-link">
-<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-<div id="fillcolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The fill color of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the fill color of a path to red:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-51">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set the fill color of the circle to RGB red:
-circle.fillColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-51"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-<!-- =========================== inherited methods ========================= -->
-<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Clones the item within the same project and places the copy above the
-item.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Cloning items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-52">
-var circle = new Path.Circle(new Point(50, 50), 10);
-circle.fillColor = 'red';
-
-// Make 20 copies of the circle:
-for (var i = 0; i < 20; i++) {
-	var copy = circle.clone();
-
-	// Distribute the copies horizontally, so we can see them:
-	copy.position.x += i * copy.bounds.width;
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-52"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="copyto-item-member" class="member">
-<div id="copyto-item-link" class="member-link">
-<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-<div id="copyto-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>When passed a project, copies the item to the project,
-or duplicates it within the same project. When passed an item,
-copies the item into the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
-&mdash;&nbsp;the item or project to
-copy the item to
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rasterize-member" class="member">
-<div id="rasterize-link" class="member-link">
-<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-<div id="rasterize-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rasterizes the item into a newly created Raster object. The item itself
-is not removed after rasterization.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>resolution:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the resolution of the raster in dpi
-&mdash;&nbsp;optional, default: <tt>72</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Rasterizing an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-53">
-var circle = new Path.Circle(new Point(80, 50), 5);
-circle.fillColor = 'red';
-
-// Create a rasterized version of the path:
-var raster = circle.rasterize();
-
-// Move it 100pt to the right:
-raster.position.x += 100;
-
-// Scale the path and the raster by 300%, so we can compare them:
-circle.scale(5);
-raster.scale(5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-53"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="hittest-point-member" class="member">
-<div id="hittest-point-link" class="member-link">
-<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-<div id="hittest-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Perform a hit test on the item (and its children, if it is a
-<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
-<p>The optional options object allows you to control the specifics of the
-hit test and may contain a combination of the following values:</p>
-<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
-points.</p>
-<p><b>options.type:</b> Only hit test again a certain item
-type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
-<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
-<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
-items, taking into account stroke width.</p>
-<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
-<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
-<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
-(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
-<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
-last segment points of open path items.</p>
-<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
-side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
-(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
-<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
-<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The point where the hit test should be performed
-
-</li>
-
-<li>
-<tt>options:</tt> 
-<tt>Object</tt>
-
-&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
-tolerance: 2 }</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
-information about what exactly was hit or <tt>null</tt> if nothing was
-hit.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Operations</h3>
-
-<div id="addchild-item-member" class="member">
-<div id="addchild-item-link" class="member-link">
-<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-<div id="addchild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified item as a child of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be added as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchild-index-item-member" class="member">
-<div id="insertchild-index-item-link" class="member-link">
-<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-<div id="insertchild-index-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="addchildren-items-member" class="member">
-<div id="addchildren-items-link" class="member-link">
-<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-<div id="addchildren-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified items as children of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>items:</tt> 
-<tt>item</tt>
-&mdash;&nbsp;The items to be added as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchildren-index-items-member" class="member">
-<div id="insertchildren-index-items-link" class="member-link">
-<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-<div id="insertchildren-index-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified items as children of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>items:</tt> 
-Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-&mdash;&nbsp;The items to be appended as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertabove-item-member" class="member">
-<div id="insertabove-item-link" class="member-link">
-<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-<div id="insertabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertbelow-item-member" class="member">
-<div id="insertbelow-item-link" class="member-link">
-<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-<div id="insertbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendtop-item-member" class="member">
-<div id="appendtop-item-link" class="member-link">
-<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-<div id="appendtop-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it above all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendbottom-item-member" class="member">
-<div id="appendbottom-item-link" class="member-link">
-<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-<div id="appendbottom-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it below all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="moveabove-item-member" class="member">
-<div id="moveabove-item-link" class="member-link">
-<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-<div id="moveabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="movebelow-item-member" class="member">
-<div id="movebelow-item-link" class="member-link">
-<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-<div id="movebelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves the item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item below which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="remove-member" class="member">
-<div id="remove-link" class="member-link">
-<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-<div id="remove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item from the project. If the item has children, they are also
-removed.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-member" class="member">
-<div id="removechildren-link" class="member-link">
-<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-<div id="removechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-from-member" class="member">
-<div id="removechildren-from-link" class="member-link">
-<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-<div id="removechildren-from-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the children from the specified <tt>from</tt> index to the
-<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>from:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the beginning index, inclusive
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the ending index, exclusive
-&mdash;&nbsp;optional, default: <tt>children.length</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="reversechildren-member" class="member">
-<div id="reversechildren-link" class="member-link">
-<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-<div id="reversechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Reverses the order of the item's children</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Tests</h3>
-
-<div id="haschildren-member" class="member">
-<div id="haschildren-link" class="member-link">
-<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-<div id="haschildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item contains any children items.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isabove-item-member" class="member">
-<div id="isabove-item-link" class="member-link">
-<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-<div id="isabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if this item is above the specified item in the stacking order
-of the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isbelow-item-member" class="member">
-<div id="isbelow-item-link" class="member-link">
-<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-<div id="isbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is below the specified item in the stacking order of
-the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isparent-item-member" class="member">
-<div id="isparent-item-link" class="member-link">
-<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-<div id="isparent-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is the parent of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="ischild-item-member" class="member">
-<div id="ischild-item-link" class="member-link">
-<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-<div id="ischild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is a child of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isdescendant-item-member" class="member">
-<div id="isdescendant-item-link" class="member-link">
-<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-<div id="isdescendant-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is contained within the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isancestor-item-member" class="member">
-<div id="isancestor-item-link" class="member-link">
-<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-<div id="isancestor-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is an ancestor of the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
-item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isgroupedwith-item-member" class="member">
-<div id="isgroupedwith-item-link" class="member-link">
-<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-<div id="isgroupedwith-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the item is grouped with the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Transform Functions</h3>
-
-<div id="scale-scale-member" class="member">
-<div id="scale-scale-link" class="member-link">
-<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-<div id="scale-scale-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given value from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>scale:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item from its center point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-54">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path by 150% from its center point
-circle.scale(1.5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-54"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Scaling an item from a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-55">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path 150% from its bottom left corner
-circle.scale(1.5, circle.bounds.bottomLeft);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-55"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="scale-hor-ver-member" class="member">
-<div id="scale-hor-ver-link" class="member-link">
-<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="scale-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given values from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal scale factor
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item horizontally by 300%:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-56">
-// Create a circle shaped path at { x: 100, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(100, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path horizontally by 300%
-circle.scale(3, 1);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-56"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="translate-delta-member" class="member">
-<div id="translate-delta-link" class="member-link">
-<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-<div id="translate-delta-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Translates (moves) the item by the given offset point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>delta:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the offset to translate the item by
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rotate-angle-member" class="member">
-<div id="rotate-angle-link" class="member-link">
-<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-<div id="rotate-angle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rotates the item by a given angle around the given point.</p>
-<p>Angles are oriented clockwise and measured in degrees.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>angle:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the rotation angle
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Rotating an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-57">
-// Create a rectangle shaped path with its top left
-// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
-var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
-path.fillColor = 'black';
-
-// Rotate the path by 30 degrees:
-path.rotate(30);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-57"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Rotating an item around a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-58">
-// Create a rectangle shaped path with its top left
-// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
-var topLeft = new Point(175, 50);
-var size = new Size(100, 100);
-var path = new Path.Rectangle(topLeft, size);
-path.fillColor = 'black';
-
-// Draw a circle shaped path in the center of the view,
-// to show the rotation point:
-var circle = new Path.Circle(view.center, 5);
-circle.fillColor = 'white';
-
-// Each frame rotate the path 3 degrees around the center point
-// of the view:
-function onFrame(event) {
-	path.rotate(3, view.center);
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-58"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="shear-point-member" class="member">
-<div id="shear-point-link" class="member-link">
-<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-<div id="shear-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given value from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="shear-hor-ver-member" class="member">
-<div id="shear-hor-ver-link" class="member-link">
-<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="shear-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given values from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal shear factor.
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical shear factor.
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="transform-matrix-flags-member" class="member">
-<div id="transform-matrix-flags-link" class="member-link">
-<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-<div id="transform-matrix-flags-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>matrix:</tt> 
-<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-
-
-</li>
-
-<li>
-<tt>flags:</tt> 
-
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="fitbounds-rectangle-member" class="member">
-<div id="fitbounds-rectangle-link" class="member-link">
-<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-<div id="fitbounds-rectangle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
-rectangle, without changing its aspect ratio.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rectangle:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-
-
-</li>
-
-<li>
-<tt>fill:</tt> 
-<tt>Boolean</tt>
-
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-59">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-59"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-60">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds, true);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-60"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-61">
-var path = new Path.Circle(new Point(80, 50), 30);
-path.fillColor = 'red';
-
-// Fit the path to the bounding rectangle of the view:
-path.fitBounds(view.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-61"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<h3>Remove On Event</h3>
-
-<div id="removeon-object-member" class="member">
-<div id="removeon-object-link" class="member-link">
-<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-<div id="removeon-object-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the events specified in the passed object literal
-occur.</p>
-<p>The object literal can contain the following values:</p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
-fired: <tt>object.move = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
-fired: <tt>object.drag = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
-fired: <tt>object.down = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
-fired: <tt>object.up = true</tt></p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>object:</tt> 
-<tt>Object</tt>
-
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-62">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path on the next onMouseDrag or onMouseDown event:
-	path.removeOn({
-		drag: true,
-		down: true
-	});
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-62"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonmove-member" class="member">
-<div id="removeonmove-link" class="member-link">
-<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-<div id="removeonmove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Move your mouse below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-63">
-function onMouseMove(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next move event, automatically remove the path:
-	path.removeOnMove();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-63"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondown-member" class="member">
-<div id="removeondown-link" class="member-link">
-<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-<div id="removeondown-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-64">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, next time the mouse is pressed:
-	path.removeOnDown();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-64"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondrag-member" class="member">
-<div id="removeondrag-link" class="member-link">
-<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-<div id="removeondrag-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-65">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next drag event, automatically remove the path:
-	path.removeOnDrag();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-65"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonup-member" class="member">
-<div id="removeonup-link" class="member-link">
-<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-<div id="removeonup-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-66">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, when the mouse is released:
-	path.removeOnUp();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-66"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-</div>
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/PathItem.html b/dist/docs/classes/PathItem.html
deleted file mode 100644
index 105888d1..00000000
--- a/dist/docs/classes/PathItem.html
+++ /dev/null
@@ -1,4279 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>PathItem</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>PathItem</h1>
-
-<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
-
-<p>The PathItem class is the base for any items that describe paths
-and offer standardised methods for drawing and path manipulation, such as
-<a href="../classes/Path.html"><tt>Path</tt></a> and <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>.</p>
-
-</div>
-
-
-
-
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="smooth-member" class="member">
-<div id="smooth-link" class="member-link">
-<a name="smooth" href="#" onClick="return toggleMember('smooth', false);"><tt><b>smooth</b>()</tt></a>
-</div>
-<div id="smooth-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('smooth', false);"><tt><b>smooth</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('smooth', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Smooth bezier curves without changing the amount of segments or their
-points, by only smoothing and adjusting their handle points, for both
-open ended and closed paths.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Smoothing a closed shape:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-// Create a rectangular path with its top-left point at
-// {x: 30, y: 25} and a size of {width: 50, height: 50}:
-var path = new Path.Rectangle(new Point(30, 25), new Size(50, 50));
-path.strokeColor = 'black';
-
-// Select the path, so we can see its handles:
-path.selected = true;
-
-// Create a copy of the path and move it 100pt to the right:
-var copy = path.clone();
-copy.position.x += 100;
-
-// Smooth the segments of the copy:
-copy.smooth();
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-var path = new Path();
-path.strokeColor = 'black';
-
-path.add(new Point(30, 50));
-
-var y = 5;
-var x = 3;
-
-for (var i = 0; i < 28; i++) {
-    y *= -1.1;
-    x *= 1.1;
-    path.lineBy(x, y);
-}
-
-// Create a copy of the path and move it 100pt down:
-var copy = path.clone();
-copy.position.y += 120;
-
-// Set its stroke color to red:
-copy.strokeColor = 'red';
-
-// Smooth the segments of the copy:
-copy.smooth();
-</script>
-<div class="canvas"><canvas width="516" height="220" id="canvas-1"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<h3>Postscript Style Drawing Commands</h3>
-
-<div id="moveto-point-member" class="member">
-<div id="moveto-point-link" class="member-link">
-<a name="moveto-point" href="#" onClick="return toggleMember('moveto-point', false);"><tt><b>moveTo</b>(point)</tt></a>
-</div>
-<div id="moveto-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('moveto-point', false);"><tt><b>moveTo</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveto-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>If called on a <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, a new <a href="../classes/Path.html"><tt>Path</tt></a> is created as a
-child and the point is added as its first segment. On a normal empty
-<a href="../classes/Path.html"><tt>Path</tt></a>, the point is simply added as its first segment.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="lineto-point-member" class="member">
-<div id="lineto-point-link" class="member-link">
-<a name="lineto-point" href="#" onClick="return toggleMember('lineto-point', false);"><tt><b>lineTo</b>(point)</tt></a>
-</div>
-<div id="lineto-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lineto-point', false);"><tt><b>lineTo</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lineto-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="cubiccurveto-handle1-handle2-to-member" class="member">
-<div id="cubiccurveto-handle1-handle2-to-link" class="member-link">
-<a name="cubiccurveto-handle1-handle2-to" href="#" onClick="return toggleMember('cubiccurveto-handle1-handle2-to', false);"><tt><b>cubicCurveTo</b>(handle1, handle2, to)</tt></a>
-</div>
-<div id="cubiccurveto-handle1-handle2-to-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('cubiccurveto-handle1-handle2-to', false);"><tt><b>cubicCurveTo</b>(handle1, handle2, to)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('cubiccurveto-handle1-handle2-to', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds a cubic bezier curve to the path, defined by two handles and a to
-point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>handle1:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>handle2:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="quadraticcurveto-handle-to-member" class="member">
-<div id="quadraticcurveto-handle-to-link" class="member-link">
-<a name="quadraticcurveto-handle-to" href="#" onClick="return toggleMember('quadraticcurveto-handle-to', false);"><tt><b>quadraticCurveTo</b>(handle, to)</tt></a>
-</div>
-<div id="quadraticcurveto-handle-to-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('quadraticcurveto-handle-to', false);"><tt><b>quadraticCurveTo</b>(handle, to)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('quadraticcurveto-handle-to', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds a quadratic bezier curve to the path, defined by a handle and a to
-point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>handle:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="curveto-through-to-member" class="member">
-<div id="curveto-through-to-link" class="member-link">
-<a name="curveto-through-to" href="#" onClick="return toggleMember('curveto-through-to', false);"><tt><b>curveTo</b>(through, to[, parameter])</tt></a>
-</div>
-<div id="curveto-through-to-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('curveto-through-to', false);"><tt><b>curveTo</b>(through, to[, parameter])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveto-through-to', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Draws a curve from the position of the last segment point in the path
-that goes through the specified <tt>through</tt> point, to the specified
-<tt>to</tt> point by adding one segment to the path.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>through:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the point through which the curve should go
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the point where the curve should end
-
-</li>
-
-<li>
-<tt>parameter:</tt> 
-<tt>Number</tt>
-
-&mdash;&nbsp;optional, default: <tt>0.5</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-var myPath;
-function onMouseDrag(event) {
-	// If we created a path before, remove it:
-	if (myPath) {
-	    myPath.remove();
-	}
-
-	// Create a new path and add a segment point to it
-	// at {x: 150, y: 150):
-	myPath = new Path();
-	myPath.add(150, 150);
-
-	// Draw a curve through the position of the mouse to 'toPoint'
-	var toPoint = new Point(350, 150);
-	myPath.curveTo(event.point, toPoint);
-
-	// Select the path, so we can see its segments:
-	myPath.selected = true;
-}
-
-// When the mouse is released, deselect the path
-// and set its stroke-color to black:
-function onMouseUp(event) {
-	myPath.selected = false;
-	myPath.strokeColor = 'black';
-}
-</script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="arcto-through-to-member" class="member">
-<div id="arcto-through-to-link" class="member-link">
-<a name="arcto-through-to" href="#" onClick="return toggleMember('arcto-through-to', false);"><tt><b>arcTo</b>(through, to)</tt></a>
-</div>
-<div id="arcto-through-to-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('arcto-through-to', false);"><tt><b>arcTo</b>(through, to)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcto-through-to', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Draws an arc from the position of the last segment point in the path that
-goes through the specified <tt>through</tt> point, to the specified
-<tt>to</tt> point by adding one or more segments to the path.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>through:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the point where the arc should pass through
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the point where the arc should end
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-var path = new Path();
-path.strokeColor = 'black';
-
-var firstPoint = new Point(30, 75);
-path.add(firstPoint);
-
-// The point through which we will create the arc:
-var throughPoint = new Point(40, 40);
-
-// The point at which the arc will end:
-var toPoint = new Point(130, 75);
-
-// Draw an arc through 'throughPoint' to 'toPoint'
-path.arcTo(throughPoint, toPoint);
-
-// Add a red circle shaped path at the position of 'throughPoint':
-var circle = new Path.Circle(throughPoint, 3);
-circle.fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-var myPath;
-function onMouseDrag(event) {
-	// If we created a path before, remove it:
-	if (myPath) {
-	    myPath.remove();
-	}
-
-	// Create a new path and add a segment point to it
-	// at {x: 150, y: 150):
-	myPath = new Path();
-	myPath.add(150, 150);
-
-	// Draw an arc through the position of the mouse to 'toPoint'
-	var toPoint = new Point(350, 150);
-	myPath.arcTo(event.point, toPoint);
-
-	// Select the path, so we can see its segments:
-	myPath.selected = true;
-}
-
-// When the mouse is released, deselect the path
-// and fill it with black.
-function onMouseUp(event) {
-	myPath.selected = false;
-	myPath.fillColor = 'black';
-}
-</script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-4"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="arcto-to-member" class="member">
-<div id="arcto-to-link" class="member-link">
-<a name="arcto-to" href="#" onClick="return toggleMember('arcto-to', false);"><tt><b>arcTo</b>(to[, clockwise])</tt></a>
-</div>
-<div id="arcto-to-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('arcto-to', false);"><tt><b>arcTo</b>(to[, clockwise])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcto-to', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Draws an arc from the position of the last segment point in the path to
-the specified point by adding one or more segments to the path.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>to:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the point where the arc should end
-
-</li>
-
-<li>
-<tt>clockwise:</tt> 
-<tt>Boolean</tt>
-&mdash;&nbsp;specifies whether the arc should be
-       drawn in clockwise direction.
-&mdash;&nbsp;optional, default: <tt>true</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-5">
-var path = new Path();
-path.strokeColor = 'black';
-
-path.add(new Point(30, 75));
-path.arcTo(new Point(130, 75));
-
-var path2 = new Path();
-path2.strokeColor = 'red';
-path2.add(new Point(180, 25));
-
-// To draw an arc in anticlockwise direction,
-// we pass 'false' as the second argument to arcTo:
-path2.arcTo(new Point(280, 25), false);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-6">
-var myPath;
-
-// The mouse has to move at least 20 points before
-// the next mouse drag event is fired:
-tool.minDistance = 20;
-
-// When the user clicks, create a new path and add
-// the current mouse position to it as its first segment:
-function onMouseDown(event) {
-	myPath = new Path();
-	myPath.strokeColor = 'black';
-	myPath.add(event.point);
-}
-
-// On each mouse drag event, draw an arc to the current
-// position of the mouse:
-function onMouseDrag(event) {
-	myPath.arcTo(event.point);
-}
-</script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-6"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="closepath-member" class="member">
-<div id="closepath-link" class="member-link">
-<a name="closepath" href="#" onClick="return toggleMember('closepath', false);"><tt><b>closePath</b>()</tt></a>
-</div>
-<div id="closepath-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('closepath', false);"><tt><b>closePath</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('closepath', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Closes the path. When closed, Paper.js connects the first and last
-segments.</p>
-	
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Path.html#closed"><tt>path.closed</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-		
-			
-<h3>Relative Drawing Commands</h3>
-
-<div id="moveby-point-member" class="member">
-<div id="moveby-point-link" class="member-link">
-<a name="moveby-point" href="#" onClick="return toggleMember('moveby-point', false);"><tt><b>moveBy</b>(point)</tt></a>
-</div>
-<div id="moveby-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('moveby-point', false);"><tt><b>moveBy</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveby-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>If called on a <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, a new <a href="../classes/Path.html"><tt>Path</tt></a> is created as a
-child and the point is added as its first segment relative to the
-position of the last segment of the current path.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="lineby-vector-member" class="member">
-<div id="lineby-vector-link" class="member-link">
-<a name="lineby-vector" href="#" onClick="return toggleMember('lineby-vector', false);"><tt><b>lineBy</b>(vector)</tt></a>
-</div>
-<div id="lineby-vector-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lineby-vector', false);"><tt><b>lineBy</b>(vector)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lineby-vector', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds a segment relative to the last segment point of the path.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>vector:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The vector which is added to the position of the
-       last segment of the path, to become the new segment.
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-7">
-var path = new Path();
-path.strokeColor = 'black';
-
-// Add a segment at {x: 50, y: 50}
-path.add(25, 25);
-
-// Add a segment relative to the last segment of the path.
-// 50 in x direction and 0 in y direction, becomes {x: 75, y: 25}
-path.lineBy(50, 0);
-
-// 0 in x direction and 50 in y direction, becomes {x: 75, y: 75}
-path.lineBy(0, 50);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Drawing a spiral using lineBy:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-8">
-var path = new Path();
-path.strokeColor = 'black';
-
-// Add the first segment at {x: 50, y: 50}
-path.add(view.center);
-
-// Loop 500 times:
-for (var i = 0; i < 500; i++) {
-	// Create a vector with an ever increasing length
-	// and an angle in increments of 45 degrees
-	var vector = new Point({
-	    angle: i * 45,
-	    length: i / 2
-	});
-	// Add the vector relatively to the last segment point:
-	path.lineBy(vector);
-}
-
-// Smooth the handles of the path:
-path.smooth();
-
-// Uncomment the following line and click on 'run' to see
-// the construction of the path:
-// path.selected = true;
-</script>
-<div class="canvas"><canvas width="516" height="300" id="canvas-8"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="curveby-throughVector-toVector-member" class="member">
-<div id="curveby-throughVector-toVector-link" class="member-link">
-<a name="curveby-throughVector-toVector" href="#" onClick="return toggleMember('curveby-throughVector-toVector', false);"><tt><b>curveBy</b>(throughVector, toVector[, parameter])</tt></a>
-</div>
-<div id="curveby-throughVector-toVector-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('curveby-throughVector-toVector', false);"><tt><b>curveBy</b>(throughVector, toVector[, parameter])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveby-throughVector-toVector', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>throughVector:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>toVector:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>parameter:</tt> 
-<tt>Number</tt>
-
-&mdash;&nbsp;optional, default: <tt>0.5</tt>
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="arcby-throughVector-toVector-member" class="member">
-<div id="arcby-throughVector-toVector-link" class="member-link">
-<a name="arcby-throughVector-toVector" href="#" onClick="return toggleMember('arcby-throughVector-toVector', false);"><tt><b>arcBy</b>(throughVector, toVector)</tt></a>
-</div>
-<div id="arcby-throughVector-toVector-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('arcby-throughVector-toVector', false);"><tt><b>arcBy</b>(throughVector, toVector)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcby-throughVector-toVector', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>throughVector:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>toVector:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="id-member" class="member">
-<div id="id-link" class="member-link">
-<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-<div id="id-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The unique id of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="name-member" class="member">
-<div id="name-link" class="member-link">
-<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-<div id="name-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The name of the item. If the item has a name, it can be accessed by name
-through its parent's children list.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-9">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and add path to it as a child:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="position-member" class="member">
-<div id="position-link" class="member-link">
-<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-<div id="position-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item's position within the project. This is the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the position of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-10">
-// Create a circle at position { x: 10, y: 10 }
-var circle = new Path.Circle(new Point(10, 10), 10);
-circle.fillColor = 'red';
-
-// Move the circle to { x: 20, y: 20 }
-circle.position = new Point(20, 20);
-
-// Move the circle 100 points to the right and 50 points down
-circle.position += new Point(100, 50);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Changing the x coordinate of an item's position:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-11">
-// Create a circle at position { x: 20, y: 20 }
-var circle = new Path.Circle(new Point(20, 20), 10);
-circle.fillColor = 'red';
-
-// Move the circle 100 points to the right
-circle.position.x += 100;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="style-member" class="member">
-<div id="style-link" class="member-link">
-<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-<div id="style-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The path style of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-12">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.style = {
-	fillColor: 'blue',
-	strokeColor: 'red',
-	strokeWidth: 5
-};
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Copying the style of another item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-13">
-var path = new Path.Circle(new Point(50, 50), 30);
-path.fillColor = 'red';
-
-var path2 = new Path.Circle(new Point(180, 50), 20);
-// Copy the path style of path:
-path2.style = path.style;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Applying the same style object to multiple items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-14">
-var myStyle = {
-	fillColor: 'red',
-	strokeColor: 'blue',
-	strokeWidth: 4
-};
-
-var path = new Path.Circle(new Point(80, 50), 30);
-path.style = myStyle;
-
-var path2 = new Path.Circle(new Point(150, 50), 20);
-path2.style = myStyle;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="visible-member" class="member">
-<div id="visible-link" class="member-link">
-<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-<div id="visible-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
-item won't be drawn.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>true</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Hiding an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-15">
-var path = new Path.Circle(new Point(50, 50), 20);
-path.fillColor = 'red';
-
-// Hide the path:
-path.visible = false;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="blendmode-member" class="member">
-<div id="blendmode-link" class="member-link">
-<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-<div id="blendmode-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The blend mode of the item.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'normal'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
-'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
-'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
-'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's blend mode:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-16">
-// Create a white rectangle in the background
-// with the same dimensions as the view:
-var background = new Path.Rectangle(view.bounds);
-background.fillColor = 'white';
-
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.fillColor = 'blue';
-
-// Set the blend mode of circle2:
-circle2.blendMode = 'multiply';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="opacity-member" class="member">
-<div id="opacity-link" class="member-link">
-<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-<div id="opacity-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Making an item 50% transparent:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-17">
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.style = {
-	fillColor: 'blue',
-	strokeColor: 'green',
-	strokeWidth: 10
-};
-
-// Make circle2 50% transparent:
-circle2.opacity = 0.5;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="guide-member" class="member">
-<div id="guide-link" class="member-link">
-<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-<div id="guide-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item functions as a guide. When set to
-<tt>true</tt>, the item will be drawn at the end as a guide.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="selected-member" class="member">
-<div id="selected-link" class="member-link">
-<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-<div id="selected-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether an item is selected and will also return <tt>true</tt>
-if the item is partially selected (groups with some selected or partially
-selected paths).</p>
-<p>Paper.js draws the visual outlines of selected items on top of your
-project. This can be useful for debugging, as it allows you to see the
-construction of paths, position of path curves, individual segment points
-and bounding boxes of symbol and raster items.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Selecting an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-18">
-var path = new Path.Circle(new Size(80, 50), 35);
-path.selected = true; // Select the path
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="clipmask-member" class="member">
-<div id="clipmask-link" class="member-link">
-<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-<div id="clipmask-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item defines a clip mask. This can only be set on
-paths, compound paths, and text frame objects, and only if the item is
-already contained within a clipping group.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Project Hierarchy</h3>
-
-<div id="project-member" class="member">
-<div id="project-link" class="member-link">
-<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-<div id="project-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The project that this item belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Project.html"><tt>Project</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="layer-member" class="member">
-<div id="layer-link" class="member-link">
-<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-<div id="layer-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The layer that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Layer.html"><tt>Layer</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="parent-member" class="member">
-<div id="parent-link" class="member-link">
-<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-<div id="parent-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var path = new Path();
-
-// New items are placed in the active layer:
-console.log(path.parent == project.activeLayer); // true
-
-var group = new Group();
-group.addChild(path);
-
-// Now the parent of the path has become the group:
-console.log(path.parent == group); // true</pre>
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="children-member" class="member">
-<div id="children-link" class="member-link">
-<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-<div id="children-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The children items contained within this item. Items that define a
-<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
-<p><b>Please note:</b> The children array should not be modified directly
-using array functions. To remove single items from the children list, use
-<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
-<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
-<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Accessing items in the children array:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-19">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// Access the path through the group's children array:
-group.children[0].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Accessing children by name:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-20">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'orange';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Passing an array of items to item.children:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-21">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-var group = new Group();
-group.children = [path];
-
-// The path is the first child of the group:
-group.firstChild.fillColor = 'green';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="firstchild-member" class="member">
-<div id="firstchild-link" class="member-link">
-<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-<div id="firstchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The first item contained within this item. This is a shortcut for
-accessing <tt>item.children[0]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="lastchild-member" class="member">
-<div id="lastchild-link" class="member-link">
-<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-<div id="lastchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The last item contained within this item.This is a shortcut for
-accessing <tt>item.children[item.children.length - 1]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="nextsibling-member" class="member">
-<div id="nextsibling-link" class="member-link">
-<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-<div id="nextsibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The next item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="previoussibling-member" class="member">
-<div id="previoussibling-link" class="member-link">
-<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-<div id="previoussibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The previous item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="index-member" class="member">
-<div id="index-link" class="member-link">
-<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-<div id="index-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The index of this item within the list of its parent's children.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Bounding Rectangles</h3>
-
-<div id="bounds-member" class="member">
-<div id="bounds-link" class="member-link">
-<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-<div id="bounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item excluding stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokebounds-member" class="member">
-<div id="strokebounds-link" class="member-link">
-<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-<div id="strokebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="handlebounds-member" class="member">
-<div id="handlebounds-link" class="member-link">
-<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-<div id="handlebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including handles.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Stroke Style</h3>
-
-<div id="strokecolor-member" class="member">
-<div id="strokecolor-link" class="member-link">
-<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-<div id="strokecolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the stroke color of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-22">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to RGB red:
-circle.strokeColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokewidth-member" class="member">
-<div id="strokewidth-link" class="member-link">
-<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-<div id="strokewidth-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The width of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's stroke width:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-23">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to black:
-circle.strokeColor = 'black';
-
-// Set its stroke width to 10:
-circle.strokeWidth = 10;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokecap-member" class="member">
-<div id="strokecap-link" class="member-link">
-<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-<div id="strokecap-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
-have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'butt'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('round', 'square', 'butt')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke caps:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-24">
-var line = new Path(new Point(80, 50), new Point(420, 50));
-line.strokeColor = 'black';
-line.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-line.selected = true;
-
-// Set the stroke cap of the line to be round:
-line.strokeCap = 'round';
-
-// Copy the path and set its stroke cap to be square:
-var line2 = line.clone();
-line2.position.y += 50;
-line2.strokeCap = 'square';
-
-// Make another copy and set its stroke cap to be butt:
-var line2 = line.clone();
-line2.position.y += 100;
-line2.strokeCap = 'butt';
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-24"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokejoin-member" class="member">
-<div id="strokejoin-link" class="member-link">
-<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-<div id="strokejoin-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the corners of paths when they have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'miter'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt> ('miter', 'round', 'bevel')
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke joins:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-25">
-var path = new Path();
-path.add(new Point(80, 100));
-path.add(new Point(120, 40));
-path.add(new Point(160, 100));
-path.strokeColor = 'black';
-path.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-path.selected = true;
-
-var path2 = path.clone();
-path2.position.x += path2.bounds.width * 1.5;
-path2.strokeJoin = 'round';
-
-var path3 = path2.clone();
-path3.position.x += path3.bounds.width * 1.5;
-path3.strokeJoin = 'bevel';
-</script>
-<div class="canvas"><canvas width="516" height="120" id="canvas-25"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="dashoffset-member" class="member">
-<div id="dashoffset-link" class="member-link">
-<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-<div id="dashoffset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The dash offset of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>0</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="dasharray-member" class="member">
-<div id="dasharray-link" class="member-link">
-<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-<div id="dasharray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>[]</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Array</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-26">
-var path = new Path.Circle(new Point(80, 50), 40);
-path.strokeWidth = 2;
-path.strokeColor = 'black';
-
-// Set the dashed stroke to [10pt dash, 4pt gap]:
-path.dashArray = [10, 4];
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="miterlimit-member" class="member">
-<div id="miterlimit-link" class="member-link">
-<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-<div id="miterlimit-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The miter limit of the stroke.</p>
-<p>When two line segments meet at a sharp angle and miter joins have been
-specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
-extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
-miterLimit imposes a limit on the ratio of the miter length to the
-<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>10</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Fill Style</h3>
-
-<div id="fillcolor-member" class="member">
-<div id="fillcolor-link" class="member-link">
-<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-<div id="fillcolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The fill color of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the fill color of a path to red:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-27">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set the fill color of the circle to RGB red:
-circle.fillColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-<!-- =========================== inherited methods ========================= -->
-<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Clones the item within the same project and places the copy above the
-item.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Cloning items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-28">
-var circle = new Path.Circle(new Point(50, 50), 10);
-circle.fillColor = 'red';
-
-// Make 20 copies of the circle:
-for (var i = 0; i < 20; i++) {
-	var copy = circle.clone();
-
-	// Distribute the copies horizontally, so we can see them:
-	copy.position.x += i * copy.bounds.width;
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="copyto-item-member" class="member">
-<div id="copyto-item-link" class="member-link">
-<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-<div id="copyto-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>When passed a project, copies the item to the project,
-or duplicates it within the same project. When passed an item,
-copies the item into the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
-&mdash;&nbsp;the item or project to
-copy the item to
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rasterize-member" class="member">
-<div id="rasterize-link" class="member-link">
-<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-<div id="rasterize-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rasterizes the item into a newly created Raster object. The item itself
-is not removed after rasterization.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>resolution:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the resolution of the raster in dpi
-&mdash;&nbsp;optional, default: <tt>72</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Rasterizing an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-29">
-var circle = new Path.Circle(new Point(80, 50), 5);
-circle.fillColor = 'red';
-
-// Create a rasterized version of the path:
-var raster = circle.rasterize();
-
-// Move it 100pt to the right:
-raster.position.x += 100;
-
-// Scale the path and the raster by 300%, so we can compare them:
-circle.scale(5);
-raster.scale(5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="hittest-point-member" class="member">
-<div id="hittest-point-link" class="member-link">
-<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-<div id="hittest-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Perform a hit test on the item (and its children, if it is a
-<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
-<p>The optional options object allows you to control the specifics of the
-hit test and may contain a combination of the following values:</p>
-<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
-points.</p>
-<p><b>options.type:</b> Only hit test again a certain item
-type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
-<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
-<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
-items, taking into account stroke width.</p>
-<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
-<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
-<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
-(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
-<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
-last segment points of open path items.</p>
-<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
-side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
-(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
-<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
-<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The point where the hit test should be performed
-
-</li>
-
-<li>
-<tt>options:</tt> 
-<tt>Object</tt>
-
-&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
-tolerance: 2 }</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
-information about what exactly was hit or <tt>null</tt> if nothing was
-hit.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Operations</h3>
-
-<div id="addchild-item-member" class="member">
-<div id="addchild-item-link" class="member-link">
-<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-<div id="addchild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified item as a child of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be added as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchild-index-item-member" class="member">
-<div id="insertchild-index-item-link" class="member-link">
-<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-<div id="insertchild-index-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="addchildren-items-member" class="member">
-<div id="addchildren-items-link" class="member-link">
-<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-<div id="addchildren-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified items as children of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>items:</tt> 
-<tt>item</tt>
-&mdash;&nbsp;The items to be added as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchildren-index-items-member" class="member">
-<div id="insertchildren-index-items-link" class="member-link">
-<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-<div id="insertchildren-index-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified items as children of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>items:</tt> 
-Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-&mdash;&nbsp;The items to be appended as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertabove-item-member" class="member">
-<div id="insertabove-item-link" class="member-link">
-<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-<div id="insertabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertbelow-item-member" class="member">
-<div id="insertbelow-item-link" class="member-link">
-<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-<div id="insertbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendtop-item-member" class="member">
-<div id="appendtop-item-link" class="member-link">
-<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-<div id="appendtop-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it above all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendbottom-item-member" class="member">
-<div id="appendbottom-item-link" class="member-link">
-<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-<div id="appendbottom-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it below all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="moveabove-item-member" class="member">
-<div id="moveabove-item-link" class="member-link">
-<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-<div id="moveabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="movebelow-item-member" class="member">
-<div id="movebelow-item-link" class="member-link">
-<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-<div id="movebelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves the item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item below which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="remove-member" class="member">
-<div id="remove-link" class="member-link">
-<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-<div id="remove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item from the project. If the item has children, they are also
-removed.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-member" class="member">
-<div id="removechildren-link" class="member-link">
-<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-<div id="removechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-from-member" class="member">
-<div id="removechildren-from-link" class="member-link">
-<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-<div id="removechildren-from-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the children from the specified <tt>from</tt> index to the
-<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>from:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the beginning index, inclusive
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the ending index, exclusive
-&mdash;&nbsp;optional, default: <tt>children.length</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="reversechildren-member" class="member">
-<div id="reversechildren-link" class="member-link">
-<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-<div id="reversechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Reverses the order of the item's children</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Tests</h3>
-
-<div id="haschildren-member" class="member">
-<div id="haschildren-link" class="member-link">
-<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-<div id="haschildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item contains any children items.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isabove-item-member" class="member">
-<div id="isabove-item-link" class="member-link">
-<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-<div id="isabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if this item is above the specified item in the stacking order
-of the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isbelow-item-member" class="member">
-<div id="isbelow-item-link" class="member-link">
-<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-<div id="isbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is below the specified item in the stacking order of
-the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isparent-item-member" class="member">
-<div id="isparent-item-link" class="member-link">
-<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-<div id="isparent-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is the parent of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="ischild-item-member" class="member">
-<div id="ischild-item-link" class="member-link">
-<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-<div id="ischild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is a child of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isdescendant-item-member" class="member">
-<div id="isdescendant-item-link" class="member-link">
-<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-<div id="isdescendant-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is contained within the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isancestor-item-member" class="member">
-<div id="isancestor-item-link" class="member-link">
-<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-<div id="isancestor-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is an ancestor of the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
-item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isgroupedwith-item-member" class="member">
-<div id="isgroupedwith-item-link" class="member-link">
-<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-<div id="isgroupedwith-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the item is grouped with the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Transform Functions</h3>
-
-<div id="scale-scale-member" class="member">
-<div id="scale-scale-link" class="member-link">
-<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-<div id="scale-scale-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given value from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>scale:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item from its center point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-30">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path by 150% from its center point
-circle.scale(1.5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-30"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Scaling an item from a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-31">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path 150% from its bottom left corner
-circle.scale(1.5, circle.bounds.bottomLeft);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-31"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="scale-hor-ver-member" class="member">
-<div id="scale-hor-ver-link" class="member-link">
-<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="scale-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given values from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal scale factor
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item horizontally by 300%:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-32">
-// Create a circle shaped path at { x: 100, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(100, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path horizontally by 300%
-circle.scale(3, 1);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-32"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="translate-delta-member" class="member">
-<div id="translate-delta-link" class="member-link">
-<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-<div id="translate-delta-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Translates (moves) the item by the given offset point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>delta:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the offset to translate the item by
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rotate-angle-member" class="member">
-<div id="rotate-angle-link" class="member-link">
-<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-<div id="rotate-angle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rotates the item by a given angle around the given point.</p>
-<p>Angles are oriented clockwise and measured in degrees.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>angle:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the rotation angle
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Rotating an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-33">
-// Create a rectangle shaped path with its top left
-// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
-var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
-path.fillColor = 'black';
-
-// Rotate the path by 30 degrees:
-path.rotate(30);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Rotating an item around a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-34">
-// Create a rectangle shaped path with its top left
-// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
-var topLeft = new Point(175, 50);
-var size = new Size(100, 100);
-var path = new Path.Rectangle(topLeft, size);
-path.fillColor = 'black';
-
-// Draw a circle shaped path in the center of the view,
-// to show the rotation point:
-var circle = new Path.Circle(view.center, 5);
-circle.fillColor = 'white';
-
-// Each frame rotate the path 3 degrees around the center point
-// of the view:
-function onFrame(event) {
-	path.rotate(3, view.center);
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-34"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="shear-point-member" class="member">
-<div id="shear-point-link" class="member-link">
-<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-<div id="shear-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given value from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="shear-hor-ver-member" class="member">
-<div id="shear-hor-ver-link" class="member-link">
-<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="shear-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given values from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal shear factor.
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical shear factor.
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="transform-matrix-flags-member" class="member">
-<div id="transform-matrix-flags-link" class="member-link">
-<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-<div id="transform-matrix-flags-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>matrix:</tt> 
-<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-
-
-</li>
-
-<li>
-<tt>flags:</tt> 
-
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="fitbounds-rectangle-member" class="member">
-<div id="fitbounds-rectangle-link" class="member-link">
-<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-<div id="fitbounds-rectangle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
-rectangle, without changing its aspect ratio.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rectangle:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-
-
-</li>
-
-<li>
-<tt>fill:</tt> 
-<tt>Boolean</tt>
-
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-35">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-36">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds, true);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-37">
-var path = new Path.Circle(new Point(80, 50), 30);
-path.fillColor = 'red';
-
-// Fit the path to the bounding rectangle of the view:
-path.fitBounds(view.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-37"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<h3>Remove On Event</h3>
-
-<div id="removeon-object-member" class="member">
-<div id="removeon-object-link" class="member-link">
-<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-<div id="removeon-object-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the events specified in the passed object literal
-occur.</p>
-<p>The object literal can contain the following values:</p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
-fired: <tt>object.move = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
-fired: <tt>object.drag = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
-fired: <tt>object.down = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
-fired: <tt>object.up = true</tt></p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>object:</tt> 
-<tt>Object</tt>
-
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-38">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path on the next onMouseDrag or onMouseDown event:
-	path.removeOn({
-		drag: true,
-		down: true
-	});
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-38"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonmove-member" class="member">
-<div id="removeonmove-link" class="member-link">
-<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-<div id="removeonmove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Move your mouse below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-39">
-function onMouseMove(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next move event, automatically remove the path:
-	path.removeOnMove();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-39"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondown-member" class="member">
-<div id="removeondown-link" class="member-link">
-<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-<div id="removeondown-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-40">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, next time the mouse is pressed:
-	path.removeOnDown();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-40"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondrag-member" class="member">
-<div id="removeondrag-link" class="member-link">
-<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-<div id="removeondrag-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-41">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next drag event, automatically remove the path:
-	path.removeOnDrag();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-41"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonup-member" class="member">
-<div id="removeonup-link" class="member-link">
-<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-<div id="removeonup-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-42">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, when the mouse is released:
-	path.removeOnUp();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-42"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-</div>
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/PathStyle.html b/dist/docs/classes/PathStyle.html
deleted file mode 100644
index 2b1ecdf4..00000000
--- a/dist/docs/classes/PathStyle.html
+++ /dev/null
@@ -1,497 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>PathStyle</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>PathStyle</h1>
-
-<p>PathStyle is used for changing the visual styles of items
-contained within a Paper.js project and is returned by
-<a href="../classes/Item.html#style"><tt>item.style</tt></a> and <a href="../classes/Project.html#currentstyle"><tt>project.currentStyle</tt></a>.</p>
-<p>All properties of PathStyle are also reflected directly in <a href="../classes/Item.html"><tt>Item</tt></a>,
-i.e.: <a href="../classes/Item.html#fillcolor"><tt>item.fillColor</tt></a>.</p>
-<p>To set multiple style properties in one go, you can pass an object to
-<a href="../classes/Item.html#style"><tt>item.style</tt></a>. This is a convenient way to define a style once and
-apply it to a series of items:</p>
-<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-var circleStyle = {
-	fillColor: new RgbColor(1, 0, 0),
-	strokeColor: 'black',
-	strokeWidth: 5
-};
-
-var path = new Path.Circle(new Point(80, 50), 30);
-path.style = circleStyle;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-	<h3>Stroke Style</h3>
-
-<div id="strokecolor-member" class="member">
-<div id="strokecolor-link" class="member-link">
-<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-<div id="strokecolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the stroke color of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to RGB red:
-circle.strokeColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="strokewidth-member" class="member">
-<div id="strokewidth-link" class="member-link">
-<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-<div id="strokewidth-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The width of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's stroke width:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to black:
-circle.strokeColor = 'black';
-
-// Set its stroke width to 10:
-circle.strokeWidth = 10;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="strokecap-member" class="member">
-<div id="strokecap-link" class="member-link">
-<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-<div id="strokecap-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
-have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'butt'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('round', 'square', 'butt')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke caps:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-var line = new Path(new Point(80, 50), new Point(420, 50));
-line.strokeColor = 'black';
-line.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-line.selected = true;
-
-// Set the stroke cap of the line to be round:
-line.strokeCap = 'round';
-
-// Copy the path and set its stroke cap to be square:
-var line2 = line.clone();
-line2.position.y += 50;
-line2.strokeCap = 'square';
-
-// Make another copy and set its stroke cap to be butt:
-var line2 = line.clone();
-line2.position.y += 100;
-line2.strokeCap = 'butt';
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-3"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="strokejoin-member" class="member">
-<div id="strokejoin-link" class="member-link">
-<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-<div id="strokejoin-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the corners of paths when they have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'miter'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt> ('miter', 'round', 'bevel')
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke joins:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-var path = new Path();
-path.add(new Point(80, 100));
-path.add(new Point(120, 40));
-path.add(new Point(160, 100));
-path.strokeColor = 'black';
-path.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-path.selected = true;
-
-var path2 = path.clone();
-path2.position.x += path2.bounds.width * 1.5;
-path2.strokeJoin = 'round';
-
-var path3 = path2.clone();
-path3.position.x += path3.bounds.width * 1.5;
-path3.strokeJoin = 'bevel';
-</script>
-<div class="canvas"><canvas width="516" height="120" id="canvas-4"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="dashoffset-member" class="member">
-<div id="dashoffset-link" class="member-link">
-<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-<div id="dashoffset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The dash offset of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>0</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="dasharray-member" class="member">
-<div id="dasharray-link" class="member-link">
-<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-<div id="dasharray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>[]</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Array</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-5">
-var path = new Path.Circle(new Point(80, 50), 40);
-path.strokeWidth = 2;
-path.strokeColor = 'black';
-
-// Set the dashed stroke to [10pt dash, 4pt gap]:
-path.dashArray = [10, 4];
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="miterlimit-member" class="member">
-<div id="miterlimit-link" class="member-link">
-<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-<div id="miterlimit-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The miter limit of the stroke.</p>
-<p>When two line segments meet at a sharp angle and miter joins have been
-specified for <a href="../classes/PathStyle.html#strokejoin" onclick="return toggleMember('strokejoin', true);"><tt>strokeJoin</tt></a>, it is possible for the miter to extend
-far beyond the <a href="../classes/PathStyle.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a> of the path. The miterLimit imposes a
-limit on the ratio of the miter length to the <a href="../classes/PathStyle.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>10</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Fill Style</h3>
-
-<div id="fillcolor-member" class="member">
-<div id="fillcolor-link" class="member-link">
-<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-<div id="fillcolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The fill color.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the fill color of a path to red:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-6">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set the fill color of the circle to RGB red:
-circle.fillColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/PlacedItem.html b/dist/docs/classes/PlacedItem.html
deleted file mode 100644
index 959080f6..00000000
--- a/dist/docs/classes/PlacedItem.html
+++ /dev/null
@@ -1,3493 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>PlacedItem</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>PlacedItem</h1>
-
-<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
-
-<p>The PlacedItem class is the base for any items that have a matrix
-associated with them, describing their placement in the project, such as
-<a href="../classes/Raster.html"><tt>Raster</tt></a> and <a href="../classes/PlacedSymbol.html"><tt>PlacedSymbol</tt></a>.</p>
-
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="matrix-member" class="member">
-<div id="matrix-link" class="member-link">
-<a name="matrix" href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
-</div>
-<div id="matrix-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('matrix', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item's transformation matrix, defining position and dimensions in the
-document.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="id-member" class="member">
-<div id="id-link" class="member-link">
-<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-<div id="id-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The unique id of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="name-member" class="member">
-<div id="name-link" class="member-link">
-<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-<div id="name-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The name of the item. If the item has a name, it can be accessed by name
-through its parent's children list.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and add path to it as a child:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="position-member" class="member">
-<div id="position-link" class="member-link">
-<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-<div id="position-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item's position within the project. This is the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the position of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-// Create a circle at position { x: 10, y: 10 }
-var circle = new Path.Circle(new Point(10, 10), 10);
-circle.fillColor = 'red';
-
-// Move the circle to { x: 20, y: 20 }
-circle.position = new Point(20, 20);
-
-// Move the circle 100 points to the right and 50 points down
-circle.position += new Point(100, 50);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Changing the x coordinate of an item's position:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-// Create a circle at position { x: 20, y: 20 }
-var circle = new Path.Circle(new Point(20, 20), 10);
-circle.fillColor = 'red';
-
-// Move the circle 100 points to the right
-circle.position.x += 100;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="style-member" class="member">
-<div id="style-link" class="member-link">
-<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-<div id="style-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The path style of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.style = {
-	fillColor: 'blue',
-	strokeColor: 'red',
-	strokeWidth: 5
-};
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Copying the style of another item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-var path = new Path.Circle(new Point(50, 50), 30);
-path.fillColor = 'red';
-
-var path2 = new Path.Circle(new Point(180, 50), 20);
-// Copy the path style of path:
-path2.style = path.style;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Applying the same style object to multiple items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-5">
-var myStyle = {
-	fillColor: 'red',
-	strokeColor: 'blue',
-	strokeWidth: 4
-};
-
-var path = new Path.Circle(new Point(80, 50), 30);
-path.style = myStyle;
-
-var path2 = new Path.Circle(new Point(150, 50), 20);
-path2.style = myStyle;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="visible-member" class="member">
-<div id="visible-link" class="member-link">
-<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-<div id="visible-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
-item won't be drawn.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>true</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Hiding an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-6">
-var path = new Path.Circle(new Point(50, 50), 20);
-path.fillColor = 'red';
-
-// Hide the path:
-path.visible = false;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="blendmode-member" class="member">
-<div id="blendmode-link" class="member-link">
-<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-<div id="blendmode-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The blend mode of the item.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'normal'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
-'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
-'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
-'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's blend mode:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-7">
-// Create a white rectangle in the background
-// with the same dimensions as the view:
-var background = new Path.Rectangle(view.bounds);
-background.fillColor = 'white';
-
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.fillColor = 'blue';
-
-// Set the blend mode of circle2:
-circle2.blendMode = 'multiply';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="opacity-member" class="member">
-<div id="opacity-link" class="member-link">
-<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-<div id="opacity-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Making an item 50% transparent:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-8">
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.style = {
-	fillColor: 'blue',
-	strokeColor: 'green',
-	strokeWidth: 10
-};
-
-// Make circle2 50% transparent:
-circle2.opacity = 0.5;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="guide-member" class="member">
-<div id="guide-link" class="member-link">
-<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-<div id="guide-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item functions as a guide. When set to
-<tt>true</tt>, the item will be drawn at the end as a guide.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="selected-member" class="member">
-<div id="selected-link" class="member-link">
-<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-<div id="selected-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether an item is selected and will also return <tt>true</tt>
-if the item is partially selected (groups with some selected or partially
-selected paths).</p>
-<p>Paper.js draws the visual outlines of selected items on top of your
-project. This can be useful for debugging, as it allows you to see the
-construction of paths, position of path curves, individual segment points
-and bounding boxes of symbol and raster items.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Selecting an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-9">
-var path = new Path.Circle(new Size(80, 50), 35);
-path.selected = true; // Select the path
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="clipmask-member" class="member">
-<div id="clipmask-link" class="member-link">
-<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-<div id="clipmask-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item defines a clip mask. This can only be set on
-paths, compound paths, and text frame objects, and only if the item is
-already contained within a clipping group.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Project Hierarchy</h3>
-
-<div id="project-member" class="member">
-<div id="project-link" class="member-link">
-<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-<div id="project-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The project that this item belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Project.html"><tt>Project</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="layer-member" class="member">
-<div id="layer-link" class="member-link">
-<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-<div id="layer-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The layer that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Layer.html"><tt>Layer</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="parent-member" class="member">
-<div id="parent-link" class="member-link">
-<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-<div id="parent-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var path = new Path();
-
-// New items are placed in the active layer:
-console.log(path.parent == project.activeLayer); // true
-
-var group = new Group();
-group.addChild(path);
-
-// Now the parent of the path has become the group:
-console.log(path.parent == group); // true</pre>
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="children-member" class="member">
-<div id="children-link" class="member-link">
-<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-<div id="children-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The children items contained within this item. Items that define a
-<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
-<p><b>Please note:</b> The children array should not be modified directly
-using array functions. To remove single items from the children list, use
-<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
-<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
-<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Accessing items in the children array:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-10">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// Access the path through the group's children array:
-group.children[0].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Accessing children by name:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-11">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'orange';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Passing an array of items to item.children:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-12">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-var group = new Group();
-group.children = [path];
-
-// The path is the first child of the group:
-group.firstChild.fillColor = 'green';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="firstchild-member" class="member">
-<div id="firstchild-link" class="member-link">
-<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-<div id="firstchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The first item contained within this item. This is a shortcut for
-accessing <tt>item.children[0]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="lastchild-member" class="member">
-<div id="lastchild-link" class="member-link">
-<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-<div id="lastchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The last item contained within this item.This is a shortcut for
-accessing <tt>item.children[item.children.length - 1]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="nextsibling-member" class="member">
-<div id="nextsibling-link" class="member-link">
-<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-<div id="nextsibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The next item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="previoussibling-member" class="member">
-<div id="previoussibling-link" class="member-link">
-<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-<div id="previoussibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The previous item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="index-member" class="member">
-<div id="index-link" class="member-link">
-<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-<div id="index-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The index of this item within the list of its parent's children.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Bounding Rectangles</h3>
-
-<div id="bounds-member" class="member">
-<div id="bounds-link" class="member-link">
-<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-<div id="bounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item excluding stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokebounds-member" class="member">
-<div id="strokebounds-link" class="member-link">
-<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-<div id="strokebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="handlebounds-member" class="member">
-<div id="handlebounds-link" class="member-link">
-<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-<div id="handlebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including handles.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Stroke Style</h3>
-
-<div id="strokecolor-member" class="member">
-<div id="strokecolor-link" class="member-link">
-<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-<div id="strokecolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the stroke color of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-13">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to RGB red:
-circle.strokeColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokewidth-member" class="member">
-<div id="strokewidth-link" class="member-link">
-<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-<div id="strokewidth-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The width of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's stroke width:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-14">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to black:
-circle.strokeColor = 'black';
-
-// Set its stroke width to 10:
-circle.strokeWidth = 10;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokecap-member" class="member">
-<div id="strokecap-link" class="member-link">
-<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-<div id="strokecap-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
-have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'butt'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('round', 'square', 'butt')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke caps:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-15">
-var line = new Path(new Point(80, 50), new Point(420, 50));
-line.strokeColor = 'black';
-line.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-line.selected = true;
-
-// Set the stroke cap of the line to be round:
-line.strokeCap = 'round';
-
-// Copy the path and set its stroke cap to be square:
-var line2 = line.clone();
-line2.position.y += 50;
-line2.strokeCap = 'square';
-
-// Make another copy and set its stroke cap to be butt:
-var line2 = line.clone();
-line2.position.y += 100;
-line2.strokeCap = 'butt';
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-15"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokejoin-member" class="member">
-<div id="strokejoin-link" class="member-link">
-<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-<div id="strokejoin-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the corners of paths when they have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'miter'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt> ('miter', 'round', 'bevel')
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke joins:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-16">
-var path = new Path();
-path.add(new Point(80, 100));
-path.add(new Point(120, 40));
-path.add(new Point(160, 100));
-path.strokeColor = 'black';
-path.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-path.selected = true;
-
-var path2 = path.clone();
-path2.position.x += path2.bounds.width * 1.5;
-path2.strokeJoin = 'round';
-
-var path3 = path2.clone();
-path3.position.x += path3.bounds.width * 1.5;
-path3.strokeJoin = 'bevel';
-</script>
-<div class="canvas"><canvas width="516" height="120" id="canvas-16"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="dashoffset-member" class="member">
-<div id="dashoffset-link" class="member-link">
-<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-<div id="dashoffset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The dash offset of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>0</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="dasharray-member" class="member">
-<div id="dasharray-link" class="member-link">
-<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-<div id="dasharray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>[]</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Array</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-17">
-var path = new Path.Circle(new Point(80, 50), 40);
-path.strokeWidth = 2;
-path.strokeColor = 'black';
-
-// Set the dashed stroke to [10pt dash, 4pt gap]:
-path.dashArray = [10, 4];
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="miterlimit-member" class="member">
-<div id="miterlimit-link" class="member-link">
-<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-<div id="miterlimit-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The miter limit of the stroke.</p>
-<p>When two line segments meet at a sharp angle and miter joins have been
-specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
-extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
-miterLimit imposes a limit on the ratio of the miter length to the
-<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>10</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Fill Style</h3>
-
-<div id="fillcolor-member" class="member">
-<div id="fillcolor-link" class="member-link">
-<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-<div id="fillcolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The fill color of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the fill color of a path to red:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-18">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set the fill color of the circle to RGB red:
-circle.fillColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-<!-- =========================== inherited methods ========================= -->
-<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Clones the item within the same project and places the copy above the
-item.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Cloning items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-19">
-var circle = new Path.Circle(new Point(50, 50), 10);
-circle.fillColor = 'red';
-
-// Make 20 copies of the circle:
-for (var i = 0; i < 20; i++) {
-	var copy = circle.clone();
-
-	// Distribute the copies horizontally, so we can see them:
-	copy.position.x += i * copy.bounds.width;
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="copyto-item-member" class="member">
-<div id="copyto-item-link" class="member-link">
-<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-<div id="copyto-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>When passed a project, copies the item to the project,
-or duplicates it within the same project. When passed an item,
-copies the item into the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
-&mdash;&nbsp;the item or project to
-copy the item to
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rasterize-member" class="member">
-<div id="rasterize-link" class="member-link">
-<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-<div id="rasterize-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rasterizes the item into a newly created Raster object. The item itself
-is not removed after rasterization.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>resolution:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the resolution of the raster in dpi
-&mdash;&nbsp;optional, default: <tt>72</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Rasterizing an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-20">
-var circle = new Path.Circle(new Point(80, 50), 5);
-circle.fillColor = 'red';
-
-// Create a rasterized version of the path:
-var raster = circle.rasterize();
-
-// Move it 100pt to the right:
-raster.position.x += 100;
-
-// Scale the path and the raster by 300%, so we can compare them:
-circle.scale(5);
-raster.scale(5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="hittest-point-member" class="member">
-<div id="hittest-point-link" class="member-link">
-<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-<div id="hittest-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Perform a hit test on the item (and its children, if it is a
-<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
-<p>The optional options object allows you to control the specifics of the
-hit test and may contain a combination of the following values:</p>
-<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
-points.</p>
-<p><b>options.type:</b> Only hit test again a certain item
-type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
-<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
-<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
-items, taking into account stroke width.</p>
-<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
-<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
-<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
-(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
-<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
-last segment points of open path items.</p>
-<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
-side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
-(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
-<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
-<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The point where the hit test should be performed
-
-</li>
-
-<li>
-<tt>options:</tt> 
-<tt>Object</tt>
-
-&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
-tolerance: 2 }</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
-information about what exactly was hit or <tt>null</tt> if nothing was
-hit.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Operations</h3>
-
-<div id="addchild-item-member" class="member">
-<div id="addchild-item-link" class="member-link">
-<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-<div id="addchild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified item as a child of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be added as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchild-index-item-member" class="member">
-<div id="insertchild-index-item-link" class="member-link">
-<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-<div id="insertchild-index-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="addchildren-items-member" class="member">
-<div id="addchildren-items-link" class="member-link">
-<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-<div id="addchildren-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified items as children of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>items:</tt> 
-<tt>item</tt>
-&mdash;&nbsp;The items to be added as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchildren-index-items-member" class="member">
-<div id="insertchildren-index-items-link" class="member-link">
-<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-<div id="insertchildren-index-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified items as children of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>items:</tt> 
-Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-&mdash;&nbsp;The items to be appended as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertabove-item-member" class="member">
-<div id="insertabove-item-link" class="member-link">
-<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-<div id="insertabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertbelow-item-member" class="member">
-<div id="insertbelow-item-link" class="member-link">
-<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-<div id="insertbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendtop-item-member" class="member">
-<div id="appendtop-item-link" class="member-link">
-<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-<div id="appendtop-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it above all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendbottom-item-member" class="member">
-<div id="appendbottom-item-link" class="member-link">
-<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-<div id="appendbottom-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it below all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="moveabove-item-member" class="member">
-<div id="moveabove-item-link" class="member-link">
-<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-<div id="moveabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="movebelow-item-member" class="member">
-<div id="movebelow-item-link" class="member-link">
-<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-<div id="movebelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves the item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item below which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="remove-member" class="member">
-<div id="remove-link" class="member-link">
-<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-<div id="remove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item from the project. If the item has children, they are also
-removed.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-member" class="member">
-<div id="removechildren-link" class="member-link">
-<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-<div id="removechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-from-member" class="member">
-<div id="removechildren-from-link" class="member-link">
-<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-<div id="removechildren-from-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the children from the specified <tt>from</tt> index to the
-<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>from:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the beginning index, inclusive
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the ending index, exclusive
-&mdash;&nbsp;optional, default: <tt>children.length</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="reversechildren-member" class="member">
-<div id="reversechildren-link" class="member-link">
-<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-<div id="reversechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Reverses the order of the item's children</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Tests</h3>
-
-<div id="haschildren-member" class="member">
-<div id="haschildren-link" class="member-link">
-<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-<div id="haschildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item contains any children items.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isabove-item-member" class="member">
-<div id="isabove-item-link" class="member-link">
-<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-<div id="isabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if this item is above the specified item in the stacking order
-of the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isbelow-item-member" class="member">
-<div id="isbelow-item-link" class="member-link">
-<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-<div id="isbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is below the specified item in the stacking order of
-the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isparent-item-member" class="member">
-<div id="isparent-item-link" class="member-link">
-<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-<div id="isparent-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is the parent of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="ischild-item-member" class="member">
-<div id="ischild-item-link" class="member-link">
-<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-<div id="ischild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is a child of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isdescendant-item-member" class="member">
-<div id="isdescendant-item-link" class="member-link">
-<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-<div id="isdescendant-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is contained within the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isancestor-item-member" class="member">
-<div id="isancestor-item-link" class="member-link">
-<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-<div id="isancestor-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is an ancestor of the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
-item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isgroupedwith-item-member" class="member">
-<div id="isgroupedwith-item-link" class="member-link">
-<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-<div id="isgroupedwith-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the item is grouped with the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Transform Functions</h3>
-
-<div id="scale-scale-member" class="member">
-<div id="scale-scale-link" class="member-link">
-<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-<div id="scale-scale-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given value from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>scale:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item from its center point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-21">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path by 150% from its center point
-circle.scale(1.5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Scaling an item from a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-22">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path 150% from its bottom left corner
-circle.scale(1.5, circle.bounds.bottomLeft);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="scale-hor-ver-member" class="member">
-<div id="scale-hor-ver-link" class="member-link">
-<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="scale-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given values from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal scale factor
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item horizontally by 300%:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-23">
-// Create a circle shaped path at { x: 100, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(100, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path horizontally by 300%
-circle.scale(3, 1);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="translate-delta-member" class="member">
-<div id="translate-delta-link" class="member-link">
-<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-<div id="translate-delta-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Translates (moves) the item by the given offset point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>delta:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the offset to translate the item by
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rotate-angle-member" class="member">
-<div id="rotate-angle-link" class="member-link">
-<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-<div id="rotate-angle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rotates the item by a given angle around the given point.</p>
-<p>Angles are oriented clockwise and measured in degrees.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>angle:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the rotation angle
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Rotating an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-24">
-// Create a rectangle shaped path with its top left
-// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
-var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
-path.fillColor = 'black';
-
-// Rotate the path by 30 degrees:
-path.rotate(30);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Rotating an item around a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-25">
-// Create a rectangle shaped path with its top left
-// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
-var topLeft = new Point(175, 50);
-var size = new Size(100, 100);
-var path = new Path.Rectangle(topLeft, size);
-path.fillColor = 'black';
-
-// Draw a circle shaped path in the center of the view,
-// to show the rotation point:
-var circle = new Path.Circle(view.center, 5);
-circle.fillColor = 'white';
-
-// Each frame rotate the path 3 degrees around the center point
-// of the view:
-function onFrame(event) {
-	path.rotate(3, view.center);
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-25"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="shear-point-member" class="member">
-<div id="shear-point-link" class="member-link">
-<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-<div id="shear-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given value from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="shear-hor-ver-member" class="member">
-<div id="shear-hor-ver-link" class="member-link">
-<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="shear-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given values from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal shear factor.
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical shear factor.
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="transform-matrix-flags-member" class="member">
-<div id="transform-matrix-flags-link" class="member-link">
-<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-<div id="transform-matrix-flags-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>matrix:</tt> 
-<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-
-
-</li>
-
-<li>
-<tt>flags:</tt> 
-
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="fitbounds-rectangle-member" class="member">
-<div id="fitbounds-rectangle-link" class="member-link">
-<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-<div id="fitbounds-rectangle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
-rectangle, without changing its aspect ratio.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rectangle:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-
-
-</li>
-
-<li>
-<tt>fill:</tt> 
-<tt>Boolean</tt>
-
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-26">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-27">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds, true);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-28">
-var path = new Path.Circle(new Point(80, 50), 30);
-path.fillColor = 'red';
-
-// Fit the path to the bounding rectangle of the view:
-path.fitBounds(view.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-28"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<h3>Remove On Event</h3>
-
-<div id="removeon-object-member" class="member">
-<div id="removeon-object-link" class="member-link">
-<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-<div id="removeon-object-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the events specified in the passed object literal
-occur.</p>
-<p>The object literal can contain the following values:</p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
-fired: <tt>object.move = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
-fired: <tt>object.drag = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
-fired: <tt>object.down = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
-fired: <tt>object.up = true</tt></p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>object:</tt> 
-<tt>Object</tt>
-
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-29">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path on the next onMouseDrag or onMouseDown event:
-	path.removeOn({
-		drag: true,
-		down: true
-	});
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-29"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonmove-member" class="member">
-<div id="removeonmove-link" class="member-link">
-<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-<div id="removeonmove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Move your mouse below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-30">
-function onMouseMove(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next move event, automatically remove the path:
-	path.removeOnMove();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-30"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondown-member" class="member">
-<div id="removeondown-link" class="member-link">
-<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-<div id="removeondown-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-31">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, next time the mouse is pressed:
-	path.removeOnDown();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-31"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondrag-member" class="member">
-<div id="removeondrag-link" class="member-link">
-<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-<div id="removeondrag-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-32">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next drag event, automatically remove the path:
-	path.removeOnDrag();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-32"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonup-member" class="member">
-<div id="removeonup-link" class="member-link">
-<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-<div id="removeonup-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-33">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, when the mouse is released:
-	path.removeOnUp();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-33"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-</div>
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/PlacedSymbol.html b/dist/docs/classes/PlacedSymbol.html
deleted file mode 100644
index 8780cc5c..00000000
--- a/dist/docs/classes/PlacedSymbol.html
+++ /dev/null
@@ -1,3620 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>PlacedSymbol</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>PlacedSymbol</h1>
-
-<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b>, <b><a href="../classes/PlacedItem.html"><tt>PlacedItem</tt></a></b></p>
-
-<p>A PlacedSymbol represents an instance of a symbol which has been
-placed in a Paper.js project.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="placedsymbol-symbol-member" class="member">
-<div id="placedsymbol-symbol-link" class="member-link">
-<a name="placedsymbol-symbol" href="#" onClick="return toggleMember('placedsymbol-symbol', false);"><tt><b>PlacedSymbol</b>(symbol[, matrixOrOffset])</tt></a>
-</div>
-<div id="placedsymbol-symbol-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('placedsymbol-symbol', false);"><tt><b>PlacedSymbol</b>(symbol[, matrixOrOffset])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('placedsymbol-symbol', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a new PlacedSymbol Item.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>symbol:</tt> 
-<a href="../classes/Symbol.html"><tt>Symbol</tt></a>
-&mdash;&nbsp;the symbol to place
-
-</li>
-
-<li>
-<tt>matrixOrOffset:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a> / <a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-&mdash;&nbsp;the center point of the placed
-symbol or a <a href="../classes/Matrix.html"><tt>Matrix</tt></a> transformation to transform the placed symbol
-with.
-&mdash;&nbsp;optional
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> &mdash; Placing 100 instances of a symbol:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-var path = new Path.Star(new Point(0, 0), 6, 5, 13);
-path.style = {
-    fillColor: 'white',
-    strokeColor: 'black'
-};
-
-// Create a symbol from the path:
-var symbol = new Symbol(path);
-
-// Remove the path:
-path.remove();
-
-// Place 100 instances of the symbol:
-for (var i = 0; i < 100; i++) {
-    // Place an instance of the symbol in the project:
-    var instance = new PlacedSymbol(symbol);
-
-    // Move the instance to a random position within the view:
-    instance.position = Point.random() * view.size;
-
-    // Rotate the instance by a random amount between
-    // 0 and 360 degrees:
-    instance.rotate(Math.random() * 360);
-
-    // Scale the instance between 0.25 and 1:
-    instance.scale(0.25 + Math.random() * 0.75);
-}
-</script>
-<div class="canvas"><canvas width="516" height="240" id="canvas-0"></canvas></div>
-</div>
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="symbol-member" class="member">
-<div id="symbol-link" class="member-link">
-<a name="symbol" href="#" onClick="return toggleMember('symbol', false);"><tt><b>symbol</b></tt></a>
-</div>
-<div id="symbol-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('symbol', false);"><tt><b>symbol</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('symbol', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The symbol that the placed symbol refers to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Symbol.html"><tt>Symbol</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="id-member" class="member">
-<div id="id-link" class="member-link">
-<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-<div id="id-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The unique id of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="name-member" class="member">
-<div id="name-link" class="member-link">
-<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-<div id="name-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The name of the item. If the item has a name, it can be accessed by name
-through its parent's children list.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and add path to it as a child:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="position-member" class="member">
-<div id="position-link" class="member-link">
-<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-<div id="position-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item's position within the project. This is the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the position of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-// Create a circle at position { x: 10, y: 10 }
-var circle = new Path.Circle(new Point(10, 10), 10);
-circle.fillColor = 'red';
-
-// Move the circle to { x: 20, y: 20 }
-circle.position = new Point(20, 20);
-
-// Move the circle 100 points to the right and 50 points down
-circle.position += new Point(100, 50);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Changing the x coordinate of an item's position:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-// Create a circle at position { x: 20, y: 20 }
-var circle = new Path.Circle(new Point(20, 20), 10);
-circle.fillColor = 'red';
-
-// Move the circle 100 points to the right
-circle.position.x += 100;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="style-member" class="member">
-<div id="style-link" class="member-link">
-<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-<div id="style-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The path style of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.style = {
-	fillColor: 'blue',
-	strokeColor: 'red',
-	strokeWidth: 5
-};
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Copying the style of another item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-5">
-var path = new Path.Circle(new Point(50, 50), 30);
-path.fillColor = 'red';
-
-var path2 = new Path.Circle(new Point(180, 50), 20);
-// Copy the path style of path:
-path2.style = path.style;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Applying the same style object to multiple items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-6">
-var myStyle = {
-	fillColor: 'red',
-	strokeColor: 'blue',
-	strokeWidth: 4
-};
-
-var path = new Path.Circle(new Point(80, 50), 30);
-path.style = myStyle;
-
-var path2 = new Path.Circle(new Point(150, 50), 20);
-path2.style = myStyle;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="visible-member" class="member">
-<div id="visible-link" class="member-link">
-<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-<div id="visible-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
-item won't be drawn.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>true</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Hiding an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-7">
-var path = new Path.Circle(new Point(50, 50), 20);
-path.fillColor = 'red';
-
-// Hide the path:
-path.visible = false;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="blendmode-member" class="member">
-<div id="blendmode-link" class="member-link">
-<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-<div id="blendmode-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The blend mode of the item.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'normal'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
-'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
-'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
-'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's blend mode:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-8">
-// Create a white rectangle in the background
-// with the same dimensions as the view:
-var background = new Path.Rectangle(view.bounds);
-background.fillColor = 'white';
-
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.fillColor = 'blue';
-
-// Set the blend mode of circle2:
-circle2.blendMode = 'multiply';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="opacity-member" class="member">
-<div id="opacity-link" class="member-link">
-<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-<div id="opacity-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Making an item 50% transparent:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-9">
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.style = {
-	fillColor: 'blue',
-	strokeColor: 'green',
-	strokeWidth: 10
-};
-
-// Make circle2 50% transparent:
-circle2.opacity = 0.5;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="guide-member" class="member">
-<div id="guide-link" class="member-link">
-<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-<div id="guide-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item functions as a guide. When set to
-<tt>true</tt>, the item will be drawn at the end as a guide.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="selected-member" class="member">
-<div id="selected-link" class="member-link">
-<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-<div id="selected-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether an item is selected and will also return <tt>true</tt>
-if the item is partially selected (groups with some selected or partially
-selected paths).</p>
-<p>Paper.js draws the visual outlines of selected items on top of your
-project. This can be useful for debugging, as it allows you to see the
-construction of paths, position of path curves, individual segment points
-and bounding boxes of symbol and raster items.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Selecting an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-10">
-var path = new Path.Circle(new Size(80, 50), 35);
-path.selected = true; // Select the path
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="clipmask-member" class="member">
-<div id="clipmask-link" class="member-link">
-<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-<div id="clipmask-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item defines a clip mask. This can only be set on
-paths, compound paths, and text frame objects, and only if the item is
-already contained within a clipping group.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Project Hierarchy</h3>
-
-<div id="project-member" class="member">
-<div id="project-link" class="member-link">
-<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-<div id="project-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The project that this item belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Project.html"><tt>Project</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="layer-member" class="member">
-<div id="layer-link" class="member-link">
-<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-<div id="layer-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The layer that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Layer.html"><tt>Layer</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="parent-member" class="member">
-<div id="parent-link" class="member-link">
-<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-<div id="parent-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var path = new Path();
-
-// New items are placed in the active layer:
-console.log(path.parent == project.activeLayer); // true
-
-var group = new Group();
-group.addChild(path);
-
-// Now the parent of the path has become the group:
-console.log(path.parent == group); // true</pre>
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="children-member" class="member">
-<div id="children-link" class="member-link">
-<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-<div id="children-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The children items contained within this item. Items that define a
-<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
-<p><b>Please note:</b> The children array should not be modified directly
-using array functions. To remove single items from the children list, use
-<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
-<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
-<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Accessing items in the children array:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-11">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// Access the path through the group's children array:
-group.children[0].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Accessing children by name:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-12">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'orange';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Passing an array of items to item.children:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-13">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-var group = new Group();
-group.children = [path];
-
-// The path is the first child of the group:
-group.firstChild.fillColor = 'green';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="firstchild-member" class="member">
-<div id="firstchild-link" class="member-link">
-<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-<div id="firstchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The first item contained within this item. This is a shortcut for
-accessing <tt>item.children[0]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="lastchild-member" class="member">
-<div id="lastchild-link" class="member-link">
-<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-<div id="lastchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The last item contained within this item.This is a shortcut for
-accessing <tt>item.children[item.children.length - 1]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="nextsibling-member" class="member">
-<div id="nextsibling-link" class="member-link">
-<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-<div id="nextsibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The next item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="previoussibling-member" class="member">
-<div id="previoussibling-link" class="member-link">
-<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-<div id="previoussibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The previous item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="index-member" class="member">
-<div id="index-link" class="member-link">
-<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-<div id="index-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The index of this item within the list of its parent's children.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Bounding Rectangles</h3>
-
-<div id="bounds-member" class="member">
-<div id="bounds-link" class="member-link">
-<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-<div id="bounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item excluding stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokebounds-member" class="member">
-<div id="strokebounds-link" class="member-link">
-<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-<div id="strokebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="handlebounds-member" class="member">
-<div id="handlebounds-link" class="member-link">
-<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-<div id="handlebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including handles.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Stroke Style</h3>
-
-<div id="strokecolor-member" class="member">
-<div id="strokecolor-link" class="member-link">
-<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-<div id="strokecolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the stroke color of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-14">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to RGB red:
-circle.strokeColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokewidth-member" class="member">
-<div id="strokewidth-link" class="member-link">
-<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-<div id="strokewidth-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The width of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's stroke width:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-15">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to black:
-circle.strokeColor = 'black';
-
-// Set its stroke width to 10:
-circle.strokeWidth = 10;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokecap-member" class="member">
-<div id="strokecap-link" class="member-link">
-<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-<div id="strokecap-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
-have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'butt'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('round', 'square', 'butt')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke caps:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-16">
-var line = new Path(new Point(80, 50), new Point(420, 50));
-line.strokeColor = 'black';
-line.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-line.selected = true;
-
-// Set the stroke cap of the line to be round:
-line.strokeCap = 'round';
-
-// Copy the path and set its stroke cap to be square:
-var line2 = line.clone();
-line2.position.y += 50;
-line2.strokeCap = 'square';
-
-// Make another copy and set its stroke cap to be butt:
-var line2 = line.clone();
-line2.position.y += 100;
-line2.strokeCap = 'butt';
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-16"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokejoin-member" class="member">
-<div id="strokejoin-link" class="member-link">
-<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-<div id="strokejoin-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the corners of paths when they have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'miter'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt> ('miter', 'round', 'bevel')
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke joins:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-17">
-var path = new Path();
-path.add(new Point(80, 100));
-path.add(new Point(120, 40));
-path.add(new Point(160, 100));
-path.strokeColor = 'black';
-path.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-path.selected = true;
-
-var path2 = path.clone();
-path2.position.x += path2.bounds.width * 1.5;
-path2.strokeJoin = 'round';
-
-var path3 = path2.clone();
-path3.position.x += path3.bounds.width * 1.5;
-path3.strokeJoin = 'bevel';
-</script>
-<div class="canvas"><canvas width="516" height="120" id="canvas-17"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="dashoffset-member" class="member">
-<div id="dashoffset-link" class="member-link">
-<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-<div id="dashoffset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The dash offset of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>0</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="dasharray-member" class="member">
-<div id="dasharray-link" class="member-link">
-<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-<div id="dasharray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>[]</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Array</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-18">
-var path = new Path.Circle(new Point(80, 50), 40);
-path.strokeWidth = 2;
-path.strokeColor = 'black';
-
-// Set the dashed stroke to [10pt dash, 4pt gap]:
-path.dashArray = [10, 4];
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="miterlimit-member" class="member">
-<div id="miterlimit-link" class="member-link">
-<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-<div id="miterlimit-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The miter limit of the stroke.</p>
-<p>When two line segments meet at a sharp angle and miter joins have been
-specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
-extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
-miterLimit imposes a limit on the ratio of the miter length to the
-<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>10</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Fill Style</h3>
-
-<div id="fillcolor-member" class="member">
-<div id="fillcolor-link" class="member-link">
-<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-<div id="fillcolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The fill color of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the fill color of a path to red:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-19">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set the fill color of the circle to RGB red:
-circle.fillColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-<!-- =========================== inherited methods ========================= -->
-<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Clones the item within the same project and places the copy above the
-item.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Cloning items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-20">
-var circle = new Path.Circle(new Point(50, 50), 10);
-circle.fillColor = 'red';
-
-// Make 20 copies of the circle:
-for (var i = 0; i < 20; i++) {
-	var copy = circle.clone();
-
-	// Distribute the copies horizontally, so we can see them:
-	copy.position.x += i * copy.bounds.width;
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="copyto-item-member" class="member">
-<div id="copyto-item-link" class="member-link">
-<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-<div id="copyto-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>When passed a project, copies the item to the project,
-or duplicates it within the same project. When passed an item,
-copies the item into the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
-&mdash;&nbsp;the item or project to
-copy the item to
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rasterize-member" class="member">
-<div id="rasterize-link" class="member-link">
-<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-<div id="rasterize-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rasterizes the item into a newly created Raster object. The item itself
-is not removed after rasterization.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>resolution:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the resolution of the raster in dpi
-&mdash;&nbsp;optional, default: <tt>72</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Rasterizing an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-21">
-var circle = new Path.Circle(new Point(80, 50), 5);
-circle.fillColor = 'red';
-
-// Create a rasterized version of the path:
-var raster = circle.rasterize();
-
-// Move it 100pt to the right:
-raster.position.x += 100;
-
-// Scale the path and the raster by 300%, so we can compare them:
-circle.scale(5);
-raster.scale(5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="hittest-point-member" class="member">
-<div id="hittest-point-link" class="member-link">
-<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-<div id="hittest-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Perform a hit test on the item (and its children, if it is a
-<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
-<p>The optional options object allows you to control the specifics of the
-hit test and may contain a combination of the following values:</p>
-<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
-points.</p>
-<p><b>options.type:</b> Only hit test again a certain item
-type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
-<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
-<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
-items, taking into account stroke width.</p>
-<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
-<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
-<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
-(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
-<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
-last segment points of open path items.</p>
-<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
-side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
-(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
-<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
-<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The point where the hit test should be performed
-
-</li>
-
-<li>
-<tt>options:</tt> 
-<tt>Object</tt>
-
-&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
-tolerance: 2 }</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
-information about what exactly was hit or <tt>null</tt> if nothing was
-hit.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Operations</h3>
-
-<div id="addchild-item-member" class="member">
-<div id="addchild-item-link" class="member-link">
-<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-<div id="addchild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified item as a child of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be added as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchild-index-item-member" class="member">
-<div id="insertchild-index-item-link" class="member-link">
-<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-<div id="insertchild-index-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="addchildren-items-member" class="member">
-<div id="addchildren-items-link" class="member-link">
-<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-<div id="addchildren-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified items as children of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>items:</tt> 
-<tt>item</tt>
-&mdash;&nbsp;The items to be added as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchildren-index-items-member" class="member">
-<div id="insertchildren-index-items-link" class="member-link">
-<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-<div id="insertchildren-index-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified items as children of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>items:</tt> 
-Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-&mdash;&nbsp;The items to be appended as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertabove-item-member" class="member">
-<div id="insertabove-item-link" class="member-link">
-<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-<div id="insertabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertbelow-item-member" class="member">
-<div id="insertbelow-item-link" class="member-link">
-<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-<div id="insertbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendtop-item-member" class="member">
-<div id="appendtop-item-link" class="member-link">
-<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-<div id="appendtop-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it above all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendbottom-item-member" class="member">
-<div id="appendbottom-item-link" class="member-link">
-<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-<div id="appendbottom-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it below all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="moveabove-item-member" class="member">
-<div id="moveabove-item-link" class="member-link">
-<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-<div id="moveabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="movebelow-item-member" class="member">
-<div id="movebelow-item-link" class="member-link">
-<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-<div id="movebelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves the item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item below which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="remove-member" class="member">
-<div id="remove-link" class="member-link">
-<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-<div id="remove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item from the project. If the item has children, they are also
-removed.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-member" class="member">
-<div id="removechildren-link" class="member-link">
-<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-<div id="removechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-from-member" class="member">
-<div id="removechildren-from-link" class="member-link">
-<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-<div id="removechildren-from-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the children from the specified <tt>from</tt> index to the
-<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>from:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the beginning index, inclusive
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the ending index, exclusive
-&mdash;&nbsp;optional, default: <tt>children.length</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="reversechildren-member" class="member">
-<div id="reversechildren-link" class="member-link">
-<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-<div id="reversechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Reverses the order of the item's children</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Tests</h3>
-
-<div id="haschildren-member" class="member">
-<div id="haschildren-link" class="member-link">
-<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-<div id="haschildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item contains any children items.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isabove-item-member" class="member">
-<div id="isabove-item-link" class="member-link">
-<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-<div id="isabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if this item is above the specified item in the stacking order
-of the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isbelow-item-member" class="member">
-<div id="isbelow-item-link" class="member-link">
-<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-<div id="isbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is below the specified item in the stacking order of
-the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isparent-item-member" class="member">
-<div id="isparent-item-link" class="member-link">
-<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-<div id="isparent-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is the parent of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="ischild-item-member" class="member">
-<div id="ischild-item-link" class="member-link">
-<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-<div id="ischild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is a child of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isdescendant-item-member" class="member">
-<div id="isdescendant-item-link" class="member-link">
-<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-<div id="isdescendant-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is contained within the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isancestor-item-member" class="member">
-<div id="isancestor-item-link" class="member-link">
-<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-<div id="isancestor-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is an ancestor of the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
-item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isgroupedwith-item-member" class="member">
-<div id="isgroupedwith-item-link" class="member-link">
-<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-<div id="isgroupedwith-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the item is grouped with the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Transform Functions</h3>
-
-<div id="scale-scale-member" class="member">
-<div id="scale-scale-link" class="member-link">
-<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-<div id="scale-scale-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given value from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>scale:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item from its center point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-22">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path by 150% from its center point
-circle.scale(1.5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Scaling an item from a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-23">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path 150% from its bottom left corner
-circle.scale(1.5, circle.bounds.bottomLeft);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="scale-hor-ver-member" class="member">
-<div id="scale-hor-ver-link" class="member-link">
-<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="scale-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given values from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal scale factor
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item horizontally by 300%:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-24">
-// Create a circle shaped path at { x: 100, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(100, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path horizontally by 300%
-circle.scale(3, 1);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="translate-delta-member" class="member">
-<div id="translate-delta-link" class="member-link">
-<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-<div id="translate-delta-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Translates (moves) the item by the given offset point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>delta:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the offset to translate the item by
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rotate-angle-member" class="member">
-<div id="rotate-angle-link" class="member-link">
-<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-<div id="rotate-angle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rotates the item by a given angle around the given point.</p>
-<p>Angles are oriented clockwise and measured in degrees.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>angle:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the rotation angle
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Rotating an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-25">
-// Create a rectangle shaped path with its top left
-// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
-var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
-path.fillColor = 'black';
-
-// Rotate the path by 30 degrees:
-path.rotate(30);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Rotating an item around a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-26">
-// Create a rectangle shaped path with its top left
-// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
-var topLeft = new Point(175, 50);
-var size = new Size(100, 100);
-var path = new Path.Rectangle(topLeft, size);
-path.fillColor = 'black';
-
-// Draw a circle shaped path in the center of the view,
-// to show the rotation point:
-var circle = new Path.Circle(view.center, 5);
-circle.fillColor = 'white';
-
-// Each frame rotate the path 3 degrees around the center point
-// of the view:
-function onFrame(event) {
-	path.rotate(3, view.center);
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-26"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="shear-point-member" class="member">
-<div id="shear-point-link" class="member-link">
-<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-<div id="shear-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given value from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="shear-hor-ver-member" class="member">
-<div id="shear-hor-ver-link" class="member-link">
-<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="shear-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given values from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal shear factor.
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical shear factor.
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="transform-matrix-flags-member" class="member">
-<div id="transform-matrix-flags-link" class="member-link">
-<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-<div id="transform-matrix-flags-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>matrix:</tt> 
-<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-
-
-</li>
-
-<li>
-<tt>flags:</tt> 
-
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="fitbounds-rectangle-member" class="member">
-<div id="fitbounds-rectangle-link" class="member-link">
-<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-<div id="fitbounds-rectangle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
-rectangle, without changing its aspect ratio.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rectangle:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-
-
-</li>
-
-<li>
-<tt>fill:</tt> 
-<tt>Boolean</tt>
-
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-27">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-28">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds, true);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-29">
-var path = new Path.Circle(new Point(80, 50), 30);
-path.fillColor = 'red';
-
-// Fit the path to the bounding rectangle of the view:
-path.fitBounds(view.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-29"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<h3>Remove On Event</h3>
-
-<div id="removeon-object-member" class="member">
-<div id="removeon-object-link" class="member-link">
-<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-<div id="removeon-object-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the events specified in the passed object literal
-occur.</p>
-<p>The object literal can contain the following values:</p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
-fired: <tt>object.move = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
-fired: <tt>object.drag = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
-fired: <tt>object.down = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
-fired: <tt>object.up = true</tt></p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>object:</tt> 
-<tt>Object</tt>
-
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-30">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path on the next onMouseDrag or onMouseDown event:
-	path.removeOn({
-		drag: true,
-		down: true
-	});
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-30"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonmove-member" class="member">
-<div id="removeonmove-link" class="member-link">
-<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-<div id="removeonmove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Move your mouse below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-31">
-function onMouseMove(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next move event, automatically remove the path:
-	path.removeOnMove();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-31"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondown-member" class="member">
-<div id="removeondown-link" class="member-link">
-<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-<div id="removeondown-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-32">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, next time the mouse is pressed:
-	path.removeOnDown();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-32"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondrag-member" class="member">
-<div id="removeondrag-link" class="member-link">
-<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-<div id="removeondrag-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-33">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next drag event, automatically remove the path:
-	path.removeOnDrag();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-33"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonup-member" class="member">
-<div id="removeonup-link" class="member-link">
-<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-<div id="removeonup-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-34">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, when the mouse is released:
-	path.removeOnUp();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-34"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-</div>
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/PlacedItem.html"><tt>PlacedItem</tt></a></h2>
-
-	
-<div id="matrix-member" class="member">
-<div id="matrix-link" class="member-link">
-<a name="matrix" href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
-</div>
-<div id="matrix-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('matrix', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item's transformation matrix, defining position and dimensions in the
-document.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Point.html b/dist/docs/classes/Point.html
deleted file mode 100644
index 16e29e6a..00000000
--- a/dist/docs/classes/Point.html
+++ /dev/null
@@ -1,2196 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Point</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Point</h1>
-
-<p>The Point object represents a point in the two dimensional space
-of the Paper.js project. It is also used to represent two dimensional
-vector objects.</p>
-<p>
-<b>Example</b> &mdash; Create a point at x: 10, y: 5
-</p>
-
-
-<pre class="code">var point = new Point(10, 5);
-console.log(point.x); // 10
-console.log(point.y); // 5</pre>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="point-x-y-member" class="member">
-<div id="point-x-y-link" class="member-link">
-<a name="point-x-y" href="#" onClick="return toggleMember('point-x-y', false);"><tt><b>Point</b>(x, y)</tt></a>
-</div>
-<div id="point-x-y-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('point-x-y', false);"><tt><b>Point</b>(x, y)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point-x-y', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a Point object with the given x and y coordinates.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>x:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the x coordinate
-
-</li>
-
-<li>
-<tt>y:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the y coordinate
-
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> &mdash; Create a point at x: 10, y: 5
-</p>
-
-
-<pre class="code">var point = new Point(10, 5);
-console.log(point.x); // 10
-console.log(point.y); // 5</pre>
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="point-array-member" class="member">
-<div id="point-array-link" class="member-link">
-<a name="point-array" href="#" onClick="return toggleMember('point-array', false);"><tt><b>Point</b>(array)</tt></a>
-</div>
-<div id="point-array-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('point-array', false);"><tt><b>Point</b>(array)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point-array', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a Point object using the numbers in the given array as
-coordinates.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>array:</tt> 
-<tt>array</tt>
-
-
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> &mdash; Creating a point at x: 10, y: 5 using an array of numbers:
-</p>
-
-
-<pre class="code">var array = [10, 5];
-var point = new Point(array);
-console.log(point.x); // 10
-console.log(point.y); // 5</pre>
-
-<p>
-<b>Example</b> &mdash; Passing an array to a functionality that expects a point:
-</p>
-
-
-<pre class="code">// Create a circle shaped path at x: 50, y: 50
-// with a radius of 30:
-var path = new Path.Circle([50, 50], 30);
-path.fillColor = 'red';
-
-// Which is the same as doing:
-var path = new Path.Circle(new Point(50, 50), 30);
-path.fillColor = 'red';</pre>
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="point-object-member" class="member">
-<div id="point-object-link" class="member-link">
-<a name="point-object" href="#" onClick="return toggleMember('point-object', false);"><tt><b>Point</b>(object)</tt></a>
-</div>
-<div id="point-object-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('point-object', false);"><tt><b>Point</b>(object)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point-object', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a Point object using the properties in the given object.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>object:</tt> 
-<tt>object</tt>
-
-
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> &mdash; Creating a point using an object literal with length and angle properties:
-</p>
-
-
-<pre class="code">var point = new Point({
-	length: 10,
-	angle: 90
-});
-console.log(point.length); // 10
-console.log(point.angle); // 90</pre>
-
-<p>
-<b>Example</b> &mdash; Creating a point at x: 10, y: 20 using an object literal:
-</p>
-
-
-<pre class="code">var point = new Point({
-	x: 10,
-	y: 20
-});
-console.log(point.x); // 10
-console.log(point.y); // 20</pre>
-
-<p>
-<b>Example</b> &mdash; Passing an object to a functionality that expects a point:
-</p>
-
-
-<pre class="code">var center = {
-	x: 50,
-	y: 50
-};
-
-// Creates a circle shaped path at x: 50, y: 50
-// with a radius of 30:
-var path = new Path.Circle(center, 30);
-path.fillColor = 'red';</pre>
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="point-size-member" class="member">
-<div id="point-size-link" class="member-link">
-<a name="point-size" href="#" onClick="return toggleMember('point-size', false);"><tt><b>Point</b>(size)</tt></a>
-</div>
-<div id="point-size-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('point-size', false);"><tt><b>Point</b>(size)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point-size', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a Point object using the width and height values of the given
-Size object.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>size:</tt> 
-<a href="../classes/Size.html"><tt>Size</tt></a>
-
-
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> &mdash; Creating a point using a size object.
-</p>
-
-
-<pre class="code">// Create a Size with a width of 100pt and a height of 50pt
-var size = new Size(100, 50);
-console.log(size); // { width: 100, height: 50 }
-var point = new Point(size);
-console.log(point); // { x: 100, y: 50 }</pre>
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="point-point-member" class="member">
-<div id="point-point-link" class="member-link">
-<a name="point-point" href="#" onClick="return toggleMember('point-point', false);"><tt><b>Point</b>(point)</tt></a>
-</div>
-<div id="point-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('point-point', false);"><tt><b>Point</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a Point object using the coordinates of the given Point object.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-<!-- ============================== properties ========================= -->
-	<div class="reference-members"><h2>Operators</h2>
-		
-			<div id="add-member" class="member">
-<div id="add-link" class="member-link">
-<a name="add" href="#" onClick="return toggleMember('add', false);"><tt><tt><b>+</b> Number</tt>, <tt><b>+</b> Point</tt></tt></a>
-</div>
-<div id="add-description" class="member-description hidden">
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('add', false);"><tt><b>+</b> Number</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('add', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Returns the addition of the supplied value to both coordinates of
-the point as a new point.</p>
-<p>The object itself is not modified!</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the addition of the point and the value as a new point
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point = new Point(5, 10);
-var result = point + 20;
-console.log(result); // {x: 25, y: 30}</pre>
-
-	</div>
-
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('add', false);"><tt><b>+</b> Point</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('add', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Returns the addition of the supplied point to the point as a new
-point.</p>
-<p>The object itself is not modified!</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the addition of the two points as a new point
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point1 = new Point(5, 10);
-var point2 = new Point(10, 20);
-var result = point1 + point2;
-console.log(result); // {x: 15, y: 30}</pre>
-
-	</div>
-
-
-</div>
-</div>
-
-		
-			<div id="subtract-member" class="member">
-<div id="subtract-link" class="member-link">
-<a name="subtract" href="#" onClick="return toggleMember('subtract', false);"><tt><tt><b>-</b> Number</tt>, <tt><b>-</b> Point</tt></tt></a>
-</div>
-<div id="subtract-description" class="member-description hidden">
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('subtract', false);"><tt><b>-</b> Number</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('subtract', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Returns the subtraction of the supplied value to both coordinates of
-the point as a new point.</p>
-<p>The object itself is not modified!</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the subtraction of the point and the value as a new point
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point = new Point(10, 20);
-var result = point - 5;
-console.log(result); // {x: 5, y: 15}</pre>
-
-	</div>
-
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('subtract', false);"><tt><b>-</b> Point</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('subtract', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Returns the subtraction of the supplied point to the point as a new
-point.</p>
-<p>The object itself is not modified!</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the subtraction of the two points as a new point
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var firstPoint = new Point(10, 20);
-var secondPoint = new Point(5, 5);
-var result = firstPoint - secondPoint;
-console.log(result); // {x: 5, y: 15}</pre>
-
-	</div>
-
-
-</div>
-</div>
-
-		
-			<div id="multiply-member" class="member">
-<div id="multiply-link" class="member-link">
-<a name="multiply" href="#" onClick="return toggleMember('multiply', false);"><tt><tt><b>*</b> Number</tt>, <tt><b>*</b> Point</tt></tt></a>
-</div>
-<div id="multiply-description" class="member-description hidden">
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('multiply', false);"><tt><b>*</b> Number</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('multiply', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Returns the multiplication of the supplied value to both coordinates of
-the point as a new point.</p>
-<p>The object itself is not modified!</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the multiplication of the point and the value as a new point
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point = new Point(10, 20);
-var result = point * 2;
-console.log(result); // {x: 20, y: 40}</pre>
-
-	</div>
-
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('multiply', false);"><tt><b>*</b> Point</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('multiply', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Returns the multiplication of the supplied point to the point as a new
-point.</p>
-<p>The object itself is not modified!</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the multiplication of the two points as a new point
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var firstPoint = new Point(5, 10);
-var secondPoint = new Point(4, 2);
-var result = firstPoint * secondPoint;
-console.log(result); // {x: 20, y: 20}</pre>
-
-	</div>
-
-
-</div>
-</div>
-
-		
-			<div id="divide-member" class="member">
-<div id="divide-link" class="member-link">
-<a name="divide" href="#" onClick="return toggleMember('divide', false);"><tt><tt><b>/</b> Number</tt>, <tt><b>/</b> Point</tt></tt></a>
-</div>
-<div id="divide-description" class="member-description hidden">
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('divide', false);"><tt><b>/</b> Number</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('divide', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Returns the division of the supplied value to both coordinates of
-the point as a new point.</p>
-<p>The object itself is not modified!</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the division of the point and the value as a new point
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point = new Point(10, 20);
-var result = point / 2;
-console.log(result); // {x: 5, y: 10}</pre>
-
-	</div>
-
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('divide', false);"><tt><b>/</b> Point</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('divide', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Returns the division of the supplied point to the point as a new
-point.</p>
-<p>The object itself is not modified!</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the division of the two points as a new point
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var firstPoint = new Point(8, 10);
-var secondPoint = new Point(2, 5);
-var result = firstPoint / secondPoint;
-console.log(result); // {x: 4, y: 2}</pre>
-
-	</div>
-
-
-</div>
-</div>
-
-		
-			<div id="modulo-member" class="member">
-<div id="modulo-link" class="member-link">
-<a name="modulo" href="#" onClick="return toggleMember('modulo', false);"><tt><tt><b>%</b> Number</tt>, <tt><b>%</b> Point</tt></tt></a>
-</div>
-<div id="modulo-description" class="member-description hidden">
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('modulo', false);"><tt><b>%</b> Number</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modulo', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>The modulo operator returns the integer remainders of dividing the point
-by the supplied value as a new point.</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the integer remainders of dividing the point by the value
-                as a new point
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point = new Point(12, 6);
-console.log(point % 5); // {x: 2, y: 1}</pre>
-
-	</div>
-
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('modulo', false);"><tt><b>%</b> Point</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modulo', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>The modulo operator returns the integer remainders of dividing the point
-by the supplied value as a new point.</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the integer remainders of dividing the points by each
-                other as a new point
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point = new Point(12, 6);
-console.log(point % new Point(5, 2)); // {x: 2, y: 0}</pre>
-
-	</div>
-
-
-</div>
-</div>
-
-		
-			<div id="equals-member" class="member">
-<div id="equals-link" class="member-link">
-<a name="equals" href="#" onClick="return toggleMember('equals', false);"><tt><tt><b>==</b> Point</tt></tt></a>
-</div>
-<div id="equals-description" class="member-description hidden">
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('equals', false);"><tt><b>==</b> Point</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Checks whether the coordinates of the point are equal to that of the
-supplied point.</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the points are equal, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point = new Point(5, 10);
-console.log(point == new Point(5, 10)); // true
-console.log(point == new Point(1, 1)); // false
-console.log(point != new Point(1, 1)); // true</pre>
-
-	</div>
-
-
-</div>
-</div>
-
-		
-	</div>
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="x-member" class="member">
-<div id="x-link" class="member-link">
-<a name="x" href="#" onClick="return toggleMember('x', false);"><tt><b>x</b></tt></a>
-</div>
-<div id="x-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('x', false);"><tt><b>x</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('x', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The x coordinate of the point</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="y-member" class="member">
-<div id="y-link" class="member-link">
-<a name="y" href="#" onClick="return toggleMember('y', false);"><tt><b>y</b></tt></a>
-</div>
-<div id="y-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('y', false);"><tt><b>y</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('y', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The y coordinate of the point</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="length-member" class="member">
-<div id="length-link" class="member-link">
-<a name="length" href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
-</div>
-<div id="length-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('length', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The length of the vector that is represented by this point's coordinates.</p>
-<p>Each point can be interpreted as a vector that points from the origin
-(<tt>x = 0</tt>, <tt>y = 0</tt>) to the point's location.</p>
-<p>Setting the length changes the location but keeps the vector's angle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="angle-member" class="member">
-<div id="angle-link" class="member-link">
-<a name="angle" href="#" onClick="return toggleMember('angle', false);"><tt><b>angle</b></tt></a>
-</div>
-<div id="angle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('angle', false);"><tt><b>angle</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('angle', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The vector's angle in degrees, measured from the x-axis to the vector.</p>
-<p>The angle is unsigned, no information about rotational direction is
-given.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="angleinradians-member" class="member">
-<div id="angleinradians-link" class="member-link">
-<a name="angleinradians" href="#" onClick="return toggleMember('angleinradians', false);"><tt><b>angleInRadians</b></tt></a>
-</div>
-<div id="angleinradians-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('angleinradians', false);"><tt><b>angleInRadians</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('angleinradians', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The vector's angle in radians, measured from the x-axis to the vector.</p>
-<p>The angle is unsigned, no information about rotational direction is
-given.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="quadrant-member" class="member">
-<div id="quadrant-link" class="member-link">
-<a name="quadrant" href="#" onClick="return toggleMember('quadrant', false);"><tt><b>quadrant</b></tt></a>
-</div>
-<div id="quadrant-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('quadrant', false);"><tt><b>quadrant</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('quadrant', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The quadrant of the <a href="../classes/Point.html#angle" onclick="return toggleMember('angle', true);"><tt>angle</tt></a> of the point.</p>
-<p>Angles between 0 and 90 degrees are in quadrant <tt>1</tt>. Angles between
-90 and 180 degrees are in quadrant <tt>2</tt>, angles between 180 and 270
-degrees are in quadrant <tt>3</tt> and angles between 270 and 360 degrees
-are in quadrant <tt>4</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point = new Point({
-	angle: 10,
-	length: 20
-});
-console.log(point.quadrant); // 1
-
-point.angle = 100;
-console.log(point.quadrant); // 2
-
-point.angle = 190;
-console.log(point.quadrant); // 3
-
-point.angle = 280;
-console.log(point.quadrant); // 4</pre>
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="selected-member" class="member">
-<div id="selected-link" class="member-link">
-<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-<div id="selected-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>This property is only present if the point is an anchor or control point
-of a <a href="../classes/Segment.html"><tt>Segment</tt></a> or a <a href="../classes/Curve.html"><tt>Curve</tt></a>. In this case, it returns
-<tt>true</tt> it is selected, <tt>false</tt> otherwise</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a copy of the point.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the cloned point
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point1 = new Point();
-var point2 = point1;
-point2.x = 1; // also changes point1.x
-
-var point2 = point1.clone();
-point2.x = 1; // doesn't change point1.x</pre>
-
-</div>
-</div>
-</div>
-		
-			
-<div id="tostring-member" class="member">
-<div id="tostring-link" class="member-link">
-<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-<div id="tostring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the point.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="transform-matrix-member" class="member">
-<div id="transform-matrix-link" class="member-link">
-<a name="transform-matrix" href="#" onClick="return toggleMember('transform-matrix', false);"><tt><b>transform</b>(matrix)</tt></a>
-</div>
-<div id="transform-matrix-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('transform-matrix', false);"><tt><b>transform</b>(matrix)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transforms the point by the matrix as a new point. The object itself
-is not modified!</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>matrix:</tt> 
-<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;The transformed point
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<h3>Distance & Length</h3>
-
-<div id="getdistance-point-squared-member" class="member">
-<div id="getdistance-point-squared-link" class="member-link">
-<a name="getdistance-point-squared" href="#" onClick="return toggleMember('getdistance-point-squared', false);"><tt><b>getDistance</b>(point, squared)</tt></a>
-</div>
-<div id="getdistance-point-squared-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getdistance-point-squared', false);"><tt><b>getDistance</b>(point, squared)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getdistance-point-squared', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns the distance between the point and another point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>squared:</tt> 
-<tt>Boolean</tt>
-&mdash;&nbsp;Controls whether the distance should remain
-       squared, or its square root should be calculated.
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Number</tt></tt>
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="normalize-member" class="member">
-<div id="normalize-link" class="member-link">
-<a name="normalize" href="#" onClick="return toggleMember('normalize', false);"><tt><b>normalize</b>([length])</tt></a>
-</div>
-<div id="normalize-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('normalize', false);"><tt><b>normalize</b>([length])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('normalize', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Normalize modifies the <a href="../classes/Point.html#length" onclick="return toggleMember('length', true);"><tt>length</tt></a> of the vector to <tt>1</tt> without
-changing its angle and returns it as a new point. The optional
-<tt>length</tt> parameter defines the length to normalize to.</p>
-<p>The object itself is not modified!</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>length:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;The length of the normalized vector
-&mdash;&nbsp;optional, default: <tt>1</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;The normalized vector of the vector that is represented
-                by this point's coordinates.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<h3>Angle & Rotation</h3>
-
-<div id="getangle-point-member" class="member">
-<div id="getangle-point-link" class="member-link">
-<a name="getangle-point" href="#" onClick="return toggleMember('getangle-point', false);"><tt><b>getAngle</b>(point)</tt></a>
-</div>
-<div id="getangle-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getangle-point', false);"><tt><b>getAngle</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getangle-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns the smaller angle between two vectors. The angle is unsigned, no
-information about rotational direction is given.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;the angle in degrees
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="getangleinradians-point-member" class="member">
-<div id="getangleinradians-point-link" class="member-link">
-<a name="getangleinradians-point" href="#" onClick="return toggleMember('getangleinradians-point', false);"><tt><b>getAngleInRadians</b>(point)</tt></a>
-</div>
-<div id="getangleinradians-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getangleinradians-point', false);"><tt><b>getAngleInRadians</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getangleinradians-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns the smaller angle between two vectors in radians. The angle is
-unsigned, no information about rotational direction is given.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;the angle in radians
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="getdirectedangle-point-member" class="member">
-<div id="getdirectedangle-point-link" class="member-link">
-<a name="getdirectedangle-point" href="#" onClick="return toggleMember('getdirectedangle-point', false);"><tt><b>getDirectedAngle</b>(point)</tt></a>
-</div>
-<div id="getdirectedangle-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getdirectedangle-point', false);"><tt><b>getDirectedAngle</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getdirectedangle-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns the angle between two vectors. The angle is directional and
-signed, giving information about the rotational direction.</p>
-<p>Read more about angle units and orientation in the description of the
-<a href="../classes/Point.html#angle" onclick="return toggleMember('angle', true);"><tt>angle</tt></a> property.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;the angle between the two vectors
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="rotate-angle-center-member" class="member">
-<div id="rotate-angle-center-link" class="member-link">
-<a name="rotate-angle-center" href="#" onClick="return toggleMember('rotate-angle-center', false);"><tt><b>rotate</b>(angle, center)</tt></a>
-</div>
-<div id="rotate-angle-center-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rotate-angle-center', false);"><tt><b>rotate</b>(angle, center)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle-center', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rotates the point by the given angle around an optional center point.</p>
-<p>The object itself is not modified.</p>
-<p>Read more about angle units and orientation in the description of the
-<a href="../classes/Point.html#angle" onclick="return toggleMember('angle', true);"><tt>angle</tt></a> property.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>angle:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the rotation angle
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the center point of the rotation
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the rotated point
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<h3>Tests</h3>
-
-<div id="isinside-rect-member" class="member">
-<div id="isinside-rect-link" class="member-link">
-<a name="isinside-rect" href="#" onClick="return toggleMember('isinside-rect', false);"><tt><b>isInside</b>(rect)</tt></a>
-</div>
-<div id="isinside-rect-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isinside-rect', false);"><tt><b>isInside</b>(rect)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isinside-rect', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the point is inside the boundaries of the rectangle.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rect:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-&mdash;&nbsp;the rectangle to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the point is inside the rectangle, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="isclose-point-tolerance-member" class="member">
-<div id="isclose-point-tolerance-link" class="member-link">
-<a name="isclose-point-tolerance" href="#" onClick="return toggleMember('isclose-point-tolerance', false);"><tt><b>isClose</b>(point, tolerance)</tt></a>
-</div>
-<div id="isclose-point-tolerance-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isclose-point-tolerance', false);"><tt><b>isClose</b>(point, tolerance)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isclose-point-tolerance', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the point is within a given distance of another point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the point to check against
-
-</li>
-
-<li>
-<tt>tolerance:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the maximum distance allowed
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is within the given distance, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="iscolinear-point-member" class="member">
-<div id="iscolinear-point-link" class="member-link">
-<a name="iscolinear-point" href="#" onClick="return toggleMember('iscolinear-point', false);"><tt><b>isColinear</b>(point)</tt></a>
-</div>
-<div id="iscolinear-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('iscolinear-point', false);"><tt><b>isColinear</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('iscolinear-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the vector represented by this point is colinear (parallel) to
-another vector.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the vector to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is parallel, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="isorthogonal-point-member" class="member">
-<div id="isorthogonal-point-link" class="member-link">
-<a name="isorthogonal-point" href="#" onClick="return toggleMember('isorthogonal-point', false);"><tt><b>isOrthogonal</b>(point)</tt></a>
-</div>
-<div id="isorthogonal-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isorthogonal-point', false);"><tt><b>isOrthogonal</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isorthogonal-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the vector represented by this point is orthogonal
-(perpendicular) to another vector.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the vector to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is orthogonal, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="iszero-member" class="member">
-<div id="iszero-link" class="member-link">
-<a name="iszero" href="#" onClick="return toggleMember('iszero', false);"><tt><b>isZero</b>()</tt></a>
-</div>
-<div id="iszero-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('iszero', false);"><tt><b>isZero</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('iszero', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if this point has both the x and y coordinate set to 0.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> both x and y are 0, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="isnan-member" class="member">
-<div id="isnan-link" class="member-link">
-<a name="isnan" href="#" onClick="return toggleMember('isnan', false);"><tt><b>isNaN</b>()</tt></a>
-</div>
-<div id="isnan-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isnan', false);"><tt><b>isNaN</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isnan', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if this point has an undefined value for at least one of its
-coordinates.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if either x or y are not a number, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<h3>Vector Math Functions</h3>
-
-<div id="dot-point-member" class="member">
-<div id="dot-point-link" class="member-link">
-<a name="dot-point" href="#" onClick="return toggleMember('dot-point', false);"><tt><b>dot</b>(point)</tt></a>
-</div>
-<div id="dot-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dot-point', false);"><tt><b>dot</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dot-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns the dot product of the point and another point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;the dot product of the two points
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="cross-point-member" class="member">
-<div id="cross-point-link" class="member-link">
-<a name="cross-point" href="#" onClick="return toggleMember('cross-point', false);"><tt><b>cross</b>(point)</tt></a>
-</div>
-<div id="cross-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('cross-point', false);"><tt><b>cross</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('cross-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns the cross product of the point and another point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;the cross product of the two points
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="project-point-member" class="member">
-<div id="project-point-link" class="member-link">
-<a name="project-point" href="#" onClick="return toggleMember('project-point', false);"><tt><b>project</b>(point)</tt></a>
-</div>
-<div id="project-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('project-point', false);"><tt><b>project</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns the projection of the point on another point.</p>
-<p>Both points are interpreted as vectors.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the projection of the point on another point
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<h3>Math Functions</h3>
-
-<div id="round-member" class="member">
-<div id="round-link" class="member-link">
-<a name="round" href="#" onClick="return toggleMember('round', false);"><tt><b>round</b>()</tt></a>
-</div>
-<div id="round-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('round', false);"><tt><b>round</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('round', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a new point with rounded <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values. The
-object itself is not modified!</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point = new Point(10.2, 10.9);
-var roundPoint = point.round();
-console.log(roundPoint); // {x: 10, y: 11}</pre>
-
-</div>
-</div>
-</div>
-		
-			
-<div id="ceil-member" class="member">
-<div id="ceil-link" class="member-link">
-<a name="ceil" href="#" onClick="return toggleMember('ceil', false);"><tt><b>ceil</b>()</tt></a>
-</div>
-<div id="ceil-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('ceil', false);"><tt><b>ceil</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ceil', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a new point with the nearest greater non-fractional values to the
-specified <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values. The object itself is not
-modified!</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point = new Point(10.2, 10.9);
-var ceilPoint = point.ceil();
-console.log(ceilPoint); // {x: 11, y: 11}</pre>
-
-</div>
-</div>
-</div>
-		
-			
-<div id="floor-member" class="member">
-<div id="floor-link" class="member-link">
-<a name="floor" href="#" onClick="return toggleMember('floor', false);"><tt><b>floor</b>()</tt></a>
-</div>
-<div id="floor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('floor', false);"><tt><b>floor</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('floor', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a new point with the nearest smaller non-fractional values to the
-specified <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values. The object itself is not
-modified!</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point = new Point(10.2, 10.9);
-var floorPoint = point.floor();
-console.log(floorPoint); // {x: 10, y: 10}</pre>
-
-</div>
-</div>
-</div>
-		
-			
-<div id="abs-member" class="member">
-<div id="abs-link" class="member-link">
-<a name="abs" href="#" onClick="return toggleMember('abs', false);"><tt><b>abs</b>()</tt></a>
-</div>
-<div id="abs-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('abs', false);"><tt><b>abs</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('abs', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a new point with the absolute values of the specified <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a>
-and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values. The object itself is not modified!</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point = new Point(-5, 10);
-var absPoint = point.abs();
-console.log(absPoint); // {x: 5, y: 10}</pre>
-
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-	<div class="reference-members"><h2>Static Methods</h2>
-		
-			
-<div id="min-point1-point2-member" class="member">
-<div id="min-point1-point2-link" class="member-link">
-<a name="min-point1-point2" href="#" onClick="return toggleMember('min-point1-point2', false);"><tt><b>Point.min</b>(point1, point2)</tt></a>
-</div>
-<div id="min-point1-point2-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('min-point1-point2', false);"><tt><b>Point.min</b>(point1, point2)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('min-point1-point2', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a new point object with the smallest <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and
-<a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> of the supplied points.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point1:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>point2:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;The newly created point object
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point1 = new Point(10, 100);
-var point2 = new Point(200, 5);
-var minPoint = Point.min(point1, point2);
-console.log(minPoint); // {x: 10, y: 5}</pre>
-
-</div>
-</div>
-</div>
-		
-			
-<div id="max-point1-point2-member" class="member">
-<div id="max-point1-point2-link" class="member-link">
-<a name="max-point1-point2" href="#" onClick="return toggleMember('max-point1-point2', false);"><tt><b>Point.max</b>(point1, point2)</tt></a>
-</div>
-<div id="max-point1-point2-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('max-point1-point2', false);"><tt><b>Point.max</b>(point1, point2)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('max-point1-point2', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a new point object with the largest <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and
-<a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> of the supplied points.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point1:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>point2:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;The newly created point object
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point1 = new Point(10, 100);
-var point2 = new Point(200, 5);
-var maxPoint = Point.max(point1, point2);
-console.log(maxPoint); // {x: 200, y: 100}</pre>
-
-</div>
-</div>
-</div>
-		
-			
-<div id="random-member" class="member">
-<div id="random-link" class="member-link">
-<a name="random" href="#" onClick="return toggleMember('random', false);"><tt><b>Point.random</b>()</tt></a>
-</div>
-<div id="random-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('random', false);"><tt><b>Point.random</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('random', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a point object with random <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values
-between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;The newly created point object
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var maxPoint = new Point(100, 100);
-var randomPoint = Point.random();
-
-// A point between {x:0, y:0} and {x:100, y:100}:
-var point = maxPoint * randomPoint;</pre>
-
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/PointText.html b/dist/docs/classes/PointText.html
deleted file mode 100644
index a25c35a9..00000000
--- a/dist/docs/classes/PointText.html
+++ /dev/null
@@ -1,3688 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>PointText</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>PointText</h1>
-
-<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b>, <b><a href="../classes/TextItem.html"><tt>TextItem</tt></a></b></p>
-
-<p>A PointText item represents a piece of typography in your Paper.js
-project which starts from a certain point and extends by the amount of
-characters contained in it.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="pointtext-point-member" class="member">
-<div id="pointtext-point-link" class="member-link">
-<a name="pointtext-point" href="#" onClick="return toggleMember('pointtext-point', false);"><tt><b>PointText</b>(point)</tt></a>
-</div>
-<div id="pointtext-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('pointtext-point', false);"><tt><b>PointText</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('pointtext-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a point text item</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the position where the text will start
-
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var text = new PointText(new Point(50, 100));
-text.justification = 'center';
-text.fillColor = 'black';
-text.content = 'The contents of the point text';</pre>
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="point-member" class="member">
-<div id="point-link" class="member-link">
-<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
-</div>
-<div id="point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The PointText's anchor point</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="id-member" class="member">
-<div id="id-link" class="member-link">
-<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-<div id="id-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The unique id of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="name-member" class="member">
-<div id="name-link" class="member-link">
-<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-<div id="name-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The name of the item. If the item has a name, it can be accessed by name
-through its parent's children list.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and add path to it as a child:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="position-member" class="member">
-<div id="position-link" class="member-link">
-<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-<div id="position-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item's position within the project. This is the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the position of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-// Create a circle at position { x: 10, y: 10 }
-var circle = new Path.Circle(new Point(10, 10), 10);
-circle.fillColor = 'red';
-
-// Move the circle to { x: 20, y: 20 }
-circle.position = new Point(20, 20);
-
-// Move the circle 100 points to the right and 50 points down
-circle.position += new Point(100, 50);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Changing the x coordinate of an item's position:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-// Create a circle at position { x: 20, y: 20 }
-var circle = new Path.Circle(new Point(20, 20), 10);
-circle.fillColor = 'red';
-
-// Move the circle 100 points to the right
-circle.position.x += 100;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="style-member" class="member">
-<div id="style-link" class="member-link">
-<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-<div id="style-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The path style of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.style = {
-	fillColor: 'blue',
-	strokeColor: 'red',
-	strokeWidth: 5
-};
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Copying the style of another item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-var path = new Path.Circle(new Point(50, 50), 30);
-path.fillColor = 'red';
-
-var path2 = new Path.Circle(new Point(180, 50), 20);
-// Copy the path style of path:
-path2.style = path.style;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Applying the same style object to multiple items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-5">
-var myStyle = {
-	fillColor: 'red',
-	strokeColor: 'blue',
-	strokeWidth: 4
-};
-
-var path = new Path.Circle(new Point(80, 50), 30);
-path.style = myStyle;
-
-var path2 = new Path.Circle(new Point(150, 50), 20);
-path2.style = myStyle;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="visible-member" class="member">
-<div id="visible-link" class="member-link">
-<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-<div id="visible-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
-item won't be drawn.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>true</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Hiding an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-6">
-var path = new Path.Circle(new Point(50, 50), 20);
-path.fillColor = 'red';
-
-// Hide the path:
-path.visible = false;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="blendmode-member" class="member">
-<div id="blendmode-link" class="member-link">
-<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-<div id="blendmode-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The blend mode of the item.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'normal'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
-'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
-'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
-'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's blend mode:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-7">
-// Create a white rectangle in the background
-// with the same dimensions as the view:
-var background = new Path.Rectangle(view.bounds);
-background.fillColor = 'white';
-
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.fillColor = 'blue';
-
-// Set the blend mode of circle2:
-circle2.blendMode = 'multiply';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="opacity-member" class="member">
-<div id="opacity-link" class="member-link">
-<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-<div id="opacity-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Making an item 50% transparent:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-8">
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.style = {
-	fillColor: 'blue',
-	strokeColor: 'green',
-	strokeWidth: 10
-};
-
-// Make circle2 50% transparent:
-circle2.opacity = 0.5;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="guide-member" class="member">
-<div id="guide-link" class="member-link">
-<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-<div id="guide-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item functions as a guide. When set to
-<tt>true</tt>, the item will be drawn at the end as a guide.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="selected-member" class="member">
-<div id="selected-link" class="member-link">
-<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-<div id="selected-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether an item is selected and will also return <tt>true</tt>
-if the item is partially selected (groups with some selected or partially
-selected paths).</p>
-<p>Paper.js draws the visual outlines of selected items on top of your
-project. This can be useful for debugging, as it allows you to see the
-construction of paths, position of path curves, individual segment points
-and bounding boxes of symbol and raster items.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Selecting an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-9">
-var path = new Path.Circle(new Size(80, 50), 35);
-path.selected = true; // Select the path
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="clipmask-member" class="member">
-<div id="clipmask-link" class="member-link">
-<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-<div id="clipmask-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item defines a clip mask. This can only be set on
-paths, compound paths, and text frame objects, and only if the item is
-already contained within a clipping group.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Project Hierarchy</h3>
-
-<div id="project-member" class="member">
-<div id="project-link" class="member-link">
-<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-<div id="project-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The project that this item belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Project.html"><tt>Project</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="layer-member" class="member">
-<div id="layer-link" class="member-link">
-<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-<div id="layer-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The layer that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Layer.html"><tt>Layer</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="parent-member" class="member">
-<div id="parent-link" class="member-link">
-<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-<div id="parent-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var path = new Path();
-
-// New items are placed in the active layer:
-console.log(path.parent == project.activeLayer); // true
-
-var group = new Group();
-group.addChild(path);
-
-// Now the parent of the path has become the group:
-console.log(path.parent == group); // true</pre>
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="children-member" class="member">
-<div id="children-link" class="member-link">
-<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-<div id="children-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The children items contained within this item. Items that define a
-<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
-<p><b>Please note:</b> The children array should not be modified directly
-using array functions. To remove single items from the children list, use
-<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
-<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
-<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Accessing items in the children array:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-10">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// Access the path through the group's children array:
-group.children[0].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Accessing children by name:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-11">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'orange';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Passing an array of items to item.children:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-12">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-var group = new Group();
-group.children = [path];
-
-// The path is the first child of the group:
-group.firstChild.fillColor = 'green';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="firstchild-member" class="member">
-<div id="firstchild-link" class="member-link">
-<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-<div id="firstchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The first item contained within this item. This is a shortcut for
-accessing <tt>item.children[0]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="lastchild-member" class="member">
-<div id="lastchild-link" class="member-link">
-<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-<div id="lastchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The last item contained within this item.This is a shortcut for
-accessing <tt>item.children[item.children.length - 1]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="nextsibling-member" class="member">
-<div id="nextsibling-link" class="member-link">
-<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-<div id="nextsibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The next item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="previoussibling-member" class="member">
-<div id="previoussibling-link" class="member-link">
-<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-<div id="previoussibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The previous item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="index-member" class="member">
-<div id="index-link" class="member-link">
-<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-<div id="index-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The index of this item within the list of its parent's children.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Bounding Rectangles</h3>
-
-<div id="bounds-member" class="member">
-<div id="bounds-link" class="member-link">
-<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-<div id="bounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item excluding stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokebounds-member" class="member">
-<div id="strokebounds-link" class="member-link">
-<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-<div id="strokebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="handlebounds-member" class="member">
-<div id="handlebounds-link" class="member-link">
-<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-<div id="handlebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including handles.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Stroke Style</h3>
-
-<div id="strokecolor-member" class="member">
-<div id="strokecolor-link" class="member-link">
-<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-<div id="strokecolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the stroke color of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-13">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to RGB red:
-circle.strokeColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokewidth-member" class="member">
-<div id="strokewidth-link" class="member-link">
-<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-<div id="strokewidth-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The width of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's stroke width:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-14">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to black:
-circle.strokeColor = 'black';
-
-// Set its stroke width to 10:
-circle.strokeWidth = 10;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokecap-member" class="member">
-<div id="strokecap-link" class="member-link">
-<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-<div id="strokecap-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
-have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'butt'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('round', 'square', 'butt')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke caps:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-15">
-var line = new Path(new Point(80, 50), new Point(420, 50));
-line.strokeColor = 'black';
-line.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-line.selected = true;
-
-// Set the stroke cap of the line to be round:
-line.strokeCap = 'round';
-
-// Copy the path and set its stroke cap to be square:
-var line2 = line.clone();
-line2.position.y += 50;
-line2.strokeCap = 'square';
-
-// Make another copy and set its stroke cap to be butt:
-var line2 = line.clone();
-line2.position.y += 100;
-line2.strokeCap = 'butt';
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-15"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokejoin-member" class="member">
-<div id="strokejoin-link" class="member-link">
-<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-<div id="strokejoin-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the corners of paths when they have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'miter'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt> ('miter', 'round', 'bevel')
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke joins:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-16">
-var path = new Path();
-path.add(new Point(80, 100));
-path.add(new Point(120, 40));
-path.add(new Point(160, 100));
-path.strokeColor = 'black';
-path.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-path.selected = true;
-
-var path2 = path.clone();
-path2.position.x += path2.bounds.width * 1.5;
-path2.strokeJoin = 'round';
-
-var path3 = path2.clone();
-path3.position.x += path3.bounds.width * 1.5;
-path3.strokeJoin = 'bevel';
-</script>
-<div class="canvas"><canvas width="516" height="120" id="canvas-16"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="dashoffset-member" class="member">
-<div id="dashoffset-link" class="member-link">
-<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-<div id="dashoffset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The dash offset of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>0</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="dasharray-member" class="member">
-<div id="dasharray-link" class="member-link">
-<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-<div id="dasharray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>[]</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Array</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-17">
-var path = new Path.Circle(new Point(80, 50), 40);
-path.strokeWidth = 2;
-path.strokeColor = 'black';
-
-// Set the dashed stroke to [10pt dash, 4pt gap]:
-path.dashArray = [10, 4];
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="miterlimit-member" class="member">
-<div id="miterlimit-link" class="member-link">
-<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-<div id="miterlimit-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The miter limit of the stroke.</p>
-<p>When two line segments meet at a sharp angle and miter joins have been
-specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
-extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
-miterLimit imposes a limit on the ratio of the miter length to the
-<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>10</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Fill Style</h3>
-
-<div id="fillcolor-member" class="member">
-<div id="fillcolor-link" class="member-link">
-<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-<div id="fillcolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The fill color of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the fill color of a path to red:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-18">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set the fill color of the circle to RGB red:
-circle.fillColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-<!-- =========================== inherited methods ========================= -->
-<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Clones the item within the same project and places the copy above the
-item.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Cloning items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-19">
-var circle = new Path.Circle(new Point(50, 50), 10);
-circle.fillColor = 'red';
-
-// Make 20 copies of the circle:
-for (var i = 0; i < 20; i++) {
-	var copy = circle.clone();
-
-	// Distribute the copies horizontally, so we can see them:
-	copy.position.x += i * copy.bounds.width;
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="copyto-item-member" class="member">
-<div id="copyto-item-link" class="member-link">
-<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-<div id="copyto-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>When passed a project, copies the item to the project,
-or duplicates it within the same project. When passed an item,
-copies the item into the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
-&mdash;&nbsp;the item or project to
-copy the item to
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rasterize-member" class="member">
-<div id="rasterize-link" class="member-link">
-<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-<div id="rasterize-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rasterizes the item into a newly created Raster object. The item itself
-is not removed after rasterization.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>resolution:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the resolution of the raster in dpi
-&mdash;&nbsp;optional, default: <tt>72</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Rasterizing an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-20">
-var circle = new Path.Circle(new Point(80, 50), 5);
-circle.fillColor = 'red';
-
-// Create a rasterized version of the path:
-var raster = circle.rasterize();
-
-// Move it 100pt to the right:
-raster.position.x += 100;
-
-// Scale the path and the raster by 300%, so we can compare them:
-circle.scale(5);
-raster.scale(5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="hittest-point-member" class="member">
-<div id="hittest-point-link" class="member-link">
-<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-<div id="hittest-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Perform a hit test on the item (and its children, if it is a
-<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
-<p>The optional options object allows you to control the specifics of the
-hit test and may contain a combination of the following values:</p>
-<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
-points.</p>
-<p><b>options.type:</b> Only hit test again a certain item
-type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
-<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
-<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
-items, taking into account stroke width.</p>
-<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
-<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
-<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
-(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
-<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
-last segment points of open path items.</p>
-<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
-side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
-(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
-<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
-<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The point where the hit test should be performed
-
-</li>
-
-<li>
-<tt>options:</tt> 
-<tt>Object</tt>
-
-&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
-tolerance: 2 }</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
-information about what exactly was hit or <tt>null</tt> if nothing was
-hit.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Operations</h3>
-
-<div id="addchild-item-member" class="member">
-<div id="addchild-item-link" class="member-link">
-<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-<div id="addchild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified item as a child of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be added as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchild-index-item-member" class="member">
-<div id="insertchild-index-item-link" class="member-link">
-<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-<div id="insertchild-index-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="addchildren-items-member" class="member">
-<div id="addchildren-items-link" class="member-link">
-<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-<div id="addchildren-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified items as children of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>items:</tt> 
-<tt>item</tt>
-&mdash;&nbsp;The items to be added as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchildren-index-items-member" class="member">
-<div id="insertchildren-index-items-link" class="member-link">
-<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-<div id="insertchildren-index-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified items as children of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>items:</tt> 
-Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-&mdash;&nbsp;The items to be appended as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertabove-item-member" class="member">
-<div id="insertabove-item-link" class="member-link">
-<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-<div id="insertabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertbelow-item-member" class="member">
-<div id="insertbelow-item-link" class="member-link">
-<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-<div id="insertbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendtop-item-member" class="member">
-<div id="appendtop-item-link" class="member-link">
-<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-<div id="appendtop-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it above all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendbottom-item-member" class="member">
-<div id="appendbottom-item-link" class="member-link">
-<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-<div id="appendbottom-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it below all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="moveabove-item-member" class="member">
-<div id="moveabove-item-link" class="member-link">
-<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-<div id="moveabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="movebelow-item-member" class="member">
-<div id="movebelow-item-link" class="member-link">
-<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-<div id="movebelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves the item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item below which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="remove-member" class="member">
-<div id="remove-link" class="member-link">
-<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-<div id="remove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item from the project. If the item has children, they are also
-removed.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-member" class="member">
-<div id="removechildren-link" class="member-link">
-<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-<div id="removechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-from-member" class="member">
-<div id="removechildren-from-link" class="member-link">
-<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-<div id="removechildren-from-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the children from the specified <tt>from</tt> index to the
-<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>from:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the beginning index, inclusive
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the ending index, exclusive
-&mdash;&nbsp;optional, default: <tt>children.length</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="reversechildren-member" class="member">
-<div id="reversechildren-link" class="member-link">
-<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-<div id="reversechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Reverses the order of the item's children</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Tests</h3>
-
-<div id="haschildren-member" class="member">
-<div id="haschildren-link" class="member-link">
-<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-<div id="haschildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item contains any children items.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isabove-item-member" class="member">
-<div id="isabove-item-link" class="member-link">
-<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-<div id="isabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if this item is above the specified item in the stacking order
-of the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isbelow-item-member" class="member">
-<div id="isbelow-item-link" class="member-link">
-<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-<div id="isbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is below the specified item in the stacking order of
-the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isparent-item-member" class="member">
-<div id="isparent-item-link" class="member-link">
-<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-<div id="isparent-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is the parent of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="ischild-item-member" class="member">
-<div id="ischild-item-link" class="member-link">
-<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-<div id="ischild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is a child of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isdescendant-item-member" class="member">
-<div id="isdescendant-item-link" class="member-link">
-<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-<div id="isdescendant-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is contained within the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isancestor-item-member" class="member">
-<div id="isancestor-item-link" class="member-link">
-<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-<div id="isancestor-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is an ancestor of the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
-item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isgroupedwith-item-member" class="member">
-<div id="isgroupedwith-item-link" class="member-link">
-<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-<div id="isgroupedwith-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the item is grouped with the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Transform Functions</h3>
-
-<div id="scale-scale-member" class="member">
-<div id="scale-scale-link" class="member-link">
-<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-<div id="scale-scale-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given value from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>scale:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item from its center point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-21">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path by 150% from its center point
-circle.scale(1.5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Scaling an item from a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-22">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path 150% from its bottom left corner
-circle.scale(1.5, circle.bounds.bottomLeft);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="scale-hor-ver-member" class="member">
-<div id="scale-hor-ver-link" class="member-link">
-<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="scale-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given values from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal scale factor
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item horizontally by 300%:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-23">
-// Create a circle shaped path at { x: 100, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(100, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path horizontally by 300%
-circle.scale(3, 1);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="translate-delta-member" class="member">
-<div id="translate-delta-link" class="member-link">
-<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-<div id="translate-delta-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Translates (moves) the item by the given offset point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>delta:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the offset to translate the item by
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rotate-angle-member" class="member">
-<div id="rotate-angle-link" class="member-link">
-<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-<div id="rotate-angle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rotates the item by a given angle around the given point.</p>
-<p>Angles are oriented clockwise and measured in degrees.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>angle:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the rotation angle
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Rotating an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-24">
-// Create a rectangle shaped path with its top left
-// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
-var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
-path.fillColor = 'black';
-
-// Rotate the path by 30 degrees:
-path.rotate(30);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Rotating an item around a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-25">
-// Create a rectangle shaped path with its top left
-// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
-var topLeft = new Point(175, 50);
-var size = new Size(100, 100);
-var path = new Path.Rectangle(topLeft, size);
-path.fillColor = 'black';
-
-// Draw a circle shaped path in the center of the view,
-// to show the rotation point:
-var circle = new Path.Circle(view.center, 5);
-circle.fillColor = 'white';
-
-// Each frame rotate the path 3 degrees around the center point
-// of the view:
-function onFrame(event) {
-	path.rotate(3, view.center);
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-25"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="shear-point-member" class="member">
-<div id="shear-point-link" class="member-link">
-<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-<div id="shear-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given value from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="shear-hor-ver-member" class="member">
-<div id="shear-hor-ver-link" class="member-link">
-<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="shear-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given values from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal shear factor.
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical shear factor.
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="transform-matrix-flags-member" class="member">
-<div id="transform-matrix-flags-link" class="member-link">
-<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-<div id="transform-matrix-flags-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>matrix:</tt> 
-<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-
-
-</li>
-
-<li>
-<tt>flags:</tt> 
-
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="fitbounds-rectangle-member" class="member">
-<div id="fitbounds-rectangle-link" class="member-link">
-<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-<div id="fitbounds-rectangle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
-rectangle, without changing its aspect ratio.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rectangle:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-
-
-</li>
-
-<li>
-<tt>fill:</tt> 
-<tt>Boolean</tt>
-
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-26">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-27">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds, true);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-28">
-var path = new Path.Circle(new Point(80, 50), 30);
-path.fillColor = 'red';
-
-// Fit the path to the bounding rectangle of the view:
-path.fitBounds(view.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-28"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<h3>Remove On Event</h3>
-
-<div id="removeon-object-member" class="member">
-<div id="removeon-object-link" class="member-link">
-<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-<div id="removeon-object-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the events specified in the passed object literal
-occur.</p>
-<p>The object literal can contain the following values:</p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
-fired: <tt>object.move = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
-fired: <tt>object.drag = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
-fired: <tt>object.down = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
-fired: <tt>object.up = true</tt></p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>object:</tt> 
-<tt>Object</tt>
-
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-29">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path on the next onMouseDrag or onMouseDown event:
-	path.removeOn({
-		drag: true,
-		down: true
-	});
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-29"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonmove-member" class="member">
-<div id="removeonmove-link" class="member-link">
-<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-<div id="removeonmove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Move your mouse below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-30">
-function onMouseMove(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next move event, automatically remove the path:
-	path.removeOnMove();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-30"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondown-member" class="member">
-<div id="removeondown-link" class="member-link">
-<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-<div id="removeondown-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-31">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, next time the mouse is pressed:
-	path.removeOnDown();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-31"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondrag-member" class="member">
-<div id="removeondrag-link" class="member-link">
-<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-<div id="removeondrag-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-32">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next drag event, automatically remove the path:
-	path.removeOnDrag();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-32"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonup-member" class="member">
-<div id="removeonup-link" class="member-link">
-<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-<div id="removeonup-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-33">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, when the mouse is released:
-	path.removeOnUp();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-33"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-</div>
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/TextItem.html"><tt>TextItem</tt></a></h2>
-
-	
-<div id="content-member" class="member">
-<div id="content-link" class="member-link">
-<a name="content" href="#" onClick="return toggleMember('content', false);"><tt><b>content</b></tt></a>
-</div>
-<div id="content-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('content', false);"><tt><b>content</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('content', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The text contents of the text item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the content of a PointText item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-34">
-// Create a point-text item at {x: 30, y: 30}:
-var text = new PointText(new Point(30, 30));
-text.fillColor = 'black';
-
-// Set the content of the text item:
-text.content = 'Hello world';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-34"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Interactive example, move your mouse over the view below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-35">
-// Create a point-text item at {x: 30, y: 30}:
-var text = new PointText(new Point(30, 30));
-text.fillColor = 'black';
-
-text.content = 'Move your mouse over the view, to see its position';
-
-function onMouseMove(event) {
-	// Each time the mouse is moved, set the content of
-	// the point text to describe the position of the mouse:
-	text.content = 'Your position is: ' + event.point.toString();
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Style Properties</h3>
-
-<div id="characterstyle-member" class="member">
-<div id="characterstyle-link" class="member-link">
-<a name="characterstyle" href="#" onClick="return toggleMember('characterstyle', false);"><tt><b>characterStyle</b></tt></a>
-</div>
-<div id="characterstyle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('characterstyle', false);"><tt><b>characterStyle</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('characterstyle', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The character style of the text item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/CharacterStyle.html"><tt>CharacterStyle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="paragraphstyle-member" class="member">
-<div id="paragraphstyle-link" class="member-link">
-<a name="paragraphstyle" href="#" onClick="return toggleMember('paragraphstyle', false);"><tt><b>paragraphStyle</b></tt></a>
-</div>
-<div id="paragraphstyle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('paragraphstyle', false);"><tt><b>paragraphStyle</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('paragraphstyle', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The paragraph style of the text item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/ParagraphStyle.html"><tt>ParagraphStyle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Project.html b/dist/docs/classes/Project.html
deleted file mode 100644
index d1948071..00000000
--- a/dist/docs/classes/Project.html
+++ /dev/null
@@ -1,567 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Project</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Project</h1>
-
-<p>A Project object in Paper.js is what usually is referred to as the
-document: The top level object that holds all the items contained in the
-scene graph. As the term document is already taken in the browser context,
-it is called Project.</p>
-<p>Projects allow the manipluation of the styles that are applied to all newly
-created items, give access to the selected items, and will in future versions
-offer ways to query for items in the scene graph defining specific
-requirements, and means to persist and load from different formats, such as
-SVG and PDF.</p>
-<p>The currently active project can be accessed through the
-<a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> variable.</p>
-<p>An array of all open projects is accessible through the
-<a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> variable.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="project-member" class="member">
-<div id="project-link" class="member-link">
-<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>Project</b>()</tt></a>
-</div>
-<div id="project-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('project', false);"><tt><b>Project</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a Paper.js project.</p>
-<p>When working with PaperScript, a project is automatically created for us
-and the <a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> variable points to it.</p>
-
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="currentstyle-member" class="member">
-<div id="currentstyle-link" class="member-link">
-<a name="currentstyle" href="#" onClick="return toggleMember('currentstyle', false);"><tt><b>currentStyle</b></tt></a>
-</div>
-<div id="currentstyle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('currentstyle', false);"><tt><b>currentStyle</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('currentstyle', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The currently active path style. All selected items and newly
-created items will be styled with this style.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-project.currentStyle = {
-	fillColor: 'red',
-	strokeColor: 'black',
-	strokeWidth: 5
-}
-
-// The following paths will take over all style properties of
-// the current style:
-var path = new Path.Circle(new Point(75, 50), 30);
-var path2 = new Path.Circle(new Point(175, 50), 20);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-project.currentStyle.fillColor = 'red';
-
-// The following path will take over the fill color we just set:
-var path = new Path.Circle(new Point(75, 50), 30);
-var path2 = new Path.Circle(new Point(175, 50), 20);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="index-member" class="member">
-<div id="index-link" class="member-link">
-<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-<div id="index-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The index of the project in the <a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> list.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="selecteditems-member" class="member">
-<div id="selecteditems-link" class="member-link">
-<a name="selecteditems" href="#" onClick="return toggleMember('selecteditems', false);"><tt><b>selectedItems</b></tt></a>
-</div>
-<div id="selecteditems-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('selecteditems', false);"><tt><b>selectedItems</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selecteditems', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The selected items contained within the project.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Project Hierarchy</h3>
-
-<div id="layers-member" class="member">
-<div id="layers-link" class="member-link">
-<a name="layers" href="#" onClick="return toggleMember('layers', false);"><tt><b>layers</b></tt></a>
-</div>
-<div id="layers-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('layers', false);"><tt><b>layers</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layers', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The layers contained within the project.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Layer.html"><tt>Layer</tt></a> objects
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="activelayer-member" class="member">
-<div id="activelayer-link" class="member-link">
-<a name="activelayer" href="#" onClick="return toggleMember('activelayer', false);"><tt><b>activeLayer</b></tt></a>
-</div>
-<div id="activelayer-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('activelayer', false);"><tt><b>activeLayer</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activelayer', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The layer which is currently active. New items will be created on this
-layer by default.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Layer.html"><tt>Layer</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="symbols-member" class="member">
-<div id="symbols-link" class="member-link">
-<a name="symbols" href="#" onClick="return toggleMember('symbols', false);"><tt><b>symbols</b></tt></a>
-</div>
-<div id="symbols-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('symbols', false);"><tt><b>symbols</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('symbols', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The symbols contained within the project.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Symbol.html"><tt>Symbol</tt></a> objects
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="views-member" class="member">
-<div id="views-link" class="member-link">
-<a name="views" href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
-</div>
-<div id="views-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('views', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The views contained within the project.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/View.html"><tt>View</tt></a> objects
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="activeview-member" class="member">
-<div id="activeview-link" class="member-link">
-<a name="activeview" href="#" onClick="return toggleMember('activeview', false);"><tt><b>activeView</b></tt></a>
-</div>
-<div id="activeview-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('activeview', false);"><tt><b>activeView</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activeview', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The view which is currently active.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/View.html"><tt>View</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="activate-member" class="member">
-<div id="activate-link" class="member-link">
-<a name="activate" href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
-</div>
-<div id="activate-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activate', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Activates this project, so all newly created items will be placed
-in it.</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="remove-member" class="member">
-<div id="remove-link" class="member-link">
-<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-<div id="remove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes this project from the <a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> list.</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="selectall-member" class="member">
-<div id="selectall-link" class="member-link">
-<a name="selectall" href="#" onClick="return toggleMember('selectall', false);"><tt><b>selectAll</b>()</tt></a>
-</div>
-<div id="selectall-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('selectall', false);"><tt><b>selectAll</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selectall', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Selects all items in the project.</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="deselectall-member" class="member">
-<div id="deselectall-link" class="member-link">
-<a name="deselectall" href="#" onClick="return toggleMember('deselectall', false);"><tt><b>deselectAll</b>()</tt></a>
-</div>
-<div id="deselectall-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('deselectall', false);"><tt><b>deselectAll</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('deselectall', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Deselects all selected items in the project.</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="hittest-point-member" class="member">
-<div id="hittest-point-link" class="member-link">
-<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-<div id="hittest-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Perform a hit test on the items contained within the project at the
-location of the specified point.</p>
-<p>The optional options object allows you to control the specifics of the
-hit test and may contain a combination of the following values:</p>
-<p><b>options.tolerance:</b> <tt>Number</tt> - The tolerance of the hit test
-in points.</p>
-<p><b>options.type:</b> Only hit test again a certain item
-type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
-<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
-<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
-items, taking into account stroke width.</p>
-<p><b>options.segments:</b> <tt>Boolean</tt> - Hit test for
-<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
-<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
-(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
-<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
-last segment points of open path items.</p>
-<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
-side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
-(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
-<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
-<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The point where the hit test should be performed
-
-</li>
-
-<li>
-<tt>options:</tt> 
-<tt>Object</tt>
-
-&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
-tolerance: true }</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
-information about what exactly was hit or <tt>null</tt> if nothing was
-hit.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Raster.html b/dist/docs/classes/Raster.html
deleted file mode 100644
index f54df035..00000000
--- a/dist/docs/classes/Raster.html
+++ /dev/null
@@ -1,4204 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Raster</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Raster</h1>
-
-<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b>, <b><a href="../classes/PlacedItem.html"><tt>PlacedItem</tt></a></b></p>
-
-<p>The Raster item represents an image in a Paper.js project.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="raster-member" class="member">
-<div id="raster-link" class="member-link">
-<a name="raster" href="#" onClick="return toggleMember('raster', false);"><tt><b>Raster</b>([object])</tt></a>
-</div>
-<div id="raster-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('raster', false);"><tt><b>Raster</b>([object])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('raster', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a new raster item and places it in the active layer.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>object:</tt> 
-<tt>HTMLImageElement</tt> / <tt>Canvas</tt> / <tt>string</tt>
-
-&mdash;&nbsp;optional
-</li>
-
-</ul>
-
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="size-member" class="member">
-<div id="size-link" class="member-link">
-<a name="size" href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
-</div>
-<div id="size-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('size', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The size of the raster in pixels.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Size.html"><tt>Size</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="width-member" class="member">
-<div id="width-link" class="member-link">
-<a name="width" href="#" onClick="return toggleMember('width', false);"><tt><b>width</b></tt></a>
-</div>
-<div id="width-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('width', false);"><tt><b>width</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('width', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The width of the raster in pixels.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="height-member" class="member">
-<div id="height-link" class="member-link">
-<a name="height" href="#" onClick="return toggleMember('height', false);"><tt><b>height</b></tt></a>
-</div>
-<div id="height-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('height', false);"><tt><b>height</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('height', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The height of the raster in pixels.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="ppi-member" class="member">
-<div id="ppi-link" class="member-link">
-<a name="ppi" href="#" onClick="return toggleMember('ppi', false);"><tt><b>ppi</b></tt></a>
-</div>
-<div id="ppi-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('ppi', false);"><tt><b>ppi</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ppi', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Pixels per inch of the raster at its current size.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Size.html"><tt>Size</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="context-member" class="member">
-<div id="context-link" class="member-link">
-<a name="context" href="#" onClick="return toggleMember('context', false);"><tt><b>context</b></tt></a>
-</div>
-<div id="context-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('context', false);"><tt><b>context</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('context', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The Canvas 2d drawing context of the raster.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Context</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="image-member" class="member">
-<div id="image-link" class="member-link">
-<a name="image" href="#" onClick="return toggleMember('image', false);"><tt><b>image</b></tt></a>
-</div>
-<div id="image-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('image', false);"><tt><b>image</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('image', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The HTMLImageElement or Canvas of the raster.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>HTMLImageElement</tt> / <tt>Canvas</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="getsubimage-rect-member" class="member">
-<div id="getsubimage-rect-link" class="member-link">
-<a name="getsubimage-rect" href="#" onClick="return toggleMember('getsubimage-rect', false);"><tt><b>getSubImage</b>(rect)</tt></a>
-</div>
-<div id="getsubimage-rect-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getsubimage-rect', false);"><tt><b>getSubImage</b>(rect)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getsubimage-rect', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rect:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-&mdash;&nbsp;the boundaries of the sub image in pixel
-coordinates
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Canvas</tt></tt>
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="drawimage-image-point-member" class="member">
-<div id="drawimage-image-point-link" class="member-link">
-<a name="drawimage-image-point" href="#" onClick="return toggleMember('drawimage-image-point', false);"><tt><b>drawImage</b>(image, point)</tt></a>
-</div>
-<div id="drawimage-image-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('drawimage-image-point', false);"><tt><b>drawImage</b>(image, point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('drawimage-image-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Draws an image on the raster.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>image:</tt> 
-<tt>HTMLImageELement</tt> / <tt>Canvas</tt>
-
-
-</li>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the offset of the image as a point in pixel
-coordinates
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="getaveragecolor-object-member" class="member">
-<div id="getaveragecolor-object-link" class="member-link">
-<a name="getaveragecolor-object" href="#" onClick="return toggleMember('getaveragecolor-object', false);"><tt><b>getAverageColor</b>(object)</tt></a>
-</div>
-<div id="getaveragecolor-object-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getaveragecolor-object', false);"><tt><b>getAverageColor</b>(object)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getaveragecolor-object', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Calculates the average color of the image within the given path,
-rectangle or point. This can be used for creating raster image
-effects.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>object:</tt> 
-<a href="../classes/Path.html"><tt>Path</tt></a> / <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a> / <a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a></tt>&nbsp;&mdash;&nbsp;the average color contained in the area covered by the
-specified path, rectangle or point.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<h3>Pixels</h3>
-
-<div id="getpixel-x-y-member" class="member">
-<div id="getpixel-x-y-link" class="member-link">
-<a name="getpixel-x-y" href="#" onClick="return toggleMember('getpixel-x-y', false);"><tt><b>getPixel</b>(x, y)</tt></a>
-</div>
-<div id="getpixel-x-y-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getpixel-x-y', false);"><tt><b>getPixel</b>(x, y)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getpixel-x-y', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Gets the color of a pixel in the raster.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>x:</tt> 
-
-&mdash;&nbsp;the x offset of the pixel in pixel coordinates
-
-</li>
-
-<li>
-<tt>y:</tt> 
-
-&mdash;&nbsp;the y offset of the pixel in pixel coordinates
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a></tt>&nbsp;&mdash;&nbsp;the color of the pixel
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="getpixel-point-member" class="member">
-<div id="getpixel-point-link" class="member-link">
-<a name="getpixel-point" href="#" onClick="return toggleMember('getpixel-point', false);"><tt><b>getPixel</b>(point)</tt></a>
-</div>
-<div id="getpixel-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getpixel-point', false);"><tt><b>getPixel</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getpixel-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Gets the color of a pixel in the raster.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-
-&mdash;&nbsp;the offset of the pixel as a point in pixel coordinates
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a></tt>&nbsp;&mdash;&nbsp;the color of the pixel
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="setpixel-x-y-color-member" class="member">
-<div id="setpixel-x-y-color-link" class="member-link">
-<a name="setpixel-x-y-color" href="#" onClick="return toggleMember('setpixel-x-y-color', false);"><tt><b>setPixel</b>(x, y, color)</tt></a>
-</div>
-<div id="setpixel-x-y-color-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('setpixel-x-y-color', false);"><tt><b>setPixel</b>(x, y, color)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('setpixel-x-y-color', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Sets the color of the specified pixel to the specified color.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>x:</tt> 
-
-&mdash;&nbsp;the x offset of the pixel in pixel coordinates
-
-</li>
-
-<li>
-<tt>y:</tt> 
-
-&mdash;&nbsp;the y offset of the pixel in pixel coordinates
-
-</li>
-
-<li>
-<tt>color:</tt> 
-
-&mdash;&nbsp;the color that the pixel will be set to
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="setpixel-point-color-member" class="member">
-<div id="setpixel-point-color-link" class="member-link">
-<a name="setpixel-point-color" href="#" onClick="return toggleMember('setpixel-point-color', false);"><tt><b>setPixel</b>(point, color)</tt></a>
-</div>
-<div id="setpixel-point-color-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('setpixel-point-color', false);"><tt><b>setPixel</b>(point, color)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('setpixel-point-color', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Sets the color of the specified pixel to the specified color.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-
-&mdash;&nbsp;the offset of the pixel as a point in pixel coordinates
-
-</li>
-
-<li>
-<tt>color:</tt> 
-
-&mdash;&nbsp;the color that the pixel will be set to
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<h3>Image Data</h3>
-
-<div id="createdata-size-member" class="member">
-<div id="createdata-size-link" class="member-link">
-<a name="createdata-size" href="#" onClick="return toggleMember('createdata-size', false);"><tt><b>createData</b>(size)</tt></a>
-</div>
-<div id="createdata-size-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('createdata-size', false);"><tt><b>createData</b>(size)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('createdata-size', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>size:</tt> 
-<a href="../classes/Size.html"><tt>Size</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>ImageData</tt></tt>
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="getdata-rect-member" class="member">
-<div id="getdata-rect-link" class="member-link">
-<a name="getdata-rect" href="#" onClick="return toggleMember('getdata-rect', false);"><tt><b>getData</b>(rect)</tt></a>
-</div>
-<div id="getdata-rect-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('getdata-rect', false);"><tt><b>getData</b>(rect)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getdata-rect', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rect:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>ImageData</tt></tt>
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="setdata-data-point-member" class="member">
-<div id="setdata-data-point-link" class="member-link">
-<a name="setdata-data-point" href="#" onClick="return toggleMember('setdata-data-point', false);"><tt><b>setData</b>(data, point)</tt></a>
-</div>
-<div id="setdata-data-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('setdata-data-point', false);"><tt><b>setData</b>(data, point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('setdata-data-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>data:</tt> 
-<tt>ImageData</tt>
-
-
-</li>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>ImageData</tt></tt>
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="id-member" class="member">
-<div id="id-link" class="member-link">
-<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-<div id="id-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The unique id of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="name-member" class="member">
-<div id="name-link" class="member-link">
-<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-<div id="name-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The name of the item. If the item has a name, it can be accessed by name
-through its parent's children list.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and add path to it as a child:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="position-member" class="member">
-<div id="position-link" class="member-link">
-<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-<div id="position-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item's position within the project. This is the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the position of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-// Create a circle at position { x: 10, y: 10 }
-var circle = new Path.Circle(new Point(10, 10), 10);
-circle.fillColor = 'red';
-
-// Move the circle to { x: 20, y: 20 }
-circle.position = new Point(20, 20);
-
-// Move the circle 100 points to the right and 50 points down
-circle.position += new Point(100, 50);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Changing the x coordinate of an item's position:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-// Create a circle at position { x: 20, y: 20 }
-var circle = new Path.Circle(new Point(20, 20), 10);
-circle.fillColor = 'red';
-
-// Move the circle 100 points to the right
-circle.position.x += 100;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="style-member" class="member">
-<div id="style-link" class="member-link">
-<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-<div id="style-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The path style of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.style = {
-	fillColor: 'blue',
-	strokeColor: 'red',
-	strokeWidth: 5
-};
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Copying the style of another item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-var path = new Path.Circle(new Point(50, 50), 30);
-path.fillColor = 'red';
-
-var path2 = new Path.Circle(new Point(180, 50), 20);
-// Copy the path style of path:
-path2.style = path.style;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Applying the same style object to multiple items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-5">
-var myStyle = {
-	fillColor: 'red',
-	strokeColor: 'blue',
-	strokeWidth: 4
-};
-
-var path = new Path.Circle(new Point(80, 50), 30);
-path.style = myStyle;
-
-var path2 = new Path.Circle(new Point(150, 50), 20);
-path2.style = myStyle;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="visible-member" class="member">
-<div id="visible-link" class="member-link">
-<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-<div id="visible-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
-item won't be drawn.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>true</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Hiding an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-6">
-var path = new Path.Circle(new Point(50, 50), 20);
-path.fillColor = 'red';
-
-// Hide the path:
-path.visible = false;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="blendmode-member" class="member">
-<div id="blendmode-link" class="member-link">
-<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-<div id="blendmode-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The blend mode of the item.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'normal'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
-'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
-'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
-'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's blend mode:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-7">
-// Create a white rectangle in the background
-// with the same dimensions as the view:
-var background = new Path.Rectangle(view.bounds);
-background.fillColor = 'white';
-
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.fillColor = 'blue';
-
-// Set the blend mode of circle2:
-circle2.blendMode = 'multiply';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="opacity-member" class="member">
-<div id="opacity-link" class="member-link">
-<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-<div id="opacity-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Making an item 50% transparent:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-8">
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.style = {
-	fillColor: 'blue',
-	strokeColor: 'green',
-	strokeWidth: 10
-};
-
-// Make circle2 50% transparent:
-circle2.opacity = 0.5;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="guide-member" class="member">
-<div id="guide-link" class="member-link">
-<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-<div id="guide-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item functions as a guide. When set to
-<tt>true</tt>, the item will be drawn at the end as a guide.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="selected-member" class="member">
-<div id="selected-link" class="member-link">
-<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-<div id="selected-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether an item is selected and will also return <tt>true</tt>
-if the item is partially selected (groups with some selected or partially
-selected paths).</p>
-<p>Paper.js draws the visual outlines of selected items on top of your
-project. This can be useful for debugging, as it allows you to see the
-construction of paths, position of path curves, individual segment points
-and bounding boxes of symbol and raster items.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Selecting an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-9">
-var path = new Path.Circle(new Size(80, 50), 35);
-path.selected = true; // Select the path
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="clipmask-member" class="member">
-<div id="clipmask-link" class="member-link">
-<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-<div id="clipmask-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item defines a clip mask. This can only be set on
-paths, compound paths, and text frame objects, and only if the item is
-already contained within a clipping group.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Project Hierarchy</h3>
-
-<div id="project-member" class="member">
-<div id="project-link" class="member-link">
-<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-<div id="project-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The project that this item belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Project.html"><tt>Project</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="layer-member" class="member">
-<div id="layer-link" class="member-link">
-<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-<div id="layer-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The layer that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Layer.html"><tt>Layer</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="parent-member" class="member">
-<div id="parent-link" class="member-link">
-<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-<div id="parent-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var path = new Path();
-
-// New items are placed in the active layer:
-console.log(path.parent == project.activeLayer); // true
-
-var group = new Group();
-group.addChild(path);
-
-// Now the parent of the path has become the group:
-console.log(path.parent == group); // true</pre>
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="children-member" class="member">
-<div id="children-link" class="member-link">
-<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-<div id="children-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The children items contained within this item. Items that define a
-<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
-<p><b>Please note:</b> The children array should not be modified directly
-using array functions. To remove single items from the children list, use
-<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
-<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
-<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Accessing items in the children array:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-10">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// Access the path through the group's children array:
-group.children[0].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Accessing children by name:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-11">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'orange';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Passing an array of items to item.children:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-12">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-var group = new Group();
-group.children = [path];
-
-// The path is the first child of the group:
-group.firstChild.fillColor = 'green';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="firstchild-member" class="member">
-<div id="firstchild-link" class="member-link">
-<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-<div id="firstchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The first item contained within this item. This is a shortcut for
-accessing <tt>item.children[0]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="lastchild-member" class="member">
-<div id="lastchild-link" class="member-link">
-<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-<div id="lastchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The last item contained within this item.This is a shortcut for
-accessing <tt>item.children[item.children.length - 1]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="nextsibling-member" class="member">
-<div id="nextsibling-link" class="member-link">
-<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-<div id="nextsibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The next item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="previoussibling-member" class="member">
-<div id="previoussibling-link" class="member-link">
-<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-<div id="previoussibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The previous item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="index-member" class="member">
-<div id="index-link" class="member-link">
-<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-<div id="index-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The index of this item within the list of its parent's children.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Bounding Rectangles</h3>
-
-<div id="bounds-member" class="member">
-<div id="bounds-link" class="member-link">
-<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-<div id="bounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item excluding stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokebounds-member" class="member">
-<div id="strokebounds-link" class="member-link">
-<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-<div id="strokebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="handlebounds-member" class="member">
-<div id="handlebounds-link" class="member-link">
-<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-<div id="handlebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including handles.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Stroke Style</h3>
-
-<div id="strokecolor-member" class="member">
-<div id="strokecolor-link" class="member-link">
-<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-<div id="strokecolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the stroke color of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-13">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to RGB red:
-circle.strokeColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokewidth-member" class="member">
-<div id="strokewidth-link" class="member-link">
-<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-<div id="strokewidth-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The width of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's stroke width:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-14">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to black:
-circle.strokeColor = 'black';
-
-// Set its stroke width to 10:
-circle.strokeWidth = 10;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokecap-member" class="member">
-<div id="strokecap-link" class="member-link">
-<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-<div id="strokecap-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
-have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'butt'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('round', 'square', 'butt')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke caps:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-15">
-var line = new Path(new Point(80, 50), new Point(420, 50));
-line.strokeColor = 'black';
-line.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-line.selected = true;
-
-// Set the stroke cap of the line to be round:
-line.strokeCap = 'round';
-
-// Copy the path and set its stroke cap to be square:
-var line2 = line.clone();
-line2.position.y += 50;
-line2.strokeCap = 'square';
-
-// Make another copy and set its stroke cap to be butt:
-var line2 = line.clone();
-line2.position.y += 100;
-line2.strokeCap = 'butt';
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-15"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokejoin-member" class="member">
-<div id="strokejoin-link" class="member-link">
-<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-<div id="strokejoin-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the corners of paths when they have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'miter'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt> ('miter', 'round', 'bevel')
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke joins:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-16">
-var path = new Path();
-path.add(new Point(80, 100));
-path.add(new Point(120, 40));
-path.add(new Point(160, 100));
-path.strokeColor = 'black';
-path.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-path.selected = true;
-
-var path2 = path.clone();
-path2.position.x += path2.bounds.width * 1.5;
-path2.strokeJoin = 'round';
-
-var path3 = path2.clone();
-path3.position.x += path3.bounds.width * 1.5;
-path3.strokeJoin = 'bevel';
-</script>
-<div class="canvas"><canvas width="516" height="120" id="canvas-16"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="dashoffset-member" class="member">
-<div id="dashoffset-link" class="member-link">
-<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-<div id="dashoffset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The dash offset of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>0</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="dasharray-member" class="member">
-<div id="dasharray-link" class="member-link">
-<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-<div id="dasharray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>[]</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Array</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-17">
-var path = new Path.Circle(new Point(80, 50), 40);
-path.strokeWidth = 2;
-path.strokeColor = 'black';
-
-// Set the dashed stroke to [10pt dash, 4pt gap]:
-path.dashArray = [10, 4];
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="miterlimit-member" class="member">
-<div id="miterlimit-link" class="member-link">
-<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-<div id="miterlimit-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The miter limit of the stroke.</p>
-<p>When two line segments meet at a sharp angle and miter joins have been
-specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
-extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
-miterLimit imposes a limit on the ratio of the miter length to the
-<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>10</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Fill Style</h3>
-
-<div id="fillcolor-member" class="member">
-<div id="fillcolor-link" class="member-link">
-<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-<div id="fillcolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The fill color of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the fill color of a path to red:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-18">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set the fill color of the circle to RGB red:
-circle.fillColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-<!-- =========================== inherited methods ========================= -->
-<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Clones the item within the same project and places the copy above the
-item.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Cloning items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-19">
-var circle = new Path.Circle(new Point(50, 50), 10);
-circle.fillColor = 'red';
-
-// Make 20 copies of the circle:
-for (var i = 0; i < 20; i++) {
-	var copy = circle.clone();
-
-	// Distribute the copies horizontally, so we can see them:
-	copy.position.x += i * copy.bounds.width;
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="copyto-item-member" class="member">
-<div id="copyto-item-link" class="member-link">
-<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-<div id="copyto-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>When passed a project, copies the item to the project,
-or duplicates it within the same project. When passed an item,
-copies the item into the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
-&mdash;&nbsp;the item or project to
-copy the item to
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rasterize-member" class="member">
-<div id="rasterize-link" class="member-link">
-<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-<div id="rasterize-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rasterizes the item into a newly created Raster object. The item itself
-is not removed after rasterization.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>resolution:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the resolution of the raster in dpi
-&mdash;&nbsp;optional, default: <tt>72</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Rasterizing an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-20">
-var circle = new Path.Circle(new Point(80, 50), 5);
-circle.fillColor = 'red';
-
-// Create a rasterized version of the path:
-var raster = circle.rasterize();
-
-// Move it 100pt to the right:
-raster.position.x += 100;
-
-// Scale the path and the raster by 300%, so we can compare them:
-circle.scale(5);
-raster.scale(5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="hittest-point-member" class="member">
-<div id="hittest-point-link" class="member-link">
-<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-<div id="hittest-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Perform a hit test on the item (and its children, if it is a
-<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
-<p>The optional options object allows you to control the specifics of the
-hit test and may contain a combination of the following values:</p>
-<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
-points.</p>
-<p><b>options.type:</b> Only hit test again a certain item
-type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
-<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
-<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
-items, taking into account stroke width.</p>
-<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
-<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
-<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
-(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
-<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
-last segment points of open path items.</p>
-<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
-side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
-(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
-<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
-<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The point where the hit test should be performed
-
-</li>
-
-<li>
-<tt>options:</tt> 
-<tt>Object</tt>
-
-&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
-tolerance: 2 }</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
-information about what exactly was hit or <tt>null</tt> if nothing was
-hit.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Operations</h3>
-
-<div id="addchild-item-member" class="member">
-<div id="addchild-item-link" class="member-link">
-<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-<div id="addchild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified item as a child of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be added as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchild-index-item-member" class="member">
-<div id="insertchild-index-item-link" class="member-link">
-<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-<div id="insertchild-index-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="addchildren-items-member" class="member">
-<div id="addchildren-items-link" class="member-link">
-<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-<div id="addchildren-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified items as children of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>items:</tt> 
-<tt>item</tt>
-&mdash;&nbsp;The items to be added as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchildren-index-items-member" class="member">
-<div id="insertchildren-index-items-link" class="member-link">
-<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-<div id="insertchildren-index-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified items as children of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>items:</tt> 
-Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-&mdash;&nbsp;The items to be appended as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertabove-item-member" class="member">
-<div id="insertabove-item-link" class="member-link">
-<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-<div id="insertabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertbelow-item-member" class="member">
-<div id="insertbelow-item-link" class="member-link">
-<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-<div id="insertbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendtop-item-member" class="member">
-<div id="appendtop-item-link" class="member-link">
-<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-<div id="appendtop-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it above all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendbottom-item-member" class="member">
-<div id="appendbottom-item-link" class="member-link">
-<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-<div id="appendbottom-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it below all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="moveabove-item-member" class="member">
-<div id="moveabove-item-link" class="member-link">
-<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-<div id="moveabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="movebelow-item-member" class="member">
-<div id="movebelow-item-link" class="member-link">
-<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-<div id="movebelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves the item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item below which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="remove-member" class="member">
-<div id="remove-link" class="member-link">
-<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-<div id="remove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item from the project. If the item has children, they are also
-removed.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-member" class="member">
-<div id="removechildren-link" class="member-link">
-<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-<div id="removechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-from-member" class="member">
-<div id="removechildren-from-link" class="member-link">
-<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-<div id="removechildren-from-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the children from the specified <tt>from</tt> index to the
-<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>from:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the beginning index, inclusive
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the ending index, exclusive
-&mdash;&nbsp;optional, default: <tt>children.length</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="reversechildren-member" class="member">
-<div id="reversechildren-link" class="member-link">
-<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-<div id="reversechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Reverses the order of the item's children</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Tests</h3>
-
-<div id="haschildren-member" class="member">
-<div id="haschildren-link" class="member-link">
-<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-<div id="haschildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item contains any children items.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isabove-item-member" class="member">
-<div id="isabove-item-link" class="member-link">
-<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-<div id="isabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if this item is above the specified item in the stacking order
-of the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isbelow-item-member" class="member">
-<div id="isbelow-item-link" class="member-link">
-<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-<div id="isbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is below the specified item in the stacking order of
-the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isparent-item-member" class="member">
-<div id="isparent-item-link" class="member-link">
-<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-<div id="isparent-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is the parent of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="ischild-item-member" class="member">
-<div id="ischild-item-link" class="member-link">
-<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-<div id="ischild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is a child of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isdescendant-item-member" class="member">
-<div id="isdescendant-item-link" class="member-link">
-<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-<div id="isdescendant-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is contained within the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isancestor-item-member" class="member">
-<div id="isancestor-item-link" class="member-link">
-<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-<div id="isancestor-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is an ancestor of the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
-item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isgroupedwith-item-member" class="member">
-<div id="isgroupedwith-item-link" class="member-link">
-<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-<div id="isgroupedwith-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the item is grouped with the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Transform Functions</h3>
-
-<div id="scale-scale-member" class="member">
-<div id="scale-scale-link" class="member-link">
-<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-<div id="scale-scale-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given value from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>scale:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item from its center point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-21">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path by 150% from its center point
-circle.scale(1.5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Scaling an item from a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-22">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path 150% from its bottom left corner
-circle.scale(1.5, circle.bounds.bottomLeft);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="scale-hor-ver-member" class="member">
-<div id="scale-hor-ver-link" class="member-link">
-<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="scale-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given values from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal scale factor
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item horizontally by 300%:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-23">
-// Create a circle shaped path at { x: 100, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(100, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path horizontally by 300%
-circle.scale(3, 1);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="translate-delta-member" class="member">
-<div id="translate-delta-link" class="member-link">
-<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-<div id="translate-delta-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Translates (moves) the item by the given offset point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>delta:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the offset to translate the item by
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rotate-angle-member" class="member">
-<div id="rotate-angle-link" class="member-link">
-<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-<div id="rotate-angle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rotates the item by a given angle around the given point.</p>
-<p>Angles are oriented clockwise and measured in degrees.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>angle:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the rotation angle
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Rotating an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-24">
-// Create a rectangle shaped path with its top left
-// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
-var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
-path.fillColor = 'black';
-
-// Rotate the path by 30 degrees:
-path.rotate(30);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Rotating an item around a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-25">
-// Create a rectangle shaped path with its top left
-// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
-var topLeft = new Point(175, 50);
-var size = new Size(100, 100);
-var path = new Path.Rectangle(topLeft, size);
-path.fillColor = 'black';
-
-// Draw a circle shaped path in the center of the view,
-// to show the rotation point:
-var circle = new Path.Circle(view.center, 5);
-circle.fillColor = 'white';
-
-// Each frame rotate the path 3 degrees around the center point
-// of the view:
-function onFrame(event) {
-	path.rotate(3, view.center);
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-25"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="shear-point-member" class="member">
-<div id="shear-point-link" class="member-link">
-<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-<div id="shear-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given value from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="shear-hor-ver-member" class="member">
-<div id="shear-hor-ver-link" class="member-link">
-<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="shear-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given values from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal shear factor.
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical shear factor.
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="transform-matrix-flags-member" class="member">
-<div id="transform-matrix-flags-link" class="member-link">
-<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-<div id="transform-matrix-flags-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>matrix:</tt> 
-<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-
-
-</li>
-
-<li>
-<tt>flags:</tt> 
-
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="fitbounds-rectangle-member" class="member">
-<div id="fitbounds-rectangle-link" class="member-link">
-<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-<div id="fitbounds-rectangle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
-rectangle, without changing its aspect ratio.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rectangle:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-
-
-</li>
-
-<li>
-<tt>fill:</tt> 
-<tt>Boolean</tt>
-
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-26">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-27">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds, true);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-28">
-var path = new Path.Circle(new Point(80, 50), 30);
-path.fillColor = 'red';
-
-// Fit the path to the bounding rectangle of the view:
-path.fitBounds(view.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-28"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<h3>Remove On Event</h3>
-
-<div id="removeon-object-member" class="member">
-<div id="removeon-object-link" class="member-link">
-<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-<div id="removeon-object-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the events specified in the passed object literal
-occur.</p>
-<p>The object literal can contain the following values:</p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
-fired: <tt>object.move = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
-fired: <tt>object.drag = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
-fired: <tt>object.down = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
-fired: <tt>object.up = true</tt></p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>object:</tt> 
-<tt>Object</tt>
-
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-29">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path on the next onMouseDrag or onMouseDown event:
-	path.removeOn({
-		drag: true,
-		down: true
-	});
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-29"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonmove-member" class="member">
-<div id="removeonmove-link" class="member-link">
-<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-<div id="removeonmove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Move your mouse below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-30">
-function onMouseMove(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next move event, automatically remove the path:
-	path.removeOnMove();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-30"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondown-member" class="member">
-<div id="removeondown-link" class="member-link">
-<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-<div id="removeondown-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-31">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, next time the mouse is pressed:
-	path.removeOnDown();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-31"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondrag-member" class="member">
-<div id="removeondrag-link" class="member-link">
-<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-<div id="removeondrag-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-32">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next drag event, automatically remove the path:
-	path.removeOnDrag();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-32"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonup-member" class="member">
-<div id="removeonup-link" class="member-link">
-<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-<div id="removeonup-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-33">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, when the mouse is released:
-	path.removeOnUp();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-33"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-</div>
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/PlacedItem.html"><tt>PlacedItem</tt></a></h2>
-
-	
-<div id="matrix-member" class="member">
-<div id="matrix-link" class="member-link">
-<a name="matrix" href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
-</div>
-<div id="matrix-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('matrix', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item's transformation matrix, defining position and dimensions in the
-document.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Rectangle.html b/dist/docs/classes/Rectangle.html
deleted file mode 100644
index 34eb81b2..00000000
--- a/dist/docs/classes/Rectangle.html
+++ /dev/null
@@ -1,1380 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Rectangle</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Rectangle</h1>
-
-<p>A Rectangle specifies an area that is enclosed by it's top-left
-point (x, y), its width, and its height. It should not be confused with a
-rectangular path, it is not an item.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="rectangle-point-size-member" class="member">
-<div id="rectangle-point-size-link" class="member-link">
-<a name="rectangle-point-size" href="#" onClick="return toggleMember('rectangle-point-size', false);"><tt><b>Rectangle</b>(point, size)</tt></a>
-</div>
-<div id="rectangle-point-size-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rectangle-point-size', false);"><tt><b>Rectangle</b>(point, size)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rectangle-point-size', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a Rectangle object.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the top-left point of the rectangle
-
-</li>
-
-<li>
-<tt>size:</tt> 
-<a href="../classes/Size.html"><tt>Size</tt></a>
-&mdash;&nbsp;the size of the rectangle
-
-</li>
-
-</ul>
-
-
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="rectangle-x-y-width-height-member" class="member">
-<div id="rectangle-x-y-width-height-link" class="member-link">
-<a name="rectangle-x-y-width-height" href="#" onClick="return toggleMember('rectangle-x-y-width-height', false);"><tt><b>Rectangle</b>(x, y, width, height)</tt></a>
-</div>
-<div id="rectangle-x-y-width-height-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rectangle-x-y-width-height', false);"><tt><b>Rectangle</b>(x, y, width, height)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rectangle-x-y-width-height', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a rectangle object.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>x:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the left coordinate
-
-</li>
-
-<li>
-<tt>y:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the top coordinate
-
-</li>
-
-<li>
-<tt>width:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>height:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-</ul>
-
-
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="rectangle-point1-point2-member" class="member">
-<div id="rectangle-point1-point2-link" class="member-link">
-<a name="rectangle-point1-point2" href="#" onClick="return toggleMember('rectangle-point1-point2', false);"><tt><b>Rectangle</b>(point1, point2)</tt></a>
-</div>
-<div id="rectangle-point1-point2-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rectangle-point1-point2', false);"><tt><b>Rectangle</b>(point1, point2)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rectangle-point1-point2', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a rectangle object from the passed points. These do not
-necessarily need to be the top left and bottom right corners, the
-constructor figures out how to fit a rectangle between them.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point1:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The first point defining the rectangle
-
-</li>
-
-<li>
-<tt>point2:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The second point defining the rectangle
-
-</li>
-
-</ul>
-
-
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="rectangle-rt-member" class="member">
-<div id="rectangle-rt-link" class="member-link">
-<a name="rectangle-rt" href="#" onClick="return toggleMember('rectangle-rt', false);"><tt><b>Rectangle</b>(rt)</tt></a>
-</div>
-<div id="rectangle-rt-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rectangle-rt', false);"><tt><b>Rectangle</b>(rt)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rectangle-rt', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a new rectangle object from the passed rectangle object.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rt:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-
-
-</li>
-
-</ul>
-
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-<!-- ============================== properties ========================= -->
-	<div class="reference-members"><h2>Operators</h2>
-		
-			<div id="equals-member" class="member">
-<div id="equals-link" class="member-link">
-<a name="equals" href="#" onClick="return toggleMember('equals', false);"><tt><tt><b>==</b> Rectangle</tt></tt></a>
-</div>
-<div id="equals-description" class="member-description hidden">
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('equals', false);"><tt><b>==</b> Rectangle</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Checks whether the coordinates and size of the rectangle are equal to
-that of the supplied rectangle.</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the rectangles are equal, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-		
-		
-	</div>
-
-
-</div>
-</div>
-
-		
-	</div>
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="x-member" class="member">
-<div id="x-link" class="member-link">
-<a name="x" href="#" onClick="return toggleMember('x', false);"><tt><b>x</b></tt></a>
-</div>
-<div id="x-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('x', false);"><tt><b>x</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('x', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The x position of the rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="y-member" class="member">
-<div id="y-link" class="member-link">
-<a name="y" href="#" onClick="return toggleMember('y', false);"><tt><b>y</b></tt></a>
-</div>
-<div id="y-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('y', false);"><tt><b>y</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('y', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The y position of the rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="width-member" class="member">
-<div id="width-link" class="member-link">
-<a name="width" href="#" onClick="return toggleMember('width', false);"><tt><b>width</b></tt></a>
-</div>
-<div id="width-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('width', false);"><tt><b>width</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('width', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The width of the rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="height-member" class="member">
-<div id="height-link" class="member-link">
-<a name="height" href="#" onClick="return toggleMember('height', false);"><tt><b>height</b></tt></a>
-</div>
-<div id="height-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('height', false);"><tt><b>height</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('height', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The height of the rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="point-member" class="member">
-<div id="point-link" class="member-link">
-<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
-</div>
-<div id="point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The top-left point of the rectangle</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="size-member" class="member">
-<div id="size-link" class="member-link">
-<a name="size" href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
-</div>
-<div id="size-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('size', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The size of the rectangle</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Size.html"><tt>Size</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Side Positions</h3>
-
-<div id="left-member" class="member">
-<div id="left-link" class="member-link">
-<a name="left" href="#" onClick="return toggleMember('left', false);"><tt><b>left</b></tt></a>
-</div>
-<div id="left-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('left', false);"><tt><b>left</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('left', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The position of the left hand side of the rectangle. Note that this
-doesn't move the whole rectangle; the right hand side stays where it was.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="top-member" class="member">
-<div id="top-link" class="member-link">
-<a name="top" href="#" onClick="return toggleMember('top', false);"><tt><b>top</b></tt></a>
-</div>
-<div id="top-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('top', false);"><tt><b>top</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('top', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The top coordinate of the rectangle. Note that this doesn't move the
-whole rectangle: the bottom won't move.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="right-member" class="member">
-<div id="right-link" class="member-link">
-<a name="right" href="#" onClick="return toggleMember('right', false);"><tt><b>right</b></tt></a>
-</div>
-<div id="right-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('right', false);"><tt><b>right</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('right', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The position of the right hand side of the rectangle. Note that this
-doesn't move the whole rectangle; the left hand side stays where it was.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="bottom-member" class="member">
-<div id="bottom-link" class="member-link">
-<a name="bottom" href="#" onClick="return toggleMember('bottom', false);"><tt><b>bottom</b></tt></a>
-</div>
-<div id="bottom-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('bottom', false);"><tt><b>bottom</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bottom', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bottom coordinate of the rectangle. Note that this doesn't move the
-whole rectangle: the top won't move.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Corner and Center Point Positions</h3>
-
-<div id="center-member" class="member">
-<div id="center-link" class="member-link">
-<a name="center" href="#" onClick="return toggleMember('center', false);"><tt><b>center</b></tt></a>
-</div>
-<div id="center-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('center', false);"><tt><b>center</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('center', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The center point of the rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="topleft-member" class="member">
-<div id="topleft-link" class="member-link">
-<a name="topleft" href="#" onClick="return toggleMember('topleft', false);"><tt><b>topLeft</b></tt></a>
-</div>
-<div id="topleft-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('topleft', false);"><tt><b>topLeft</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('topleft', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The top-left point of the rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="topright-member" class="member">
-<div id="topright-link" class="member-link">
-<a name="topright" href="#" onClick="return toggleMember('topright', false);"><tt><b>topRight</b></tt></a>
-</div>
-<div id="topright-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('topright', false);"><tt><b>topRight</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('topright', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The top-right point of the rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="bottomleft-member" class="member">
-<div id="bottomleft-link" class="member-link">
-<a name="bottomleft" href="#" onClick="return toggleMember('bottomleft', false);"><tt><b>bottomLeft</b></tt></a>
-</div>
-<div id="bottomleft-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('bottomleft', false);"><tt><b>bottomLeft</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bottomleft', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bottom-left point of the rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="bottomright-member" class="member">
-<div id="bottomright-link" class="member-link">
-<a name="bottomright" href="#" onClick="return toggleMember('bottomright', false);"><tt><b>bottomRight</b></tt></a>
-</div>
-<div id="bottomright-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('bottomright', false);"><tt><b>bottomRight</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bottomright', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bottom-right point of the rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="leftcenter-member" class="member">
-<div id="leftcenter-link" class="member-link">
-<a name="leftcenter" href="#" onClick="return toggleMember('leftcenter', false);"><tt><b>leftCenter</b></tt></a>
-</div>
-<div id="leftcenter-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('leftcenter', false);"><tt><b>leftCenter</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('leftcenter', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The left-center point of the rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="topcenter-member" class="member">
-<div id="topcenter-link" class="member-link">
-<a name="topcenter" href="#" onClick="return toggleMember('topcenter', false);"><tt><b>topCenter</b></tt></a>
-</div>
-<div id="topcenter-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('topcenter', false);"><tt><b>topCenter</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('topcenter', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The top-center point of the rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="rightcenter-member" class="member">
-<div id="rightcenter-link" class="member-link">
-<a name="rightcenter" href="#" onClick="return toggleMember('rightcenter', false);"><tt><b>rightCenter</b></tt></a>
-</div>
-<div id="rightcenter-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rightcenter', false);"><tt><b>rightCenter</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rightcenter', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The right-center point of the rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="bottomcenter-member" class="member">
-<div id="bottomcenter-link" class="member-link">
-<a name="bottomcenter" href="#" onClick="return toggleMember('bottomcenter', false);"><tt><b>bottomCenter</b></tt></a>
-</div>
-<div id="bottomcenter-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('bottomcenter', false);"><tt><b>bottomCenter</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bottomcenter', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bottom-center point of the rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="isempty-member" class="member">
-<div id="isempty-link" class="member-link">
-<a name="isempty" href="#" onClick="return toggleMember('isempty', false);"><tt><b>isEmpty</b>()</tt></a>
-</div>
-<div id="isempty-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isempty', false);"><tt><b>isEmpty</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isempty', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the rectangle is empty, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="tostring-member" class="member">
-<div id="tostring-link" class="member-link">
-<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-<div id="tostring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of this rectangle.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<h3>Geometric Tests</h3>
-
-<div id="contains-point-member" class="member">
-<div id="contains-point-link" class="member-link">
-<a name="contains-point" href="#" onClick="return toggleMember('contains-point', false);"><tt><b>contains</b>(point)</tt></a>
-</div>
-<div id="contains-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('contains-point', false);"><tt><b>contains</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('contains-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Tests if the specified point is inside the boundary of the rectangle.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the specified point
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the point is inside the rectangle's boundary, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Checking whether the mouse position falls within the bounding rectangle of an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-// Create a circle shaped path at {x: 80, y: 50}
-// with a radius of 30.
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.fillColor = 'red';
-
-function onMouseMove(event) {
-	// Check whether the mouse position intersects with the
-	// bounding box of the item:
-	if (circle.bounds.contains(event.point)) {
-		// If it intersects, fill it with green:
-		circle.fillColor = 'green';
-	} else {
-		// If it doesn't intersect, fill it with red:
-		circle.fillColor = 'red';
-	}
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="contains-rect-member" class="member">
-<div id="contains-rect-link" class="member-link">
-<a name="contains-rect" href="#" onClick="return toggleMember('contains-rect', false);"><tt><b>contains</b>(rect)</tt></a>
-</div>
-<div id="contains-rect-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('contains-rect', false);"><tt><b>contains</b>(rect)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('contains-rect', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Tests if the interior of the rectangle entirely contains the specified
-rectangle.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rect:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-&mdash;&nbsp;The specified rectangle
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the rectangle entirely contains the specified
-                  rectangle, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Checking whether the bounding box of one item is contained within that of another item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-// All newly created paths will inherit these styles:
-project.currentStyle = {
-	fillColor: 'green',
-	strokeColor: 'black'
-};
-
-// Create a circle shaped path at {x: 80, y: 50}
-// with a radius of 45.
-var largeCircle = new Path.Circle(new Point(80, 50), 45);
-
-// Create a smaller circle shaped path in the same position
-// with a radius of 30.
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-function onMouseMove(event) {
-	// Move the circle to the position of the mouse:
-	circle.position = event.point;
-
-	// Check whether the bounding box of the smaller circle
-	// is contained within the bounding box of the larger item:
-	if (largeCircle.bounds.contains(circle.bounds)) {
-		// If it does, fill it with green:
-		circle.fillColor = 'green';
-		largeCircle.fillColor = 'green';
-	} else {
-		// If doesn't, fill it with red:
-		circle.fillColor = 'red';
-		largeCircle.fillColor = 'red';
-	}
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="intersects-rect-member" class="member">
-<div id="intersects-rect-link" class="member-link">
-<a name="intersects-rect" href="#" onClick="return toggleMember('intersects-rect', false);"><tt><b>intersects</b>(rect)</tt></a>
-</div>
-<div id="intersects-rect-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('intersects-rect', false);"><tt><b>intersects</b>(rect)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('intersects-rect', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Tests if the interior of this rectangle intersects the interior of
-another rectangle.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rect:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-&mdash;&nbsp;the specified rectangle
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the rectangle and the specified rectangle
-                  intersect each other, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Checking whether the bounding box of one item intersects with that of another item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-// All newly created paths will inherit these styles:
-project.currentStyle = {
-	fillColor: 'green',
-	strokeColor: 'black'
-};
-
-// Create a circle shaped path at {x: 80, y: 50}
-// with a radius of 45.
-var largeCircle = new Path.Circle(new Point(80, 50), 45);
-
-// Create a smaller circle shaped path in the same position
-// with a radius of 30.
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-function onMouseMove(event) {
-	// Move the circle to the position of the mouse:
-	circle.position = event.point;
-
-	// Check whether the bounding box of the two circle
-	// shaped paths intersect:
-	if (largeCircle.bounds.intersects(circle.bounds)) {
-		// If it does, fill it with green:
-		circle.fillColor = 'green';
-		largeCircle.fillColor = 'green';
-	} else {
-		// If doesn't, fill it with red:
-		circle.fillColor = 'red';
-		largeCircle.fillColor = 'red';
-	}
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<h3>Boolean Operations</h3>
-
-<div id="intersect-rect-member" class="member">
-<div id="intersect-rect-link" class="member-link">
-<a name="intersect-rect" href="#" onClick="return toggleMember('intersect-rect', false);"><tt><b>intersect</b>(rect)</tt></a>
-</div>
-<div id="intersect-rect-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('intersect-rect', false);"><tt><b>intersect</b>(rect)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('intersect-rect', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a new rectangle representing the intersection of this rectangle
-with the specified rectangle.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rect:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-&mdash;&nbsp;The rectangle to be intersected with this
-                        rectangle
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>&nbsp;&mdash;&nbsp;The largest rectangle contained in both the specified
-                    rectangle and in this rectangle.
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Intersecting two rectangles and visualizing the result using rectangle shaped paths:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-// Create two rectangles that overlap each other
-var size = new Size(50, 50);
-var rectangle1 = new Rectangle(new Point(25, 15), size);
-var rectangle2 = new Rectangle(new Point(50, 40), size);
-
-// The rectangle that represents the intersection of the
-// two rectangles:
-var intersected = rectangle1.intersect(rectangle2);
-
-// To visualize the intersecting of the rectangles, we will
-// create rectangle shaped paths using the Path.Rectangle
-// constructor.
-
-// Have all newly created paths inherit a black stroke:
-project.currentStyle.strokeColor = 'black';
-
-// Create two rectangle shaped paths using the abstract rectangles
-// we created before:
-new Path.Rectangle(rectangle1);
-new Path.Rectangle(rectangle2);
-
-// Create a path that represents the intersected rectangle,
-// and fill it with red:
-var intersectionPath = new Path.Rectangle(intersected);
-intersectionPath.fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-		
-			
-<div id="unite-rect-member" class="member">
-<div id="unite-rect-link" class="member-link">
-<a name="unite-rect" href="#" onClick="return toggleMember('unite-rect', false);"><tt><b>unite</b>(rect)</tt></a>
-</div>
-<div id="unite-rect-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('unite-rect', false);"><tt><b>unite</b>(rect)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('unite-rect', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a new rectangle representing the union of this rectangle with the
-specified rectangle.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rect:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-&mdash;&nbsp;the rectangle to be combined with this rectangle
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>&nbsp;&mdash;&nbsp;the smallest rectangle containing both the specified
-                    rectangle and this rectangle.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="include-point-member" class="member">
-<div id="include-point-link" class="member-link">
-<a name="include-point" href="#" onClick="return toggleMember('include-point', false);"><tt><b>include</b>(point)</tt></a>
-</div>
-<div id="include-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('include-point', false);"><tt><b>include</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('include-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds a point to this rectangle. The resulting rectangle is the
-smallest rectangle that contains both the original rectangle and the
-specified point.</p>
-<p>After adding a point, a call to <a href="../classes/Rectangle.html#contains-point" onclick="return toggleMember('contains-point', true);"><tt>contains(point)</tt></a> with the added
-point as an argument does not necessarily return <tt>true</tt>.</p>
-<p>The <a href="../classes/Rectangle.html#contains-point"><tt>rectangle.contains(point)</tt></a> method does not return <tt>true</tt>
-for points on the right or bottom edges of a rectangle. Therefore, if the
-added point falls on the left or bottom edge of the enlarged rectangle,
-<a href="../classes/Rectangle.html#contains-point"><tt>rectangle.contains(point)</tt></a> returns <tt>false</tt> for that point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/RgbColor.html b/dist/docs/classes/RgbColor.html
deleted file mode 100644
index a2fcd2cd..00000000
--- a/dist/docs/classes/RgbColor.html
+++ /dev/null
@@ -1,765 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>RgbColor</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>RgbColor</h1>
-
-<p> Extends <b><a href="../classes/Color.html"><tt>Color</tt></a></b></p>
-
-<p>An RgbColor object is used to represent any RGB color value.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="rgbcolor-red-green-blue-member" class="member">
-<div id="rgbcolor-red-green-blue-link" class="member-link">
-<a name="rgbcolor-red-green-blue" href="#" onClick="return toggleMember('rgbcolor-red-green-blue', false);"><tt><b>RgbColor</b>(red, green, blue[, alpha])</tt></a>
-</div>
-<div id="rgbcolor-red-green-blue-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rgbcolor-red-green-blue', false);"><tt><b>RgbColor</b>(red, green, blue[, alpha])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rgbcolor-red-green-blue', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates an RgbColor object</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>red:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the amount of red in the color as a value
-between <tt>0</tt> and <tt>1</tt>
-
-</li>
-
-<li>
-<tt>green:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the amount of green in the color as a value
-between <tt>0</tt> and <tt>1</tt>
-
-</li>
-
-<li>
-<tt>blue:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the amount of blue in the color as a value
-between <tt>0</tt> and <tt>1</tt>
-
-</li>
-
-<li>
-<tt>alpha:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the alpha of the color as a value between
-<tt>0</tt> and <tt>1</tt>
-&mdash;&nbsp;optional
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> &mdash; Creating an RgbColor:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-// Create a circle shaped path at {x: 80, y: 50}
-// with a radius of 30:
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// 100% red, 0% blue, 50% blue:
-circle.fillColor = new RgbColor(1, 0, 0.5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="red-member" class="member">
-<div id="red-link" class="member-link">
-<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
-</div>
-<div id="red-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of red in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the amount of red in a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.fillColor = 'blue';
-
-// Blue + red = purple:
-circle.fillColor.red = 1;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="green-member" class="member">
-<div id="green-link" class="member-link">
-<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
-</div>
-<div id="green-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of green in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the amount of green in a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// First we set the fill color to red:
-circle.fillColor = 'red';
-
-// Red + green = yellow:
-circle.fillColor.green = 1;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="blue-member" class="member">
-<div id="blue-link" class="member-link">
-<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
-</div>
-<div id="blue-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of blue in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the amount of blue in a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// First we set the fill color to red:
-circle.fillColor = 'red';
-
-// Red + blue = purple:
-circle.fillColor.blue = 1;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
-
-	
-<div id="type-member" class="member">
-<div id="type-link" class="member-link">
-<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
-</div>
-<div id="type-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Returns the type of the color as a string.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('rgb', 'hsb', 'gray')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var color = new RgbColor(1, 0, 0);
-console.log(color.type); // 'rgb'</pre>
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="alpha-member" class="member">
-<div id="alpha-link" class="member-link">
-<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
-</div>
-<div id="alpha-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
-colors of the different subclasses support alpha values.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A filled path with a half transparent stroke:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-var circle = new Path.Circle(new Point(80, 50), 30);
-
-// Fill the circle with red and give it a 20pt green stroke:
-circle.style = {
-	fillColor: 'red',
-	strokeColor: 'green',
-	strokeWidth: 20
-};
-
-// Make the stroke half transparent:
-circle.strokeColor.alpha = 0.5;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Gray Components</h3>
-
-<div id="gray-member" class="member">
-<div id="gray-link" class="member-link">
-<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
-</div>
-<div id="gray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The amount of gray in the color as a value between <tt>0</tt> and
-<tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>HSB Components</h3>
-
-<div id="hue-member" class="member">
-<div id="hue-link" class="member-link">
-<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
-</div>
-<div id="hue-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The hue of the color as a value in degrees between <tt>0</tt> and
-<tt>360</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the hue of a color:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-5">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.fillColor = 'red';
-circle.fillColor.hue += 30;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Hue cycling:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-6">
-// Create a rectangle shaped path, using the dimensions
-// of the view:
-var path = new Path.Rectangle(view.bounds);
-path.fillColor = 'red';
-
-function onFrame(event) {
-	path.fillColor.hue += 0.5;
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="saturation-member" class="member">
-<div id="saturation-link" class="member-link">
-<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
-</div>
-<div id="saturation-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="brightness-member" class="member">
-<div id="brightness-link" class="member-link">
-<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
-</div>
-<div id="brightness-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>HSL Components</h3>
-
-<div id="lightness-member" class="member">
-<div id="lightness-link" class="member-link">
-<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
-</div>
-<div id="lightness-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-<!-- =========================== inherited methods ========================= -->
-<div class="reference-members"><h2>Methods inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
-
-	
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the color object
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="hasalpha-member" class="member">
-<div id="hasalpha-link" class="member-link">
-<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
-</div>
-<div id="hasalpha-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the color has an alpha value.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="equals-color-member" class="member">
-<div id="equals-color-link" class="member-link">
-<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
-</div>
-<div id="equals-color-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the component color values of the color are the
-same as those of the supplied one.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>color:</tt> 
-<a href="../classes/Color.html"><tt>Color</tt></a>
-&mdash;&nbsp;the color to compare with
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>String Representations</h3>
-
-<div id="tostring-member" class="member">
-<div id="tostring-link" class="member-link">
-<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-<div id="tostring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the color.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="tocssstring-member" class="member">
-<div id="tocssstring-link" class="member-link">
-<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
-</div>
-<div id="tocssstring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A css string representation of the color.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-</div>
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Segment.html b/dist/docs/classes/Segment.html
deleted file mode 100644
index 6075d937..00000000
--- a/dist/docs/classes/Segment.html
+++ /dev/null
@@ -1,544 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Segment</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Segment</h1>
-
-<p>The Segment object represents the points of a path through which its
-<a href="../classes/Curve.html"><tt>Curve</tt></a> objects pass. The segments of a path can be accessed through
-its <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array.</p>
-<p>Each segment consists of an anchor point (<a href="../classes/Segment.html#point"><tt>segment.point</tt></a>) and
-optionaly an incoming and an outgoing handle (<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> and
-<a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>), describing the tangents of the two <a href="../classes/Curve.html"><tt>Curve</tt></a>
-objects that are connected by this segment.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="segment-arg3-arg4-arg5-member" class="member">
-<div id="segment-arg3-arg4-arg5-link" class="member-link">
-<a name="segment-arg3-arg4-arg5" href="#" onClick="return toggleMember('segment-arg3-arg4-arg5', false);"><tt><b>Segment</b>([point[, handleIn[, handleOut, arg3, arg4, arg5]]])</tt></a>
-</div>
-<div id="segment-arg3-arg4-arg5-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('segment-arg3-arg4-arg5', false);"><tt><b>Segment</b>([point[, handleIn[, handleOut, arg3, arg4, arg5]]])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment-arg3-arg4-arg5', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a new Segment object.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the anchor point of the segment
-&mdash;&nbsp;optional, default: <tt>{x: 0, y: 0}</tt>
-</li>
-
-<li>
-<tt>handleIn:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the handle point relative to the
-       anchor point of the segment that describes the in tangent of the
-       segment.
-&mdash;&nbsp;optional, default: <tt>{x: 0, y: 0}</tt>
-</li>
-
-<li>
-<tt>handleOut:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the handle point relative to the
-       anchor point of the segment that describes the out tangent of the
-       segment.
-&mdash;&nbsp;optional, default: <tt>{x: 0, y: 0}</tt>
-</li>
-
-<li>
-<tt>arg3:</tt> 
-
-
-
-</li>
-
-<li>
-<tt>arg4:</tt> 
-
-
-
-</li>
-
-<li>
-<tt>arg5:</tt> 
-
-
-
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-var handleIn = new Point(-80, -100);
-var handleOut = new Point(80, 100);
-
-var firstPoint = new Point(100, 50);
-var firstSegment = new Segment(firstPoint, null, handleOut);
-
-var secondPoint = new Point(300, 50);
-var secondSegment = new Segment(secondPoint, handleIn, null);
-
-var path = new Path(firstSegment, secondSegment);
-path.strokeColor = 'black';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="point-member" class="member">
-<div id="point-link" class="member-link">
-<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
-</div>
-<div id="point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The anchor point of the segment.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="handlein-member" class="member">
-<div id="handlein-link" class="member-link">
-<a name="handlein" href="#" onClick="return toggleMember('handlein', false);"><tt><b>handleIn</b></tt></a>
-</div>
-<div id="handlein-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('handlein', false);"><tt><b>handleIn</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlein', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The handle point relative to the anchor point of the segment that
-describes the in tangent of the segment.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="handleout-member" class="member">
-<div id="handleout-link" class="member-link">
-<a name="handleout" href="#" onClick="return toggleMember('handleout', false);"><tt><b>handleOut</b></tt></a>
-</div>
-<div id="handleout-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('handleout', false);"><tt><b>handleOut</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handleout', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The handle point relative to the anchor point of the segment that
-describes the out tangent of the segment.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="selected-member" class="member">
-<div id="selected-link" class="member-link">
-<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-<div id="selected-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the <a href="../classes/Segment.html#point" onclick="return toggleMember('point', true);"><tt>point</tt></a> of the segment is selected.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Hierarchy</h3>
-
-<div id="index-member" class="member">
-<div id="index-link" class="member-link">
-<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-<div id="index-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The index of the segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the
-segment belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="path-member" class="member">
-<div id="path-link" class="member-link">
-<a name="path" href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
-</div>
-<div id="path-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The path that the segment belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Path.html"><tt>Path</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="curve-member" class="member">
-<div id="curve-link" class="member-link">
-<a name="curve" href="#" onClick="return toggleMember('curve', false);"><tt><b>curve</b></tt></a>
-</div>
-<div id="curve-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('curve', false);"><tt><b>curve</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curve', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The curve that the segment belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Curve.html"><tt>Curve</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Sibling Segments</h3>
-
-<div id="next-member" class="member">
-<div id="next-link" class="member-link">
-<a name="next" href="#" onClick="return toggleMember('next', false);"><tt><b>next</b></tt></a>
-</div>
-<div id="next-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('next', false);"><tt><b>next</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('next', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The next segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the segment
-belongs to. If the segments belongs to a closed path, the first segment
-is returned for the last segment of the path.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Segment.html"><tt>Segment</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="previous-member" class="member">
-<div id="previous-link" class="member-link">
-<a name="previous" href="#" onClick="return toggleMember('previous', false);"><tt><b>previous</b></tt></a>
-</div>
-<div id="previous-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('previous', false);"><tt><b>previous</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previous', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The previous segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the
-segment belongs to. If the segments belongs to a closed path, the last
-segment is returned for the first segment of the path.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Segment.html"><tt>Segment</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="reverse-member" class="member">
-<div id="reverse-link" class="member-link">
-<a name="reverse" href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
-</div>
-<div id="reverse-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reverse', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns the reversed the segment, without modifying the segment itself.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>&nbsp;&mdash;&nbsp;the reversed segment
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="remove-member" class="member">
-<div id="remove-link" class="member-link">
-<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-<div id="remove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the segment from the path that it belongs to.</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="tostring-member" class="member">
-<div id="tostring-link" class="member-link">
-<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-<div id="tostring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the segment.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Size.html b/dist/docs/classes/Size.html
deleted file mode 100644
index 30c692d1..00000000
--- a/dist/docs/classes/Size.html
+++ /dev/null
@@ -1,1247 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Size</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Size</h1>
-
-<p>The Size object is used to describe the size of something, through
-its <a href="../classes/Size.html#width" onclick="return toggleMember('width', true);"><tt>width</tt></a> and <a href="../classes/Size.html#height" onclick="return toggleMember('height', true);"><tt>height</tt></a> properties.</p>
-<p>
-<b>Example</b> &mdash; Create a size that is 10pt wide and 5pt high
-</p>
-
-
-<pre class="code">var size = new Size(10, 5);
-console.log(size.width); // 10
-console.log(size.height); // 5</pre>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="size-width-height-array-member" class="member">
-<div id="size-width-height-array-link" class="member-link">
-<a name="size-width-height-array" href="#" onClick="return toggleMember('size-width-height-array', false);"><tt><b>Size</b>(width, height, array)</tt></a>
-</div>
-<div id="size-width-height-array-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('size-width-height-array', false);"><tt><b>Size</b>(width, height, array)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('size-width-height-array', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a Size object with the given width and height values.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>width:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the width
-
-</li>
-
-<li>
-<tt>height:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the height
-
-</li>
-
-<li>
-<tt>array:</tt> 
-<tt>array</tt>
-
-
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> &mdash; Create a size that is 10pt wide and 5pt high
-</p>
-
-
-<pre class="code">var size = new Size(10, 5);
-console.log(size.width); // 10
-console.log(size.height); // 5
-
-	/**
-Creates a Size object using the numbers in the given array as
-dimensions.</pre>
-
-<p>
-<b>Example</b> &mdash; Creating a size of width: 320, height: 240 using an array of numbers:
-</p>
-
-
-<pre class="code">var array = [320, 240];
-var size = new Size(array);
-console.log(size.width); // 320
-console.log(size.height); // 240</pre>
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="size-object-member" class="member">
-<div id="size-object-link" class="member-link">
-<a name="size-object" href="#" onClick="return toggleMember('size-object', false);"><tt><b>Size</b>(object)</tt></a>
-</div>
-<div id="size-object-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('size-object', false);"><tt><b>Size</b>(object)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('size-object', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a Size object using the properties in the given object.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>object:</tt> 
-<tt>object</tt>
-
-
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> &mdash; Creating a size of width: 10, height: 20 using an object literal:
-</p>
-
-
-<pre class="code">var size = new Size({
-	width: 10,
-	height: 20
-});
-console.log(size.width); // 10
-console.log(size.height); // 20</pre>
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="size-size-member" class="member">
-<div id="size-size-link" class="member-link">
-<a name="size-size" href="#" onClick="return toggleMember('size-size', false);"><tt><b>Size</b>(size)</tt></a>
-</div>
-<div id="size-size-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('size-size', false);"><tt><b>Size</b>(size)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('size-size', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a Size object using the coordinates of the given Size object.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>size:</tt> 
-<a href="../classes/Size.html"><tt>Size</tt></a>
-
-
-</li>
-
-</ul>
-
-
-
-
-</div>
-</div>
-</div>
-	
-		
-<div id="size-point-member" class="member">
-<div id="size-point-link" class="member-link">
-<a name="size-point" href="#" onClick="return toggleMember('size-point', false);"><tt><b>Size</b>(point)</tt></a>
-</div>
-<div id="size-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('size-point', false);"><tt><b>Size</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('size-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a Size object using the <a href="../classes/Point.html#x"><tt>point.x</tt></a> and <a href="../classes/Point.html#y"><tt>point.y</tt></a>
-values of the given Point object.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var point = new Point(50, 50);
-var size = new Size(point);
-console.log(size.width); // 50
-console.log(size.height); // 50</pre>
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-<!-- ============================== properties ========================= -->
-	<div class="reference-members"><h2>Operators</h2>
-		
-			<div id="add-member" class="member">
-<div id="add-link" class="member-link">
-<a name="add" href="#" onClick="return toggleMember('add', false);"><tt><tt><b>+</b> Number</tt>, <tt><b>+</b> Size</tt></tt></a>
-</div>
-<div id="add-description" class="member-description hidden">
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('add', false);"><tt><b>+</b> Number</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('add', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Returns the addition of the supplied value to the width and height of the
-size as a new size. The object itself is not modified!</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the addition of the size and the value as a new size
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var size = new Size(5, 10);
-var result = size + 20;
-console.log(result); // {width: 25, height: 30}</pre>
-
-	</div>
-
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('add', false);"><tt><b>+</b> Size</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('add', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Returns the addition of the width and height of the supplied size to the
-size as a new size. The object itself is not modified!</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the addition of the two sizes as a new size
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var size1 = new Size(5, 10);
-var size2 = new Size(10, 20);
-var result = size1 + size2;
-console.log(result); // {width: 15, height: 30}</pre>
-
-	</div>
-
-
-</div>
-</div>
-
-		
-			<div id="subtract-member" class="member">
-<div id="subtract-link" class="member-link">
-<a name="subtract" href="#" onClick="return toggleMember('subtract', false);"><tt><tt><b>-</b> Number</tt>, <tt><b>-</b> Size</tt></tt></a>
-</div>
-<div id="subtract-description" class="member-description hidden">
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('subtract', false);"><tt><b>-</b> Number</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('subtract', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Returns the subtraction of the supplied value from the width and height
-of the size as a new size. The object itself is not modified!</p>
-<p>The object itself is not modified!</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the subtraction of the size and the value as a new size
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var size = new Size(10, 20);
-var result = size - 5;
-console.log(result); // {width: 5, height: 15}</pre>
-
-	</div>
-
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('subtract', false);"><tt><b>-</b> Size</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('subtract', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Returns the subtraction of the width and height of the supplied size from
-the size as a new size. The object itself is not modified!</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the subtraction of the two sizes as a new size
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var firstSize = new Size(10, 20);
-var secondSize = new Size(5, 5);
-var result = firstSize - secondSize;
-console.log(result); // {width: 5, height: 15}</pre>
-
-	</div>
-
-
-</div>
-</div>
-
-		
-			<div id="multiply-member" class="member">
-<div id="multiply-link" class="member-link">
-<a name="multiply" href="#" onClick="return toggleMember('multiply', false);"><tt><tt><b>*</b> Number</tt>, <tt><b>*</b> Size</tt></tt></a>
-</div>
-<div id="multiply-description" class="member-description hidden">
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('multiply', false);"><tt><b>*</b> Number</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('multiply', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Returns the multiplication of the supplied value with the width and
-height of the size as a new size. The object itself is not modified!</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the multiplication of the size and the value as a new size
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var size = new Size(10, 20);
-var result = size * 2;
-console.log(result); // {width: 20, height: 40}</pre>
-
-	</div>
-
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('multiply', false);"><tt><b>*</b> Size</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('multiply', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Returns the multiplication of the width and height of the supplied size
-with the size as a new size. The object itself is not modified!</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the multiplication of the two sizes as a new size
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var firstSize = new Size(5, 10);
-var secondSize = new Size(4, 2);
-var result = firstSize * secondSize;
-console.log(result); // {width: 20, height: 20}</pre>
-
-	</div>
-
-
-</div>
-</div>
-
-		
-			<div id="divide-member" class="member">
-<div id="divide-link" class="member-link">
-<a name="divide" href="#" onClick="return toggleMember('divide', false);"><tt><tt><b>/</b> Number</tt>, <tt><b>/</b> Size</tt></tt></a>
-</div>
-<div id="divide-description" class="member-description hidden">
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('divide', false);"><tt><b>/</b> Number</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('divide', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Returns the division of the supplied value by the width and height of the
-size as a new size. The object itself is not modified!</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the division of the size and the value as a new size
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var size = new Size(10, 20);
-var result = size / 2;
-console.log(result); // {width: 5, height: 10}</pre>
-
-	</div>
-
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('divide', false);"><tt><b>/</b> Size</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('divide', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Returns the division of the width and height of the supplied size by the
-size as a new size. The object itself is not modified!</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the division of the two sizes as a new size
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var firstSize = new Size(8, 10);
-var secondSize = new Size(2, 5);
-var result = firstSize / secondSize;
-console.log(result); // {width: 4, height: 2}</pre>
-
-	</div>
-
-
-</div>
-</div>
-
-		
-			<div id="modulo-member" class="member">
-<div id="modulo-link" class="member-link">
-<a name="modulo" href="#" onClick="return toggleMember('modulo', false);"><tt><tt><b>%</b> Number</tt>, <tt><b>%</b> Size</tt></tt></a>
-</div>
-<div id="modulo-description" class="member-description hidden">
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('modulo', false);"><tt><b>%</b> Number</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modulo', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>The modulo operator returns the integer remainders of dividing the size
-by the supplied value as a new size.</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the integer remainders of dividing the size by the value
-                as a new size
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var size = new Size(12, 6);
-console.log(size % 5); // {width: 2, height: 1}</pre>
-
-	</div>
-
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('modulo', false);"><tt><b>%</b> Size</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modulo', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>The modulo operator returns the integer remainders of dividing the size
-by the supplied size as a new size.</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the integer remainders of dividing the sizes by each
-                other as a new size
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var size = new Size(12, 6);
-console.log(size % new Size(5, 2)); // {width: 2, height: 0}</pre>
-
-	</div>
-
-
-</div>
-</div>
-
-		
-			<div id="equals-member" class="member">
-<div id="equals-link" class="member-link">
-<a name="equals" href="#" onClick="return toggleMember('equals', false);"><tt><tt><b>==</b> Size</tt></tt></a>
-</div>
-<div id="equals-description" class="member-description hidden">
-
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('equals', false);"><tt><b>==</b> Size</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals', false);"></div>
-<div class="clear"></div>
-</div>
-
-	<div class="member-text">
-		<p>Checks whether the width and height of the size are equal to those of the
-supplied size.</p>
-		
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>
-</li>
-	
-	</ul>
-
-		
-		<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var size = new Size(5, 10);
-console.log(size == new Size(5, 10)); // true
-console.log(size == new Size(1, 1)); // false
-console.log(size != new Size(1, 1)); // true</pre>
-
-	</div>
-
-
-</div>
-</div>
-
-		
-	</div>
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="width-member" class="member">
-<div id="width-link" class="member-link">
-<a name="width" href="#" onClick="return toggleMember('width', false);"><tt><b>width</b></tt></a>
-</div>
-<div id="width-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('width', false);"><tt><b>width</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('width', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The width of the size</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="height-member" class="member">
-<div id="height-link" class="member-link">
-<a name="height" href="#" onClick="return toggleMember('height', false);"><tt><b>height</b></tt></a>
-</div>
-<div id="height-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('height', false);"><tt><b>height</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('height', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The height of the size</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="tostring-member" class="member">
-<div id="tostring-link" class="member-link">
-<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-<div id="tostring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the size.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a copy of the size.</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<h3>Tests</h3>
-
-<div id="iszero-member" class="member">
-<div id="iszero-link" class="member-link">
-<a name="iszero" href="#" onClick="return toggleMember('iszero', false);"><tt><b>isZero</b>()</tt></a>
-</div>
-<div id="iszero-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('iszero', false);"><tt><b>isZero</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('iszero', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if this size has both the width and height set to 0.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> both width and height are 0, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="isnan-member" class="member">
-<div id="isnan-link" class="member-link">
-<a name="isnan" href="#" onClick="return toggleMember('isnan', false);"><tt><b>isNaN</b>()</tt></a>
-</div>
-<div id="isnan-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isnan', false);"><tt><b>isNaN</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isnan', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the width or the height of the size are NaN.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the width or height of the size are NaN, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<h3>Math Functions</h3>
-
-<div id="round-member" class="member">
-<div id="round-link" class="member-link">
-<a name="round" href="#" onClick="return toggleMember('round', false);"><tt><b>round</b>()</tt></a>
-</div>
-<div id="round-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('round', false);"><tt><b>round</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('round', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a new size with rounded <a href="../classes/Size.html#width" onclick="return toggleMember('width', true);"><tt>width</tt></a> and <a href="../classes/Size.html#height" onclick="return toggleMember('height', true);"><tt>height</tt></a> values.</p>
-<p>The object itself is not modified!</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var size = new Size(10.2, 10.9);
-var roundSize = size.round();
-console.log(roundSize); // {x: 10, y: 11}</pre>
-
-</div>
-</div>
-</div>
-		
-			
-<div id="ceil-member" class="member">
-<div id="ceil-link" class="member-link">
-<a name="ceil" href="#" onClick="return toggleMember('ceil', false);"><tt><b>ceil</b>()</tt></a>
-</div>
-<div id="ceil-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('ceil', false);"><tt><b>ceil</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ceil', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a new size with the nearest greater non-fractional values to the
-specified <a href="../classes/Size.html#width" onclick="return toggleMember('width', true);"><tt>width</tt></a> and <a href="../classes/Size.html#height" onclick="return toggleMember('height', true);"><tt>height</tt></a> values. The object itself is not
-modified!</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var size = new Size(10.2, 10.9);
-var ceilSize = size.ceil();
-console.log(ceilSize); // {x: 11, y: 11}</pre>
-
-</div>
-</div>
-</div>
-		
-			
-<div id="floor-member" class="member">
-<div id="floor-link" class="member-link">
-<a name="floor" href="#" onClick="return toggleMember('floor', false);"><tt><b>floor</b>()</tt></a>
-</div>
-<div id="floor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('floor', false);"><tt><b>floor</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('floor', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a new size with the nearest smaller non-fractional values to the
-specified <a href="../classes/Size.html#width" onclick="return toggleMember('width', true);"><tt>width</tt></a> and <a href="../classes/Size.html#height" onclick="return toggleMember('height', true);"><tt>height</tt></a> values. The object itself is not
-modified!</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var size = new Size(10.2, 10.9);
-var floorSize = size.floor();
-console.log(floorSize); // {x: 10, y: 10}</pre>
-
-</div>
-</div>
-</div>
-		
-			
-<div id="abs-member" class="member">
-<div id="abs-link" class="member-link">
-<a name="abs" href="#" onClick="return toggleMember('abs', false);"><tt><b>abs</b>()</tt></a>
-</div>
-<div id="abs-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('abs', false);"><tt><b>abs</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('abs', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a new size with the absolute values of the specified <a href="../classes/Size.html#width" onclick="return toggleMember('width', true);"><tt>width</tt></a>
-and <a href="../classes/Size.html#height" onclick="return toggleMember('height', true);"><tt>height</tt></a> values. The object itself is not modified!</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var size = new Size(-5, 10);
-var absSize = size.abs();
-console.log(absSize); // {x: 5, y: 10}</pre>
-
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-	<div class="reference-members"><h2>Static Methods</h2>
-		
-			
-<div id="min-size1-size2-member" class="member">
-<div id="min-size1-size2-link" class="member-link">
-<a name="min-size1-size2" href="#" onClick="return toggleMember('min-size1-size2', false);"><tt><b>Size.min</b>(size1, size2)</tt></a>
-</div>
-<div id="min-size1-size2-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('min-size1-size2', false);"><tt><b>Size.min</b>(size1, size2)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('min-size1-size2', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a new size object with the smallest <a href="../classes/Size.html#width" onclick="return toggleMember('width', true);"><tt>width</tt></a> and
-<a href="../classes/Size.html#height" onclick="return toggleMember('height', true);"><tt>height</tt></a> of the supplied sizes.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>size1:</tt> 
-<a href="../classes/Size.html"><tt>Size</tt></a>
-
-
-</li>
-
-<li>
-<tt>size2:</tt> 
-<a href="../classes/Size.html"><tt>Size</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;The newly created size object
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var size1 = new Size(10, 100);
-var size2 = new Size(200, 5);
-var minSize = Size.min(size1, size2);
-console.log(minSize); // {width: 10, height: 5}</pre>
-
-</div>
-</div>
-</div>
-		
-			
-<div id="max-size1-size2-member" class="member">
-<div id="max-size1-size2-link" class="member-link">
-<a name="max-size1-size2" href="#" onClick="return toggleMember('max-size1-size2', false);"><tt><b>Size.max</b>(size1, size2)</tt></a>
-</div>
-<div id="max-size1-size2-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('max-size1-size2', false);"><tt><b>Size.max</b>(size1, size2)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('max-size1-size2', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a new size object with the largest <a href="../classes/Size.html#width" onclick="return toggleMember('width', true);"><tt>width</tt></a> and
-<a href="../classes/Size.html#height" onclick="return toggleMember('height', true);"><tt>height</tt></a> of the supplied sizes.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>size1:</tt> 
-<a href="../classes/Size.html"><tt>Size</tt></a>
-
-
-</li>
-
-<li>
-<tt>size2:</tt> 
-<a href="../classes/Size.html"><tt>Size</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;The newly created size object
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var size1 = new Size(10, 100);
-var size2 = new Size(200, 5);
-var maxSize = Size.max(size1, size2);
-console.log(maxSize); // {width: 200, height: 100}</pre>
-
-</div>
-</div>
-</div>
-		
-			
-<div id="random-member" class="member">
-<div id="random-link" class="member-link">
-<a name="random" href="#" onClick="return toggleMember('random', false);"><tt><b>Size.random</b>()</tt></a>
-</div>
-<div id="random-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('random', false);"><tt><b>Size.random</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('random', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a size object with random <a href="../classes/Size.html#width" onclick="return toggleMember('width', true);"><tt>width</tt></a> and <a href="../classes/Size.html#height" onclick="return toggleMember('height', true);"><tt>height</tt></a>
-values between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;The newly created size object
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var maxSize = new Size(100, 100);
-var randomSize = Size.random();
-var size = maxSize * randomSize;</pre>
-
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Symbol.html b/dist/docs/classes/Symbol.html
deleted file mode 100644
index 1da24cec..00000000
--- a/dist/docs/classes/Symbol.html
+++ /dev/null
@@ -1,271 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Symbol</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Symbol</h1>
-
-<p>Symbols allow you to place multiple instances of an item in your
-project. This can save memory, since all instances of a symbol simply refer
-to the original item and it can speed up moving around complex objects, since
-internal properties such as segment lists and gradient positions don't need
-to be updated with every transformation.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="symbol-item-member" class="member">
-<div id="symbol-item-link" class="member-link">
-<a name="symbol-item" href="#" onClick="return toggleMember('symbol-item', false);"><tt><b>Symbol</b>(item)</tt></a>
-</div>
-<div id="symbol-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('symbol-item', false);"><tt><b>Symbol</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('symbol-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a Symbol item.</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the source item which is copied as the definition of
-              the symbol
-
-</li>
-
-</ul>
-
-
-<p>
-<b>Example</b> &mdash; Placing 100 instances of a symbol:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-var path = new Path.Star(new Point(0, 0), 6, 5, 13);
-path.style = {
-    fillColor: 'white',
-    strokeColor: 'black'
-};
-
-// Create a symbol from the path:
-var symbol = new Symbol(path);
-
-// Remove the path:
-path.remove();
-
-// Place 100 instances of the symbol:
-for (var i = 0; i < 100; i++) {
-    // Place an instance of the symbol in the project:
-    var instance = symbol.place();
-
-    // Move the instance to a random position within the view:
-    instance.position = Point.random() * view.size;
-
-    // Rotate the instance by a random amount between
-    // 0 and 360 degrees:
-    instance.rotate(Math.random() * 360);
-
-    // Scale the instance between 0.25 and 1:
-    instance.scale(0.25 + Math.random() * 0.75);
-}
-</script>
-<div class="canvas"><canvas width="516" height="240" id="canvas-0"></canvas></div>
-</div>
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="project-member" class="member">
-<div id="project-link" class="member-link">
-<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-<div id="project-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The project that this symbol belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Project.html"><tt>Project</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="definition-member" class="member">
-<div id="definition-link" class="member-link">
-<a name="definition" href="#" onClick="return toggleMember('definition', false);"><tt><b>definition</b></tt></a>
-</div>
-<div id="definition-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('definition', false);"><tt><b>definition</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('definition', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The symbol definition.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="place-member" class="member">
-<div id="place-link" class="member-link">
-<a name="place" href="#" onClick="return toggleMember('place', false);"><tt><b>place</b>([position])</tt></a>
-</div>
-<div id="place-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('place', false);"><tt><b>place</b>([position])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('place', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Places in instance of the symbol in the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>position:</tt> 
-
-&mdash;&nbsp;The position of the placed symbol.
-&mdash;&nbsp;optional
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/PlacedSymbol.html"><tt>PlacedSymbol</tt></a></tt>
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Returns a copy of the symbol.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Symbol.html"><tt>Symbol</tt></a></tt>
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/TextItem.html b/dist/docs/classes/TextItem.html
deleted file mode 100644
index 9654093b..00000000
--- a/dist/docs/classes/TextItem.html
+++ /dev/null
@@ -1,3600 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>TextItem</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>TextItem</h1>
-
-<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
-
-<p>The TextItem type allows you to create typography. Its
-functionality is inherited by different text item types such as
-<a href="../classes/PointText.html"><tt>PointText</tt></a>, and <tt>AreaText</tt> (coming soon). They each add a
-layer of functionality that is unique to their type, but share the
-underlying properties and functions that they inherit from TextItem.</p>
-
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="content-member" class="member">
-<div id="content-link" class="member-link">
-<a name="content" href="#" onClick="return toggleMember('content', false);"><tt><b>content</b></tt></a>
-</div>
-<div id="content-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('content', false);"><tt><b>content</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('content', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The text contents of the text item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the content of a PointText item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-// Create a point-text item at {x: 30, y: 30}:
-var text = new PointText(new Point(30, 30));
-text.fillColor = 'black';
-
-// Set the content of the text item:
-text.content = 'Hello world';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Interactive example, move your mouse over the view below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-// Create a point-text item at {x: 30, y: 30}:
-var text = new PointText(new Point(30, 30));
-text.fillColor = 'black';
-
-text.content = 'Move your mouse over the view, to see its position';
-
-function onMouseMove(event) {
-	// Each time the mouse is moved, set the content of
-	// the point text to describe the position of the mouse:
-	text.content = 'Your position is: ' + event.point.toString();
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Style Properties</h3>
-
-<div id="characterstyle-member" class="member">
-<div id="characterstyle-link" class="member-link">
-<a name="characterstyle" href="#" onClick="return toggleMember('characterstyle', false);"><tt><b>characterStyle</b></tt></a>
-</div>
-<div id="characterstyle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('characterstyle', false);"><tt><b>characterStyle</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('characterstyle', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The character style of the text item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/CharacterStyle.html"><tt>CharacterStyle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="paragraphstyle-member" class="member">
-<div id="paragraphstyle-link" class="member-link">
-<a name="paragraphstyle" href="#" onClick="return toggleMember('paragraphstyle', false);"><tt><b>paragraphStyle</b></tt></a>
-</div>
-<div id="paragraphstyle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('paragraphstyle', false);"><tt><b>paragraphStyle</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('paragraphstyle', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The paragraph style of the text item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/ParagraphStyle.html"><tt>ParagraphStyle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="id-member" class="member">
-<div id="id-link" class="member-link">
-<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-<div id="id-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The unique id of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="name-member" class="member">
-<div id="name-link" class="member-link">
-<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-<div id="name-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The name of the item. If the item has a name, it can be accessed by name
-through its parent's children list.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and add path to it as a child:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="position-member" class="member">
-<div id="position-link" class="member-link">
-<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-<div id="position-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item's position within the project. This is the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Changing the position of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-// Create a circle at position { x: 10, y: 10 }
-var circle = new Path.Circle(new Point(10, 10), 10);
-circle.fillColor = 'red';
-
-// Move the circle to { x: 20, y: 20 }
-circle.position = new Point(20, 20);
-
-// Move the circle 100 points to the right and 50 points down
-circle.position += new Point(100, 50);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Changing the x coordinate of an item's position:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-// Create a circle at position { x: 20, y: 20 }
-var circle = new Path.Circle(new Point(20, 20), 10);
-circle.fillColor = 'red';
-
-// Move the circle 100 points to the right
-circle.position.x += 100;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="style-member" class="member">
-<div id="style-link" class="member-link">
-<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-<div id="style-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The path style of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-5">
-var circle = new Path.Circle(new Point(80, 50), 30);
-circle.style = {
-	fillColor: 'blue',
-	strokeColor: 'red',
-	strokeWidth: 5
-};
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Copying the style of another item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-6">
-var path = new Path.Circle(new Point(50, 50), 30);
-path.fillColor = 'red';
-
-var path2 = new Path.Circle(new Point(180, 50), 20);
-// Copy the path style of path:
-path2.style = path.style;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Applying the same style object to multiple items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-7">
-var myStyle = {
-	fillColor: 'red',
-	strokeColor: 'blue',
-	strokeWidth: 4
-};
-
-var path = new Path.Circle(new Point(80, 50), 30);
-path.style = myStyle;
-
-var path2 = new Path.Circle(new Point(150, 50), 20);
-path2.style = myStyle;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="visible-member" class="member">
-<div id="visible-link" class="member-link">
-<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-<div id="visible-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
-item won't be drawn.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>true</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Hiding an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-8">
-var path = new Path.Circle(new Point(50, 50), 20);
-path.fillColor = 'red';
-
-// Hide the path:
-path.visible = false;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="blendmode-member" class="member">
-<div id="blendmode-link" class="member-link">
-<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-<div id="blendmode-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The blend mode of the item.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'normal'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
-'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
-'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
-'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's blend mode:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-9">
-// Create a white rectangle in the background
-// with the same dimensions as the view:
-var background = new Path.Rectangle(view.bounds);
-background.fillColor = 'white';
-
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.fillColor = 'blue';
-
-// Set the blend mode of circle2:
-circle2.blendMode = 'multiply';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="opacity-member" class="member">
-<div id="opacity-link" class="member-link">
-<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-<div id="opacity-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Making an item 50% transparent:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-10">
-var circle = new Path.Circle(new Point(80, 50), 35);
-circle.fillColor = 'red';
-
-var circle2 = new Path.Circle(new Point(120, 50), 35);
-circle2.style = {
-	fillColor: 'blue',
-	strokeColor: 'green',
-	strokeWidth: 10
-};
-
-// Make circle2 50% transparent:
-circle2.opacity = 0.5;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="guide-member" class="member">
-<div id="guide-link" class="member-link">
-<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-<div id="guide-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item functions as a guide. When set to
-<tt>true</tt>, the item will be drawn at the end as a guide.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>1</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="selected-member" class="member">
-<div id="selected-link" class="member-link">
-<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-<div id="selected-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether an item is selected and will also return <tt>true</tt>
-if the item is partially selected (groups with some selected or partially
-selected paths).</p>
-<p>Paper.js draws the visual outlines of selected items on top of your
-project. This can be useful for debugging, as it allows you to see the
-construction of paths, position of path curves, individual segment points
-and bounding boxes of symbol and raster items.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Selecting an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-11">
-var path = new Path.Circle(new Size(80, 50), 35);
-path.selected = true; // Select the path
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="clipmask-member" class="member">
-<div id="clipmask-link" class="member-link">
-<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-<div id="clipmask-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies whether the item defines a clip mask. This can only be set on
-paths, compound paths, and text frame objects, and only if the item is
-already contained within a clipping group.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Boolean</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Project Hierarchy</h3>
-
-<div id="project-member" class="member">
-<div id="project-link" class="member-link">
-<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-<div id="project-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The project that this item belongs to.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Project.html"><tt>Project</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="layer-member" class="member">
-<div id="layer-link" class="member-link">
-<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-<div id="layer-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The layer that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Layer.html"><tt>Layer</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="parent-member" class="member">
-<div id="parent-link" class="member-link">
-<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-<div id="parent-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item that this item is contained within.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var path = new Path();
-
-// New items are placed in the active layer:
-console.log(path.parent == project.activeLayer); // true
-
-var group = new Group();
-group.addChild(path);
-
-// Now the parent of the path has become the group:
-console.log(path.parent == group); // true</pre>
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="children-member" class="member">
-<div id="children-link" class="member-link">
-<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-<div id="children-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The children items contained within this item. Items that define a
-<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
-<p><b>Please note:</b> The children array should not be modified directly
-using array functions. To remove single items from the children list, use
-<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
-<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
-<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Accessing items in the children array:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-12">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// Access the path through the group's children array:
-group.children[0].fillColor = 'red';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Accessing children by name:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-13">
-var path = new Path.Circle(new Point(80, 50), 35);
-// Set the name of the path:
-path.name = 'example';
-
-// Create a group and move the path into it:
-var group = new Group();
-group.addChild(path);
-
-// The path can be accessed by name:
-group.children['example'].fillColor = 'orange';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Passing an array of items to item.children:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-14">
-var path = new Path.Circle(new Point(80, 50), 35);
-
-var group = new Group();
-group.children = [path];
-
-// The path is the first child of the group:
-group.firstChild.fillColor = 'green';
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="firstchild-member" class="member">
-<div id="firstchild-link" class="member-link">
-<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-<div id="firstchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The first item contained within this item. This is a shortcut for
-accessing <tt>item.children[0]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="lastchild-member" class="member">
-<div id="lastchild-link" class="member-link">
-<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-<div id="lastchild-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The last item contained within this item.This is a shortcut for
-accessing <tt>item.children[item.children.length - 1]</tt>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="nextsibling-member" class="member">
-<div id="nextsibling-link" class="member-link">
-<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-<div id="nextsibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The next item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="previoussibling-member" class="member">
-<div id="previoussibling-link" class="member-link">
-<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-<div id="previoussibling-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The previous item on the same level as this item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="index-member" class="member">
-<div id="index-link" class="member-link">
-<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-<div id="index-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The index of this item within the list of its parent's children.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Bounding Rectangles</h3>
-
-<div id="bounds-member" class="member">
-<div id="bounds-link" class="member-link">
-<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-<div id="bounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item excluding stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokebounds-member" class="member">
-<div id="strokebounds-link" class="member-link">
-<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-<div id="strokebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including stroke width.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="handlebounds-member" class="member">
-<div id="handlebounds-link" class="member-link">
-<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-<div id="handlebounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounding rectangle of the item including handles.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Stroke Style</h3>
-
-<div id="strokecolor-member" class="member">
-<div id="strokecolor-link" class="member-link">
-<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-<div id="strokecolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The color of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the stroke color of a path:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-15">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to RGB red:
-circle.strokeColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokewidth-member" class="member">
-<div id="strokewidth-link" class="member-link">
-<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-<div id="strokewidth-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The width of the stroke.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting an item's stroke width:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-16">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set its stroke color to black:
-circle.strokeColor = 'black';
-
-// Set its stroke width to 10:
-circle.strokeWidth = 10;
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokecap-member" class="member">
-<div id="strokecap-link" class="member-link">
-<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-<div id="strokecap-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
-have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'butt'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('round', 'square', 'butt')</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke caps:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-17">
-var line = new Path(new Point(80, 50), new Point(420, 50));
-line.strokeColor = 'black';
-line.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-line.selected = true;
-
-// Set the stroke cap of the line to be round:
-line.strokeCap = 'round';
-
-// Copy the path and set its stroke cap to be square:
-var line2 = line.clone();
-line2.position.y += 50;
-line2.strokeCap = 'square';
-
-// Make another copy and set its stroke cap to be butt:
-var line2 = line.clone();
-line2.position.y += 100;
-line2.strokeCap = 'butt';
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-17"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="strokejoin-member" class="member">
-<div id="strokejoin-link" class="member-link">
-<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-<div id="strokejoin-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The shape to be used at the corners of paths when they have a stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>'miter'</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String</tt> ('miter', 'round', 'bevel')
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; A look at the different stroke joins:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-18">
-var path = new Path();
-path.add(new Point(80, 100));
-path.add(new Point(120, 40));
-path.add(new Point(160, 100));
-path.strokeColor = 'black';
-path.strokeWidth = 20;
-
-// Select the path, so we can see where the stroke is formed:
-path.selected = true;
-
-var path2 = path.clone();
-path2.position.x += path2.bounds.width * 1.5;
-path2.strokeJoin = 'round';
-
-var path3 = path2.clone();
-path3.position.x += path3.bounds.width * 1.5;
-path3.strokeJoin = 'bevel';
-</script>
-<div class="canvas"><canvas width="516" height="120" id="canvas-18"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="dashoffset-member" class="member">
-<div id="dashoffset-link" class="member-link">
-<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-<div id="dashoffset-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The dash offset of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>0</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-<div id="dasharray-member" class="member">
-<div id="dasharray-link" class="member-link">
-<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-<div id="dasharray-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>[]</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Array</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-19">
-var path = new Path.Circle(new Point(80, 50), 40);
-path.strokeWidth = 2;
-path.strokeColor = 'black';
-
-// Set the dashed stroke to [10pt dash, 4pt gap]:
-path.dashArray = [10, 4];
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-	
-<div id="miterlimit-member" class="member">
-<div id="miterlimit-link" class="member-link">
-<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-<div id="miterlimit-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The miter limit of the stroke.</p>
-<p>When two line segments meet at a sharp angle and miter joins have been
-specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
-extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
-miterLimit imposes a limit on the ratio of the miter length to the
-<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
-	
-	
-		<ul><b>Default:</b>
-		<li>
-		<tt>10</tt>
-		</li>
-		</ul>
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-	
-	<h3>Fill Style</h3>
-
-<div id="fillcolor-member" class="member">
-<div id="fillcolor-link" class="member-link">
-<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-<div id="fillcolor-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The fill color of the item.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Setting the fill color of a path to red:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-20">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 35:
-var circle = new Path.Circle(new Point(80, 50), 35);
-
-// Set the fill color of the circle to RGB red:
-circle.fillColor = new RgbColor(1, 0, 0);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-<!-- =========================== inherited methods ========================= -->
-<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
-
-	
-<div id="clone-member" class="member">
-<div id="clone-link" class="member-link">
-<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-<div id="clone-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Clones the item within the same project and places the copy above the
-item.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Cloning items:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-21">
-var circle = new Path.Circle(new Point(50, 50), 10);
-circle.fillColor = 'red';
-
-// Make 20 copies of the circle:
-for (var i = 0; i < 20; i++) {
-	var copy = circle.clone();
-
-	// Distribute the copies horizontally, so we can see them:
-	copy.position.x += i * copy.bounds.width;
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="copyto-item-member" class="member">
-<div id="copyto-item-link" class="member-link">
-<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-<div id="copyto-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>When passed a project, copies the item to the project,
-or duplicates it within the same project. When passed an item,
-copies the item into the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
-&mdash;&nbsp;the item or project to
-copy the item to
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rasterize-member" class="member">
-<div id="rasterize-link" class="member-link">
-<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-<div id="rasterize-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rasterizes the item into a newly created Raster object. The item itself
-is not removed after rasterization.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>resolution:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the resolution of the raster in dpi
-&mdash;&nbsp;optional, default: <tt>72</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
-</li>
-	
-	</ul>
-
-	
-	<p>
-<b>Example</b> &mdash; Rasterizing an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-22">
-var circle = new Path.Circle(new Point(80, 50), 5);
-circle.fillColor = 'red';
-
-// Create a rasterized version of the path:
-var raster = circle.rasterize();
-
-// Move it 100pt to the right:
-raster.position.x += 100;
-
-// Scale the path and the raster by 300%, so we can compare them:
-circle.scale(5);
-raster.scale(5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="hittest-point-member" class="member">
-<div id="hittest-point-link" class="member-link">
-<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-<div id="hittest-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Perform a hit test on the item (and its children, if it is a
-<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
-<p>The optional options object allows you to control the specifics of the
-hit test and may contain a combination of the following values:</p>
-<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
-points.</p>
-<p><b>options.type:</b> Only hit test again a certain item
-type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
-<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
-<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
-items, taking into account stroke width.</p>
-<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
-<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
-<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
-(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
-<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
-last segment points of open path items.</p>
-<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
-side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
-<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
-(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
-<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
-<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
-<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;The point where the hit test should be performed
-
-</li>
-
-<li>
-<tt>options:</tt> 
-<tt>Object</tt>
-
-&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
-tolerance: 2 }</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
-information about what exactly was hit or <tt>null</tt> if nothing was
-hit.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Operations</h3>
-
-<div id="addchild-item-member" class="member">
-<div id="addchild-item-link" class="member-link">
-<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-<div id="addchild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified item as a child of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be added as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchild-index-item-member" class="member">
-<div id="insertchild-index-item-link" class="member-link">
-<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-<div id="insertchild-index-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="addchildren-items-member" class="member">
-<div id="addchildren-items-link" class="member-link">
-<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-<div id="addchildren-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Adds the specified items as children of this item at the end of the
-its children list. You can use this function for groups, compound
-paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>items:</tt> 
-<tt>item</tt>
-&mdash;&nbsp;The items to be added as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertchildren-index-items-member" class="member">
-<div id="insertchildren-index-items-link" class="member-link">
-<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-<div id="insertchildren-index-items-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified items as children of this item at the specified
-index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
-groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>index:</tt> 
-<tt>Number</tt>
-
-
-</li>
-
-<li>
-<tt>items:</tt> 
-Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
-&mdash;&nbsp;The items to be appended as children
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertabove-item-member" class="member">
-<div id="insertabove-item-link" class="member-link">
-<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-<div id="insertabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="insertbelow-item-member" class="member">
-<div id="insertbelow-item-link" class="member-link">
-<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-<div id="insertbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts this item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendtop-item-member" class="member">
-<div id="appendtop-item-link" class="member-link">
-<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-<div id="appendtop-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it above all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="appendbottom-item-member" class="member">
-<div id="appendbottom-item-link" class="member-link">
-<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-<div id="appendbottom-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Inserts the specified item as a child of this item by appending it to
-the list of children and moving it below all other children. You can
-use this function for groups, compound paths and layers.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to be appended as a child
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="moveabove-item-member" class="member">
-<div id="moveabove-item-link" class="member-link">
-<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-<div id="moveabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves this item above the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item above which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="movebelow-item-member" class="member">
-<div id="movebelow-item-link" class="member-link">
-<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-<div id="movebelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Moves the item below the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item below which it should be moved
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="remove-member" class="member">
-<div id="remove-link" class="member-link">
-<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-<div id="remove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item from the project. If the item has children, they are also
-removed.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-member" class="member">
-<div id="removechildren-link" class="member-link">
-<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-<div id="removechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="removechildren-from-member" class="member">
-<div id="removechildren-from-link" class="member-link">
-<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-<div id="removechildren-from-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the children from the specified <tt>from</tt> index to the
-<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>from:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the beginning index, inclusive
-
-</li>
-
-<li>
-<tt>to:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the ending index, exclusive
-&mdash;&nbsp;optional, default: <tt>children.length</tt>
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="reversechildren-member" class="member">
-<div id="reversechildren-link" class="member-link">
-<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-<div id="reversechildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Reverses the order of the item's children</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Hierarchy Tests</h3>
-
-<div id="haschildren-member" class="member">
-<div id="haschildren-link" class="member-link">
-<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-<div id="haschildren-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item contains any children items.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isabove-item-member" class="member">
-<div id="isabove-item-link" class="member-link">
-<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-<div id="isabove-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if this item is above the specified item in the stacking order
-of the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isbelow-item-member" class="member">
-<div id="isbelow-item-link" class="member-link">
-<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-<div id="isbelow-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is below the specified item in the stacking order of
-the project.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isparent-item-member" class="member">
-<div id="isparent-item-link" class="member-link">
-<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-<div id="isparent-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is the parent of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="ischild-item-member" class="member">
-<div id="ischild-item-link" class="member-link">
-<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-<div id="ischild-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the specified item is a child of the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isdescendant-item-member" class="member">
-<div id="isdescendant-item-link" class="member-link">
-<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-<div id="isdescendant-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is contained within the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;The item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isancestor-item-member" class="member">
-<div id="isancestor-item-link" class="member-link">
-<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-<div id="isancestor-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks if the item is an ancestor of the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-&mdash;&nbsp;the item to check against
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
-item, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="isgroupedwith-item-member" class="member">
-<div id="isgroupedwith-item-link" class="member-link">
-<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-<div id="isgroupedwith-item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the item is grouped with the specified item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>item:</tt> 
-<a href="../classes/Item.html"><tt>Item</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-
-	
-<h3>Transform Functions</h3>
-
-<div id="scale-scale-member" class="member">
-<div id="scale-scale-link" class="member-link">
-<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-<div id="scale-scale-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given value from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>scale:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item from its center point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-23">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path by 150% from its center point
-circle.scale(1.5);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Scaling an item from a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-24">
-// Create a circle shaped path at { x: 80, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(80, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path 150% from its bottom left corner
-circle.scale(1.5, circle.bounds.bottomLeft);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="scale-hor-ver-member" class="member">
-<div id="scale-hor-ver-link" class="member-link">
-<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="scale-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scales the item by the given values from its center point, or optionally
-from a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal scale factor
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical scale factor
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Scaling an item horizontally by 300%:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-25">
-// Create a circle shaped path at { x: 100, y: 50 }
-// with a radius of 20:
-var circle = new Path.Circle(new Point(100, 50), 20);
-circle.fillColor = 'red';
-
-// Scale the path horizontally by 300%
-circle.scale(3, 1);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="translate-delta-member" class="member">
-<div id="translate-delta-link" class="member-link">
-<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-<div id="translate-delta-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Translates (moves) the item by the given offset point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>delta:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-&mdash;&nbsp;the offset to translate the item by
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="rotate-angle-member" class="member">
-<div id="rotate-angle-link" class="member-link">
-<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-<div id="rotate-angle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Rotates the item by a given angle around the given point.</p>
-<p>Angles are oriented clockwise and measured in degrees.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>angle:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the rotation angle
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
-	</p>
-
-	<p>
-<b>Example</b> &mdash; Rotating an item:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-26">
-// Create a rectangle shaped path with its top left
-// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
-var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
-path.fillColor = 'black';
-
-// Rotate the path by 30 degrees:
-path.rotate(30);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Rotating an item around a specific point:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-27">
-// Create a rectangle shaped path with its top left
-// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
-var topLeft = new Point(175, 50);
-var size = new Size(100, 100);
-var path = new Path.Rectangle(topLeft, size);
-path.fillColor = 'black';
-
-// Draw a circle shaped path in the center of the view,
-// to show the rotation point:
-var circle = new Path.Circle(view.center, 5);
-circle.fillColor = 'white';
-
-// Each frame rotate the path 3 degrees around the center point
-// of the view:
-function onFrame(event) {
-	path.rotate(3, view.center);
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-27"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="shear-point-member" class="member">
-<div id="shear-point-link" class="member-link">
-<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-<div id="shear-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given value from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="shear-hor-ver-member" class="member">
-<div id="shear-hor-ver-link" class="member-link">
-<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-<div id="shear-hor-ver-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Shears the item by the given values from its center point, or optionally
-by a supplied point.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>hor:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the horizontal shear factor.
-
-</li>
-
-<li>
-<tt>ver:</tt> 
-<tt>Number</tt>
-&mdash;&nbsp;the vertical shear factor.
-
-</li>
-
-<li>
-<tt>center:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
-</li>
-
-</ul>
-
-	
-	
-	<p><b>See also:</b>
-	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
-	</p>
-
-	
-</div>
-</div>
-</div>
-
-	
-<div id="transform-matrix-flags-member" class="member">
-<div id="transform-matrix-flags-link" class="member-link">
-<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-<div id="transform-matrix-flags-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>matrix:</tt> 
-<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
-
-
-</li>
-
-<li>
-<tt>flags:</tt> 
-
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-
-	
-<div id="fitbounds-rectangle-member" class="member">
-<div id="fitbounds-rectangle-link" class="member-link">
-<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-<div id="fitbounds-rectangle-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
-rectangle, without changing its aspect ratio.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>rectangle:</tt> 
-<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-
-
-</li>
-
-<li>
-<tt>fill:</tt> 
-<tt>Boolean</tt>
-
-&mdash;&nbsp;optional, default: <tt>false</tt>
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-28">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-29">
-// Create a rectangle shaped path with its top left corner
-// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
-var size = new Size(75, 50);
-var path = new Path.Rectangle(new Point(80, 25), size);
-path.fillColor = 'black';
-
-// Create a circle shaped path with its center at {x: 80, y: 50}
-// and a radius of 30.
-var circlePath = new Path.Circle(new Point(80, 50), 30);
-circlePath.fillColor = 'red';
-
-// Fit the circlePath to the bounding rectangle of
-// the rectangular path:
-circlePath.fitBounds(path.bounds, true);
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
-</div>
-
-
-<p>
-<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-30">
-var path = new Path.Circle(new Point(80, 50), 30);
-path.fillColor = 'red';
-
-// Fit the path to the bounding rectangle of the view:
-path.fitBounds(view.bounds);
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-30"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<h3>Remove On Event</h3>
-
-<div id="removeon-object-member" class="member">
-<div id="removeon-object-link" class="member-link">
-<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-<div id="removeon-object-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the events specified in the passed object literal
-occur.</p>
-<p>The object literal can contain the following values:</p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
-fired: <tt>object.move = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
-fired: <tt>object.drag = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
-fired: <tt>object.down = true</tt></p>
-<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
-fired: <tt>object.up = true</tt></p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>object:</tt> 
-<tt>Object</tt>
-
-
-</li>
-
-</ul>
-
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-31">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path on the next onMouseDrag or onMouseDown event:
-	path.removeOn({
-		drag: true,
-		down: true
-	});
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-31"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonmove-member" class="member">
-<div id="removeonmove-link" class="member-link">
-<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-<div id="removeonmove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Move your mouse below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-32">
-function onMouseMove(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next move event, automatically remove the path:
-	path.removeOnMove();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-32"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondown-member" class="member">
-<div id="removeondown-link" class="member-link">
-<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-<div id="removeondown-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-33">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, next time the mouse is pressed:
-	path.removeOnDown();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-33"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeondrag-member" class="member">
-<div id="removeondrag-link" class="member-link">
-<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-<div id="removeondrag-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click and drag below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-34">
-function onMouseDrag(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// On the next drag event, automatically remove the path:
-	path.removeOnDrag();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-34"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-	
-<div id="removeonup-member" class="member">
-<div id="removeonup-link" class="member-link">
-<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-<div id="removeonup-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
-	
-	
-	
-	<p>
-<b>Example</b> &mdash; Click a few times below:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-35">
-function onMouseDown(event) {
-	// Create a circle shaped path at the mouse position,
-	// with a radius of 10:
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-
-	// Remove the path, when the mouse is released:
-	path.removeOnUp();
-}
-</script>
-<div class="canvas"><canvas width="516" height="200" id="canvas-35"></canvas></div>
-</div>
-
-
-</div>
-</div>
-</div>
-
-</div>
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Tool.html b/dist/docs/classes/Tool.html
deleted file mode 100644
index 8c5f0347..00000000
--- a/dist/docs/classes/Tool.html
+++ /dev/null
@@ -1,584 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Tool</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Tool</h1>
-
-<p>The Tool object refers to a script that the user can interact with
-by using the mouse and keyboard and can be accessed through the global
-<tt>tool</tt> variable. All its properties are also available in the paper
-scope.</p>
-<p>The global <tt>tool</tt> variable only exists in scripts that contain mouse
-handler functions (<a href="../classes/Tool.html#onmousemove" onclick="return toggleMember('onmousemove', true);"><tt>onMouseMove</tt></a>, <a href="../classes/Tool.html#onmousedown" onclick="return toggleMember('onmousedown', true);"><tt>onMouseDown</tt></a>,
-<a href="../classes/Tool.html#onmousedrag" onclick="return toggleMember('onmousedrag', true);"><tt>onMouseDrag</tt></a>, <a href="../classes/Tool.html#onmouseup" onclick="return toggleMember('onmouseup', true);"><tt>onMouseUp</tt></a>) or a keyboard handler
-function (<a href="../classes/Tool.html#onkeydown" onclick="return toggleMember('onkeydown', true);"><tt>onKeyDown</tt></a>, <a href="../classes/Tool.html#onkeyup" onclick="return toggleMember('onkeyup', true);"><tt>onKeyUp</tt></a>).</p>
-<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">var path;
-
-// Only execute onMouseDrag when the mouse
-// has moved at least 10 points:
-tool.distanceThreshold = 10;
-
-function onMouseDown(event) {
-	// Create a new path every time the mouse is clicked
-	path = new Path();
-	path.add(event.point);
-	path.strokeColor = 'black';
-}
-
-function onMouseDrag(event) {
-	// Add a point to the path every time the mouse is dragged
-	path.add(event.point);
-}</pre>
-
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="eventinterval-member" class="member">
-<div id="eventinterval-link" class="member-link">
-<a name="eventinterval" href="#" onClick="return toggleMember('eventinterval', false);"><tt><b>eventInterval</b></tt></a>
-</div>
-<div id="eventinterval-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('eventinterval', false);"><tt><b>eventInterval</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('eventinterval', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The fixed time delay in milliseconds between each call to the
-<a href="../classes/Tool.html#onmousedrag" onclick="return toggleMember('onmousedrag', true);"><tt>onMouseDrag</tt></a> event. Setting this to an interval means the
-<a href="../classes/Tool.html#onmousedrag" onclick="return toggleMember('onmousedrag', true);"><tt>onMouseDrag</tt></a> event is called repeatedly after the initial
-<a href="../classes/Tool.html#onmousedown" onclick="return toggleMember('onmousedown', true);"><tt>onMouseDown</tt></a> until the user releases the mouse.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="mindistance-member" class="member">
-<div id="mindistance-link" class="member-link">
-<a name="mindistance" href="#" onClick="return toggleMember('mindistance', false);"><tt><b>minDistance</b></tt></a>
-</div>
-<div id="mindistance-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('mindistance', false);"><tt><b>minDistance</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('mindistance', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The minimum distance the mouse has to drag before firing the onMouseDrag
-event, since the last onMouseDrag event.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="maxdistance-member" class="member">
-<div id="maxdistance-link" class="member-link">
-<a name="maxdistance" href="#" onClick="return toggleMember('maxdistance', false);"><tt><b>maxDistance</b></tt></a>
-</div>
-<div id="maxdistance-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('maxdistance', false);"><tt><b>maxDistance</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('maxdistance', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The maximum distance the mouse has to drag before firing the onMouseDrag
-event, since the last onMouseDrag event.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="fixeddistance-member" class="member">
-<div id="fixeddistance-link" class="member-link">
-<a name="fixeddistance" href="#" onClick="return toggleMember('fixeddistance', false);"><tt><b>fixedDistance</b></tt></a>
-</div>
-<div id="fixeddistance-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('fixeddistance', false);"><tt><b>fixedDistance</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fixeddistance', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Mouse Event Handlers</h3>
-
-<div id="onmousedown-member" class="member">
-<div id="onmousedown-link" class="member-link">
-<a name="onmousedown" href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
-</div>
-<div id="onmousedown-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousedown', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The function to be called when the mouse button is pushed down. The
-function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information
-about the mouse event.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Function</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Creating circle shaped paths where the user presses the mouse button:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-function onMouseDown(event) {
-	// Create a new circle shaped path with a radius of 10
-	// at the position of the mouse (event.point):
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="onmousedrag-member" class="member">
-<div id="onmousedrag-link" class="member-link">
-<a name="onmousedrag" href="#" onClick="return toggleMember('onmousedrag', false);"><tt><b>onMouseDrag</b></tt></a>
-</div>
-<div id="onmousedrag-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('onmousedrag', false);"><tt><b>onMouseDrag</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousedrag', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The function to be called when the mouse position changes while the mouse
-is being dragged. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which
-contains information about the mouse event.</p>
-<p>This function can also be called periodically while the mouse doesn't
-move by setting the <a href="../classes/Tool.html#eventinterval" onclick="return toggleMember('eventinterval', true);"><tt>eventInterval</tt></a></p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Function</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Draw a line by adding a segment to a path on every mouse drag event:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-1">
-// Create an empty path:
-var path = new Path();
-path.strokeColor = 'black';
-
-function onMouseDrag(event) {
-	// Add a segment to the path at the position of the mouse:
-	path.add(event.point);
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="onmousemove-member" class="member">
-<div id="onmousemove-link" class="member-link">
-<a name="onmousemove" href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
-</div>
-<div id="onmousemove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousemove', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The function to be called the mouse moves within the project view. The
-function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information
-about the mouse event.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Function</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Moving a path to the position of the mouse:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-2">
-// Create a circle shaped path with a radius of 10 at {x: 0, y: 0}:
-var path = new Path.Circle([0, 0], 10);
-path.fillColor = 'black';
-
-function onMouseMove(event) {
-	// Whenever the user moves the mouse, move the path
-	// to that position:
-	path.position = event.point;
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="onmouseup-member" class="member">
-<div id="onmouseup-link" class="member-link">
-<a name="onmouseup" href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
-</div>
-<div id="onmouseup-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmouseup', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The function to be called when the mouse button is released. The function
-receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the
-mouse event.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Function</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Creating circle shaped paths where the user releases the mouse:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-3">
-function onMouseUp(event) {
-	// Create a new circle shaped path with a radius of 10
-	// at the position of the mouse (event.point):
-	var path = new Path.Circle(event.point, 10);
-	path.fillColor = 'black';
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Keyboard Event Handlers</h3>
-
-<div id="onkeydown-member" class="member">
-<div id="onkeydown-link" class="member-link">
-<a name="onkeydown" href="#" onClick="return toggleMember('onkeydown', false);"><tt><b>onKeyDown</b></tt></a>
-</div>
-<div id="onkeydown-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('onkeydown', false);"><tt><b>onKeyDown</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onkeydown', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The function to be called when the user presses a key on the keyboard.</p>
-<p>The function receives a <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a> object which contains
-information about the keyboard event.</p>
-<p>If the function returns <tt>false</tt>, the keyboard event will be
-prevented from bubbling up. This can be used for example to stop the
-window from scrolling, when you need the user to interact with arrow
-keys.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Function</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Scaling a path whenever the user presses the space bar:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-4">
-// Create a circle shaped path:
-var path = new Path.Circle(new Point(50, 50), 30);
-path.fillColor = 'red';
-
-function onKeyDown(event) {
-	if(event.key == 'space') {
-		// Scale the path by 110%:
-		path.scale(1.1);
-
-		// Prevent the key event from bubbling
-		return false;
-	}
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="onkeyup-member" class="member">
-<div id="onkeyup-link" class="member-link">
-<a name="onkeyup" href="#" onClick="return toggleMember('onkeyup', false);"><tt><b>onKeyUp</b></tt></a>
-</div>
-<div id="onkeyup-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('onkeyup', false);"><tt><b>onKeyUp</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onkeyup', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The function to be called when the user releases a key on the keyboard.</p>
-<p>The function receives a <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a> object which contains
-information about the keyboard event.</p>
-<p>If the function returns <tt>false</tt>, the keyboard event will be
-prevented from bubbling up. This can be used for example to stop the
-window from scrolling, when you need the user to interact with arrow
-keys.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Function</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">function onKeyUp(event) {
-	if(event.key == 'space') {
-		console.log('The spacebar was released!');
-	}
-}</pre>
-
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="activate-member" class="member">
-<div id="activate-link" class="member-link">
-<a name="activate" href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
-</div>
-<div id="activate-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activate', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Activates this tool, meaning <a href="../classes/PaperScope.html#tool"><tt>paperScope.tool</tt></a> will
-point to it and it will be the one that recieves mouse events.</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="remove-member" class="member">
-<div id="remove-link" class="member-link">
-<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-<div id="remove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes this tool from the <a href="../classes/PaperScope.html#tools"><tt>paperScope.tools</tt></a> list.</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/ToolEvent.html b/dist/docs/classes/ToolEvent.html
deleted file mode 100644
index cc13b2dd..00000000
--- a/dist/docs/classes/ToolEvent.html
+++ /dev/null
@@ -1,406 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>ToolEvent</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>ToolEvent</h1>
-
-<p> Extends <b><a href="../classes/Event.html"><tt>Event</tt></a></b></p>
-
-<p>ToolEvent The ToolEvent object is received by the <a href="../classes/Tool.html"><tt>Tool</tt></a>'s mouse
-event handlers <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a>, <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a>,
-<a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> and <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a>. The ToolEvent
-object is the only parameter passed to these functions and contains
-information about the mouse event.</p>
-
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="type-member" class="member">
-<div id="type-link" class="member-link">
-<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
-</div>
-<div id="type-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The type of tool event.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>String('mousedown', 'mouseup', 'mousemove', 'mousedrag')</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="point-member" class="member">
-<div id="point-link" class="member-link">
-<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
-</div>
-<div id="point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The position of the mouse in project coordinates when the event was
-fired.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> 
-</p>
-
-
-<pre class="code">function onMouseDrag(event) {
-	// the position of the mouse when it is dragged
-	console.log(event.point);
-}
-
-function onMouseUp(event) {
-	// the position of the mouse when it is released
-	console.log(event.point);
-}</pre>
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="lastpoint-member" class="member">
-<div id="lastpoint-link" class="member-link">
-<a name="lastpoint" href="#" onClick="return toggleMember('lastpoint', false);"><tt><b>lastPoint</b></tt></a>
-</div>
-<div id="lastpoint-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('lastpoint', false);"><tt><b>lastPoint</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastpoint', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The position of the mouse in project coordinates when the previous
-event was fired.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="downpoint-member" class="member">
-<div id="downpoint-link" class="member-link">
-<a name="downpoint" href="#" onClick="return toggleMember('downpoint', false);"><tt><b>downPoint</b></tt></a>
-</div>
-<div id="downpoint-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('downpoint', false);"><tt><b>downPoint</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('downpoint', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The position of the mouse in project coordinates when the mouse button
-was last clicked.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="middlepoint-member" class="member">
-<div id="middlepoint-link" class="member-link">
-<a name="middlepoint" href="#" onClick="return toggleMember('middlepoint', false);"><tt><b>middlePoint</b></tt></a>
-</div>
-<div id="middlepoint-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('middlepoint', false);"><tt><b>middlePoint</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('middlepoint', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The point in the middle between <a href="../classes/ToolEvent.html#lastpoint" onclick="return toggleMember('lastpoint', true);"><tt>lastPoint</tt></a> and
-<a href="../classes/ToolEvent.html#point" onclick="return toggleMember('point', true);"><tt>point</tt></a>. This is a useful position to use when creating
-artwork based on the moving direction of the mouse, as returned by
-<a href="../classes/ToolEvent.html#delta" onclick="return toggleMember('delta', true);"><tt>delta</tt></a>.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="delta-member" class="member">
-<div id="delta-link" class="member-link">
-<a name="delta" href="#" onClick="return toggleMember('delta', false);"><tt><b>delta</b></tt></a>
-</div>
-<div id="delta-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('delta', false);"><tt><b>delta</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('delta', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The difference between the current position and the last position of the
-mouse when the event was fired. In case of the mouseup event, the
-difference to the mousedown position is returned.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="count-member" class="member">
-<div id="count-link" class="member-link">
-<a name="count" href="#" onClick="return toggleMember('count', false);"><tt><b>count</b></tt></a>
-</div>
-<div id="count-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('count', false);"><tt><b>count</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('count', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The number of times the mouse event was fired.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="item-member" class="member">
-<div id="item-link" class="member-link">
-<a name="item" href="#" onClick="return toggleMember('item', false);"><tt><b>item</b></tt></a>
-</div>
-<div id="item-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('item', false);"><tt><b>item</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('item', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The item at the position of the mouse (if any).</p>
-<p>If the item is contained within one or more <a href="../classes/Group.html"><tt>Group</tt></a> or
-<a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a> items, the most top level group or compound path
-that it is contained within is returned.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Item.html"><tt>Item</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="tostring-member" class="member">
-<div id="tostring-link" class="member-link">
-<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-<div id="tostring-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the tool event.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== inherited properties ====================== -->
-<div class="reference-members"><h2>Properties inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
-
-	
-<div id="modifiers-member" class="member">
-<div id="modifiers-link" class="member-link">
-<a name="modifiers" href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
-</div>
-<div id="modifiers-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modifiers', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>object</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-
-</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/View.html b/dist/docs/classes/View.html
deleted file mode 100644
index bfcb8e9e..00000000
--- a/dist/docs/classes/View.html
+++ /dev/null
@@ -1,538 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>View</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>View</h1>
-
-<p>The View object wraps a canvas element and handles drawing and user
-interaction through mouse and keyboard for it. It offer means to scroll the
-view, find the currently visible bounds in project coordinates, or the
-center, both useful for constructing artwork that should appear centered on
-screen.</p>
-
-</div>
-
-<!-- ============================== constructors ========================= -->
-<div class="reference-members"><h2>Constructors</h2>
-	
-		
-<div id="view-canvas-member" class="member">
-<div id="view-canvas-link" class="member-link">
-<a name="view-canvas" href="#" onClick="return toggleMember('view-canvas', false);"><tt><b>View</b>(canvas)</tt></a>
-</div>
-<div id="view-canvas-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('view-canvas', false);"><tt><b>View</b>(canvas)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('view-canvas', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-<p>Creates a view object</p>
-
-<ul><b>Parameters:</b>
-
-<li>
-<tt>canvas:</tt> 
-<tt>HTMLCanvasElement</tt> / <tt>String</tt>
-&mdash;&nbsp;The canvas object that this
-view should wrap, or the String id that represents it
-
-</li>
-
-</ul>
-
-
-
-
-</div>
-</div>
-</div>
-	
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="canvas-member" class="member">
-<div id="canvas-link" class="member-link">
-<a name="canvas" href="#" onClick="return toggleMember('canvas', false);"><tt><b>canvas</b></tt></a>
-</div>
-<div id="canvas-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('canvas', false);"><tt><b>canvas</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('canvas', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The underlying native canvas element.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>HTMLCanvasElement</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="viewsize-member" class="member">
-<div id="viewsize-link" class="member-link">
-<a name="viewsize" href="#" onClick="return toggleMember('viewsize', false);"><tt><b>viewSize</b></tt></a>
-</div>
-<div id="viewsize-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('viewsize', false);"><tt><b>viewSize</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('viewsize', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The size of the view canvas. Changing the view's size will resize it's
-underlying canvas.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Size.html"><tt>Size</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="bounds-member" class="member">
-<div id="bounds-link" class="member-link">
-<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-<div id="bounds-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The bounds of the currently visible area in project coordinates.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="size-member" class="member">
-<div id="size-link" class="member-link">
-<a name="size" href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
-</div>
-<div id="size-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('size', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The size of the visible area in project coordinates.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Size.html"><tt>Size</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="center-member" class="member">
-<div id="center-link" class="member-link">
-<a name="center" href="#" onClick="return toggleMember('center', false);"><tt><b>center</b></tt></a>
-</div>
-<div id="center-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('center', false);"><tt><b>center</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('center', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The center of the visible area in project coordinates.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Point.html"><tt>Point</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="zoom-member" class="member">
-<div id="zoom-link" class="member-link">
-<a name="zoom" href="#" onClick="return toggleMember('zoom', false);"><tt><b>zoom</b></tt></a>
-</div>
-<div id="zoom-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('zoom', false);"><tt><b>zoom</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('zoom', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The zoom factor by which the project coordinates are magnified.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Number</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Event Handlers</h3>
-
-<div id="onframe-member" class="member">
-<div id="onframe-link" class="member-link">
-<a name="onframe" href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
-</div>
-<div id="onframe-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onframe', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Handler function to be called on each frame of an animation.</p>
-<p>The function receives an event object which contains information about
-the frame event:</p>
-<p><b><tt>event.count</tt></b>: the number of times the frame event was fired.</p>
-<p><b><tt>event.time</tt></b>: the total amount of time passed since the first frame
-event in seconds.</p>
-<p><b><tt>event.delta</tt></b>: the time passed in seconds since the last frame
-event.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Function</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Creating an animation:
-</p>
-
-<div class="paperscript split">
-<div class="button">Run</div>
-<script type="text/paperscript" canvas="canvas-0">
-// Create a rectangle shaped path with its top left point at:
-// {x: 50, y: 25} and a size of {width: 50, height: 50}
-var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
-path.fillColor = 'black';
-
-function onFrame(event) {
-	// Every frame, rotate the path by 3 degrees:
-	path.rotate(3);
-}
-</script>
-<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
-</div>
-
-
-</div>
-
-</div>
-</div>
-		
-			
-<div id="onresize-member" class="member">
-<div id="onresize-link" class="member-link">
-<a name="onresize" href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
-</div>
-<div id="onresize-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onresize', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>Handler function that is called whenever a view is resized.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Function</tt>
-	</li>
-	</ul>
-	
-	<p>
-<b>Example</b> &mdash; Repositioning items when a view is resized:
-</p>
-
-
-<pre class="code">// Create a circle shaped path in the center of the view:
-var path = new Path.Circle(view.bounds.center, 30);
-path.fillColor = 'red';
-
-function onResize(event) {
-	// Whenever the view is resized, move the path to its center:
-	path.position = view.center;
-}</pre>
-
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-<!-- ============================== methods ================================ -->
-	<div class="reference-members"><h2>Methods</h2>
-		
-			
-<div id="activate-member" class="member">
-<div id="activate-link" class="member-link">
-<a name="activate" href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
-</div>
-<div id="activate-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activate', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Makes this view the active one, meaning <a href="../classes/PaperScope.html#view"><tt>paperScope.view</tt></a> will
-point to it.</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="remove-member" class="member">
-<div id="remove-link" class="member-link">
-<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-<div id="remove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Removes thsi view from the <a href="../classes/PaperScope.html#views"><tt>paperScope.views</tt></a> list and frees the
-associated canvas.</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="isvisible-member" class="member">
-<div id="isvisible-link" class="member-link">
-<a name="isvisible" href="#" onClick="return toggleMember('isvisible', false);"><tt><b>isVisible</b>()</tt></a>
-</div>
-<div id="isvisible-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('isvisible', false);"><tt><b>isVisible</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isvisible', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Checks whether the view is currently visible within the current browser
-viewport.</p>
-	
-	
-	<ul><b>Returns:</b>
-	
-		<li>
-<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;Whether the view is visible.
-</li>
-	
-	</ul>
-
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="scrollby-point-member" class="member">
-<div id="scrollby-point-link" class="member-link">
-<a name="scrollby-point" href="#" onClick="return toggleMember('scrollby-point', false);"><tt><b>scrollBy</b>(point)</tt></a>
-</div>
-<div id="scrollby-point-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('scrollby-point', false);"><tt><b>scrollBy</b>(point)</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scrollby-point', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Scrolls the view by the given vector.</p>
-	
-<ul><b>Parameters:</b>
-
-<li>
-<tt>point:</tt> 
-<a href="../classes/Point.html"><tt>Point</tt></a>
-
-
-</li>
-
-</ul>
-
-	
-	
-	
-</div>
-</div>
-</div>
-		
-			
-<div id="draw-member" class="member">
-<div id="draw-link" class="member-link">
-<a name="draw" href="#" onClick="return toggleMember('draw', false);"><tt><b>draw</b>()</tt></a>
-</div>
-<div id="draw-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('draw', false);"><tt><b>draw</b>()</tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('draw', false);"></div>
-<div class="clear"></div>
-</div>
-<div class="member-text">
-	<p>Draws the view.</p>
-	
-	
-	
-	
-</div>
-</div>
-</div>
-		
-	</div>
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/global.html b/dist/docs/classes/global.html
deleted file mode 100644
index 76ed322d..00000000
--- a/dist/docs/classes/global.html
+++ /dev/null
@@ -1,529 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>_global_</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/paper.js" type="text/javascript"></script>
-<script src="../resources/js/codemirror.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-class">
-<h1>Global Scope</h1>
-
-
-
-</div>
-
-
-
-
-
-	<div class="reference-members"><h2>Properties</h2>
-		
-			
-<div id="paper-member" class="member">
-<div id="paper-link" class="member-link">
-<a name="paper" href="#" onClick="return toggleMember('paper', false);"><tt><b>paper</b></tt></a>
-</div>
-<div id="paper-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('paper', false);"><tt><b>paper</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('paper', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>A reference to the currently active <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a> object.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Global PaperScope Properties (for PaperScript)</h3>
-
-<div id="project-member" class="member">
-<div id="project-link" class="member-link">
-<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-<div id="project-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The currently active project.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Project.html"><tt>Project</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="projects-member" class="member">
-<div id="projects-link" class="member-link">
-<a name="projects" href="#" onClick="return toggleMember('projects', false);"><tt><b>projects</b></tt></a>
-</div>
-<div id="projects-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('projects', false);"><tt><b>projects</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('projects', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The list of all open projects within the current Paper.js context.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Project.html"><tt>Project</tt></a> objects
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="view-member" class="member">
-<div id="view-link" class="member-link">
-<a name="view" href="#" onClick="return toggleMember('view', false);"><tt><b>view</b></tt></a>
-</div>
-<div id="view-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('view', false);"><tt><b>view</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('view', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The active view of the active project.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/View.html"><tt>View</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="views-member" class="member">
-<div id="views-link" class="member-link">
-<a name="views" href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
-</div>
-<div id="views-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('views', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The list of view of the active project.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/View.html"><tt>View</tt></a> objects
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="tool-member" class="member">
-<div id="tool-link" class="member-link">
-<a name="tool" href="#" onClick="return toggleMember('tool', false);"><tt><b>tool</b></tt></a>
-</div>
-<div id="tool-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tool', false);"><tt><b>tool</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tool', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The reference to the active tool.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<a href="../classes/Tool.html"><tt>Tool</tt></a>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="tools-member" class="member">
-<div id="tools-link" class="member-link">
-<a name="tools" href="#" onClick="return toggleMember('tools', false);"><tt><b>tools</b></tt></a>
-</div>
-<div id="tools-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('tools', false);"><tt><b>tools</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tools', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>The list of available tools.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		Array of <a href="../classes/Tool.html"><tt>Tool</tt></a> objects
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>View Event Handlers (for PaperScript)</h3>
-
-<div id="onframe-member" class="member">
-<div id="onframe-link" class="member-link">
-<a name="onframe" href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
-</div>
-<div id="onframe-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onframe', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>A reference to the <a href="../classes/View.html#onframe"><tt>view.onFrame</tt></a> handler function.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Function</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="onresize-member" class="member">
-<div id="onresize-link" class="member-link">
-<a name="onresize" href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
-</div>
-<div id="onresize-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onresize', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>A reference to the <a href="../classes/View.html#onresize"><tt>view.onResize</tt></a> handler function.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Function</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Mouse Event Handlers (for PaperScript)</h3>
-
-<div id="onmousedown-member" class="member">
-<div id="onmousedown-link" class="member-link">
-<a name="onmousedown" href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
-</div>
-<div id="onmousedown-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousedown', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>A reference to the <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> handler function.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Function</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="onmousedrag-member" class="member">
-<div id="onmousedrag-link" class="member-link">
-<a name="onmousedrag" href="#" onClick="return toggleMember('onmousedrag', false);"><tt><b>onMouseDrag</b></tt></a>
-</div>
-<div id="onmousedrag-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('onmousedrag', false);"><tt><b>onMouseDrag</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousedrag', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>A reference to the <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> handler function.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Function</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="onmousemove-member" class="member">
-<div id="onmousemove-link" class="member-link">
-<a name="onmousemove" href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
-</div>
-<div id="onmousemove-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousemove', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>A reference to the <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> handler function.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Function</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="onmouseup-member" class="member">
-<div id="onmouseup-link" class="member-link">
-<a name="onmouseup" href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
-</div>
-<div id="onmouseup-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmouseup', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>A reference to the <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> handler function.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Function</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-	<h3>Keyboard Event Handlers (for PaperScript)</h3>
-
-<div id="onkeydown-member" class="member">
-<div id="onkeydown-link" class="member-link">
-<a name="onkeydown" href="#" onClick="return toggleMember('onkeydown', false);"><tt><b>onKeyDown</b></tt></a>
-</div>
-<div id="onkeydown-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('onkeydown', false);"><tt><b>onKeyDown</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onkeydown', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>A reference to the <a href="../classes/Tool.html#onkeydown"><tt>tool.onKeyDown</tt></a> handler function.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Function</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-			
-<div id="onkeyup-member" class="member">
-<div id="onkeyup-link" class="member-link">
-<a name="onkeyup" href="#" onClick="return toggleMember('onkeyup', false);"><tt><b>onKeyUp</b></tt></a>
-</div>
-<div id="onkeyup-description" class="member-description hidden">
-<div class="member-header">
-<div class="member-title">
-<div class="member-link">
-<a href="#" onClick="return toggleMember('onkeyup', false);"><tt><b>onKeyUp</b></tt></a>
-</div>
-</div>
-<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onkeyup', false);"></div>
-<div class="clear"></div>
-</div>
-
-<div class="member-text">
-	<p>A reference to the <a href="../classes/Tool.html#onkeyup"><tt>tool.onKeyUp</tt></a> handler function.</p>
-	
-	
-	<ul><b>Type:</b>
-	<li>
-		<tt>Function</tt>
-	</li>
-	</ul>
-	
-	
-</div>
-
-</div>
-</div>
-		
-	</div>
-
-
-
-
-
-
-<!-- =========================== copyright notice ========================= -->
-<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
-<div class="content-end"></div>
-
-</body>
\ No newline at end of file
diff --git a/dist/docs/classes/index.html b/dist/docs/classes/index.html
deleted file mode 100644
index 871e0c3c..00000000
--- a/dist/docs/classes/index.html
+++ /dev/null
@@ -1,96 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Paper.js</title>
-<base target="classFrame">
-<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
-<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
-<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
-<script src="../resources/js/reference.js" type="text/javascript"></script>
-</head>
-<body class="reference">
-<div class="reference-packages">
-<h1>Paper.js</h1>
-<ul class="package-classes"><li><a href="../classes/global.html">Global Scope</a></li>
-<li>
-<h2>Basic Types</h2>
-<ul>
-<li><a href="../classes/Point.html">Point</a></li>
-<li><a href="../classes/Size.html">Size</a></li>
-<li><a href="../classes/Rectangle.html">Rectangle</a></li>
-<li><a href="../classes/Matrix.html">Matrix</a></li>
-</ul>
-<li>
-<h2>Items</h2>
-<ul>
-<li><a href="../classes/Item.html">Item</a></li>
-<li><a href="../classes/Layer.html">Layer</a></li>
-<li><a href="../classes/Group.html">Group</a></li>
-<li><a href="../classes/PlacedItem.html">PlacedItem</a></li>
-<li><a href="../classes/Raster.html">Raster</a></li>
-<li><a href="../classes/PlacedSymbol.html">PlacedSymbol</a></li>
-<li><hr /></li>
-<li><a href="../classes/HitResult.html">HitResult</a></li>
-</ul>
-<li>
-<h2>Paths</h2>
-<ul>
-<li><a href="../classes/PathItem.html">PathItem</a></li>
-<li><a href="../classes/Path.html">Path</a></li>
-<li><a href="../classes/CompoundPath.html">CompoundPath</a></li>
-<li><a href="../classes/Segment.html">Segment</a></li>
-<li><a href="../classes/Curve.html">Curve</a></li>
-<li><a href="../classes/PathStyle.html">PathStyle</a></li>
-<li><hr /></li>
-<li><a href="../classes/CurveLocation.html">CurveLocation</a></li>
-</ul>
-<li>
-<h2>Projects</h2>
-<ul>
-<li><a href="../classes/Project.html">Project</a></li>
-<li><a href="../classes/Symbol.html">Symbol</a></li>
-</ul>
-<li>
-<h2>Colors</h2>
-<ul>
-<li><a href="../classes/Color.html">Color</a></li>
-<li><a href="../classes/RgbColor.html">RgbColor</a></li>
-<li><a href="../classes/GrayColor.html">GrayColor</a></li>
-<li><a href="../classes/HsbColor.html">HsbColor</a></li>
-<li><a href="../classes/HslColor.html">HslColor</a></li>
-</ul>
-<li>
-<h2>Gradients</h2>
-<ul>
-<li><a href="../classes/GradientColor.html">GradientColor</a></li>
-<li><a href="../classes/Gradient.html">Gradient</a></li>
-<li><a href="../classes/GradientStop.html">GradientStop</a></li>
-</ul>
-<li>
-<h2>Interface</h2>
-<ul>
-<li><a href="../classes/View.html">View</a></li>
-<li><a href="../classes/Tool.html">Tool</a></li>
-<li><a href="../classes/ToolEvent.html">ToolEvent</a></li>
-<li><a href="../classes/Key.html">Key</a></li>
-<li><a href="../classes/KeyEvent.html">KeyEvent</a></li>
-</ul>
-<li>
-<h2>Typography</h2>
-<ul>
-<li><a href="../classes/TextItem.html">TextItem</a></li>
-<li><a href="../classes/PointText.html">PointText</a></li>
-<li><h3>Style</h3></li>
-<li><a href="../classes/CharacterStyle.html">CharacterStyle</a></li>
-<li><a href="../classes/ParagraphStyle.html">ParagraphStyle</a></li>
-</ul>
-<li>
-<h2>JavaScript</h2>
-<ul>
-<li><a href="../classes/PaperScope.html">PaperScope</a></li>
-<li><a href="../classes/PaperScript.html">PaperScript</a></li>
-</ul>
-</ul>
-</body>
-</html>
\ No newline at end of file
diff --git a/dist/docs/index.html b/dist/docs/index.html
deleted file mode 100644
index 198c41b4..00000000
--- a/dist/docs/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>
-Paper.js API
-</title>
-</head>
-<frameset cols="230,*">
-<frame src="classes/index.html" name="packageListFrame" title="All Packages">
-<frame src="about:blank" name="classFrame" title="Class and interface descriptions">
-</frameset>
-</html>
diff --git a/dist/docs/resources/css/assets/bullet.gif b/dist/docs/resources/css/assets/bullet.gif
deleted file mode 100644
index 1789496d2e8f2b05ba41eef2d231489051507b22..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 44
tcmZ?wbhEHbWM^PxXkcJ4H8o{mU{L(Y0wft2bU*}1hJlH>g`btd8UTw21o{8~

diff --git a/dist/docs/resources/css/codemirror.css b/dist/docs/resources/css/codemirror.css
deleted file mode 100644
index 98bbf7d3..00000000
--- a/dist/docs/resources/css/codemirror.css
+++ /dev/null
@@ -1,141 +0,0 @@
-.CodeMirror,
-.CodeMirror textarea,
-.CodeMirror pre {
-	font-family: Menlo, Consolas, "Vera Mono", monospace;
-	font-size: 12px;
-}
-
-.CodeMirror {
-	overflow: auto;
-	height: 100%;
-}
-
-.CodeMirror-gutter {
-	position: absolute;
-	left: 0;
-	top: 0;
-	min-width: 30px;
-	height: 100%;
-	background-color: #f4f4f4;
-	border-right: 1px solid #999;
-}
-
-.CodeMirror-gutter-text {
-	color: #aaa;
-	text-align: right;
-	padding: 2px 8px 2px 8px; /* 2px required for CodeMirror-selected */
-}
-
-.CodeMirror-gutter-text pre {
-	font-size: 10px;
-}
-
-.CodeMirror-lines {
-	background: #ffffff;
-	padding: 2px 0 2px 8px; /* 2px required for CodeMirror-selected */
-}
-
-.CodeMirror-lines pre.highlight {
-	background-color: #edf5fc;
-}
-
-/*
-.CodeMirror-lines pre:hover {
-	background-color: #edf5fc;
-}
-
-.CodeMirror-lines pre.highlight:hover {
-	background-color: #ffffff;
-}
-*/
-
-.CodeMirror pre {
-	line-height: 16px;
-	margin: 0;
-	padding: 0;
-	background: transparent;
-	font-family: inherit;
-}
-
-.CodeMirror-cursor {
-	z-index: 10;
-	position: absolute;
-	visibility: hidden;
-	border-left: 1px solid #7c7c7c !important;
-	height: 16px;
-}
-
-.CodeMirror-focused .CodeMirror-cursor {
-	visibility: visible;
-}
-
-span.CodeMirror-selected {
-	background: #ccc !important;
-	color: HighlightText !important;
-	padding: 2px 0 2px 0;
-}
-
-.CodeMirror-focused span.CodeMirror-selected {
-	background: Highlight !important;
-}
-
-.CodeMirror-matchingbracket {
-	background: #e3fc8d !important;
-}
-
-.CodeMirror-nonmatchingbracket {
-	color: #d62a28 !important;
-}
-
-/* JavaScript */
-
-span.cm-keyword {
-	color: #ff7800;
-}
-span.cm-atom,
-span.cm-number {
-	color: #3b5bb5;
-}
-span.cm-def,
-span.cm-variable-2,
-span.cm-variable-3 {
-	color: #3a4a64;
-}
-span.cm-variable {
-	color: #000;
-}
-span.cm-property {
-	color: #000;
-}
-span.cm-operator {
-	color: #000;
-}
-span.cm-comment {
-	color: #8c868f;
-}
-span.cm-string {
-	color: #409b1c;
-}
-span.cm-meta {
-	color: #555;
-}
-span.cm-error {
-	color: #f30;
-}
-span.cm-qualifier {
-	color: #555;
-}
-span.cm-builtin {
-	color: #30a;
-}
-span.cm-bracket {
-	color: #cc7;
-}
-span.cm-tag {
-	font-weight: bold;
-	color: #3b5bb5;
-}
-span.cm-attribute {
-	font-style: italic;
-	color: #3b5bb5;
-}
diff --git a/dist/docs/resources/css/paperscript.css b/dist/docs/resources/css/paperscript.css
deleted file mode 100644
index c296c3c1..00000000
--- a/dist/docs/resources/css/paperscript.css
+++ /dev/null
@@ -1,64 +0,0 @@
-.paperscript .button,
-.paperscript .explain {
-	display: none;
-	position: relative; /* position (top / right) relative to paperscriptcontainer */
-	float: right; /* align right as block */
-	font-size: 11px;
-	line-height: 16px;
-	padding: 2px 6px;
-	margin-bottom: -20px; /* move canvas up by 16px (height) + 2 * 2px (padding) */
-	border-radius: 4px;
-	-moz-border-radius: 4px;
-	-webkit-border-radius: 4px;
-	z-index: 1;
-	top: 8px; /* margin to top */
-}
-
-.paperscript .button {
-	right: 8px; /* margin to right */
-	background: #eee;
-}
-
-.paperscript .explain {
-	display: block;
-	right: 64px; /* margin to right */
-	background: #e3f4fc;
-	margin-bottom: -36px; /* (height) + 2 * 2px (padding) */
-}
-
-.paperscript:hover .button {
-	display: block;
-}
-
-.paperscript .button:hover {
-	background: #ddd;
-	cursor: pointer;
-}
-
-.paperscript .source {
-	overflow: auto;
-	border: 1px solid #999;
-}
-
-.paperscript .CodeMirror {
-	margin: 0 !important; /* Override any potential margins again */
-}
-
-.paperscript .CodeMirror-gutter-text,
-.paperscript .CodeMirror-lines {
-	padding-top: 10px;
-	padding-bottom: 10px;
-}
-
-.paperscript .canvas {
-	line-height: 0; /* prevent weird 5px padding under canvas elements */
-}
-
-.paperscript .canvas.border canvas {
-	border: 1px solid #999;
-}
-
-.paperscript.split .canvas {
-	border: 1px solid #999;
-	border-top: 0;
-}
diff --git a/dist/docs/resources/css/reference.css b/dist/docs/resources/css/reference.css
deleted file mode 100644
index d9e152c3..00000000
--- a/dist/docs/resources/css/reference.css
+++ /dev/null
@@ -1,128 +0,0 @@
-/* These styles are shared with the server version of docs */
-
-.reference h1, .reference h2, .reference h3 {
-	font-size: 13px;
-	font-weight: normal;
-	height: 18px; /* -2px so border-bottom aligns with contained links */
-	border-bottom: 1px solid;
-	margin-top: 0;
-	margin-bottom: 16px;
-}
-
-.reference h3 {
-	margin-top: 16px;
-	border-bottom-style: dotted;
-}
-
-.reference a tt {
-	line-height: 18px;
-}
-
-.reference p {
-	margin: 0 0 16px 0;
-}
-
-.reference ul {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-}
-
-.reference-list ul, .reference-inherited ul {
-	margin-left: 16px;
-}
-
-.reference hr {
-	border: none;
-	border-bottom: 1px dotted;
-}
-
-.reference-packages {
-	margin-left: 0px;
-}
-
-.reference-packages h2, .reference-packages h3, .reference-packages hr {
-	margin: 10px 0 10px 0;
-}
-
-.reference-packages .first h2 {
-	margin-top: 0;
-}
-
-* html .reference-packages img {
-	margin-top: 5px;
-}
-
-.reference-packages li {
-	list-style: none;
-	list-style-image: none; /* needed for ie 6 */
-}
-
-.reference-members {
-	margin-bottom: 16px;
-}
-
-.member-group-text {
-	margin-bottom: 16px;
-}
-
-.member-description {
-	border: 1px solid #999;
-	/* .member-header defines border-top for operator lists */
-	border-top: 0;
-	margin: 16px 0 16px 0;
-}
-
-.member-header {
-	border-top: 1px solid #999;
-	padding: 10px;
-}
-
-.member-title {
-	float: left;
-	width: 400px;
-}
-
-.member-close {
-	float: right;
-}
-
-.member-text {
-	border-top: 1px dashed #999;
-	padding: 10px 10px 0 10px;
-	margin-bottom: -6px; /* Compensate margins of p and ul to end up with 10px */
-}
-
-.reference ul,
-.reference .paperscript,
-.reference .CodeMirror {
-	margin-top: -8px; /* Move half way up close to previous paragraph */
-	margin-bottom: 16px;
-}
-
-.reference ul {
-	margin-top: 0; /* Clear the above -10px for ul again */
-}
-
-.member-link {
-	text-indent: -30px;
-	padding-left: 30px;
-}
-
-.reference-inherited ul li {
-	text-indent: -30px;
-	padding-left: 30px;
-}
-
-.package-classes {
-	padding-bottom: 4px;
-}
-
-.package-classes ul {
-	margin-left: 10px;
-	margin-bottom: 10px;
-}
-
-.reference h2 a {
-	font-weight: bold;
-}
diff --git a/dist/docs/resources/css/style.css b/dist/docs/resources/css/style.css
deleted file mode 100644
index e74a2dea..00000000
--- a/dist/docs/resources/css/style.css
+++ /dev/null
@@ -1,86 +0,0 @@
-body, select, input, textarea {
-	font-family: "Lucida Grande", Geneva, Verdana, Arial, sans-serif;
-}
-
-body {
-	background: #fff;
-	margin: 16px;
-	font-size: 13px;
-	line-height: 20px;
-	color: #000;
-	max-width: 540px;
-}
-
-select, input, textarea {
-	font-size: 11px;
-	margin: 0;
-	color: #000;
-}
-
-tt, pre {
-	font-family: Menlo, Consolas, "Vera Mono", monospace;
-	font-size: 12px;
-	line-height: 20px;
-}
-
-a {
-	color: #000;
-	text-decoration: none;
-	border-bottom: 1px solid #000;
-}
-
-img {
-	border: 0;
-}
-
-a:hover {
-	background: #e5e5e5;
-}
-
-p {
-	margin: 0 0 20px 0;
-}
-
-ul {
-	padding: 0;
-	margin: 0 0 20px 16px;
-	list-style: disc outside url(assets/bullet.gif);
-}
-
-ol {
-	padding: 0;
-	margin: 0 0 20px 0;
-}
-
-.clear {
-	clear: both;
-}
-
-.hidden {
-	display: none;
-}
-
-.reference-packages, .reference-packages a {
-	color: #009dec;
-	border-bottom: 0px;
-}
-
-/* Border-bottom color for headers and ruler */
-.reference-packages h2, .reference-packages h3, .reference-packages hr {
-	border-color: #009dec;
-}
-
-.reference-packages a:hover {
-	background: #e3f4fc;
-}
-
-.reference h1 {
-	font-size: 18px;
-	font-weight: normal;
-	line-height: 24px;
-	border: none;
-}
-
-.footer {
-	margin-top: 20px;
-}
diff --git a/dist/docs/resources/js/bootstrap.js b/dist/docs/resources/js/bootstrap.js
deleted file mode 100644
index 59d03a88..00000000
--- a/dist/docs/resources/js/bootstrap.js
+++ /dev/null
@@ -1,4040 +0,0 @@
-new function() { 
-	var fix = !this.__proto__ && [Function, Number, Boolean, String, Array, Date, RegExp];
-	if (fix)
-		for (var i in fix)
-			fix[i].prototype.__proto__ = fix[i].prototype;
-
-	var has = {}.hasOwnProperty
-		? function(obj, name) {
-			return (!fix || name != '__proto__') && obj.hasOwnProperty(name);
-		}
-		: function(obj, name) {
-			return obj[name] !== (obj.__proto__ || Object.prototype)[name];
-		};
-
-	function inject(dest, src, enumerable, base, preserve, generics) {
-
-		function field(name, dontCheck, generics) {
-			var val = src[name], func = typeof val == 'function', res = val, prev = dest[name];
-			if (generics && func && (!preserve || !generics[name])) generics[name] = function(bind) {
-				return bind && dest[name].apply(bind,
-					Array.prototype.slice.call(arguments, 1));
-			}
-			if ((dontCheck || val !== undefined && has(src, name)) && (!preserve || !prev)) {
-				if (func) {
-					if (prev && /\bthis\.base\b/.test(val)) {
-						var fromBase = base && base[name] == prev;
-						res = (function() {
-							var tmp = this.base;
-							this.base = fromBase ? base[name] : prev;
-							try { return val.apply(this, arguments); }
-							finally { tmp ? this.base = tmp : delete this.base; }
-						}).pretend(val);
-					}
-				}
-				dest[name] = res;
-			}
-		}
-		if (src) {
-			for (var name in src)
-				if (has(src, name) && !/^(statics|generics|preserve|prototype|constructor|__proto__|toString|valueOf)$/.test(name))
-					field(name, true, generics);
-			field('toString');
-			field('valueOf');
-		}
-	}
-
-	function extend(obj) {
-		function ctor(dont) {
-			if (fix) this.__proto__ = obj;
-			if (this.initialize && dont !== ctor.dont)
-				return this.initialize.apply(this, arguments);
-		}
-		ctor.prototype = obj;
-		ctor.toString = function() {
-			return (this.prototype.initialize || function() {}).toString();
-		}
-		return ctor;
-	}
-
-	inject(Function.prototype, {
-		inject: function(src) {
-			if (src) {
-				var proto = this.prototype, base = proto.__proto__ && proto.__proto__.constructor;
-				inject(proto, src, false, base && base.prototype, src.preserve, src.generics && this);
-				inject(this, src.statics, true, base, src.preserve);
-			}
-			for (var i = 1, l = arguments.length; i < l; i++)
-				this.inject(arguments[i]);
-			return this;
-		},
-
-		extend: function(src) {
-			var proto = new this(this.dont), ctor = proto.constructor = extend(proto);
-			ctor.dont = {};
-			inject(ctor, this, true);
-			return arguments.length ? this.inject.apply(ctor, arguments) : ctor;
-		},
-
-		pretend: function(fn) {
-			this.toString = function() {
-				return fn.toString();
-			}
-			this.valueOf = function() {
-				return fn.valueOf();
-			}
-			return this;
-		}
-	});
-
-	function each(obj, iter, bind) {
-		return obj ? (typeof obj.length == 'number'
-			? Array : Hash).prototype.each.call(obj, iter, bind) : bind;
-	}
-
-	Base = Object.extend({
-		has: function(name) {
-			return has(this, name);
-		},
-
-		each: function(iter, bind) {
-			return each(this, iter, bind);
-		},
-
-		inject: function() {
-			for (var i = 0, l = arguments.length; i < l; i++)
-				inject(this, arguments[i]);
-			return this;
-		},
-
-		extend: function() {
-			var res = new (extend(this));
-			return res.inject.apply(res, arguments);
-		},
-
-		statics: {
-			has: has,
-			each: each,
-
-			type: function(obj) {
-				return (obj || obj === 0) && (
-					obj._type || obj.nodeName && (
-						obj.nodeType == 1 && 'element' ||
-						obj.nodeType == 3 && 'textnode' ||
-						obj.nodeType == 9 && 'document')
-						|| obj.location && obj.frames && obj.history && 'window'
-						|| typeof obj) || null;
-			},
-
-			check: function(obj) {
-				return !!(obj || obj === 0);
-			},
-
-			pick: function() {
-				for (var i = 0, l = arguments.length; i < l; i++)
-					if (arguments[i] !== undefined)
-						return arguments[i];
-				return null;
-			},
-
-			iterator: function(iter) {
-				return !iter
-					? function(val) { return val }
-					: typeof iter != 'function'
-						? function(val) { return val == iter }
-						: iter;
-			},
-
-			stop: {}
-		}
-	}, {
-		generics: true,
-
-		debug: function() {
-			return /^(string|number|function|regexp)$/.test(Base.type(this)) ? this
-				: Base.each(this, function(val, key) { this.push(key + ': ' + val); }, []).join(', ');
-		},
-
-		clone: function() {
-			return Base.each(this, function(val, i) {
-				this[i] = val;
-			}, new this.constructor());
-		},
-
-		toQueryString: function() {
-			return Base.each(this, function(val, key) {
-				this.push(key + '=' + encodeURIComponent(val));
-			}, []).join('&');
-		}
-	});
-}
-
-$each = Base.each;
-$type = Base.type;
-$check = Base.check;
-$pick = Base.pick;
-$stop = $break = Base.stop;
-
-Enumerable = {
-	generics: true,
-	preserve: true,
-
-	findEntry: function(iter, bind) {
-		var that = this, iter = Base.iterator(iter), ret = null;
-		Base.each(this, function(val, key) {
-			var res = iter.call(bind, val, key, that);
-			if (res) {
-				ret = { key: key, value: val, result: res };
-				throw Base.stop;
-			}
-		});
-		return ret;
-	},
-
-	find: function(iter, bind) {
-		var entry = this.findEntry(iter, bind);
-		return entry && entry.result;
-	},
-
-	contains: function(iter) {
-		return !!this.findEntry(iter);
-	},
-
-	remove: function(iter, bind) {
-		var entry = this.findEntry(iter, bind);
-		if (entry) {
-			delete this[entry.key];
-			return entry.value;
-		}
-	},
-
-	filter: function(iter, bind) {
-		var that = this;
-		return Base.each(this, function(val, i) {
-			if (iter.call(bind, val, i, that))
-				this[this.length] = val;
-		}, []);
-	},
-
-	map: function(iter, bind) {
-		var that = this;
-		return Base.each(this, function(val, i) {
-			this[this.length] = iter.call(bind, val, i, that);
-		}, []);
-	},
-
-	every: function(iter, bind) {
-		var that = this;
-		return this.find(function(val, i) {
-			return !iter.call(this, val, i, that);
-		}, bind || null) == null;
-	},
-
-	some: function(iter, bind) {
-		return this.find(iter, bind || null) != null;
-	},
-
-	collect: function(iter, bind) {
-		var that = this, iter = Base.iterator(iter);
-		return Base.each(this, function(val, i) {
-		 	val = iter.call(bind, val, i, that);
-			if (val != null)
-				this[this.length] = val;
-		}, []);
-	},
-
-	max: function(iter, bind) {
-		var that = this, iter = Base.iterator(iter);
-		return Base.each(this, function(val, i) {
-			val = iter.call(bind, val, i, that);
-			if (val >= (this.max || val)) this.max = val;
-		}, {}).max;
-	},
-
-	min: function(iter, bind) {
-		var that = this, iter = Base.iterator(iter);
-		return Base.each(this, function(val, i) {
-			val = iter.call(bind, val, i, that);
-			if (val <= (this.min || val)) this.min = val;
-		}, {}).min;
-	},
-
-	pluck: function(prop) {
-		return this.map(function(val) {
-			return val[prop];
-		});
-	},
-
-	sortBy: function(iter, bind) {
-		var that = this, iter = Base.iterator(iter);
-		return this.map(function(val, i) {
-			return { value: val, compare: iter.call(bind, val, i, that) };
-		}, bind).sort(function(left, right) {
-			var a = left.compare, b = right.compare;
-			return a < b ? -1 : a > b ? 1 : 0;
-		}).pluck('value');
-	},
-
-	toArray: function() {
-		return this.map(function(value) {
-			return value;
-		});
-	}
-};
-
-Hash = Base.extend(Enumerable, {
-	generics: true,
-
-	initialize: function(arg) {
-		if (typeof arg == 'string') {
-			for (var i = 0, l = arguments.length; i < l; i += 2)
-				this[arguments[i]] = arguments[i + 1];
-		} else {
-			this.append.apply(this, arguments);
-		}
-		return this;
-	},
-
-	each: function(iter, bind) {
-		var bind = bind || this, iter = Base.iterator(iter), has = Base.has;
-		try {
-			for (var i in this)
-				if (has(this, i))
-					iter.call(bind, this[i], i, this);
-		} catch (e) {
-			if (e !== Base.stop) throw e;
-		}
-		return bind;
-	},
-
-	append: function() {
-		for (var i = 0, l = arguments.length; i < l; i++) {
-			var obj = arguments[i];
-			for (var key in obj)
-				if (Base.has(obj, key))
-					this[key] = obj[key];
-		}
-		return this;
-	},
-
-	merge: function() {
-		return Array.each(arguments, function(obj) {
-			Base.each(obj, function(val, key) {
-				this[key] = Base.type(this[key]) == 'object'
-					? Hash.prototype.merge.call(this[key], val)
-					: Base.type(val) == 'object' ? Base.clone(val) : val;
-			}, this);
-		}, this);
-	},
-
-	getKeys: function() {
-		return Hash.getKeys(this);
-	},
-
-	getValues: Enumerable.toArray,
-
-	getSize: function() {
-		return this.each(function() {
-			this.size++;
-		}, { size: 0 }).size;
-	},
-
-	statics: {
-		create: function(obj) {
-			return arguments.length == 1 && obj.constructor == Hash
-				? obj : Hash.prototype.initialize.apply(new Hash(), arguments);
-		},
-
-		getKeys: Object.keys || function(obj) {
-			return Hash.map(function(val, key) {
-				return key;
-			});
-		}
-	}
-});
-
-$H = Hash.create;
-
-Array.inject({
-	generics: true,
-	preserve: true,
-	_type: 'array',
-
-	forEach: function(iter, bind) {
-		for (var i = 0, l = this.length; i < l; i++)
-			iter.call(bind, this[i], i, this);
-	},
-
-	indexOf: function(obj, i) {
-		i = i || 0;
-		if (i < 0) i = Math.max(0, this.length + i);
-		for (var l = this.length; i < l; i++)
-			if (this[i] == obj) return i;
-		return -1;
-	},
-
-	lastIndexOf: function(obj, i) {
-		i = i != null ? i : this.length - 1;
-		if (i < 0) i = Math.max(0, this.length + i);
-		for (; i >= 0; i--)
-			if (this[i] == obj) return i;
-		return -1;
-	},
-
-	filter: function(iter, bind) {
-		var res = [];
-		for (var i = 0, l = this.length; i < l; i++) {
-			var val = this[i];
-			if (iter.call(bind, val, i, this))
-				res[res.length] = val;
-		}
-		return res;
-	},
-
-	map: function(iter, bind) {
-		var res = new Array(this.length);
-		for (var i = 0, l = this.length; i < l; i++)
-			res[i] = iter.call(bind, this[i], i, this);
-		return res;
-	},
-
-	every: function(iter, bind) {
-		for (var i = 0, l = this.length; i < l; i++)
-			if (!iter.call(bind, this[i], i, this))
-				return false;
-		return true;
-	},
-
-	some: function(iter, bind) {
-		for (var i = 0, l = this.length; i < l; i++)
-			if (iter.call(bind, this[i], i, this))
-				return true;
-		return false;
-	},
-
-	reduce: function(fn, value) {
-		var i = 0;
-		if (arguments.length < 2 && this.length) value = this[i++];
-		for (var l = this.length; i < l; i++)
-			value = fn.call(null, value, this[i], i, this);
-		return value;
-	},
-
-	statics: {
-		isArray: function(obj) {
-			return Object.prototype.toString.call(obj) === '[object Array]';
-		}
-	}
-}, Enumerable, {
-	generics: true,
-
-	each: function(iter, bind) {
-		try {
-			Array.prototype.forEach.call(this, Base.iterator(iter), bind = bind || this);
-		} catch (e) {
-			if (e !== Base.stop) throw e;
-		}
-		return bind;
-	},
-
-	collect: function(iter, bind) {
-		var that = this;
-		return this.each(function(val, i) {
-			if ((val = iter.call(bind, val, i, that)) != null)
-				this[this.length] = val;
-		}, []);
-	},
-
-	findEntry: function(iter, bind) {
-		if (typeof iter != 'function') {
-			var i = this.indexOf(iter);
-			return i == -1 ? null : { key: i, value: iter, result: iter };
-		}
-		return Enumerable.findEntry.call(this, iter, bind);
-	},
-
-	remove: function(iter, bind) {
-		var entry = this.findEntry(iter, bind);
-		if (entry) {
-			this.splice(entry.key, 1);
-			return entry.value;
-		}
-	},
-
-	toArray: function() {
-		return Array.prototype.slice.call(this);
-	},
-
-	clone: function() {
-		return this.toArray();
-	},
-
-	clear: function() {
-		this.length = 0;
-	},
-
-	compact: function() {
-		return this.filter(function(value) {
-			return value != null;
-		});
-	},
-
-	append: function(items) {
-		for (var i = 0, l = items.length; i < l; i++)
-			this[this.length++] = items[i];
-		return this;
-	},
-
-	associate: function(obj) {
-		if (!obj)
-			obj = this;
-		else if (typeof obj == 'function')
-			obj = this.map(obj);
-		if (obj.length != null) {
-			var that = this;
-			return Base.each(obj, function(name, index) {
-				this[name] = that[index];
-				if (index == that.length)
-					throw Base.stop;
-			}, {});
-		} else {
-			obj = Hash.append({}, obj);
-			return Array.each(this, function(val) {
-				var type = Base.type(val);
-				Base.each(obj, function(hint, name) {
-					if (hint == 'any' || type == hint) {
-						this[name] = val;
-						delete obj[name];
-						throw Base.stop;
-					}
-				}, this);
-			}, {});
-		}
-	},
-
-	flatten: function() {
-		return Array.each(this, function(val) {
-			if (val != null && val.flatten) this.append(val.flatten());
-			else this.push(val);
-		}, []);
-	},
-
-	swap: function(i, j) {
-		var tmp = this[j];
-		this[j] = this[i];
-		this[i] = tmp;
-		return tmp;
-	},
-
-	shuffle: function() {
-		var res = this.clone();
-		var i = this.length;
-		while (i--) res.swap(i, Math.rand(i + 1));
-		return res;
-	},
-
-	pick: function() {
-		return this[Math.rand(this.length)];
-	},
-
-	getFirst: function() {
-		return this[0];
-	},
-
-	getLast: function() {
-		return this[this.length - 1];
-	}
-}, new function() {
-	function combine(subtract) {
-		return function(items) {
-			var res = new this.constructor();
-			for (var i = this.length - 1; i >= 0; i--)
-				if (subtract == !Array.find(items, this[i]))
-					res.push(this[i]);
-			return res;
-		}
-	}
-
-	return {
-		subtract: combine(true),
-
-		intersect: combine(false)
-	}
-});
-
-Array.inject(new function() {
-	var proto = Array.prototype, fields = ['push','pop','shift','unshift','sort',
-		'reverse','join','slice','splice','forEach','indexOf','lastIndexOf',
-		'filter','map','every','some','reduce','concat'].each(function(name) {
-		this[name] = proto[name];
-	}, { generics: true, preserve: true });
-
-	Array.inject(fields);
-
-	Hash.append(fields, proto, {
-		clear: function() {
-			for (var i = 0, l = this.length; i < l; i++)
-				delete this[i];
-			this.length = 0;
-		},
-
-		concat: function(list) {
-			return Browser.WEBKIT
-				? new Array(this.length + list.length).append(this).append(list)
-				: Array.concat(this, list);
-		},
-
-		toString: proto.join,
-
-		length: 0
-	});
-
-	return {
-		statics: {
-			create: function(obj) {
-				if (obj == null)
-					return [];
-				if (obj.toArray)
-					return obj.toArray();
-				if (typeof obj.length == 'number')
-					return Array.prototype.slice.call(obj);
-				return [obj];
-			},
-
-			convert: function(obj) {
-				return Base.type(obj) == 'array' ? obj : Array.create(obj);
-			},
-
-			extend: function(src) {
-				var ret = Base.extend(fields, src);
-				ret.extend = Function.extend;
-				return ret;
-			}
-		}
-	};
-});
-
-$A = Array.create;
-
-Function.inject(new function() {
-
-	function timer(set) {
-		return function(delay, bind, args) {
-			var func = this.wrap(bind, args);
-			if (delay === undefined)
-				return func();
-			var timer = set(func, delay);
-			func.clear = function() {
-				clearTimeout(timer);
-				clearInterval(timer);
-			};
-			return func;
-		};
-	}
-
-	return {
-		generics: true,
-		preserve: true,
-
-		delay: timer(setTimeout),
-		periodic: timer(setInterval),
-
-		bind: function(bind) {
-			var that = this, slice = Array.prototype.slice,
-				args = arguments.length > 1 ? slice.call(arguments, 1) : null;
-			return function() {
-				return that.apply(bind, args ? arguments.length > 0
-					? args.concat(slice.call(arguments)) : args : arguments);
-			}
-		},
-
-		wrap: function(bind, args) {
-			var that = this;
-			return function() {
-				return that.apply(bind, args || arguments);
-			}
-		}
-	}
-});
-
-Number.inject({
-	_type: 'number',
-
-	limit: function(min, max) {
-		return Math.min(max, Math.max(min, this));
-	},
-
-	times: function(func, bind) {
-		for (var i = 0; i < this; i++)
-			func.call(bind, i);
-		return bind || this;
-	},
-
-	toInt: function(base) {
-		return parseInt(this, base || 10);
-	},
-
-	toFloat: function() {
-		return parseFloat(this);
-	},
-
-	toPaddedString: function(length, base, prefix) {
-		var str = this.toString(base || 10);
-		return (prefix || '0').times(length - str.length) + str;
-	}
-});
-
-String.inject({
-	_type: 'string',
-
-	test: function(exp, param) {
-		return new RegExp(exp, param || '').test(this);
-	},
-
-	toArray: function() {
-		return this ? this.split(/\s+/) : [];
-	},
-
-	toInt: Number.prototype.toInt,
-
-	toFloat: Number.prototype.toFloat,
-
-	camelize: function(separator) {
-		return this.replace(separator ? new RegExp('[' + separator + '](\\w)', 'g') : /-(\w)/g, function(all, chr) {
-			return chr.toUpperCase();
-		});
-	},
-
-	uncamelize: function(separator) {
-		separator = separator || ' ';
-		return this.replace(/[a-z][A-Z0-9]|[0-9][a-zA-Z]|[A-Z]{2}[a-z]/g, function(match) {
-			return match.charAt(0) + separator + match.substring(1);
-		});
-	},
-
-	hyphenate: function(separator) {
-		return this.uncamelize(separator || '-').toLowerCase();
-	},
-
-	capitalize: function() {
-		return this.replace(/\b[a-z]/g, function(match) {
-			return match.toUpperCase();
-		});
-	},
-
-	escapeRegExp: function() {
-		return this.replace(/([-.*+?^${}()|[\]\/\\])/g, '\\$1');
-	},
-
-	trim: function(exp) {
-		exp = exp ? '[' + exp + ']' : '\\s';
-		return this.replace(new RegExp('^' + exp + '+|' + exp + '+$', 'g'), '');
-	},
-
-	clean: function() {
-		return this.replace(/\s{2,}/g, ' ').trim();
-	},
-
-	contains: function(string, sep) {
-		return (sep ? (sep + this + sep).indexOf(sep + string + sep) : this.indexOf(string)) != -1;
-	},
-
-	times: function(count) {
-		return count < 1 ? '' : new Array(count + 1).join(this);
-	},
-
-	isHtml: function() {
-		return /^[^<]*(<(.|\s)+>)[^>]*$/.test(this);
-	}
-});
-
-RegExp.inject({
-	_type: 'regexp'
-});
-
-Date.inject({
-	statics: {
-		SECOND: 1000,
-		MINUTE: 60000,
-		HOUR: 3600000,
-		DAY: 86400000,
-		WEEK: 604800000, 
-		MONTH: 2592000000, 
-		YEAR: 31536000000, 
-
-		now: Date.now || function() {
-			return +new Date();
-		}
-	}
-});
-
-Math.rand = function(first, second) {
-	return second == undefined
-		? Math.rand(0, first)
-		: Math.floor(Math.random() * (second - first) + first);
-}
-
-Array.inject({
-	hexToRgb: function(toArray) {
-		if (this.length >= 3) {
-			var rgb = [];
-			for (var i = 0; i < 3; i++)
-				rgb.push((this[i].length == 1 ? this[i] + this[i] : this[i]).toInt(16));
-			return toArray ? rgb : 'rgb(' + rgb.join(',') + ')';
-		}
-	},
-
-	rgbToHex: function(toArray) {
-		if (this.length >= 3) {
-			if (this.length == 4 && this[3] == 0 && !toArray) return 'transparent';
-			var hex = [];
-			for (var i = 0; i < 3; i++) {
-				var bit = (this[i] - 0).toString(16);
-				hex.push(bit.length == 1 ? '0' + bit : bit);
-			}
-			return toArray ? hex : '#' + hex.join('');
-		}
-	},
-
-	rgbToHsb: function() {
-		var r = this[0], g = this[1], b = this[2];
-		var hue, saturation, brightness;
-		var max = Math.max(r, g, b), min = Math.min(r, g, b);
-		var delta = max - min;
-		brightness = max / 255;
-		saturation = (max != 0) ? delta / max : 0;
-		if (saturation == 0) {
-			hue = 0;
-		} else {
-			var rr = (max - r) / delta;
-			var gr = (max - g) / delta;
-			var br = (max - b) / delta;
-			if (r == max) hue = br - gr;
-			else if (g == max) hue = 2 + rr - br;
-			else hue = 4 + gr - rr;
-			hue /= 6;
-			if (hue < 0) hue++;
-		}
-		return [Math.round(hue * 360), Math.round(saturation * 100), Math.round(brightness * 100)];
-	},
-
-	hsbToRgb: function() {
-		var br = Math.round(this[2] / 100 * 255);
-		if (this[1] == 0) {
-			return [br, br, br];
-		} else {
-			var hue = this[0] % 360;
-			var f = hue % 60;
-			var p = Math.round((this[2] * (100 - this[1])) / 10000 * 255);
-			var q = Math.round((this[2] * (6000 - this[1] * f)) / 600000 * 255);
-			var t = Math.round((this[2] * (6000 - this[1] * (60 - f))) / 600000 * 255);
-			switch (Math.floor(hue / 60)) {
-				case 0: return [br, t, p];
-				case 1: return [q, br, p];
-				case 2: return [p, br, t];
-				case 3: return [p, q, br];
-				case 4: return [t, p, br];
-				case 5: return [br, p, q];
-			}
-		}
-	}
-});
-
-String.inject({
-	hexToRgb: function(toArray) {
-		var hex = this.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
-		return hex && hex.slice(1).hexToRgb(toArray);
-	},
-
-	rgbToHex: function(toArray) {
-		var rgb = this.match(/\d{1,3}/g);
-		return rgb && rgb.rgbToHex(toArray);
-	}
-});
-
-Json = function(JSON) {
-	var special = { '\b': '\\b', '\t': '\\t', '\n': '\\n', '\f': '\\f', '\r': '\\r', '"' : '\\"', "'" : "\\'", '\\': '\\\\' };
-	return {
-		encode: JSON
-			? function(obj, properties) {
-				return JSON.stringify(obj, properties || Browser.TRIDENT && function(key, value) {
-					return key == '__proto__' ? undefined : value;
-				});
-			}
-			: function(obj, properties) {
-				if (Base.type(properties) == 'array') {
-					properties = properties.each(function(val) {
-						this[val] = true;
-					}, {});
-				}
-				switch (Base.type(obj)) {
-					case 'string':
-						return '"' + obj.replace(/[\x00-\x1f\\"]/g, function(chr) {
-							return special[chr] || '\\u' + chr.charCodeAt(0).toPaddedString(4, 16);
-						}) + '"';
-					case 'array':
-						return '[' + obj.collect(function(val) {
-							return Json.encode(val, properties);
-						}) + ']';
-					case 'object':
-					case 'hash':
-						return '{' + Hash.collect(obj, function(val, key) {
-							if (!properties || properties[key]) {
-								val = Json.encode(val, properties);
-								if (val !== undefined)
-									return Json.encode(key) + ':' + val;
-							}
-						}) + '}';
-					case 'function':
-						return undefined;
-					default:
-						return obj + '';
-				}
-				return null;
-			},
-
-		decode: JSON
-			? function(str, secure) {
-				try {
-					return JSON.parse(str);
-				} catch (e) {
-					return null;
-				}
-			}
-			: function(str, secure) {
-				try {
-					return Base.type(str) == 'string' && (str = str.trim()) &&
-						(!secure || /^[\],:{}\s]*$/.test(
-							str.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, "@")
-								.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, "]")
-								.replace(/(?:^|:|,)(?:\s*\[)+/g, "")))
-									? (new Function('return ' + str))() : null;
-				} catch (e) {
-					return null;
-				}
-			}
-	};
-}(this.JSON);
-
-Browser = new function() {
-	var name = window.orientation != undefined ? 'ipod'
-			: (navigator.platform.match(/mac|win|linux|nix/i) || ['other'])[0].toLowerCase();
-	var fields = {
-		PLATFORM: name,
-		XPATH: !!document.evaluate,
-		QUERY: !!document.querySelector
-	};
-	fields[name.toUpperCase()] = true;
-
-	function getVersion(prefix, min, max) {
-		var ver = (new RegExp(prefix + '([\\d.]+)', 'i').exec(navigator.userAgent) || [0, '0'])[1].split('.');
-		return (ver.slice(0, min).join('') + '.' + ver.slice(min, max || ver.length).join('')).toFloat();
-	}
-
-	var engines = {
-		presto: function() {
-			return !window.opera ? false : getVersion('Presto/', 2) || getVersion('Opera[/ ]', 1);
-		},
-
-		trident: function() {
-			return !window.ActiveXObject ? false : getVersion('MSIE ', 1);
-		},
-
-		webkit: function() {
-			return navigator.taintEnabled ? false : getVersion('WebKit/', 1, 2);
-		},
-
-		gecko: function() {
-			return !document.getBoxObjectFor && window.mozInnerScreenX == null ? false : getVersion('rv:', 2);
-		}
-	};
-
-	for (var engine in engines) {
-		var version = engines[engine]();
-		if (version) {
-			fields.ENGINE = engine;
-			fields.VERSION = version;
-			engine = engine.toUpperCase();
-			fields[engine] = true;
-			fields[(engine + version).replace(/\./g, '')] = true;
-			break;
-		}
-	}
-
-	fields.log = function() {
-		if (!Browser.TRIDENT && window.console && console.log)
-			console.log.apply(console, arguments);
-		else
-			(window.console && console.log
-				|| window.opera && opera.postError
-				|| alert)(Array.join(arguments, ' '));
-	}
-
-	return fields;
-};
-
-DomNodes = Array.extend(new function() {
-	var unique = 0;
-	return {
-		initialize: function(nodes) {
-			this._unique = unique++;
-			this.append(nodes && nodes.length != null && !nodes.nodeType
-				? nodes : arguments);
-		},
-
-		push: function() {
-			this.append(arguments);
-			return this.length;
-		},
-
-		append: function(items) {
-			for (var i = 0, l = items.length; i < l; i++) {
-				var el = items[i];
-				if ((el = el && (el._wrapper || DomNode.wrap(el))) && el._unique != this._unique) {
-					el._unique = this._unique;
-					this[this.length++] = el;
-				}
-			}
-			return this;
-		},
-
-		toNode: function() {
-			return this;
-		},
-
-		statics: {
-			inject: function(src) {
-				var proto = this.prototype;
-				this.base(Base.each(src || {}, function(val, key) {
-					if (typeof val == 'function') {
-						var func = val, prev = proto[key];
-						var count = func.length, prevCount = prev && prev.length;
-						val = function() {
-							var args = arguments, values;
-							if (prev && args.length == prevCount
-								|| (args.length > count && args.length <= prevCount))
-								return prev.apply(this, args);
-							this.each(function(obj) {
-								var ret = (obj[key] || func).apply(obj, args);
-								if (ret !== undefined && ret != obj) {
-									values = values || (DomNode.isNode(ret)
-										? new obj._collection() : []);
-									values.push(ret);
-								}
-							});
-							return values || this;
-						}
-					}
-					this[key] = val;
-				}, {}));
-				for (var i = 1, l = arguments.length; i < l; i++)
-					this.inject(arguments[i]);
-				return this;
-			}
-		}
-	};
-});
-
-DomNode = Base.extend(new function() {
-	var nodes = [];
-	var tags = {}, classes = {}, classCheck, unique = 0;
-
-	function dispose(force) {
-		for (var i = nodes.length - 1; i >= 0; i--) {
-			var el = nodes[i];
-			if (force || (!el || el != window && el != document &&
-				(!el.parentNode || !el.offsetParent))) {
-				if (el) {
-					var obj = el._wrapper;
-					if (obj && obj.finalize) obj.finalize();
-					el._wrapper = el._unique = null;
-				}
-				if (!force) nodes.splice(i, 1);
-			}
-		}
-	}
-
-	function inject(src) {
-		src = src || {};
-		(src._methods || []).each(function(name) {
-			src[name] = function(arg) {
-				var ret = this.$[name] && this.$[name](arg);
-				return ret === undefined ? this : ret;
-			}
-		});
-		(src._properties || []).each(function(name) {
-			var part = name.capitalize(), prop = name.toLowerCase();
-			src['get' + part] = function() {
-				return this.getProperty(prop);
-			}
-			src['set' + part] = function(value) {
-				return this.setProperty(prop, value);
-			}
-		});
-		delete src._methods;
-		delete src._properties;
-		return Function.inject.call(this, src);
-	}
-
-	function getConstructor(el) {
-		var match;
-		return classCheck && el.className && (match = el.className.match(classCheck)) && match[2] && classes[match[2]] ||
-			el.tagName && tags[el.tagName] ||
-			el.className !== undefined && HtmlElement ||
-			el.nodeType == 1 && DomElement ||
-			el.nodeType == 3 && DomTextNode ||
-			el.nodeType == 9 && (el.documentElement.nodeName.toLowerCase() == 'html' && HtmlDocument || DomDocument) ||
-			el.location && el.frames && el.history && DomWindow ||
-			DomNode;
-	}
-
-	var dont = {};
-
-	return {
-		_type: 'node',
-		_collection: DomNodes,
-		_initialize: true,
-
-		initialize: function(el, props, doc) {
-			if (!el) return null;
-			if (this._tag && Base.type(el) == 'object') {
-				props = el;
-				el = this._tag;
-			}
-			if (typeof(el) == 'string') {
-				el = DomElement.create(el, props, doc);
-			} else if (el._wrapper) {
-				return el._wrapper;
-			}
-			if (props === dont) {
-				props = null;
-			} else {
-				var ctor = getConstructor(el);
-				if (ctor != this.constructor)
-					return new ctor(el, props);
-			}
-			this.$ = el;
-			try {
-				el._wrapper = this;
-				nodes[nodes.length] = el;
-			} catch (e) {} 
-			if (props) this.set(props);
-		},
-
-		statics: {
-			inject: function(src) {
-				if (src) {
-					var proto = this.prototype, that = this;
-					src.statics = Base.each(src, function(val, name) {
-						if (typeof val == 'function' && !this[name] && !that[name]) {
-							this[name] = function(el, param1, param2) {
-								if (el) try {
-									proto.$ = el.$ || el;
-									return proto[name](param1, param2);
-								} finally {
-									delete proto.$;
-								}
-							}
-						}
-					}, src.statics || {});
-					inject.call(this, src);
-					delete src.toString;
-					proto._collection.inject(src);
-				}
-				for (var i = 1, l = arguments.length; i < l; i++)
-					this.inject(arguments[i]);
-				return this;
-			},
-
-			extend: function(src) {
-				var ret = this.base();
-				var init = src.initialize;
-				if (init) src.initialize = function(el, props) {
-					var ret = this._initialize && this.base(el, props);
-					if (ret) return ret;
-					init.apply(this, arguments);
-				}
-				inject.call(ret, src);
-				if (ret.prototype._collection == this.prototype._collection)
-					ret.inject = inject;
-				if (src) {
-					if (src._tag)
-						tags[src._tag.toLowerCase()] = tags[src._tag.toUpperCase()] = ret;
-					if (src._class) {
-						classes[src._class] = ret;
-						classCheck = new RegExp('(^|\\s)(' + Base.each(classes, function(val, name) {
-							this.push(name);
-						}, []).join('|') + ')(\\s|$)');
-						if (!src._lazy && src.initialize) Browser.document.addEvent('domready', function() {
-							this.getElements('.' + src._class);
-						});
-					}
-				}
-				return ret;
-			},
-
-			wrap: function(el) {
-				return el ? typeof el == 'string' 
-					? DomElement.get(el)
-					: el._wrapper || el._collection && el || new (getConstructor(el))(el, dont)
-						: null;
-			},
-
-			unwrap: function(el) {
-				return el && el.$ || el;
-			},
-
-			unique: function(el) {
-				if (!el._unique) {
-					nodes.push(el);
-					el._unique = ++unique;
-				}
-			},
-
-			isNode: function(obj) {
-				return /^(element|node|textnode|document)$/.test(
-					typeof obj == 'string' ? obj : Base.type(obj));
-			},
-
-			dispose: function() {
-				dispose(true);
-			}
-		}
-	}
-});
-
-DomNode.inject(new function() {
-	var bools = ['compact', 'nowrap', 'ismap', 'declare', 'noshade', 'checked',
-		'disabled', 'readonly', 'multiple', 'selected', 'noresize', 'defer'
-	].associate();
-	var properties = Hash.append({ 
-		text: Browser.TRIDENT || Browser.WEBKIT && Browser.VERSION < 420 || Browser.PRESTO && Browser.VERSION < 9
-			? function(node) {
-				return node.$.innerText !== undefined ? 'innerText' : 'nodeValue'
-			} : 'textContent',
-		html: 'innerHTML', 'class': 'className', className: 'className', 'for': 'htmlFor'
-	}, [ 
-		'value', 'accessKey', 'cellPadding', 'cellSpacing', 'colSpan',
-		'frameBorder', 'maxLength', 'readOnly', 'rowSpan', 'tabIndex',
-		'selectedIndex', 'useMap', 'width', 'height'
-	].associate(function(name) {
-		return name.toLowerCase();
-	}), bools);
-
-	var clones = { input: 'checked', option: 'selected', textarea: Browser.WEBKIT && Browser.VERSION < 420 ? 'innerHTML' : 'value' };
-
-	function handle(that, prefix, name, value) {
-		var ctor = that.__proto__.constructor;
-		var handlers = ctor.handlers = ctor.handlers || { get: {}, set: {} };
-		var list = handlers[prefix];
-		var fn = name == 'events' && prefix == 'set' ? that.addEvents : list[name];
-		if (fn === undefined)
-			fn = list[name] = that[prefix + name.capitalize()] || null;
-		return fn
-			? fn[Base.type(value) == 'array' ? 'apply' : 'call'](that, value)
-			: that[prefix + 'Property'](name, value);
-	}
-
-	function toNodes(elements) {
-		var els = Base.type(elements) == 'array' ? elements : Array.create(arguments);
-		var created = els.find(function(el) {
-			return !DomNode.isNode(el);
-		});
-		var result = els.toNode(this.getDocument());
-		return {
-			array: result ? (Base.type(result) == 'array' ? result : [result]) : [],
-			result: created && result
-		};
-	}
-
-	var fields = {
-		_properties: ['text'],
-
-		set: function(name, value) {
-			switch (Base.type(name)) {
-				case 'string':
-					return handle(this, 'set', name, value);
-				case 'object':
-					return Base.each(name, function(value, key) {
-						handle(this, 'set', key, value);
-					}, this);
-			}
-			return this;
-		},
-
-		get: function(name) {
-			return handle(this, 'get', name);
-		},
-
-		getDocument: function() {
-			return DomNode.wrap(this.$.ownerDocument);
-		},
-
-		getWindow: function() {
-			return this.getDocument().getWindow();
-		},
-
-		getPreviousNode: function() {
-			return DomNode.wrap(this.$.previousSibling);
-		},
-
-		getNextNode: function() {
-			return DomNode.wrap(this.$.nextSibling);
-		},
-
-		getFirstNode: function() {
-			return DomNode.wrap(this.$.firstChild);
-		},
-
-		getLastNode: function() {
-			return DomNode.wrap(this.$.lastChild);
-		},
-
-		getParentNode: function() {
-			return DomNode.wrap(this.$.parentNode);
-		},
-
-		getChildNodes: function() {
-		 	return new DomNodes(this.$.childNodes);
-		},
-
-		hasChildNodes: function() {
-			return this.$.hasChildNodes();
-		},
-
-		appendChild: function(el) {
-			if (el = DomNode.wrap(el)) {
-				var text = Browser.TRIDENT && el.$.text;
-				if (text) el.$.text = '';
-				this.$.appendChild(el.$);
-				if (text) el.$.text = text;
-			}
-			return this;
-		},
-
-		appendChildren: function() {
-			return Array.flatten(arguments).each(function(el) {
-				this.appendChild($(DomNode.wrap(el)));
-			}, this);
-		},
-
-		appendText: function(text) {
-			return this.injectBottom(this.getDocument().createTextNode(text));
-		},
-
-		prependText: function(text) {
-			return this.injectTop(this.getDocument().createTextNode(text));
-		},
-
-		remove: function() {
-			if (this.$.parentNode)
-				this.$.parentNode.removeChild(this.$);
-			return this;
-		},
-
-		removeChild: function(el) {
-			el = DomNode.wrap(el);
-			this.$.removeChild(el.$);
-			return el;
-		},
-
-		removeChildren: function() {
-			var nodes = this.getChildNodes();
-			nodes.remove();
-			return nodes;
-		},
-
-		replaceWith: function(el) {
-			if (this.$.parentNode) {
-				el = toNodes.apply(this, arguments);
-				var els = el.array;
-				if (els.length > 0)
-					this.$.parentNode.replaceChild(els[0].$, this.$);
-				for (var i = els.length - 1; i > 0; i--)
-					els[i].insertAfter(els[0]);
-				return el.result;
-			}
-			return null;
-		},
-
-		wrap: function() {
-			var el = this.injectBefore.apply(this, arguments), last;
-			do {
-				last = el;
-				el = el.getFirst();
-			} while(el);
-			last.appendChild(this);
-			return last;
-		},
-
-		clone: function(contents) {
-			var clone = this.$.cloneNode(!!contents);
-			function clean(left, right) {
-				if (Browser.TRIDENT) {
-					left.clearAttributes();
-					left.mergeAttributes(right);
-					left.removeAttribute('_wrapper');
-					left.removeAttribute('_unique');
-					if (left.options)
-						for (var l = left.options, r = right.options, i = l.length; i--;)
-							l[i].selected = r[i].selected;
-				}
-				var name = clones[right.tagName.toLowerCase()];
-				if (name && right[name])
-					left[name] = right[name];
-				if (contents)
-					for (var l = left.childNodes, r = right.childNodes, i = l.length; i--;)
-						clean(l[i], r[i]);
-			}
-			clean(clone, this.$);
-			return DomNode.wrap(clone);
-		},
-
-		hasProperty: function(name) {
-			var key = properties[name];
-			key = key && typeof key == 'function' ? key(this) : key;
-			return key ? this.$[key] !== undefined : this.$.hasAttribute(name);
-		},
-
-		getProperty: function(name) {
-			var key = properties[name], value;
-			key = key && typeof key == 'function' ? key(this) : key;
-			var value = key ? this.$[key] : this.$.getAttribute(name);
-			return bools[name] ? !!value : value;
-		},
-
-		setProperty: function(name, value) {
-			var key = properties[name], defined = value !== undefined;
-			key = key && typeof key == 'function' ? key(this) : key;
-			if (key && bools[name]) value = value || !defined ? true : false;
-			else if (!defined) return this.removeProperty(name);
-			key ? this.$[key] = value : this.$.setAttribute(name, value);
-			return this;
-		},
-
-		removeProperty: function(name) {
-			var key = properties[name], bool = key && bools[name];
-			key = key && typeof key == 'function' ? key(this) : key;
-			key ? this.$[key] = bool ? false : '' : this.$.removeAttribute(name);
-			return this;
-		},
-
-		getProperties: function() {
-			var props = {};
-			for (var i = 0; i < arguments.length; i++)
-				props[arguments[i]] = this.getProperty(arguments[i]);
-			return props;
-		},
-
-		setProperties: function(src) {
-			return Base.each(src, function(value, name) {
-				this.setProperty(name, value);
-			}, this);
-		},
-
-		removeProperties: function() {
-			return Array.each(arguments, this.removeProperty, this);
-		}
-	};
-
-	var inserters = {
-		before: function(source, dest) {
-			if (source && dest && dest.$.parentNode) {
-				var text = Browser.TRIDENT && dest.$.text;
-				if (text) dest.$.text = '';
-				dest.$.parentNode.insertBefore(source.$, dest.$);
-				if (text) dest.$.text = text;
-			}
-		},
-
-		after: function(source, dest) {
-			if (source && dest && dest.$.parentNode) {
-				var next = dest.$.nextSibling;
-				if (next) source.insertBefore(next);
-				else dest.getParent().appendChild(source);
-			}
-		},
-
-		bottom: function(source, dest) {
-			if (source && dest)
-				dest.appendChild(source);
-		},
-
-		top: function(source, dest) {
-			if (source && dest) {
-				var first = dest.$.firstChild;
-				if (first) source.insertBefore(first);
-				else dest.appendChild(source);
-			}
-		}
-	};
-
-	inserters.inside = inserters.bottom;
-
-	Base.each(inserters, function(inserter, name) {
-		var part = name.capitalize();
-		fields['insert' + part] = function(el) {
-			el = toNodes.apply(this, arguments);
-			for (var i = 0, list = el.array, l = list.length; i < l; i++)
-				inserter(i == 0 ? this : this.clone(true), list[i]);
-			return el.result || this;
-		}
-
-		fields['inject' + part] = function(el) {
-			el = toNodes.apply(this, arguments);
-			for (var i = 0, list = el.array, l = list.length; i < l; i++)
-				inserter(list[i], this);
-			return el.result || this;
-		}
-	});
-
-	return fields;
-});
-
-DomElements = DomNodes.extend();
-
-DomElement = DomNode.extend({
-	_type: 'element',
-	_collection: DomElements,
-
-	statics: {
-		get: function(selector, root) {
-			return (root && DomNode.wrap(root) || Browser.document).getElement(selector);
-		},
-
-		getAll: function(selector, root) {
-			return (root && DomNode.wrap(root) || Browser.document).getElements(selector);
-		},
-
-		create: function(tag, props, doc) {
-			if (Browser.TRIDENT && props) {
-				['name', 'type', 'checked'].each(function(key) {
-					if (props[key]) {
-						tag += ' ' + key + '="' + props[key] + '"';
-						if (key != 'checked')
-							delete props[key];
-					}
-				});
-				tag = '<' + tag + '>';
-			}
-			return (DomElement.unwrap(doc) || document).createElement(tag);
-		},
-
-		isAncestor: function(el, parent) {
-			return !el ? false : el.ownerDocument == parent ? true
-				: Browser.WEBKIT && Browser.VERSION < 420
-					? Array.contains(parent.getElementsByTagName(el.tagName), el)
-					: parent.contains
-						? parent != el && parent.contains(el)
-						: !!(parent.compareDocumentPosition(el) & 16)
-		}
-	}
-});
-
-DomElement.inject(new function() {
-	function walk(el, walk, start, match, all) {
-		var elements = all && new el._collection();
-		el = el.$[start || walk];
-		while (el) {
-			if (el.nodeType == 1 && (!match || DomElement.match(el, match))) {
-				if (!all) return DomNode.wrap(el);
-				elements.push(el);
-			}
-			el = el[walk];
-		}
-		return elements;
-	}
-
-	return {
-		_properties: ['id'],
-
-		getTag: function() {
-			return (this.$.tagName || '').toLowerCase();
-		},
-
-		getPrevious: function(match) {
-			return walk(this, 'previousSibling', null, match);
-		},
-
-		getAllPrevious: function(match) {
-			return walk(this, 'previousSibling', null, match, true);
-		},
-
-		getNext: function(match) {
-			return walk(this, 'nextSibling', null, match);
-		},
-
-		getAllNext: function(match) {
-			return walk(this, 'nextSibling', null, match, true);
-		},
-
-		getFirst: function(match) {
-			return walk(this, 'nextSibling', 'firstChild', match);
-		},
-
-		getLast: function(match) {
-			return walk(this, 'previousSibling', 'lastChild', match);
-		},
-
-		hasChild: function(match) {
-			return DomNode.isNode(match)
-				? DomElement.isAncestor(DomElement.unwrap(match), this.$)
-				: !!this.getFirst(match);
-		},
-
-		getParent: function(match) {
-			return walk(this, 'parentNode', null, match);
-		},
-
-		getParents: function(match) {
-			return walk(this, 'parentNode', null, match, true);
-		},
-
-		hasParent: function(match) {
-			return DomNode.isNode(match)
-				? DomElement.isAncestor(this.$, DomElement.unwrap(match))
-				: !!this.getParent(match);
-		},
-
-		getChildren: function(match) {
-			return walk(this, 'nextSibling', 'firstChild', match, true);
-		},
-
-		hasChildren: function(match) {
-			return !!this.getChildren(match).length;
-		},
-
-		toString: function() {
-			return (this.$.tagName || this._type).toLowerCase() +
-				(this.$.id ? '#' + this.$.id : '');
-		},
-
-		toNode: function() {
-			return this;
-		}
-	};
-});
-
-$ = DomElement.get;
-$$ = DomElement.getAll;
-
-DomTextNode = DomNode.extend({
-	_type: 'textnode'
-});
-
-DomDocument = DomElement.extend({
-	_type: 'document',
-
-	initialize: function() {
-		if (Browser.TRIDENT && Browser.VERSION < 7)
-			try {
-				this.$.execCommand('BackgroundImageCache', false, true);
-			} catch (e) {}
-	},
-
-	createElement: function(tag, props) {
-		return DomNode.wrap(DomElement.create(tag, props, this.$)).set(props);
-	},
-
-	createTextNode: function(text) {
-		return $(this.$.createTextNode(text));
-	},
-
-	getDocument: function() {
-		return this;
-	},
-
-	getWindow: function() {
-		return DomNode.wrap(this.$.defaultView || this.$.parentWindow);
-	},
-
-	open: function() {
-		this.$.open();
-	},
-
-	close: function() {
-		this.$.close();
-	},
-
-	write: function(markup) {
-		this.$.write(markup);
-	},
-
-	writeln: function(markup) {
-		this.$.writeln(markup);
-	}
-});
-
-Window = DomWindow = DomElement.extend({
-	_type: 'window',
-	_initialize: false,
-	_methods: ['close', 'alert', 'prompt', 'confirm', 'blur', 'focus', 'reload'],
-
-	getDocument: function() {
-		return DomNode.wrap(this.$.document);
-	},
-
-	getWindow: function() {
-		return this;
-	},
-
-	initialize: function(param) {
-		var win;
-		if (param.location && param.frames && param.history) {
-			win = this.base(param) || this;
-		} else {
-			if (typeof param == 'string')
-				param = { url: param };
-			(['toolbar','menubar','location','status','resizable','scrollbars']).each(function(key) {
-				param[key] = param[key] ? 1 : 0;
-			});
-			if (param.width && param.height) {
-				if (param.left == null) param.left = Math.round(
-					Math.max(0, (screen.width - param.width) / 2));
-				if (param.top == null) param.top = Math.round(
-					Math.max(0, (screen.height - param.height) / 2 - 40));
-			}
-			var str = Base.each(param, function(val, key) {
-				if (!/^(focus|confirm|url|name)$/.test(key))
-					this.push(key + '=' + (val + 0));
-			}, []).join();
-			win = this.base(window.open(param.url, param.name.replace(/\s+|\.+|-+/gi, ''), str)) || this;
-			if (win && param.focus)
-				win.focus();
-		}
-		return ['location', 'frames', 'history'].each(function(key) {
-			this[key] = this.$[key];
-		}, win);
-	}
-});
-
-DomElement.inject(new function() {
-	function cumulate(name, parent, iter) {
-		var left = name + 'Left', top = name + 'Top';
-		return function(that) {
-			var cur, next = that, x = 0, y = 0;
-			do {
-				cur = next;
-				x += cur.$[left] || 0;
-				y += cur.$[top] || 0;
-			} while((next = DomNode.wrap(cur.$[parent])) && (!iter || iter(cur, next)))
-			return { x: x, y: y };
-		}
-	}
-
-	function setBounds(fields, offset) {
-		return function(values) {
-			var vals = /^(object|array)$/.test(Base.type(values)) ? values : arguments;
-			if (offset) {
-				if (vals.x) vals.left = vals.x;
-				if (vals.y) vals.top = vals.y;
-			}
-			var i = 0;
-			return fields.each(function(name) {
-				var val = vals.length ? vals[i++] : vals[name];
-				if (val != null) this.setStyle(name, val);
-			}, this);
-		}
-	}
-
-	function isBody(that) {
-		return that.getTag() == 'body';
-	}
-
-	var getAbsolute = cumulate('offset', 'offsetParent', Browser.WEBKIT ? function(cur, next) {
-		return next.$ != document.body || cur.getStyle('position') != 'absolute';
-	} : null, true);
-
-	var getPositioned = cumulate('offset', 'offsetParent', function(cur, next) {
-		return next.$ != document.body && !/^(relative|absolute)$/.test(next.getStyle('position'));
-	});
-
-	var getScrollOffset = cumulate('scroll', 'parentNode');
-
-	var fields = {
-
-		getSize: function() {
-			return isBody(this)
-				? this.getWindow().getSize()
-				: { width: this.$.offsetWidth, height: this.$.offsetHeight };
-		},
-
-		getOffset: function(relative, scroll) {
-			if (isBody(this))
-				return this.getWindow().getOffset();
-		 	if (relative && !DomNode.isNode(relative))
-				return getPositioned(this);
-			var off = getAbsolute(this);
-			if (relative) {
-				var rel = getAbsolute(DomNode.wrap(relative));
-				off = { x: off.x - rel.x, y: off.y - rel.y };
-			}
-			if (scroll) {
-				scroll = this.getScrollOffset();
-				off.x -= scroll.x;
-				off.y -= scroll.y;
-			}
-			return off;
-		},
-
-		getScrollOffset: function() {
-			return isBody(this)
-				? this.getWindow().getScrollOffset()
-				: getScrollOffset(this);
-		},
-
-		getScrollSize: function() {
-			return isBody(this)
-				? this.getWindow().getScrollSize()
-				: { width: this.$.scrollWidth, height: this.$.scrollHeight };
-		},
-
-		getBounds: function(relative, scroll) {
-			if (isBody(this))
-				return this.getWindow().getBounds();
-			var off = this.getOffset(relative, scroll),
-				el = this.$;
-			return {
-				left: off.x,
-				top: off.y,
-				right: off.x + el.offsetWidth,
-				bottom: off.y + el.offsetHeight,
-				width: el.offsetWidth,
-				height: el.offsetHeight
-			};
-		},
-
-		setBounds: setBounds(['left', 'top', 'width', 'height', 'clip'], true),
-
-		setOffset: setBounds(['left', 'top'], true),
-
-		setSize: setBounds(['width', 'height', 'clip']),
-
-		setScrollOffset: function(x, y) {
-			if (isBody(this)) {
-				this.getWindow().setScrollOffset(x, y);
-			} else {
-				var off = typeof x == 'object' ? x : { x: x, y: y };
-				this.$.scrollLeft = off.x;
-				this.$.scrollTop = off.y;
-			}
-			return this;
-		},
-
-		scrollTo: function(x, y) {
-			return this.setScrollOffset(x, y);
-		},
-
-		contains: function(pos) {
-			var bounds = this.getBounds();
-			return pos.x >= bounds.left && pos.x < bounds.right &&
-				pos.y >= bounds.top && pos.y < bounds.bottom;
-		},
-
-		isVisible: function(fully) {
-			var win = this.getWindow(), top = win.getScrollOffset().y,
-				bottom = top + win.getSize().height,
-				bounds = this.getBounds(false, true);
-			return (bounds.height > 0 || bounds.width > 0) 
-					&& (bounds.top >= top && bounds.bottom <= bottom 
-						|| (fully && bounds.top <= top && bounds.bottom >= bottom) 
-						|| !fully && (bounds.top <= top && bounds.bottom >= top 
-							|| bounds.top <= bottom && bounds.bottom >= bottom)); 
-		}
-	};
-
-	['left', 'top', 'right', 'bottom', 'width', 'height'].each(function(name) {
-		var part = name.capitalize();
-		fields['get' + part] = function() {
-			return this.$['offset' + part];
-		};
-		fields['set' + part] = function(value) {
-			this.$.style[name] = isNaN(value) ? value : value + 'px';
-		};
-	});
-
-	return fields;
-});
-
-[DomDocument, DomWindow].each(function(ctor) {
-	ctor.inject(this);
-}, {
-
-	getSize: function() {
-		if (Browser.PRESTO || Browser.WEBKIT) {
-			var win = this.getWindow().$;
-			return { width: win.innerWidth, height: win.innerHeight };
-		}
-		var doc = this.getCompatElement();
-		return { width: doc.clientWidth, height: doc.clientHeight };
-	},
-
-	getScrollOffset: function() {
-		var win = this.getWindow().$, doc = this.getCompatElement();
-		return { x: win.pageXOffset || doc.scrollLeft, y: win.pageYOffset || doc.scrollTop };
-	},
-
-	getScrollSize: function() {
-		var doc = this.getCompatElement(), min = this.getSize();
-		return { width: Math.max(doc.scrollWidth, min.width), height: Math.max(doc.scrollHeight, min.height) };
-	},
-
-	getOffset: function() {
-		return { x: 0, y: 0 };
-	},
-
-	getBounds: function() {
-		var size = this.getSize();
-		return {
-			left: 0, top: 0,
-			right: size.width, bottom: size.height,
-			width: size.width, height: size.height
-		};
-	},
-
-	setScrollOffset: function(x, y) {
-		var off = typeof x == 'object' ? x : { x: x, y: y };
-		this.getWindow().$.scrollTo(off.x, off.y);
-		return this;
-	},
-
-	getElementAt: function(pos, exclude) {
-		var el = this.getDocument().getElement('body');
-		while (true) {
-			var max = -1;
-			var ch = el.getFirst();
-			while (ch) {
-				if (ch.contains(pos) && ch != exclude) {
-					var z = ch.$.style.zIndex.toInt() || 0;
-					if (z >= max) {
-						el = ch;
-						max = z;
-					}
-				}
-				ch = ch.getNext();
-			}
-			if (max < 0) break;
-		}
-		return el;
-	},
-
-	getCompatElement: function() {
-		var doc = this.getDocument();
-		return doc.getElement(!doc.$.compatMode
-				|| doc.$.compatMode == 'CSS1Compat' ? 'html' : 'body').$;
-	}
-});
-
-DomEvent = Base.extend(new function() {
-	var keys = {
-		 '8': 'backspace',
-		'13': 'enter',
-		'27': 'escape',
-		'32': 'space',
-		'37': 'left',
-		'38': 'up',
-		'39': 'right',
-		'40': 'down',
-		'46': 'delete'
-	};
-
-	function hover(name, type) {
-		return {
-			type: type,
-			listener: function(event) {
-				if (event.relatedTarget != this && !this.hasChild(event.relatedTarget))
-					this.fireEvent(name, [event]);
-			}
-		}
-	}
-
-	return {
-		initialize: function(event) {
-			this.event = event = event || window.event;
-			this.type = event.type;
-			this.target = DomNode.wrap(event.target || event.srcElement);
-			if (this.target && this.target.$.nodeType == 3)
-				this.target = this.target.getParentNode(); 
-			this.shift = event.shiftKey;
-			this.control = event.ctrlKey;
-			this.alt = event.altKey;
-			this.meta = event.metaKey;
-			if (/^(mousewheel|DOMMouseScroll)$/.test(this.type)) {
-				this.wheel = event.wheelDelta ?
-					event.wheelDelta / (window.opera ? -120 : 120) :
-					- (event.detail || 0) / 3;
-			} else if (/^key/.test(this.type)) {
-				this.code = event.which || event.keyCode;
-				this.key = keys[this.code] || String.fromCharCode(this.code).toLowerCase();
-			} else if (/^mouse|^click$/.test(this.type)) {
-				this.page = {
-					x: event.pageX || event.clientX + document.documentElement.scrollLeft,
-					y: event.pageY || event.clientY + document.documentElement.scrollTop
-				};
-				this.client = {
-					x: event.pageX ? event.pageX - window.pageXOffset : event.clientX,
-					y: event.pageY ? event.pageY - window.pageYOffset : event.clientY
-				};
-				var offset = this.target.getOffset();
-				this.offset = {
-					x: this.page.x - offset.x,
-					y: this.page.y - offset.y
-				}
-				this.rightClick = event.which == 3 || event.button == 2;
-				if (/^mouse(over|out)$/.test(this.type))
-					this.relatedTarget = DomNode.wrap(event.relatedTarget ||
-						this.type == 'mouseout' ? event.toElement : event.fromElement);
-			}
-		},
-
-		stop: function() {
-			this.stopPropagation();
-			this.preventDefault();
-			return this;
-		},
-
-		stopPropagation: function() {
-			if (this.event.stopPropagation) this.event.stopPropagation();
-			else this.event.cancelBubble = true;
-			this.stopped = true;
-			return this;
-		},
-
-		preventDefault: function() {
-			if (this.event.preventDefault) this.event.preventDefault();
-			else this.event.returnValue = false;
-			return this;
-		},
-
-		statics: {
-			events: new Hash({
-				mouseenter: hover('mouseenter', 'mouseover'),
-
-				mouseleave: hover('mouseleave', 'mouseout'),
-
-				mousewheel: { type: Browser.GECKO ? 'DOMMouseScroll' : 'mousewheel' },
-
-				domready: function(func) {
-					var win = this.getWindow(), doc = this.getDocument();
-					if (Browser.loaded) {
-						func.call(this);
-					} else if (!doc.onDomReady) {
-						doc.onDomReady = function() {
-							if (!Browser.loaded) {
-								Browser.loaded = true;
-								doc.fireEvent('domready');
-								win.fireEvent('domready');
-							}
-						}
-						if (Browser.TRIDENT) {
-							var temp = doc.createElement('div');
-							(function() {
-								try {
-									temp.$.doScroll('left');
-									temp.insertBottom(DomElement.get('body')).setHtml('temp').remove();
-									doc.onDomReady();
-								} catch (e) {
-									arguments.callee.delay(50);
-								}
-							}).delay(0);
-						} else if (Browser.WEBKIT && Browser.VERSION < 525) {
-							(function() {
-								/^(loaded|complete)$/.test(doc.$.readyState)
-									? doc.onDomReady() : arguments.callee.delay(50);
-							})();
-						} else {
-							win.addEvent('load', doc.onDomReady);
-							doc.addEvent('DOMContentLoaded', doc.onDomReady);
-						}
-					}
-				}
-			}),
-
-			add: function(events) {
-				this.events.append(events);
-			}
-		}
-	};
-});
-
-DomElement.inject(new function() {
-	function callEvent(fire) {
-		return function(type, args, delay) {
-			var entries = (this.events || {})[type];
-			if (entries) {
-				var event = args && args[0];
-				if (event)
-					args[0] = event.event ? event : new DomEvent(event);
-				entries.each(function(entry) {
-					entry[fire ? 'func' : 'bound'].delay(delay, this, args);
-				}, this);
-			}
-			return !!entries;
-		}
-	}
-
-	return {
-		addEvent: function(type, func) {
-			this.events = this.events || {};
-			var entries = this.events[type] = this.events[type] || [];
-			if (func && !entries.find(function(entry) { return entry.func == func })) {
-				var listener = func, name = type, pseudo = DomEvent.events[type];
-				if (pseudo) {
-					if (typeof pseudo == 'function') pseudo = pseudo.call(this, func);
-					listener = pseudo && pseudo.listener || listener;
-					name = pseudo && pseudo.type;
-				}
-				var that = this, bound = function(event) {
-						if (event || window.event)
-						 	event = event && event.event ? event : new DomEvent(event);
-						if (listener.call(that, event) === false && event)
-							event.stop();
-					};
-				if (name) {
-					if (this.$.addEventListener) {
-						this.$.addEventListener(name, bound, false);
-					} else if (this.$.attachEvent) {
-						this.$.attachEvent('on' + name, bound);
-					}
-				}
-				entries.push({ func: func, name: name, bound: bound });
-			}
-			return this;
-		},
-
-		removeEvent: function(type, func) {
-			var entries = (this.events || {})[type], entry;
-			if (func && entries) {
-				if (entry = entries.remove(function(entry) { return entry.func == func })) {
-					var name = entry.name, pseudo = DomEvent.events[type];
-					if (pseudo && pseudo.remove) pseudo.remove.call(this, func);
-					if (name) {
-						if (this.$.removeEventListener) {
-							this.$.removeEventListener(name, entry.bound, false);
-						} else if (this.$.detachEvent) {
-							this.$.detachEvent('on' + name, entry.bound);
-						}
-					}
-				}
-			}
-			return this;
-		},
-
-		addEvents: function(events) {
-			return Base.each(events || [], function(fn, type) {
-				this.addEvent(type, fn);
-			}, this);
-		},
-
-		removeEvents: function(type) {
-			if (this.events) {
-				if (type) {
-					(this.events[type] || []).each(function(fn) {
-						this.removeEvent(type, fn);
-					}, this);
-					delete this.events[type];
-				} else {
-					Base.each(this.events, function(ev, type) {
-						this.removeEvents(type);
-					}, this);
-					this.events = null;
-				}
-			}
-			return this;
-		},
-
-		fireEvent: callEvent(true),
-
-		triggerEvent: callEvent(false),
-
-		finalize: function() {
-			this.removeEvents();
-		}
-	};
-});
-
-DomEvent.add(new function() {
-	var object, last;
-
-	function dragStart(event) {
-		if (object != this) {
-			event.type = 'dragstart';
-			last = event.page;
-			this.fireEvent('dragstart', [event]);
-			if (!event.stopped) {
-				event.stop();
-				var doc = this.getDocument();
-				doc.addEvent('mousemove', drag);
-				doc.addEvent('mouseup', dragEnd);
-				object = this;
-			}
-		}
-	}
-
-	function drag(event) {
-		event.type = 'drag';
-		event.delta = {
-			x: event.page.x - last.x,
-			y: event.page.y - last.y
-		}
-		last = event.page;
-		object.fireEvent('drag', [event]);
-		event.preventDefault();
-	}
-
-	function dragEnd(event) {
-		if (object) {
-			event.type = 'dragend';
-			object.fireEvent('dragend', [event]);
-			event.preventDefault();
-			var doc = object.getDocument();
-			doc.removeEvent('mousemove', drag);
-			doc.removeEvent('mouseup', dragEnd);
-			object = null;
-		}
-	}
-
-	return {
-		dragstart: {
-			type: 'mousedown',
-			listener: dragStart
-		},
-
-		drag: {
-			type: 'mousedown',
-			listener: dragStart
-		},
-
-		dragend: {}
-	};
-});
-
-DomElement.inject(new function() {
-	var XPATH= 0, FILTER = 1;
-
-	var methods = [{ 
-		getParam: function(items, separator, context, params) {
-			var str = context.namespaceURI ? 'xhtml:' + params.tag : params.tag;
-			if (separator && (separator = DomElement.separators[separator]))
-				str = separator[XPATH] + str;
-			for (var i = params.pseudos.length; i--;) {
-				var pseudo = params.pseudos[i];
-				str += pseudo.handler[XPATH](pseudo.argument);
-			}
-			if (params.id) str += '[@id="' + params.id + '"]';
-			for (var i = params.classes.length; i--;)
-				str += '[contains(concat(" ", @class, " "), " ' + params.classes[i] + ' ")]';
-			for (var i = params.attributes.length; i--;) {
-				var attribute = params.attributes[i];
-				var operator = DomElement.operators[attribute[1]];
-				if (operator) str += operator[XPATH](attribute[0], attribute[2]);
-				else str += '[@' + attribute[0] + ']';
-			}
-			items.push(str);
-			return items;
-		},
-
-		getElements: function(items, elements, context) {
-			function resolver(prefix) {
-				return prefix == 'xhtml' ? 'http://www.w3.org/1999/xhtml' : false;
-			}
-			var res = (context.ownerDocument || context).evaluate('.//' + items.join(''), context,
-				resolver, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
-			for (var i = 0, l = res.snapshotLength; i < l; i++)
-				elements.push(res.snapshotItem(i));
-		}
-	}, { 
-		getParam: function(items, separator, context, params, data) {
-			var found = [];
-			var tag = params.tag;
-			if (separator && (separator = DomElement.separators[separator])) {
-				separator = separator[FILTER];
-				var uniques = {};
-				function add(item) {
-					if (!item._unique)
-						DomNode.unique(item);
-					if (!uniques[item._unique] && match(item, params, data)) {
-						uniques[item._unique] = true;
-						found.push(item);
-						return true;
-					}
-				}
-				for (var i = 0, l = items.length; i < l; i++)
-					separator(items[i], params, add);
-				if (params.clearTag)
-					params.tag = params.clearTag = null;
-				return found;
-			}
-			if (params.id) {
-				var el = (context.ownerDocument || context).getElementById(params.id);
-				params.id = null;
-				return el && DomElement.isAncestor(el, context)
-					&& match(el, params, data) ? [el] : null;
-			} else {
-				if (!items.length) {
-					items = context.getElementsByTagName(tag);
-					params.tag = null;
-				}
-				for (var i = 0, l = items.length; i < l; i++)
-					if (match(items[i], params, data))
-						found.push(items[i]);
-			}
-			return found;
-		},
-
-		getElements: function(items, elements, context) {
-			elements.append(items);
-		}
-	}];
-
-	function parse(selector) {
-		var params = { tag: '*', id: null, classes: [], attributes: [], pseudos: [] };
-		selector.replace(/:([^:(]+)*(?:\((["']?)(.*?)\2\))?|\[([\w-]+)(?:([!*^$~|]?=)(["']?)(.*?)\6)?\]|\.[\w-]+|#[\w-]+|\w+|\*/g, function(part) {
-			switch (part.charAt(0)) {
-				case '.': params.classes.push(part.slice(1)); break;
-				case '#': params.id = part.slice(1); break;
-				case '[': params.attributes.push([arguments[4], arguments[5], arguments[7]]); break;
-				case ':':
-					var handler = DomElement.pseudos[arguments[1]];
-					if (!handler) {
-						params.attributes.push([arguments[1], arguments[3] ? '=' : '', arguments[3]]);
-						break;
-					}
-					params.pseudos.push({
-						name: arguments[1],
-						argument: handler && handler.parser
-							? (handler.parser.apply ? handler.parser(arguments[3]) : handler.parser)
-							: arguments[3],
-						handler: handler.handler || handler
-					});
-				break;
-				default: params.tag = part;
-			}
-			return '';
-		});
-		return params;
-	}
-
-	function match(el, params, data) {
-		if (params.id && params.id != el.id)
-			return false;
-
-		if (params.tag && params.tag != '*' && params.tag != (el.tagName || '').toLowerCase())
-			return false;
-
-		for (var i = params.classes.length; i--;)
-			if (!el.className || !el.className.contains(params.classes[i], ' '))
-				return false;
-
-		var proto = DomElement.prototype;
-		for (var i = params.attributes.length; i--;) {
-			var attribute = params.attributes[i];
-			proto.$ = el; 
-			var val = proto.getProperty(attribute[0]);
-			if (!val) return false;
-			var operator = DomElement.operators[attribute[1]];
-			operator = operator && operator[FILTER];
-			if (operator && (!val || !operator(val, attribute[2])))
-				return false;
-		}
-
-		for (var i = params.pseudos.length; i--;) {
-			var pseudo = params.pseudos[i];
-			if (!pseudo.handler[FILTER](el, pseudo.argument, data))
-				return false;
-		}
-
-		return true;
-	}
-
-	function filter(items, selector, context, elements, data) {
-		var method = methods[!Browser.XPATH || items.length ||
-			typeof selector == 'string' && selector.contains('option[')
-			? FILTER : XPATH];
-		var separators = [];
-		selector = selector.trim().replace(/\s*([+>~\s])[a-zA-Z#.*\s]/g, function(match) {
-			if (match.charAt(2)) match = match.trim();
-			separators.push(match.charAt(0));
-			return ':)' + match.charAt(1);
-		}).split(':)');
-		for (var i = 0, l = selector.length; i < l; i++) {
-			var params = parse(selector[i]);
-			if (!params) return elements; 
-			var next = method.getParam(items, separators[i - 1], context, params, data);
-			if (!next) break;
-			items = next;
-		}
-		method.getElements(items, elements, context);
-		return elements;
-	}
-
-	return {
-
-		getElements: function(selectors, nowrap) {
-			var elements = nowrap ? [] : new this._collection();
-			selectors = !selectors ? ['*'] : typeof selectors == 'string'
-				? selectors.split(',')
-				: selectors.length != null ? selectors : [selectors];
-			for (var i = 0, l = selectors.length; i < l; i++) {
-				var selector = selectors[i];
-				if (Base.type(selector) == 'element') elements.push(selector);
-				else filter([], selector, this.$, elements, {});
-			}
-			return elements;
-		},
-
-		getElement: function(selector) {
-			var el, type = Base.type(selector), match;
-			if (type == 'window') {
-				el = selector;
-			} else {
-				if (type == 'string' && (match = selector.match(/^#?([\w-]+)$/)))
-					el = this.getDocument().$.getElementById(match[1]);
-				else if (DomNode.isNode(type))
-					el = DomElement.unwrap(selector);
-				if (el && el != this.$ && !DomElement.isAncestor(el, this.$))
-					el = null;
-				if (!el)
-					el = this.getElements(selector, true)[0];
-			}
-			return DomNode.wrap(el);
-		},
-
-		hasElement: function(selector) {
-			return !!this.getElement(selector);
-		},
-
-		match: function(selector) {
-			return !selector || match(this.$, parse(selector), {});
-		},
-
-		filter: function(elements, selector) {
-			return filter(elements, selector, this.$, new this._collection(), {});
-		},
-
-		statics: {
-			match: function(el, selector) {
-				return !selector || match(DomElement.unwrap(el), parse(selector), {});
-			}
-		}
-	};
-});
-
-DomElement.separators = {
-	'~': [
-		'/following-sibling::',
-		function(item, params, add) {
-			while (item = item.nextSibling)
-				if (item.nodeType == 1 && add(item))
-					break;
-		}
-	],
-
-	'+': [
-		'/following-sibling::*[1]/self::',
-		function(item, params, add) {
-			while (item = item.nextSibling) {
-				if (item.nodeType == 1) {
-					add(item);
-					break;
-				}
-			}
-		}
-	],
-
-	'>': [
-	 	'/',
-		function(item, params, add) {
-			var children = item.childNodes;
-			for (var i = 0, l = children.length; i < l; i++)
-				if (children[i].nodeType == 1)
-					add(children[i]);
-		}
-	],
-
-	' ': [
-		'//',
-		function(item, params, add) {
-			var children = item.getElementsByTagName(params.tag);
-			params.clearTag = true;
-			for (var i = 0, l = children.length; i < l; i++)
-				add(children[i]);
-		}
-	]
-};
-
-DomElement.operators = new function() {
-	function contains(sep) {
-		return [
-			function(a, v) {
-				return '[contains(' + (sep ? 'concat("' + sep + '", @' + a + ', "' + sep + '")' : '@' + a) + ', "' + sep + v + sep + '")]';
-			},
-			function(a, v) {
-				return a.contains(v, sep);
-			}
-		]
-	}
-
-	return {
-		'=': [
-			function(a, v) {
-				return '[@' + a + '="' + v + '"]';
-			},
-			function(a, v) {
-				return a == v;
-			}
-		],
-
-		'^=': [
-	 		function(a, v) {
-				return '[starts-with(@' + a + ', "' + v + '")]';
-			},
-			function(a, v) {
-				return a.substring(0, v.length) == v;
-			}
-		],
-
-		'$=': [
-			function(a, v) {
-				return '[substring(@' + a + ', string-length(@' + a + ') - ' + v.length + ' + 1) = "' + v + '"]';
-			},
-			function(a, v) {
-				return a.substring(a.length - v.length) == v;
-			}
-		],
-
-		'!=': [
-			function(a, v) {
-				return '[@' + a + '!="' + v + '"]';
-			},
-			function(a, v) {
-				return a != v;
-			}
-		],
-
-		'*=': contains(''),
-
-		'|=': contains('-'),
-
-		'~=': contains(' ')
-	};
-};
-
-DomElement.pseudos = new function() {
-	var nthChild = [
-		function(argument) {
-			switch (argument.special) {
-				case 'n': return '[count(preceding-sibling::*) mod ' + argument.a + ' = ' + argument.b + ']';
-				case 'first': return '[count(preceding-sibling::*) = 0]';
-				case 'last': return '[count(following-sibling::*) = 0]';
-				case 'only': return '[not(preceding-sibling::* or following-sibling::*)]';
-				case 'index': return '[count(preceding-sibling::*) = ' + argument.a + ']';
-			}
-		},
-		function(el, argument, data) {
-			var count = 0;
-			switch (argument.special) {
-				case 'n':
-					data.indices = data.indices || {};
-					if (!data.indices[el._unique]) {
-						var children = el.parentNode.childNodes;
-						for (var i = 0, l = children.length; i < l; i++) {
-							var child = children[i];
-							if (child.nodeType == 1) {
-								if (!child._unique)
-									DomNode.unique(item);
-								data.indices[child._unique] = count++;
-							}
-						}
-					}
-					return data.indices[el._unique] % argument.a == argument.b;
-				case 'first':
-					while (el = el.previousSibling)
-						if (el.nodeType == 1)
-							return false;
-					return true;
-				case 'last':
-					while (el = el.nextSibling)
-						if (el.nodeType == 1)
-							return false;
-					return true;
-				case 'only':
-					var prev = el;
-					while(prev = prev.previousSibling)
-						if (prev.nodeType == 1)
-							return false;
-					var next = el;
-					while (next = next.nextSibling)
-						if (next.nodeType == 1)
-							return false;
-					return true;
-				case 'index':
-					while (el = el.previousSibling)
-						if (el.nodeType == 1 && ++count > argument.a)
-							return false;
-					return true;
-			}
-			return false;
-		}
-	];
-
-	function contains(caseless) {
-		var abc = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-		return [
-			function(argument) {
-				return '[contains(' + (caseless ? 'translate(text(), "' + abc
-					+ '", "' + abc.toLowerCase() + '")' : 'text()') + ', "'
-					+ (caseless && argument ? argument.toLowerCase() : argument) + '")]';
-			},
-			function(el, argument) {
-				if (caseless && argument) argument = argument.toLowerCase();
-				var nodes = el.childNodes;
-				for (var i = nodes.length - 1; i >= 0; i--) {
-					var child = nodes[i];
-					if (child.nodeName && child.nodeType == 3 &&
-						(caseless ? child.nodeValue.toLowerCase() : child.nodeValue).contains(argument))
-							return true;
-				}
-				return false;
-			}
-		];
-	}
-
-	return {
-		'nth-child': {
-			parser: function(argument) {
-				var match = argument ? argument.match(/^([+-]?\d*)?([a-z]+)?([+-]?\d*)?$/) : [null, 1, 'n', 0];
-				if (!match) return null;
-				var i = parseInt(match[1]),
-					a = isNaN(i) ? 1 : i,
-					special = match[2],
-					b = parseInt(match[3]) || 0;
-				if (a != 0) {
-					b--;
-					while (b < 1) b += a;
-					while (b >= a) b -= a;
-				} else {
-					a = b;
-					special = 'index';
-				}
-				switch (special) {
-					case 'n': return { a: a, b: b, special: 'n' };
-					case 'odd': return { a: 2, b: 0, special: 'n' };
-					case 'even': return { a: 2, b: 1, special: 'n' };
-					case 'first': return { special: 'first' };
-					case 'last': return { special: 'last' };
-					case 'only': return { special: 'only' };
-					default: return { a: a - 1, special: 'index' };
-				}
-			},
-			handler: nthChild
-		},
-
-		'even': {
-			parser: { a: 2, b: 1, special: 'n' },
-			handler: nthChild
-		},
-
-		'odd': {
-			parser: { a: 2, b: 0, special: 'n' },
-			handler: nthChild
-		},
-
-		'first-child': {
-			parser: { special: 'first' },
-			handler: nthChild
-		},
-
-		'last-child': {
-			parser: { special: 'last' },
-			handler: nthChild
-		},
-
-		'only-child': {
-			parser: { special: 'only' },
-			handler: nthChild
-		},
-
-		'enabled': [
-			function() {
-				return '[not(@disabled)]';
-			},
-			function(el) {
-				return !el.disabled;
-			}
-		],
-
-		'empty': [
-		 	function() {
-				return '[not(node())]';
-			},
-			function(el) {
-				return !(el.innerText || el.textContent || '').length;
-			}
-		],
-
-		'contains': contains(false),
-
-		'contains-caseless': contains(true)
-	};
-};
-
-HtmlElements = DomElements.extend();
-
-HtmlElement = DomElement.extend({
-	_collection: HtmlElements
-});
-
-HtmlElement.inject({
-	_properties: ['html'],
-
-	getClass: function() {
-		return this.$.className;
-	},
-
-	setClass: function(cls) {
-		this.$.className = cls;
-	},
-
-	modifyClass: function(name, add) {
-		if (!this.hasClass(name) ^ !add) 
-			this.$.className = (add ? this.$.className + ' ' + name :
-				this.$.className.replace(name, '')).clean();
-		return this;
-	},
-
-	addClass: function(name) {
-		return this.modifyClass(name, true);
-	},
-
-	removeClass: function(name) {
-		return this.modifyClass(name, false);
-	},
-
-	toggleClass: function(name) {
-		return this.modifyClass(name, !this.hasClass(name));
-	},
-
-	hasClass: function(name) {
-		return this.$.className.contains(name, ' ');
-	}
-});
-
-Array.inject({
-	toNode: function(doc) {
-		doc = DomNode.wrap(doc || document);
-		var elements = new HtmlElements();
-		for (var i = 0; i < this.length;) {
-			var value = this[i++], element = null, type = Base.type(value);
-			if (type == 'string') {
-				var props = /^(object|hash)$/.test(Base.type(this[i])) && this[i++];
-				element = value.isHtml()
-					? value.toNode(doc).set(props)
-					: doc.createElement(value, props);
-				if (Base.type(this[i]) == 'array')
-					element.injectBottom(this[i++].toNode(doc));
-			} else if (DomNode.isNode(type)) {
-				element = value;
-			} else if (value && value.toNode) {
-				element = value.toNode(doc);
-			}
-			if (element)
-				elements[Base.type(element) == 'array' ? 'append' : 'push'](element);
-		}
-		return elements.length == 1 ? elements[0] : elements;
-	}
-});
-
-String.inject({
-	toNode: function(doc) {
-		var doc = doc || document, elements;
-		if (this.isHtml()) {
-			var str = this.trim().toLowerCase();
-			var div = DomElement.unwrap(doc).createElement('div');
-
-			var wrap =
-				!str.indexOf('<opt') &&
-				[1, '<select>', '</select>'] ||
-				!str.indexOf('<leg') &&
-				[1, '<fieldset>', '</fieldset>'] ||
-				(!str.indexOf('<thead') || !str.indexOf('<tbody') || !str.indexOf('<tfoot') || !str.indexOf('<colg')) &&
-				[1, '<table>', '</table>'] ||
-				!str.indexOf('<tr') &&
-				[2, '<table><tbody>', '</tbody></table>'] ||
-				(!str.indexOf('<td') || !str.indexOf('<th')) &&
-				[3, '<table><tbody><tr>', '</tr></tbody></table>'] ||
-				!str.indexOf('<col') &&
-				[2, '<table><colgroup>', '</colgroup></table>'] ||
-				[0,'',''];
-
-			div.innerHTML = wrap[1] + this + wrap[2];
-			while (wrap[0]--)
-				div = div.firstChild;
-			if (Browser.TRIDENT) {
-				var els = [];
-				if (!str.indexOf('<table') && str.indexOf('<tbody') < 0) {
-					els = div.firstChild && div.firstChild.childNodes;
-				} else if (wrap[1] == '<table>' && str.indexOf('<tbody') < 0) {
-					els = div.childNodes;
-				}
-				for (var i = els.length - 1; i >= 0 ; --i) {
-					var el = els[i];
-					if (el.nodeName.toLowerCase() == 'tbody' && !el.childNodes.length)
-						el.parentNode.removeChild(el);
-				}
-			}
-			elements = new HtmlElements(div.childNodes);
-		} else {
-			elements = DomNode.wrap(doc).getElements(this);
-		}
-		return elements.length == 1 ? elements[0] : elements;
-	}
-});
-
-HtmlDocument = DomDocument.extend({
-	_collection: HtmlElements
-});
-
-HtmlElement.inject(new function() {
-	var styles = {
-		all: {
-			width: '@px', height: '@px', left: '@px', top: '@px', right: '@px', bottom: '@px',
-			color: 'rgb(@, @, @)', backgroundColor: 'rgb(@, @, @)', backgroundPosition: '@px @px',
-			fontSize: '@px', letterSpacing: '@px', lineHeight: '@px', textIndent: '@px',
-			margin: '@px @px @px @px', padding: '@px @px @px @px',
-			border: '@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)',
-			borderWidth: '@px @px @px @px', borderStyle: '@ @ @ @',
-			borderColor: 'rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)',
-			clip: 'rect(@px, @px, @px, @px)', opacity: '@'
-		},
-		part: {
-			'border': {}, 'borderWidth': {}, 'borderStyle': {}, 'borderColor': {},
-			'margin': {}, 'padding': {}
-		}
-	};
-
-	['Top', 'Right', 'Bottom', 'Left'].each(function(dir) {
-		['margin', 'padding'].each(function(style) {
-			var sd = style + dir;
-			styles.part[style][sd] = styles.all[sd] = '@px';
-		});
-		var bd = 'border' + dir;
-		styles.part.border[bd] = styles.all[bd] = '@px @ rgb(@, @, @)';
-		var bdw = bd + 'Width', bds = bd + 'Style', bdc = bd + 'Color';
-		styles.part[bd] = {};
-		styles.part.borderWidth[bdw] = styles.part[bd][bdw] = '@px';
-		styles.part.borderStyle[bds] = styles.part[bd][bds] = '@';
-		styles.part.borderColor[bdc] = styles.part[bd][bdc] = 'rgb(@, @, @)';
-	});
-
-	Base.each(styles.all, function(val, name) {
-		this[name] = val.split(' ');
-	});
-
-	var fields = {
-
-		getComputedStyle: function(name) {
-			if (this.$.currentStyle) return this.$.currentStyle[name.camelize()];
-			var style = this.getWindow().$.getComputedStyle(this.$, null);
-			return style ? style.getPropertyValue(name.hyphenate()) : null;
-		},
-
-		getStyle: function(name) {
-			if (name === undefined) return this.getStyles();
-			if (name == 'opacity') {
-				var op = this.opacity;
-				return op || op == 0 ? op : this.getVisibility() ? 1 : 0;
-			}
-			var el = this.$;
-			name = name.camelize();
-			var style = el.style[name];
-			if (!Base.check(style)) {
-				if (styles.part[name]) {
-					style = Hash.map(styles.part[name], function(val, key) {
-						return this.getStyle(key);
-					}, this);
-					return style.every(function(val) {
-						return val == style[0];
-					}) ? style[0] : style.join(' ');
-				}
-				style = this.getComputedStyle(name);
-			}
-			if (name == 'visibility')
-				return /^(visible|inherit(|ed))$/.test(style);
-			var color = style && style.match(/rgb[a]?\([\d\s,]+\)/);
-			if (color) return style.replace(color[0], color[0].rgbToHex());
-			if (Browser.PRESTO || Browser.TRIDENT && isNaN(parseInt(style))) {
-				if (/^(width|height)$/.test(name)) {
-					var size = 0;
-					(name == 'width' ? ['left', 'right'] : ['top', 'bottom']).each(function(val) {
-						size += this.getStyle('border-' + val + '-width').toInt() + this.getStyle('padding-' + val).toInt();
-					}, this);
-					return this.$['offset' + name.capitalize()] - size + 'px';
-				}
-				if (Browser.PRESTO && /px/.test(style)) return style;
-				if (/border(.+)[wW]idth|margin|padding/.test(name)) return '0px';
-			}
-			return style;
-		},
-
-		setStyle: function(name, value) {
-			if (value === undefined) return this.setStyles(name);
-			var el = this.$;
-			switch (name) {
-				case 'float':
-					name = Browser.TRIDENT ? 'styleFloat' : 'cssFloat';
-					break;
-				case 'clip':
-					if (value == true)
-						value = [0, el.offsetWidth, el.offsetHeight, 0];
-					break;
-				default:
-					name = name.camelize();
-			}
-			var type = Base.type(value);
-			if (value != undefined && type != 'string') {
-				var parts = styles.all[name] || ['@'], index = 0;
-				value = (type == 'array' ? value.flatten() : [value]).map(function(val) {
-					var part = parts[index++];
-					if (!part)
-						throw Base.stop;
-					return Base.type(val) == 'number' ? part.replace('@', name == 'opacity' ? val : Math.round(val)) : val;
-				}).join(' ');
-			}
-			switch (name) {
-				case 'visibility':
-					if (!isNaN(value)) value = !!value.toInt() + '';
-				 	value = value == 'true' && 'visible' || value == 'false' && 'hidden' || value;
-					break;
-				case 'opacity':
-					this.opacity = value = parseFloat(value);
-					this.setStyle('visibility', !!value);
-					if (!value) value = 1;
-					if (!el.currentStyle || !el.currentStyle.hasLayout) el.style.zoom = 1;
-					if (Browser.TRIDENT) el.style.filter = value > 0 && value < 1 ? 'alpha(opacity=' + value * 100 + ')' : '';
-					el.style.opacity = value;
-					return this;
-			}
-			el.style[name] = value;
-			return this;
-		},
-
-		getStyles: function() {
-			return arguments.length ? Array.each(arguments, function(name) {
-				this[name] = that.getStyle(name);
-			}, {}) : this.$.style.cssText;
-		},
-
-		setStyles: function(styles) {
-			switch (Base.type(styles)) {
-				case 'object':
-					Base.each(styles, function(style, name) {
-						if (style !== undefined)
-							this.setStyle(name, style);
-					}, this);
-					break;
-				case 'string':
-					this.$.style.cssText = styles;
-			}
-			return this;
-		}
-	};
-
-	['opacity', 'color', 'background', 'visibility', 'clip', 'zIndex',
-		'border', 'margin', 'padding', 'display'].each(function(name) {
-		var part = name.capitalize();
-		fields['get' + part] = function() {
-			return this.getStyle(name);
-		};
-		fields['set' + part] = function(value) {
-			return this.setStyle(name, arguments.length > 1
-				? Array.create(arguments) : value);
-		};
-	});
-
-	return fields;
-});
-
-HtmlElement.inject({
-
-	getFormElements: function() {
-		return this.getElements(['input', 'select', 'textarea']);
-	},
-
-	getValue: function(name) {
-		var el = this.getElement(name);
-		return el && el.getValue && el.getValue();
-	},
-
-	setValue: function(name, val) {
-		var el = this.getElement(name);
-		if (!el) el = this.injectTop('input', { type: 'hidden', id: name, name: name });
-		return el.setValue(val);
-	},
-
-	getValues: function() {
-		return this.getFormElements().each(function(el) {
-			var name = el.getName(), value = el.getValue();
-			if (name && value !== undefined && !el.getDisabled())
-				this[name] = value;
-		}, new Hash());
-	},
-
-	setValues: function(values) {
-		return Base.each(values, function(val, name) {
-			this.setValue(name, val);
-		}, this);
-	},
-
-	toQueryString: function() {
-		return Base.toQueryString(this.getValues());
-	}
-});
-
-HtmlForm = HtmlElement.extend({
-	_tag: 'form',
-	_properties: ['action', 'method', 'target'],
-	_methods: ['submit'],
-
-	blur: function() {
-		return this.getFormElements().each(function(el) {
-			el.blur();
-		}, this);
-	},
-
-	enable: function(enable) {
-		return this.getFormElements().each(function(el) {
-			el.enable(enable);
-		}, this);
-	}
-});
-
-HtmlFormElement = HtmlElement.extend({
-	_properties: ['name', 'disabled'],
-	_methods: ['focus', 'blur'],
-
-	enable: function(enable) {
-		var disabled = !enable && enable !== undefined;
-		if (disabled) this.$.blur();
-		this.$.disabled = disabled;
-		return this;
-	}
-});
-
-HtmlInput = HtmlFormElement.extend({
-	_tag: 'input',
-	_properties: ['type', 'checked', 'defaultChecked', 'readOnly', 'maxLength'],
-	_methods: ['click'],
-
-	getValue: function() {
-		if (this.$.checked && /^(checkbox|radio)$/.test(this.$.type) ||
-			/^(hidden|text|password|button|search)$/.test(this.$.type))
-			return this.$.value;
-	},
-
-	setValue: function(val) {
-		if (/^(checkbox|radio)$/.test(this.$.type)) this.$.checked = this.$.value == val;
-		else this.$.value = val != null ? val : '';
-		return this;
-	}
-});
-
-HtmlTextArea = HtmlFormElement.extend({
-	_tag: 'textarea',
-	_properties: ['value']
-});
-
-HtmlSelect = HtmlFormElement.extend({
-	_tag: 'select',
-	_properties: ['type', 'selectedIndex'],
-
-	getOptions: function() {
-		return this.getElements('option');
-	},
-
-	getSelected: function() {
-		return this.getElements('option[selected]');
-	},
-
-	setSelected: function(values) {
-		this.$.selectedIndex = -1;
-		if (values) {
-			Array.each(values.length != null ? values : [values], function(val) {
-				val = DomElement.unwrap(val);
-				if (val != null)
-					this.getElements('option[value="' + (val.value || val) + '"]').setProperty('selected', true);
-			}, this);
-		}
-		return this;
-	},
-
-	getValue: function() {
-		return this.getSelected().getProperty('value');
-	},
-
-	setValue: function(values) {
-		return this.setSelected(values);
-	}
-});
-
-HtmlOption = HtmlFormElement.extend({
-	_tag: 'option',
-	_properties: ['text', 'value', 'selected', 'defaultSelected', 'index']
-});
-
-HtmlFormElement.inject({
-	setSelection: function(start, end) {
-		var sel = end == undefined ? start : { start: start, end: end };
-		this.focus();
-		if (this.$.setSelectionRange) {
-			this.$.setSelectionRange(sel.start, sel.end);
-		} else {
-			var value = this.getValue();
-			var len = value.substring(sel.start, sel.end).replace(/\r/g, '').length;
-			var pos = value.substring(0, sel.start).replace(/\r/g, '').length;
-			var range = this.$.createTextRange();
-			range.collapse(true);
-			range.moveEnd('character', pos + len);
-			range.moveStart('character', pos);
-			range.select();
-		}
-		return this;
-	},
-
-	getSelection: function() {
-		if (this.$.selectionStart !== undefined) {
-			return { start: this.$.selectionStart, end: this.$.selectionEnd };
-		} else {
-			this.focus();
-			var pos = { start: 0, end: 0 };
-			var range = this.getDocument().$.selection.createRange();
-			var dup = range.duplicate();
-			if (this.$.type == 'text') {
-				pos.start = 0 - dup.moveStart('character', -100000);
-				pos.end = pos.start + range.text.length;
-			} else {
-				var value = this.getValue();
-				dup.moveToElementText(this.$);
-				dup.setEndPoint('StartToEnd', range);
-				pos.end = value.length - dup.text.length;
-				dup.setEndPoint('StartToStart', range);
-				pos.start = value.length - dup.text.length;
-			}
-			return pos;
-		}
-	},
-
-	getSelectedText: function() {
- 		var range = this.getSelection();
-		return this.getValue().substring(range.start, range.end);
-	},
-
-	replaceSelectedText: function(value, select) {
-		var range = this.getSelection(), current = this.getValue();
-		var top = this.$.scrollTop, height = this.$.scrollHeight;
-		this.setValue(current.substring(0, range.start) + value + current.substring(range.end, current.length));
-		if (top != null)
-			this.$.scrollTop = top + this.$.scrollHeight - height;
-		return select || select == undefined
-			? this.setSelection(range.start, range.start + value.length)
-			: this.setCaret(range.start + value.length);
-	},
-
-	getCaret: function() {
-		return this.getSelection().start;
-	},
-
-	setCaret: function(pos) {
-		return this.setSelection(pos, pos);
-	}
-});
-
-HtmlImage = HtmlElement.extend({
-	_tag: 'img',
-	_properties: ['src', 'alt', 'title']
-});
-
-$document = Browser.document = DomNode.wrap(document);
-$window = Browser.window = DomNode.wrap(window).addEvent('unload', DomNode.dispose);
-
-Chain = {
-	chain: function(fn) {
-		(this._chain = this._chain || []).push(fn);
-		return this;
-	},
-
-	callChain: function() {
-		if (this._chain && this._chain.length)
-			this._chain.shift().apply(this, arguments);
-		return this;
-	},
-
-	clearChain: function() {
-		this._chain = [];
-		return this;
-	}
-};
-
-Callback = {
-	addEvent: function(type, fn) {
-		var ref = this.events = this.events || {};
-		ref = ref[type] = ref[type] || [];
-		if (!ref.find(function(val) { return val == fn })) ref.push(fn);
-		return this;
-	},
-
-	addEvents: function(events) {
-		return Base.each((events || []), function(fn, type) {
-			this.addEvent(type, fn);
-		}, this);
-	},
-
-	fireEvent: function(type, args, delay) {
-		return (this.events && this.events[type] || []).each(function(fn) {
-			fn.delay(delay, this, args);
-		}, this);
-	},
-
-	removeEvent: function(type, fn) {
-		if (this.events && this.events[type])
-			this.events[type].remove(function(val) { return fn == val; });
-		return this;
-	},
-
-	setOptions: function(opts) {
-		return (this.options = Hash.create(this.options, opts)).each(function(val, i) {
-			if (typeof val == 'function' && (i = i.match(/^on([A-Z]\w*)/)))
-				this.addEvent(i[1].toLowerCase(), val);
-		}, this);
-	},
-
-	statics: {
-		inject: function() {
-			var proto = this.prototype, options = proto.options;
-			this.base.apply(this, arguments);
-			if (proto.options != options)
-				proto.options = Hash.merge({}, options, proto.options);
-			return this;
-		}
-	}
-};
-
-Request = Base.extend(Chain, Callback, new function() {
-	var unique = 0;
-
-	function createRequest(that) {
-		if (!that.transport)
-			that.transport = window.XMLHttpRequest && new XMLHttpRequest()
-				|| Browser.TRIDENT && new ActiveXObject('Microsoft.XMLHTTP');
-	}
-
-	function createFrame(that) {
-		var id = 'request_' + unique++, load = that.onFrameLoad.bind(that);
-		var div = DomElement.get('body').injectBottom('div', {
-				styles: {
-					position: 'absolute', width: 0, height: 0, top: 0, marginLeft: '-10000px'
-				}
-			}, [
-				'iframe', {
-					name: id, id: id, events: { load: load, readystatechange: load }
-				}
-			]
-		);
-		that.frame = {
-			id: id, div: div,
-			iframe: window.frames[id] || document.getElementById(id),
-			element: DomElement.get(id)
-		};
-		div.offsetWidth;
-	}
-
-	return {
-		options: {
-			headers: {
-				'X-Requested-With': 'XMLHttpRequest',
-				'Accept': 'text/javascript, text/html, application/xml, text/xml, */*'
-			},
-			method: 'post',
-			async: true,
-			urlEncoded: true,
-			encoding: 'utf-8',
-			emulation: true,
-			secure: false
-		},
-
-		initialize: function() {
-			var params = Array.associate(arguments, { url: 'string', options: 'object', handler: 'function' });
-			this.setOptions(params.options);
-			if (params.handler)
-				this.addEvent('complete', params.handler);
-			if (this.options.update)
-				this.options.type = 'html';
-			this.headers = new Hash(this.options.headers);
-			if (this.options.type == 'json') {
-				this.setHeader('Accept', 'application/json');
-				this.setHeader('X-Request', 'JSON');
-			}
-			if (this.options.urlEncoded && /^(post|put)$/.test(this.options.method)) {
-				this.setHeader('Content-Type', 'application/x-www-form-urlencoded' +
-					(this.options.encoding ? '; charset=' + this.options.encoding : ''));
-			}
-			this.headers.append(this.options.headers);
-		},
-
-		onStateChange: function() {
-			if (this.transport.readyState == 4 && this.running) {
-				this.running = false;
-				this.status = 0;
-				try {
-					this.status = this.transport.status;
-					delete this.transport.onreadystatechange;
-				} catch (e) {}
-				if (!this.status || this.status >= 200 && this.status < 300) {
-					this.success(this.transport.responseText, this.transport.responseXML);
-				} else {
-					this.fireEvent('complete').fireEvent('failure');
-				}
-			}
-		},
-
-		onFrameLoad: function() {
-			var frame = this.frame && this.frame.iframe, loc = frame && frame.location,
-				doc = frame && (frame.contentDocument || frame.contentWindow || frame).document;
-			if (this.running && frame && loc && (!loc.href || loc.href.indexOf(this.url) != -1)
-				&& /^(loaded|complete|undefined)$/.test(doc.readyState)) {
-				this.running = false;
-				var html = this.options.type == 'html', area = !html
-					&& doc.getElementsByTagName('textarea')[0];
-				var text = doc && (area && area.value || doc.body
-					&& (html && doc.body.innerHTML || doc.body.textContent
-					|| doc.body.innerText)) || '';
-				this.frame.element.setProperty('src', '');
-				this.success(text);
-				if (!this.options.link) {
-					var div = this.frame.div;
-					div.insertBottom(DomElement.get('body'));
-					div.remove.delay(5000, div);
-					this.frame = null;
-				}
-			}
-		},
-
-		success: function(text, xml) {
-			var args;
-			switch (this.options.type) {
-			case 'html':
-				var match = text.match(/<body[^>]*>([\u0000-\uffff]*?)<\/body>/i);
-				var stripped = this.stripScripts(match ? match[1] : text);
-				if (this.options.update)
-					DomElement.get(this.options.update).setHtml(stripped.html);
-				if (this.options.evalScripts)
-					this.executeScript(stripped.script);
-				args = [ stripped.html, text ];
-				break;
-			case 'json':
-				args = [ Json.decode(text, this.options.secure), text ];
-				break;
-			default: 
-				args = [ this.processScripts(text), xml ]
-			}
-			this.fireEvent('complete', args)
-				.fireEvent('success', args)
-				.callChain();
-		},
-
-		stripScripts: function(html) {
-			var script = '';
-			html = html.replace(/<script[^>]*>([\u0000-\uffff]*?)<\/script>/gi, function() {
-				script += arguments[1] + '\n';
-				return '';
-			});
-			return { html: html, script: script };
-		},
-
-		processScripts: function(text) {
-			if (this.options.evalResponse || (/(ecma|java)script/).test(this.getHeader('Content-type'))) {
-				this.executeScript(text);
-				return text;
-			} else {
-				var stripped = this.stripScripts(text);
-				if (this.options.evalScripts)
-					this.executeScript(stripped.script);
-				return stripped.html;
-			}
-		},
-
-		executeScript: function(script) {
-			if (window.execScript) {
-				window.execScript(script);
-			} else {
-				DomElement.get('head').injectBottom('script', {
-					type: 'text/javascript', text: script
-				}).remove();
-			}
-		},
-
-		setHeader: function(name, value) {
-			this.headers[name] = value;
-			return this;
-		},
-
-		getHeader: function(name) {
-			try {
-				if (this.transport)
-					return this.transport.getResponseHeader(name);
-			} catch (e) {}
-			return null;
-		},
-
-		send: function() {
-			var params = Array.associate(arguments, { url: 'string', options: 'object', handler: 'function' });
-			var opts = params.options ? Hash.merge(params.options, this.options) : this.options;
-			if (params.handler)
-				this.addEvent('complete', function() {
-					params.handler.apply(this, arguments);
-					this.removeEvent('complete', arguments.callee);
-				});
-			if (this.running) {
-				switch (opts.link) {
-					case 'cancel':
-						this.cancel();
-						break;
-					case 'chain':
-						this.chain(this.send.wrap(this, arguments));
-					default:
-						return this;
-				}
-			}
-			var data = opts.data || '';
-			var url = params.url || opts.url;
-			switch (Base.type(data)) {
-				case 'element':
-				 	data = DomNode.wrap(data);
-					if (data.getTag() != 'form' || !data.hasElement('input[type=file]'))
-						data = data.toQueryString();
-					break;
-				case 'object':
-					data = Base.toQueryString(data);
-					break;
-				default:
-					data = data.toString();
-			}
-			var string = typeof data == 'string', method = opts.method;
-			if (opts.emulation && /^(put|delete)$/.test(method)) {
-				if (string) data += '&_method=' + method;
-				else data.setValue('_method', method);
-				method = 'post';
-			}
-			if (string && !this.options.iframe) {
-				createRequest(this);
-				if (!this.transport) {
-					if (!this.frame)
-						createFrame(this);
-					method = 'get';
-				}
-			} else if (!this.frame) {
- 				createFrame(this);
-			}
-			if (string && data && method == 'get') {
-				url += (url.contains('?') ? '&' : '?') + data;
-				data = null;
-			}
-			this.running = true;
-			this.url = url;
-			if (this.frame) {
-				var form = !string && data;
-				if (form) {
-					form.set({
-						target: this.frame.id, action: url, method: method,
-						enctype:  method == 'get'
-							? 'application/x-www-form-urlencoded'
-							: 'multipart/form-data',
-						'accept-charset': opts.encoding || ''
-					}).submit();
-				} else {
-					this.frame.element.setProperty('src', url);
-				}
-			} else if (this.transport) {
-				try {
-					this.transport.open(method.toUpperCase(), url, opts.async);
-					this.transport.onreadystatechange = this.onStateChange.bind(this);
-					new Hash(this.headers, opts.headers).each(function(header, name) {
-						try{
-							this.transport.setRequestHeader(name, header);
-						} catch (e) {
-							this.fireEvent('exception', [e, name, header]);
-						}
-					}, this);
-					this.fireEvent('request');
-					this.transport.send(data);
-					if (!opts.async)
-						this.onStateChange();
-				} catch (e) {
-					this.fireEvent('failure', [e]);
-				}
-			}
-			return this;
-		},
-
-		cancel: function() {
-			if (this.running) {
-				this.running = false;
-				if (this.transport) {
-					this.transport.abort();
-					this.transport.onreadystatechange = null;
-					this.transport = null;
-				} else if (this.frame) {
-					this.frame.div.remove();
-					this.frame = null;
-				}
-				this.fireEvent('cancel');
-			}
-			return this;
-		}
-	};
-});
-
-HtmlForm.inject({
-	send: function(url) {
-		if (!this.sender)
-			this.sender = new Request({ link: 'cancel' });
-		this.sender.send({
-			url: url || this.getProperty('action'),
-			data: this, method: this.getProperty('method') || 'post'
-		});
-	}
-});
-
-HtmlElement.inject({
-	load: function() {
-		if (!this.loader)
-			this.loader = new Request({ link: 'cancel', update: this, method: 'get' });
-		this.loader.send(Array.associate(arguments, { data: 'object', url: 'string' }));
-		return this;
-	}
-});
-
-Asset = new function() {
-	function getProperties(props) {
-		return props ? Hash.create(props).each(function(val, key) {
-			if (/^on/.test(key)) delete this[key];
-		}) : {};
-	}
-
-	function createMultiple(type, sources, options) {
-		var props = getProperties(options), count = 0;
-		options = options || {};
-		return sources.each(function(src) {
-			props.onLoad = function() {
-				if (options.onProgress)
-					options.onProgress(src);
-				if (++count == sources.length && options.onComplete)
-					options.onComplete();
-			}
-			this.push(Asset[type](src, props));
-		}, new HtmlElements());
-	}
-
-	return {
-		script: function(src, props) {
-			var script = DomElement.get('head').injectBottom('script', Hash.merge({
-				events: {
-					load: props.onLoad && function() {
-						if (!this.loaded) {
-							this.loaded = true;
-							props.onLoad.call(this);
-						}
-					},
-					readystatechange: function() {
-						if (/loaded|complete/.test(this.$.readyState))
-							this.fireEvent('load');
-					}
-				},
-				src: src
-			}, getProperties(props)));
-			if (Browser.WEBKIT && Browser.VERSION < 420)
-				new Request({ url: src, method: 'get' }).addEvent('success', function() {
-					script.fireEvent('load', [], 1);
-				}).send();
-			return script;
-		},
-
-		stylesheet: function(src, props) {
-			return new HtmlElement('link', new Hash({
-				rel: 'stylesheet', media: 'screen', type: 'text/css', href: src
-			}, props)).insertInside(DomElement.get('head'));
-		},
-
-		image: function(src, props) {
-			props = props || {};
-			var image = new Image();
-			image.src = src;
-			var element = new HtmlElement('img', { src: src });
-			['load', 'abort', 'error'].each(function(type) {
-				var name = 'on' + type.capitalize();
-				if (props[name]) element.addEvent(type, function() {
-					this.removeEvent(type, arguments.callee);
-					props[name].call(this);
-				});
-			});
-			if (image.width && image.height)
-				element.fireEvent('load', [], 1);
-			return element.setProperties(getProperties(props));
-		},
-
-	 	scripts: function(sources, options) {
-			return createMultiple('script', sources, options);
-		},
-
-	 	stylesheets: function(sources, options) {
-			return createMultiple('stylesheet', sources, options);
-		},
-
-	 	images: function(sources, options) {
-			return createMultiple('image', sources, options);
-		}
-	}
-};
-
-Cookie = {
-	set: function(name, value, expires, path) {
-		document.cookie = name + '=' + encodeURIComponent(value) + (expires ? ';expires=' +
-			expires.toGMTString() : '') + ';path=' + (path || '/');
-	},
-	get: function(name) {
-		var res = document.cookie.match('(?:^|;)\\s*' + name + '=([^;]*)');
-		if (res) return decodeURIComponent(res[1]);
-	},
-
-	remove: function(name) {
-		this.set(name, '', -1);
-	}
-};
-
-Fx = Base.extend(Chain, Callback, {
-	options: {
-		fps: 50,
-		unit: false,
-		duration: 500,
-		wait: true,
-		transition: function(p) {
-			return -(Math.cos(Math.PI * p) - 1) / 2;
-		}
-	},
-
-	initialize: function(element, options) {
-		this.element = DomElement.get(element);
-		this.setOptions(options);
-	},
-
-	step: function() {
-		var time = Date.now();
-		if (time < this.time + this.options.duration) {
-			this.delta = this.options.transition((time - this.time) / this.options.duration);
-			this.update(this.get());
-		} else {
-			this.stop(true);
-			this.update(this.to);
-			this.fireEvent('complete', [this.element]).callChain();
-		}
-	},
-
-	set: function(to) {
-		this.update(to);
-		this.fireEvent('set', [this.element]);
-		return this;
-	},
-
-	get: function() {
-		return this.compute(this.from, this.to);
-	},
-
-	compute: function(from, to) {
-		return (to - from) * this.delta + from;
-	},
-
-	start: function(from, to) {
-		if (!this.options.wait) this.stop();
-		else if (this.timer) return this;
-		this.from = from;
-		this.to = to;
-		this.time = Date.now();
-		if (!this.slave) {
-			this.timer = this.step.periodic(Math.round(1000 / this.options.fps), this);
-			this.fireEvent('start', [this.element]);
-		}
-		this.step();
-		return this;
-	},
-
-	stop: function(end) {
-		if (this.timer) {
-			this.timer = this.timer.clear();
-			if (!end) this.fireEvent('cancel', [this.element]).clearChain();
-		}
-		return this;
-	}
-});
-
-Fx.Scroll = Fx.extend({
-	options: {
-		offset: { x: 0, y: 0 },
-		wheelStops: true
-	},
-
-	initialize: function(element, options) {
-		this.base(element, options);
-		if (this.options.wheelStops) {
-			var stop = this.stop.bind(this), stopper = this.element;
-			this.addEvent('start', function() {
-				stopper.addEvent('mousewheel', stop);
-			}, true);
-			this.addEvent('complete', function() {
-				stopper.removeEvent('mousewheel', stop);
-			}, true);
-		}
-	},
-
-	update: function(x, y) {
-		var now = Array.flatten(arguments);
-		this.element.setScrollOffset(now[0], now[1]);
-	},
-
-	get: function() {
-		var now = [];
-		for (var i = 0; i < 2; i++)
-			now.push(this.compute(this.from[i], this.to[i]));
-		return now;
-	},
-
-	start: function(x, y) {
-		var offsetSize = this.element.getSize(),
-			scrollSize = this.element.getScrollSize(),
-			scroll = this.element.getScrollOffset(),
-			values = { x: x, y: y },
-			lookup = { x: 'width', y: 'height' };
-		for (var i in values) {
-			var s = lookup[i];
-			var max = scrollSize[s] - offsetSize[s];
-			if (Base.check(values[i]))
-				values[i] = Base.type(values[i]) == 'number'
-					? values[i].limit(0, max) : max;
-			else values[i] = scroll[i];
-			values[i] += this.options.offset[i];
-		}
-		return this.base([scroll.x, scroll.y], [values.x, values.y]);
-	},
-
-	toTop: function() {
-		return this.start(false, 0);
-	},
-
-	toLeft: function() {
-		return this.start(0, false);
-	},
-
-	toRight: function() {
-		return this.start('right', false);
-	},
-
-	toBottom: function() {
-		return this.start(false, 'bottom');
-	},
-
-	toElement: function(el, options) {
-		var el = DomElement.get(el), offset = el.getOffset(),
-			current = el.getWindow().getScrollOffset();
-		return this.start(
-				!options || options.x ? offset.x : current.x,
-				!options || options.y ? offset.y : current.y);
-	}
-});
-
-Fx.SmoothScroll = Fx.Scroll.extend({
-	initialize: function(options, context) {
-		context = DomElement.get(context || document);
-		var doc = context.getDocument(), win = context.getWindow();
-		this.base(doc, options);
-		var links = this.options.links ? $$(this.options.links) : $$('a', context);
-		var loc = win.location.href.match(/^[^#]*/)[0] + '#';
-		links.each(function(link) {
-			if (link.$.href.indexOf(loc) != 0) return;
-			var hash = link.$.href.substring(loc.length);
-			var anchor = hash && DomElement.get('#' + hash, context);
-			if (anchor) {
-				link.addEvent('click', function(event) {
-					this.toElement(anchor);
-					var props = anchor.getProperties('name', 'id');
-					anchor.removeProperties('name', 'id');
-					win.location.hash = hash;
-					anchor.setProperties(props);
-					event.stop();
-				}.bind(this));
-			}
-		}, this);
-	}
-});
-
-Fx.CSS = new function() {
-
-	var parsers = new Hash({
-		color: {
-			match: function(value) {
-				if (value.match(/^#[0-9a-f]{3,6}$/i)) return value.hexToRgb(true);
-				return ((value = value.match(/(\d+),\s*(\d+),\s*(\d+)/))) ? [value[1], value[2], value[3]] : false;
-			},
-
-			compute: function(from, to, fx) {
-				return from.map(function(value, i) {
-					return Math.round(fx.compute(value, to[i]));
-				});
-			},
-
-			get: function(value) {
-				return value.map(Number);
-			}
-		},
-
-		number: {
-			match: function(value) {
-				return parseFloat(value);
-			},
-
-			compute: function(from, to, fx) {
-				return fx.compute(from, to);
-			},
-
-			get: function(value, unit) {
-				return (unit) ? value + unit : value;
-			}
-		}
-	});
-
-	return {
-		start: function(element, property, values) {
-			values = Array.convert(values);
-			if (!Base.check(values[1]))
-				values = [ element.getStyle(property), values[0] ];
-			var parsed = values.map(Fx.CSS.set);
-			return { from: parsed[0], to: parsed[1] };
-		},
-
-		set: function(value) {
-			return Array.convert(value).map(function(val) {
-				val = val + '';
-				var res = parsers.find(function(parser, key) {
-					var value = parser.match(val);
-					if (Base.check(value)) return { value: value, parser: parser };
-				}) || {
-					value: val,
-					parser: {
-						compute: function(from, to) {
-							return to;
-						}
-					}
-				};
-				return res;
-			});
-		},
-
-		compute: function(from, to, fx) {
-			return from.map(function(obj, i) {
-				return {
-					value: obj.parser.compute(obj.value, to[i].value, fx),
-					parser: obj.parser
-				};
-			});
-		},
-
-		get: function(now, unit) {
-			return now.reduce(function(prev, cur) {
-				var get = cur.parser.get;
-				return prev.concat(get ? get(cur.value, unit) : cur.value);
-			}, []);
-		}
-	}
-};
-
-Fx.Style = Fx.extend({
-	initialize: function(element, property, options) {
-		this.base(element, options);
-		this.property = property;
-	},
-
-	hide: function() {
-		return this.set(0);
-	},
-
-	get: function() {
-		return Fx.CSS.compute(this.from, this.to, this);
-	},
-
-	set: function(to) {
-		return this.base(Fx.CSS.set(to));
-	},
-
-	start: function(from, to) {
-		if (this.timer && this.options.wait) return this;
-		var parsed = Fx.CSS.start(this.element, this.property, [from, to]);
-		return this.base(parsed.from, parsed.to);
-	},
-
-	update: function(val) {
-		this.element.setStyle(this.property, Fx.CSS.get(val, this.options.unit));
-	}
-});
-
-HtmlElement.inject({
-	effect: function(prop, opts) {
-		return new Fx.Style(this, prop, opts);
-	}
-});
-
-Fx.Styles = Fx.extend({
-	get: function() {
-		var that = this;
-		return Base.each(this.from, function(from, key) {
-			this[key] = Fx.CSS.compute(from, that.to[key], that);
-		}, {});
-	},
-
-	set: function(to) {
-		return this.base(Base.each(to, function(val, key) {
-			this[key] = Fx.CSS.set(val);
-		}, {}));
-	},
-
-	start: function(obj) {
-		if (this.timer && this.options.wait) return this;
-		var from = {}, to = {};
-		Base.each(obj, function(val, key) {
-			var parsed = Fx.CSS.start(this.element, key, val);
-			from[key] = parsed.from;
-			to[key] = parsed.to;
-		}, this);
-		return this.base(from, to);
-	},
-
-	update: function(val) {
-		Base.each(val, function(val, key) {
-			this.element.setStyle(key, Fx.CSS.get(val, this.options.unit));
-		}, this);
-	}
-
-});
-
-HtmlElement.inject({
-	effects: function(opts) {
-		return new Fx.Styles(this, opts);
-	}
-});
-
-Fx.Elements = Fx.extend({
-	initialize: function(elements, options) {
-		this.base(null, options);
-		this.elements = DomElement.getAll(elements);
-	},
-
-	start: function(obj) {
-		if (this.timer && this.options.wait) return this;
-		this.effects = {};
-
-		function start(that, key, val) {
-			var fx = that.effects[key] = new Fx.Styles(that.elements[key], that.options);
-			fx.slave = true;
-			fx.start(val);
-		}
-
-		Base.each(obj, function(val, key) {
-			if (key == '*') {
-				this.elements.each(function(el, key) {
-					start(this, key, val);
-				}, this);
-			} else if (isNaN(parseInt(key))) {
-				var els = DomElement.getAll(key);
-				this.elements.append(els);
-				els.each(function(el) {
-					start(this, this.elements.indexOf(el), val);
-				}, this);
-			} else {
-				start(this, key, val);
-			}
-		}, this);
-		return this.base();
-	},
-
-	set: function(to) {
-	},
-
-	update: function(to) {
-		Base.each(this.effects, function(fx) {
-			fx.step();
-		});
-	}
-});
-
-Fx.Transitions = new Base().inject({
-	inject: function(src) {
-		return this.base(Base.each(src, function(func, name) {
-			func.In = func;
-
-			func.Out = function(pos) {
-				return 1 - func(1 - pos);
-			}
-
-			func.InOut = function(pos) {
-				return pos <= 0.5 ? func(2 * pos) / 2 : (2 - func(2 * (1 - pos))) / 2;
-			}
-		}));
-	},
-
-	Linear: function(p) {
-		return p;
-	}
-});
-
-Fx.Transitions.inject({
-	Pow: function(p, x) {
-		return Math.pow(p, x[0] || 6);
-	},
-
-	Expo: function(p) {
-		return Math.pow(2, 8 * (p - 1));
-	},
-
-	Circ: function(p) {
-		return 1 - Math.sin(Math.acos(p));
-	},
-
-	Sine: function(p) {
-		return 1 - Math.sin((1 - p) * Math.PI / 2);
-	},
-
-	Back: function(p, x) {
-		x = x[0] || 1.618;
-		return Math.pow(p, 2) * ((x + 1) * p - x);
-	},
-
-	Bounce: function(p) {
-		var value;
-		for (var a = 0, b = 1; 1; a += b, b /= 2) {
-			if (p >= (7 - 4 * a) / 11) {
-				value = - Math.pow((11 - 6 * a - 11 * p) / 4, 2) + b * b;
-				break;
-			}
-		}
-		return value;
-	},
-
-	Elastic: function(p, x) {
-		return Math.pow(2, 10 * --p) * Math.cos(20 * p * Math.PI * (x[0] || 1) / 3);
-	}
-
-});
-
-Fx.Transitions.inject(['Quad', 'Cubic', 'Quart', 'Quint'].each(function(name, i) {
-	this[name] = function(p) {
-		return Math.pow(p, i + 2);
-	}
-}, {}));
-
diff --git a/dist/docs/resources/js/codemirror.js b/dist/docs/resources/js/codemirror.js
deleted file mode 100644
index 0c1c6427..00000000
--- a/dist/docs/resources/js/codemirror.js
+++ /dev/null
@@ -1 +0,0 @@
-var CodeMirror=function(){function O(a,b){if(a.indexOf)return a.indexOf(b);for(var c=0,d=a.length;c<d;++c)if(a[c]==b)return c;return-1}function N(a,b){if(!b)return a?a.length:0;if(!a)return b.length;for(var c=a.length,d=b.length;c>=0&&d>=0;--c,--d)if(a.charAt(c)!=b.charAt(d))break;return d+1}function M(a){L.innerText=L.textContent=a;return L.innerHTML}function K(a){return{line:a.line,ch:a.ch}}function J(a,b){return a.line<b.line||a.line==b.line&&a.ch<b.ch}function I(a,b){return a.line==b.line&&a.ch==b.ch}function H(a){return a.textContent||a.innerText||a.nodeValue||""}function G(a,b){var c=a.ownerDocument.body,d=0,e=0,f=!1;for(var g=a;g;g=g.offsetParent)d+=g.offsetLeft,e+=g.offsetTop,b&&F(g).position=="fixed"&&(f=!0);var h=b&&!f?null:c;for(var g=a.parentNode;g!=h;g=g.parentNode)g.scrollLeft!=null&&(d-=g.scrollLeft,e-=g.scrollTop);return{left:d,top:e}}function F(a){if(a.currentStyle)return a.currentStyle;return window.getComputedStyle(a,null)}function E(a,b){b==null&&(b=a.search(/[^\s\u00a0]/),b==-1&&(b=a.length));for(var c=0,d=0;c<b;++c)a.charAt(c)=="\t"?d+=A-d%A:++d;return d}function u(){this.id=null}function t(a,b,c,d){function e(a){c(a||window.event)}if(typeof a.addEventListener=="function"){a.addEventListener(b,e,!1);if(d)return function(){a.removeEventListener(b,e,!1)}}else{a.attachEvent("on"+b,e);if(d)return function(){a.detachEvent("on"+b,e)}}}function s(a){if(a.pageY!=null)return a.pageY;var b=p(a).ownerDocument;return a.clientY+b.body.scrollTop+b.documentElement.scrollTop}function r(a){if(a.pageX!=null)return a.pageX;var b=p(a).ownerDocument;return a.clientX+b.body.scrollLeft+b.documentElement.scrollLeft}function q(a){if(a.which)return a.which;if(a.button&1)return 1;if(a.button&2)return 3;if(a.button&4)return 2}function p(a){return a.target||a.srcElement}function o(a){m(a),n(a)}function n(a){a.stopPropagation?a.stopPropagation():a.cancelBubble=!0}function m(a){a.preventDefault?a.preventDefault():a.returnValue=!1}function l(a){a.stop||(a.stop=k);return a}function k(){o(this)}function j(){this.time=0,this.done=[],this.undone=[]}function i(a,b,c,d){for(var e=0,f=0,g=0;f<b;e+=2){var h=c[e],i=f+h.length;g==0?(i>a&&d.push(h.slice(a-f,Math.min(h.length,b-f)),c[e+1]),i>=a&&(g=1)):g==1&&(i>b?d.push(h.slice(0,b-f),c[e+1]):d.push(h,c[e+1])),f=i}}function h(a,b){this.styles=b||[a,null],this.stateAfter=null,this.text=a,this.marked=this.gutterMarker=this.className=null}function g(a){this.pos=this.start=0,this.string=a}function f(a,b,c){return a.startState?a.startState(b,c):!0}function e(a,b){if(b===!0)return b;if(a.copyState)return a.copyState(b);var c={};for(var d in b){var e=b[d];e instanceof Array&&(e=e.concat([])),c[d]=e}return c}function a(b,c){function cV(a,b,c){this.atOccurrence=!1,c==null&&(c=typeof a=="string"&&a==a.toLowerCase()),b&&typeof b=="object"?b=cj(b):b={line:0,ch:0},this.pos={from:b,to:b};if(typeof a!="string")this.matches=function(b,c){if(b){var d=ba[c.line].text.slice(0,c.ch),e=d.match(a),f=0;while(e){var g=d.indexOf(e[0]);f+=g,d=d.slice(g+1);var h=d.match(a);if(h)e=h;else break;f++}}else var d=ba[c.line].text.slice(c.ch),e=d.match(a),f=e&&c.ch+d.indexOf(e[0]);if(e)return{from:{line:c.line,ch:f},to:{line:c.line,ch:f+e[0].length},match:e}};else{c&&(a=a.toLowerCase());var d=c?function(a){return a.toLowerCase()}:function(a){return a},e=a.split("\n");e.length==1?this.matches=function(b,c){var e=d(ba[c.line].text),f=a.length,g;if(b?c.ch>=f&&(g=e.lastIndexOf(a,c.ch-f))!=-1:(g=e.indexOf(a,c.ch))!=-1)return{from:{line:c.line,ch:g},to:{line:c.line,ch:g+f}}}:this.matches=function(a,b){var c=b.line,f=a?e.length-1:0,g=e[f],h=d(ba[c].text),i=a?h.indexOf(g)+g.length:h.lastIndexOf(g);if(!(a?i>=b.ch||i!=g.length:i<=b.ch||i!=h.length-g.length))for(;;){if(a?!c:c==ba.length-1)return;h=d(ba[c+=a?-1:1].text),g=e[a?--f:++f];if(f>0&&f<e.length-1){if(h!=g)return;continue}var j=a?h.lastIndexOf(g):h.indexOf(g)+g.length;if(a?j!=h.length-g.length:j!=g.length)return;var k={line:b.line,ch:i},l={line:c,ch:j};return{from:a?l:k,to:a?k:l}}}}}function cU(a){return function(){cT++||cR();try{var b=a.apply(this,arguments)}finally{--cT||cS()}return b}}function cS(){var a=!1;bl&&(a=!bZ()),bj.length?ca(bj):bl&&ce(),a&&bZ(),bl&&cJ(),bd&&!bm&&(bi===!0||bi!==!1&&bl)&&bX(),bl&&g.matchBrackets&&setTimeout(cU(function(){bs&&(bs(),bs=null),cL(!1)}),20);var b=bk;bl&&g.onCursorActivity&&g.onCursorActivity(by),b&&g.onChange&&by&&g.onChange(by,b)}function cR(){bi=null,bj=[],bk=bl=!1}function cQ(a){!bb.length||Z.set(a,cU(cP))}function cP(){var a=+(new Date)+g.workTime,b=bb.length;while(bb.length){if(!ba[bn].stateAfter)var c=bn;else var c=bb.pop();if(c>=ba.length)continue;var d=cM(c),h=d&&ba[d-1].stateAfter;h?h=e(_,h):h=f(_);var i=0,j=_.compareStates;for(var k=d,l=ba.length;k<l;++k){var m=ba[k],n=m.stateAfter;if(+(new Date)>a){bb.push(k),cQ(g.workDelay),bj.push({from:c,to:k+1});return}var o=m.highlight(_,h);m.stateAfter=e(_,h);if(j){if(n&&j(n,h))break}else if(o||!n)i=0;else if(++i>3)break}bj.push({from:c,to:k+1})}b&&g.onHighlightComplete&&g.onHighlightComplete(by)}function cO(a,b){var c=cN(a);for(var d=a;d<b;++d){var f=ba[d];f.highlight(_,c),f.stateAfter=e(_,c)}}function cN(a){var b=cM(a),c=b&&ba[b-1].stateAfter;c?c=e(_,c):c=f(_);for(var d=b;d<a;++d){var g=ba[d];g.highlight(_,c),g.stateAfter=e(_,c)}a<ba.length&&!ba[a].stateAfter&&bb.push(a);return c}function cM(a){var b,c;for(var d=a,e=a-40;d>e;--d){if(d==0)return 0;var f=ba[d-1];if(f.stateAfter)return d;var g=f.indentation();if(c==null||b>g)c=d,b=g}return c}function cL(a){function p(a,b,c){if(!!a.text){var d=a.styles,e=g?0:a.text.length-1,f;for(var i=g?0:d.length-2,j=g?d.length:-2;i!=j;i+=2*h){var k=d[i];if(d[i+1]!=null&&d[i+1]!=m){e+=h*k.length;continue}for(var l=g?0:k.length-1,p=g?k.length:-1;l!=p;l+=h,e+=h)if(e>=b&&e<c&&o.test(f=k.charAt(l))){var q=cK[f];if(q.charAt(1)==">"==g)n.push(f);else{if(n.pop()!=q.charAt(0))return{pos:e,match:!1};if(!n.length)return{pos:e,match:!0}}}}}}var b=be.inverted?be.from:be.to,c=ba[b.line],d=b.ch-1,e=d>=0&&cK[c.text.charAt(d)]||cK[c.text.charAt(++d)];if(!!e){var f=e.charAt(0),g=e.charAt(1)==">",h=g?1:-1,i=c.styles;for(var j=d+1,k=0,l=i.length;k<l;k+=2)if((j-=i[k].length)<=0){var m=i[k+1];break}var n=[c.text.charAt(d)],o=/[(){}[\]]/;for(var k=b.line,l=g?Math.min(k+100,ba.length):Math.max(-1,k-100);k!=l;k+=h){var c=ba[k],q=k==b.line,r=p(c,q&&g?d+1:0,q&&!g?d:c.text.length);if(r)break}r||(r={pos:null,match:!1});var m=r.match?"CodeMirror-matchingbracket":"CodeMirror-nonmatchingbracket",s=cu({line:b.line,ch:d},{line:b.line,ch:d+1},m),t=r.pos!=null?cu({line:k,ch:r.pos},{line:k,ch:r.pos+1},m):function(){},u=cU(function(){s(),t()});a?setTimeout(u,800):bs=u}}function cJ(){clearInterval($);var a=!0;W.style.visibility="",$=setInterval(function(){W.style.visibility=(a=!a)?"":"hidden"},650)}function cI(a){function e(){var a=P(E.value).join("\n");a!=d&&cU(bP)(a,"end"),D.style.position="relative",E.style.cssText=c,bm=!1,bX(),bU()}var b=cH(a);if(!!b&&!window.opera){(I(be.from,be.to)||J(b,be.from)||!J(b,be.to))&&cU(ch)(b.line,b.ch);var c=E.style.cssText;D.style.position="absolute",E.style.cssText="position: fixed; width: 30px; height: 30px; top: "+(s(a)-1)+"px; left: "+(r(a)-1)+"px; z-index: 1000; background: white; "+"border-width: 0; outline: none; overflow: hidden; opacity: .05; filter: alpha(opacity=5);",bm=!0;var d=E.value=bS();bY(),R(E,0,E.value.length);if(w){o(a);var f=t(window,"mouseup",function(){f(),setTimeout(e,20)},!0)}else setTimeout(e,50)}}function cH(a,b){var c=G(F,!0),d,e;try{d=a.clientX,e=a.clientY}catch(a){return null}if(!b&&(d-c.left>F.clientWidth||e-c.top>F.clientHeight))return null;var f=G(V,!0),g=bn+Math.floor((e-f.top)/cE());return cj({line:g,ch:cB(ci(g),d-f.left)})}function cG(){return V.offsetLeft}function cF(){return V.offsetTop}function cE(){var a=X.childNodes.length;if(a)return X.offsetHeight/a||1;M.innerHTML="<pre>x</pre>";return M.firstChild.offsetHeight||1}function cD(a){var b=cC(a,!0),c=G(V);return{x:c.left+b.x,y:c.top+b.y,yBot:c.top+b.yBot}}function cC(a,b){var c=cE(),d=a.line-(b?bn:0);return{x:cA(a.line,a.ch),y:d*c,yBot:(d+1)*c}}function cB(a,b){function e(a){M.innerHTML="<pre><span>"+c.getHTML(null,null,!1,a)+"</span></pre>";return M.firstChild.firstChild.offsetWidth}if(b<=0)return 0;var c=ba[a],d=c.text,f=0,g=0,h=d.length,i,j=Math.min(h,Math.ceil(b/cz("x")));for(;;){var k=e(j);if(k<=b&&j<h)j=Math.min(h,Math.ceil(j*1.2));else{i=k,h=j;break}}if(b>i)return h;j=Math.floor(h*.8),k=e(j),k<b&&(f=j,g=k);for(;;){if(h-f<=1)return i-b>b-g?f:h;var l=Math.ceil((f+h)/2),m=e(l);m>b?(h=l,i=m):(f=l,g=m)}}function cA(a,b){if(b==0)return 0;M.innerHTML="<pre><span>"+ba[a].getHTML(null,null,!1,b)+"</span></pre>";return M.firstChild.firstChild.offsetWidth}function cz(a){M.innerHTML="<pre><span>x</span></pre>",M.firstChild.firstChild.firstChild.nodeValue=a;return M.firstChild.firstChild.offsetWidth||10}function cy(a){if(typeof a=="number"){var b=a;a=ba[a];if(!a)return null}else{var b=O(ba,a);if(b==-1)return null}var c=a.gutterMarker;return{line:b,text:a.text,markerText:c&&c.text,markerClass:c&&c.style}}function cx(a,b){if(typeof a=="number"){var c=a;a=ba[ci(a)]}else{var c=O(ba,a);if(c==-1)return null}a.className!=b&&(a.className=b,bj.push({from:c,to:c+1}));return a}function cw(a){typeof a=="number"&&(a=ba[ci(a)]),a.gutterMarker=null,cd()}function cv(a,b,c){typeof a=="number"&&(a=ba[ci(a)]),a.gutterMarker={text:b,style:c},cd();return a}function cu(a,b,c){function e(a,b,c,e){var a=ba[a],f=a.addMark(b,c,e);f.line=a,d.push(f)}a=cj(a),b=cj(b);var d=[];if(a.line==b.line)e(a.line,a.ch,b.ch,c);else{e(a.line,a.ch,null,c);for(var f=a.line+1,g=b.line;f<g;++f)e(f,0,null,c);e(b.line,0,b.ch,c)}bj.push({from:a.line,to:b.line+1});return function(){var a,b;for(var c=0;c<d.length;++c){var e=d[c],f=O(ba,e.line);e.line.removeMark(e),f>-1&&(a==null&&(a=f),b=f)}a!=null&&bj.push({from:a,to:b+1})}}function ct(){var a=g.gutter||g.lineNumbers;T.style.display=a?"":"none",a?cd():X.parentNode.style.marginLeft=0}function cs(){_=a.getMode(g,g.mode);for(var b=0,c=ba.length;b<c;++b)ba[b].stateAfter=null;bb=[0],cQ()}function cr(a,b){if(b=="smart")if(!_.indent)b="prev";else var c=cN(a);var d=ba[a],e=d.indentation(),f=d.text.match(/^\s*/)[0],h;b=="prev"?a?h=ba[a-1].indentation():h=0:b=="smart"?h=_.indent(c,d.text.slice(f.length)):b=="add"?h=e+g.indentUnit:b=="subtract"&&(h=e-g.indentUnit),h=Math.max(0,h);var i=h-e;if(!i){if(be.from.line!=a&&be.to.line!=a)return;var j=f}else{var j="",k=0;if(g.indentWithTabs)for(var l=Math.floor(h/A);l;--l)k+=A,j+="\t";while(k<h)++k,j+=" "}bO(j,{line:a,ch:0},{line:a,ch:f.length})}function cq(a){function b(a){if(I(be.from,be.to))return cr(be.from.line,a);var b=be.to.line-(be.to.ch?0:1);for(var c=be.from.line;c<=b;++c)cr(c,a)}bf=null;switch(g.tabMode){case"default":return!1;case"indent":b("smart");break;case"classic":if(I(be.from,be.to)){a?cr(be.from.line,"smart"):bP("\t","end");break};case"shift":b(a?"subtract":"add")}return!0}function cp(){bP("\n","end"),g.enterMode!="flat"&&cr(be.from.line,g.enterMode=="keep"?"prev":"smart")}function co(a){cf({line:a,ch:0},{line:a,ch:ba[a].text.length})}function cn(a){var b=ba[a.line].text,c=a.ch,d=a.ch;while(c>0&&/\w/.test(b.charAt(c-1)))--c;while(d<b.length&&/\w/.test(b.charAt(d)))++d;cf({line:a.line,ch:c},{line:a.line,ch:d})}function cm(){var a=ba.length-1;cg({line:0,ch:0},{line:a,ch:ba[a].text.length})}function cl(a){var b=a?{line:0,ch:0}:{line:ba.length-1,ch:ba[ba.length-1].text.length};cf(b,b)}function ck(a){var b=Math.floor(F.clientHeight/cE()),c=be.inverted?be.from:be.to;ch(c.line+Math.max(b-1,1)*(a?1:-1),c.ch,!0)}function cj(a){if(a.line<0)return{line:0,ch:0};if(a.line>=ba.length)return{line:ba.length-1,ch:ba[ba.length-1].text.length};var b=a.ch,c=ba[a.line].text.length;return b==null||b>c?{line:a.line,ch:c}:b<0?{line:a.line,ch:0}:a}function ci(a){return Math.max(0,Math.min(a,ba.length-1))}function ch(a,b,c){var d=cj({line:a,ch:b||0});(c?cf:cg)(d,d)}function cg(a,b,c,d){if(!I(be.from,a)||!I(be.to,b)){if(J(b,a)){var e=b;b=a,a=e}I(a,b)?be.inverted=!1:I(a,be.to)?be.inverted=!1:I(b,be.from)&&(be.inverted=!0),c==null&&(c=be.from.line,d=be.to.line),I(a,b)?I(be.from,be.to)||bj.push({from:c,to:d+1}):I(be.from,be.to)?bj.push({from:a.line,to:b.line+1}):(I(a,be.from)||(a.line<c?bj.push({from:a.line,to:Math.min(b.line,c)+1}):bj.push({from:c,to:Math.min(d,a.line)+1})),I(b,be.to)||(b.line<d?bj.push({from:Math.max(c,a.line),to:d+1}):bj.push({from:Math.max(a.line,d),to:b.line+1}))),be.from=a,be.to=b,bl=!0}}function cf(a,b){var c=bf&&cj(bf);c&&(J(c,a)?a=c:J(b,c)&&(b=c)),cg(a,b)}function ce(){var a=be.inverted?be.from:be.to,b=cE(),c=cA(a.line,a.ch)+"px",d=(a.line-bn)*b+"px";D.style.top=a.line*b-F.scrollTop+"px",I(be.from,be.to)?(W.style.top=d,W.style.left=c,W.style.display=""):W.style.display="none"}function cd(){if(!!g.gutter||!!g.lineNumbers){var a=S.offsetHeight,b=F.clientHeight;T.style.height=(a-b<2?b:a)+"px";var c=[];for(var d=bn;d<Math.max(bo,bn+1);++d){var e=ba[d].gutterMarker,f=g.lineNumbers?d+g.firstLineNumber:null;e&&e.text?f=e.text.replace("%N%",f!=null?f:""):f==null&&(f="\u00a0"),c.push(e&&e.style?'<pre class="'+e.style+'">':"<pre>",f,"</pre>")}T.style.display="none",U.innerHTML=c.join("");var h=String(ba.length).length,i=U.firstChild,j=H(i),k="";while(j.length+k.length<h)k+="\u00a0";k&&i.insertBefore(n.createTextNode(k),i.firstChild),T.style.display="",V.style.marginLeft=T.offsetWidth+"px"}}function cc(a){var b=be.from.line,c=be.to.line,d=0,e=v&&n.createElement("div");for(var f=0,g=a.length;f<g;++f){var h=a[f],i=h.to-h.from-h.domSize,j=X.childNodes[h.domStart+h.domSize+d]||null;if(v)for(var k=Math.max(-i,h.domSize);k>0;--k)X.removeChild(j?j.previousSibling:X.lastChild);else if(i){for(var k=Math.max(0,i);k>0;--k)X.insertBefore(n.createElement("pre"),j);for(var k=Math.max(0,-i);k>0;--k)X.removeChild(j?j.previousSibling:X.lastChild)}var l=X.childNodes[h.domStart+d],m=b<h.from&&c>=h.from;for(var k=h.from;k<h.to;++k){var o=null,p=null;m?(o=0,c==k&&(m=!1,p=be.to.ch)):b==k&&(c==k?(o=be.from.ch,p=be.to.ch):(m=!0,o=be.from.ch)),v?(e.innerHTML=ba[k].getHTML(o,p,!0),X.insertBefore(e.firstChild,j)):(l.innerHTML=ba[k].getHTML(o,p,!1),l.className=ba[k].className||"",l=l.nextSibling)}d+=i}}function cb(a,b){var c=[],d={line:a,ch:0},e=J(be.from,d)&&!J(be.to,d);for(var f=a;f<b;++f){var g=null,h=null;e?(g=0,be.to.line==f&&(e=!1,h=be.to.ch)):be.from.line==f&&(be.to.line==f?(g=be.from.ch,h=be.to.ch):(e=!0,g=be.from.ch)),c.push(ba[f].getHTML(g,h,!0))}X.innerHTML=c.join("")}function ca(a){if(!F.clientWidth)bn=bo=0;else{var b=a===!0?[]:[{from:bn,to:bo,domStart:0}];for(var c=0,d=a.length||0;c<d;++c){var e=a[c],f=[],g=e.diff||0;for(var h=0,i=b.length;h<i;++h){var j=b[h];e.to<=j.from?f.push({from:j.from+g,to:j.to+g,domStart:j.domStart}):j.to<=e.from?f.push(j):(e.from>j.from&&f.push({from:j.from,to:e.from,domStart:j.domStart}),e.to<j.to&&f.push({from:e.to+g,to:j.to+g,domStart:j.domStart+(e.to-j.from)}))}b=f}var k=b_(),l=Math.min(bn,Math.max(k.from-3,0)),m=Math.min(ba.length,Math.max(bo,k.to+3)),n=[],o=0,p=bo-bn,q=l,r=0;for(var c=0,d=b.length;c<d;++c){var j=b[c];if(j.to<=l)continue;if(j.from>=m)break;if(j.domStart>o||j.from>q)n.push({from:q,to:j.from,domSize:j.domStart-o,domStart:o}),r+=j.from-q;q=j.to,o=j.domStart+(j.to-j.from)}if(o!=p||q!=m)r+=Math.abs(m-q),n.push({from:q,to:m,domSize:p-o,domStart:o});if(!n.length)return;X.style.display="none",r>(k.to-k.from)*.3?cb(l=Math.max(k.from-10,0),m=Math.min(k.to+7,ba.length)):cc(n),X.style.display="";var s=l!=bn||m!=bo||bp!=F.clientHeight;bn=l,bo=m,S.style.top=l*cE()+"px",s&&(bp=F.clientHeight,L.style.height=ba.length*cE()+2*cF()+"px",cd()),bu==null&&(bu=cz(bt)),bu>F.clientWidth?(V.style.width=bu+"px",L.style.width="",L.style.width=F.scrollWidth+"px"):V.style.width=L.style.width="";if(X.childNodes.length!=bo-bn)throw new Error("BAD PATCH! "+JSON.stringify(n)+" size="+(bo-bn)+" nodes="+X.childNodes.length);ce()}}function b_(){var a=cE(),b=F.scrollTop-cF();return{from:Math.min(ba.length,Math.max(0,Math.floor(b/a))),to:Math.min(ba.length,Math.ceil((b+F.clientHeight)/a))}}function b$(a,b,c,d){var e=cG(),f=cF(),h=cE();b+=f,d+=f,a+=e,c+=e;var i=F.clientHeight,j=F.scrollTop,k=!1,l=!0;b<j?(F.scrollTop=Math.max(0,b-2*h),k=!0):d>j+i&&(F.scrollTop=d+h-i,k=!0);var m=F.clientWidth,n=F.scrollLeft;a<n?(a<50&&(a=0),F.scrollLeft=Math.max(0,a-10),k=!0):c>m+n&&(F.scrollLeft=c+10-m,k=!0,c>L.clientWidth&&(l=!1)),k&&g.onScroll&&g.onScroll(by);return l}function bZ(){var a=cC(be.inverted?be.from:be.to);return b$(a.x,a.y,a.x,a.yBot)}function bY(){g.readOnly!="nocursor"&&E.focus()}function bX(){var a=[],b=Math.max(0,be.from.line-1),c=Math.min(ba.length,be.to.line+2);for(var d=b;d<c;++d)a.push(ba[d].text);a=E.value=a.join(z);var e=be.from.ch,f=be.to.ch;for(var d=b;d<be.from.line;++d)e+=z.length+ba[d].text.length;for(var d=b;d<be.to.line;++d)f+=z.length+ba[d].text.length;br={text:a,from:b,to:c,start:e,end:f},R(E,e,bg?e:f)}function bW(){function f(a,c){var d=0;for(;;){var e=b.indexOf("\n",d);if(e==-1||(b.charAt(e-1)=="\r"?e-1:e)>=a)return{line:c,ch:a-d};++c,d=e+1}}if(!bm&&!!bd){var a=!1,b=E.value,c=Q(E);if(!c)return!1;var a=br.text!=b,d=bg,e=a||c.start!=br.start||c.end!=(d?br.start:br.end);if(!e&&!d)return!1;if(a){bf=bg=null;if(g.readOnly){bi=!0;return"changed"}}var h=f(c.start,br.from),i=f(c.end,br.from);if(d){var j=c.start==d.anchor?i:h,k=bf?be.to:c.start==d.anchor?h:i;(be.inverted=J(j,k))?(h=j,i=k):(bg=null,h=k,i=j)}h.line==i.line&&h.line==be.from.line&&h.line==be.to.line&&!bf&&(bi=!1);if(a){var l=0,m=b.length,n=Math.min(m,br.text.length),o,p=br.from,q=-1;while(l<n&&(o=b.charAt(l))==br.text.charAt(l))++l,o=="\n"&&(p++,q=l);var r=q>-1?l-q:l,s=br.to-1,t=br.text.length;for(;;){o=br.text.charAt(t);if(b.charAt(m)!=o){++m,++t;break}o=="\n"&&s--;if(t<=l||m<=l)break;--m,--t}var q=br.text.lastIndexOf("\n",t-1),u=q==-1?t:t-q-1;bJ({line:p,ch:r},{line:s,ch:u},P(b.slice(l,m)),h,i);if(p!=s||h.line!=p)bi=!0}else cg(h,i);br.text=b,br.start=c.start,br.end=c.end;return a?"changed":e?"moved":!1}}function bV(a){function c(){cR();var d=bW();d=="moved"&&a&&(C[a]=!0),!d&&!b?(b=!0,Y.set(80,c)):(bT=!1,bU()),cS()}var b=!1;bT=!0,Y.set(20,c)}function bU(){bT||Y.set(2e3,function(){cR(),bW(),bd&&bU(),cS()})}function bS(){return bR(be.from,be.to)}function bR(a,b){var c=a.line,d=b.line;if(c==d)return ba[c].text.slice(a.ch,b.ch);var e=[ba[c].text.slice(a.ch)];for(var f=c+1;f<d;++f)e.push(ba[f].text);e.push(ba[d].text.slice(0,b.ch));return e.join("\n")}function bQ(a,b,c,d){var e=a.length==1?a[0].length+b.ch:a[a.length-1].length,f=d({line:b.line+a.length-1,ch:e});bJ(b,c,a,f.from,f.to)}function bP(a,b){bQ(P(a),be.from,be.to,function(a){return b=="end"?{from:a,to:a}:b=="start"?{from:be.from,to:be.from}:{from:be.from,to:a}})}function bO(a,b,c){function d(d){if(J(d,b))return d;if(!J(c,d))return e;var f=d.line+a.length-(c.line-b.line)-1,g=d.ch;d.line==c.line&&(g+=a[a.length-1].length-(c.ch-(c.line==b.line?b.ch:0)));return{line:f,ch:g}}b=cj(b),c?c=cj(c):c=b,a=P(a);var e;bQ(a,b,c,function(a){e=a;return{from:d(be.from),to:d(be.to)}});return e}function bN(a,b,c,d,e){function s(a){return a<=Math.min(b.line,b.line+q)?a:a+q}var f=!1,g=bt.length;for(var i=a.line;i<=b.line;++i)if(ba[i].text.length==g){f=!0;break}var j=b.line-a.line,k=ba[a.line],l=ba[b.line];if(k==l)if(c.length==1)k.replace(a.ch,b.ch,c[0]);else{l=k.split(b.ch,c[c.length-1]);var m=[a.line+1,j];k.replace(a.ch,k.text.length,c[0]);for(var i=1,n=c.length-1;i<n;++i)m.push(new h(c[i]));m.push(l),ba.splice.apply(ba,m)}else if(c.length==1)k.replace(a.ch,k.text.length,c[0]+l.text.slice(b.ch)),ba.splice(a.line+1,j);else{var m=[a.line+1,j-1];k.replace(a.ch,k.text.length,c[0]),l.replace(0,b.ch,c[c.length-1]);for(var i=1,n=c.length-1;i<n;++i)m.push(new h(c[i]));ba.splice.apply(ba,m)}for(var i=a.line,n=i+c.length;i<n;++i){var o=ba[i].text;o.length>g&&(bt=o,g=o.length,bu=null,f=!1)}if(f){g=0,bt="",bu=null;for(var i=0,n=ba.length;i<n;++i){var o=ba[i].text;o.length>g&&(g=o.length,bt=o)}}var p=[],q=c.length-j-1;for(var i=0,o=bb.length;i<o;++i){var r=bb[i];r<a.line?p.push(r):r>b.line&&p.push(r+q)}c.length<5?(cO(a.line,a.line+c.length),p.push(a.line+c.length)):p.push(a.line),bb=p,cQ(100),bj.push({from:a.line,to:b.line+1,diff:q}),bk={from:a,to:b,text:c},cg(d,e,s(be.from.line),s(be.to.line)),L.style.height=ba.length*cE()+2*cF()+"px"}function bM(){bK(bc.undone,bc.done)}function bL(){bK(bc.done,bc.undone)}function bK(a,b){var c=a.pop();if(c){var d=[],e=c.start+c.added;for(var f=c.start;f<e;++f)d.push(ba[f].text);b.push({start:c.start,added:c.old.length,old:d});var g=cj({line:c.start+c.old.length-1,ch:N(d[d.length-1],c.old[c.old.length-1])});bN({line:c.start,ch:0},{line:e-1,ch:ba[e-1].text.length},c.old,g,g),bi=!0}}function bJ(a,b,c,d,e){if(bc){var f=[];for(var h=a.line,i=b.line+1;h<i;++h)f.push(ba[h].text);bc.addChange(a.line,c.length,f);while(bc.done.length>g.undoDepth)bc.done.shift()}bN(a,b,c,d,e)}function bI(){bd&&(g.onBlur&&g.onBlur(by),bd=!1,y.className=y.className.replace(" CodeMirror-focused","")),clearInterval($),setTimeout(function(){bd||(bf=null)},150)}function bH(){g.readOnly!="nocursor"&&(bd||(g.onFocus&&g.onFocus(by),bd=!0,y.className.search(/\bCodeMirror-focused\b/)==-1&&(y.className+=" CodeMirror-focused"),bm||bX()),bU(),cJ())}function bG(a){if(!g.onKeyEvent||!g.onKeyEvent(by,l(a))){if(g.electricChars&&_.electricChars){var b=String.fromCharCode(a.charCode==null?a.keyCode:a.charCode);_.electricChars.indexOf(b)>-1&&setTimeout(cU(function(){cr(be.to.line,"smart")}),50)}var c=a.keyCode;c==13?(g.readOnly||cp(),m(a)):!a.ctrlKey&&!a.altKey&&!a.metaKey&&c==9&&g.tabMode!="default"?m(a):bV(bq)}}function bF(a){if(!g.onKeyEvent||!g.onKeyEvent(by,l(a)))bg&&(bg=null,bi=!0),a.keyCode==16&&(bf=null)}function bE(a){bd||bH();var b=a.keyCode;x&&b==27&&(a.returnValue=!1);var c=(B?a.metaKey:a.ctrlKey)&&!a.altKey,d=a.ctrlKey||a.altKey||a.metaKey;b==16||a.shiftKey?bf=bf||(be.inverted?be.to:be.from):bf=null;if(!g.onKeyEvent||!g.onKeyEvent(by,l(a))){if(b==33||b==34){ck(b==34);return m(a)}if(c&&(b==36||b==35||B&&(b==38||b==40))){cl(b==36||b==38);return m(a)}if(c&&b==65){cm();return m(a)}if(!g.readOnly){if(!d&&b==13)return;if(!d&&b==9&&cq(a.shiftKey))return m(a);if(c&&b==90){bL();return m(a)}if(c&&(a.shiftKey&&b==90||b==89)){bM();return m(a)}}bq=(c?"c":"")+b;if(be.inverted&&C.hasOwnProperty(bq)){var e=Q(E);e&&(bg={anchor:e.start},R(E,e.start,e.start))}bV(bq)}}function bD(a){a.preventDefault();var b=cH(a,!0),c=a.dataTransfer.files;if(!!b&&!g.readOnly)if(c&&c.length&&window.FileReader&&window.File){function d(a,c){var d=new FileReader;d.onload=function(){f[c]=d.result,++h==e&&bO(f.join(""),cj(b),cj(b))},d.readAsText(a)}var e=c.length,f=Array(e),h=0;for(var i=0;i<e;++i)d(c[i],i)}else try{var f=a.dataTransfer.getData("Text");f&&bO(f,b,b)}catch(a){}}function bC(a){var b=cH(a);!b||(cn(b),m(a),bh=+(new Date))}function bB(a){function i(a){var b=cH(a,!0);if(b&&!I(b,e)){bd||bH(),e=b,cf(d,b),bi=!1;var c=b_();if(b.line>=c.to||b.line<c.from)f=setTimeout(cU(function(){i(a)}),150)}}function h(){bY(),bi=!0,j(),k()}for(var b=p(a);b!=y;b=b.parentNode)if(b.parentNode==L&&b!=S)return;var c=bh;bh=null;for(var b=p(a);b!=y;b=b.parentNode)if(b.parentNode==U){g.onGutterClick&&g.onGutterClick(by,O(U.childNodes,b)+bn);return m(a)}var d=cH(a);switch(q(a)){case 3:w&&!B&&cI(a);return;case 2:d&&ch(d.line,d.ch,!0);return}if(!d)p(a)==F&&m(a);else{bd||bH(),m(a);if(c&&+(new Date)-c<400)return co(d.line);ch(d.line,d.ch,!0);var e=d,f,j=t(n,"mousemove",cU(function(a){clearTimeout(f),m(a),i(a)}),!0),k=t(n,"mouseup",cU(function(a){clearTimeout(f);var b=cH(a);b&&cf(d,b),m(a),h()}),!0)}}function bA(a){var b=[];for(var c=0,d=ba.length;c<d;++c)b.push(ba[c].text);return b.join("\n")}function bz(a){bc=null;var b={line:0,ch:0};bJ(b,{line:ba.length-1,ch:ba[ba.length-1].text.length},P(a),b,b),bc=new j}function bx(a){return a>=0&&a<ba.length}var g={},i=a.defaults;for(var k in i)i.hasOwnProperty(k)&&(g[k]=(c&&c.hasOwnProperty(k)?c:i)[k]);var n=g.document,y=n.createElement("div");y.className="CodeMirror",y.innerHTML='<div style="overflow: hidden; position: relative; width: 1px; height: 0px;"><textarea style="position: absolute; width: 2px;" wrap="off"></textarea></div><div class="CodeMirror-scroll cm-s-'+g.theme+'">'+'<div style="position: relative">'+'<div style="position: absolute; height: 0; width: 0; overflow: hidden;"></div>'+'<div style="position: relative">'+'<div class="CodeMirror-gutter"><div class="CodeMirror-gutter-text"></div></div>'+'<div class="CodeMirror-lines"><div style="position: relative">'+'<pre class="CodeMirror-cursor">&#160;</pre>'+"<div></div>"+"</div></div></div></div></div>",b.appendChild?b.appendChild(y):b(y);var D=y.firstChild,E=D.firstChild,F=y.lastChild,L=F.firstChild,M=L.firstChild,S=M.nextSibling,T=S.firstChild,U=T.firstChild,V=T.nextSibling.firstChild,W=V.firstChild,X=W.nextSibling;g.tabindex!=null&&(E.tabindex=g.tabindex),!g.gutter&&!g.lineNumbers&&(T.style.display="none");var Y=new u,Z=new u,$,_,ba=[new h("")],bb,bc=new j,bd;cs();var be={from:{line:0,ch:0},to:{line:0,ch:0},inverted:!1},bf,bg,bh,bi,bj,bk,bl,bm,bn=0,bo=0,bp=0,bq=null,br,bs,bt="",bu;cU(function(){bz(g.value||""),bi=!1})(),t(F,"mousedown",cU(bB)),w||t(F,"contextmenu",cI),t(L,"dblclick",cU(bC)),t(F,"scroll",function(){ca([]),g.onScroll&&g.onScroll(by)}),t(window,"resize",function(){ca(!0)}),t(E,"keyup",cU(bF)),t(E,"keydown",cU(bE)),t(E,"keypress",cU(bG)),t(E,"focus",bH),t(E,"blur",bI),t(F,"dragenter",o),t(F,"dragover",o),t(F,"drop",cU(bD)),t(F,"paste",function(){bY(),bV()}),t(E,"paste",function(){bV()}),t(E,"cut",function(){bV()});var bv;try{bv=n.activeElement==E}catch(bw){}bv?setTimeout(bH,20):bI();var by={getValue:bA,setValue:cU(bz),getSelection:bS,replaceSelection:cU(bP),focus:function(){bY(),bH(),bV()},setOption:function(a,b){g[a]=b,a=="lineNumbers"||a=="gutter"?ct():a=="mode"||a=="indentUnit"?cs():a=="readOnly"&&b=="nocursor"?E.blur():a=="theme"&&(F.className=F.className.replace(/cm-s-\w+/,"cm-s-"+b))},getOption:function(a){return g[a]},undo:cU(bL),redo:cU(bM),indentLine:cU(function(a,b){bx(a)&&cr(a,b==null?"smart":b?"add":"subtract")}),historySize:function(){return{undo:bc.done.length,redo:bc.undone.length}},matchBrackets:cU(function(){cL(!0)}),getTokenAt:function(a){a=cj(a);return ba[a.line].getTokenAt(_,cN(a.line),a.ch)},getStateAfter:function(a){a=ci(a==null?ba.length-1:a);return cN(a+1)},cursorCoords:function(a){a==null&&(a=be.inverted);return cD(a?be.from:be.to)},charCoords:function(a){return cD(cj(a))},coordsChar:function(a){var b=G(V),c=ci(Math.min(ba.length-1,bn+Math.floor((a.y-b.top)/cE())));return cj({line:c,ch:cB(ci(c),a.x-b.left)})},getSearchCursor:function(a,b,c){return new cV(a,b,c)},markText:cU(function(a,b,c){return cU(cu(a,b,c))}),setMarker:cv,clearMarker:cw,setLineClass:cU(cx),lineInfo:cy,addWidget:function(a,b,c,d){a=cC(cj(a));var e=a.yBot,f=a.x;b.style.position="absolute",L.appendChild(b),b.style.left=f+"px";if(d=="over")e=a.y;else if(d=="near"){var g=Math.max(F.offsetHeight,ba.length*cE()),h=Math.max(L.clientWidth,V.clientWidth)-cG();a.yBot+b.offsetHeight>g&&a.y>b.offsetHeight&&(e=a.y-b.offsetHeight),f+b.offsetWidth>h&&(f=h-b.offsetWidth)}b.style.top=e+cF()+"px",b.style.left=f+cG()+"px",c&&b$(f,e,f+b.offsetWidth,e+b.offsetHeight)},lineCount:function(){return ba.length},getCursor:function(a){a==null&&(a=be.inverted);return K(a?be.from:be.to)},somethingSelected:function(){return!I(be.from,be.to)},setCursor:cU(function(a,b){b==null&&typeof a.line=="number"?ch(a.line,a.ch):ch(a,b)}),setSelection:cU(function(a,b){cg(cj(a),cj(b||a))}),getLine:function(a){if(bx(a))return ba[a].text},setLine:cU(function(a,b){bx(a)&&bO(b,{line:a,ch:0},{line:a,ch:ba[a].text.length})}),removeLine:cU(function(a){bx(a)&&bO("",{line:a,ch:0},cj({line:a+1,ch:0}))}),replaceRange:cU(bO),getRange:function(a,b){return bR(cj(a),cj(b))},operation:function(a){return cU(a)()},refresh:function(){ca(!0)},getInputField:function(){return E},getWrapperElement:function(){return y},getScrollerElement:function(){return F},getGutterElement:function(){return T}},bT=!1,cK={"(":")>",")":"(<","[":"]>","]":"[<","{":"}>","}":"{<"},cT=0;cV.prototype={findNext:function(){return this.find(!1)},findPrevious:function(){return this.find(!0)},find:function(a){function d(a){var c={line:a,ch:0};b.pos={from:c,to:c},b.atOccurrence=!1;return!1}var b=this,c=cj(a?this.pos.from:this.pos.to);for(;;){if(this.pos=this.matches(a,c)){this.atOccurrence=!0;return this.pos.match||!0}if(a){if(!c.line)return d(0);c={line:c.line-1,ch:ba[c.line-1].text.length}}else{if(c.line==ba.length-1)return d(ba.length);c={line:c.line+1,ch:0}}}},from:function(){if(this.atOccurrence)return K(this.pos.from)},to:function(){if(this.atOccurrence)return K(this.pos.to)},replace:function(a){var b=this;this.atOccurrence&&cU(function(){b.pos.to=bO(a,b.pos.from,b.pos.to)})()}};for(var cW in d)d.propertyIsEnumerable(cW)&&!by.propertyIsEnumerable(cW)&&(by[cW]=d[cW]);return by}a.defaults={value:"",mode:null,theme:"default",indentUnit:2,indentWithTabs:!1,tabMode:"classic",enterMode:"indent",electricChars:!0,onKeyEvent:null,lineNumbers:!1,gutter:!1,firstLineNumber:1,readOnly:!1,onChange:null,onCursorActivity:null,onGutterClick:null,onHighlightComplete:null,onFocus:null,onBlur:null,onScroll:null,matchBrackets:!1,workTime:100,workDelay:200,undoDepth:40,tabindex:null,document:window.document};var b={},c={};a.defineMode=function(c,d){!a.defaults.mode&&c!="null"&&(a.defaults.mode=c),b[c]=d},a.defineMIME=function(a,b){c[a]=b},a.getMode=function(d,e){typeof e=="string"&&c.hasOwnProperty(e)&&(e=c[e]);if(typeof e=="string")var f=e,g={};else if(e!=null)var f=e.name,g=e;var h=b[f];if(!h){window.console&&console.warn("No mode "+f+" found, falling back to plain text.");return a.getMode(d,"text/plain")}return h(d,g||{})},a.listModes=function(){var a=[];for(var c in b)b.propertyIsEnumerable(c)&&a.push(c);return a},a.listMIMEs=function(){var a=[];for(var b in c)c.propertyIsEnumerable(b)&&a.push(b);return a};var d={};a.defineExtension=function(a,b){d[a]=b},a.fromTextArea=function(b,c){function d(){b.value=h.getValue()}c||(c={}),c.value=b.value,!c.tabindex&&b.tabindex&&(c.tabindex=b.tabindex);if(b.form){var e=t(b.form,"submit",d,!0);if(typeof b.form.submit=="function"){var f=b.form.submit;function g(){d(),b.form.submit=f,b.form.submit(),b.form.submit=g}b.form.submit=g}}b.style.display="none";var h=a(function(a){b.parentNode.insertBefore(a,b.nextSibling)},c);h.save=d,h.toTextArea=function(){d(),b.parentNode.removeChild(h.getWrapperElement()),b.style.display="",b.form&&(e(),typeof b.form.submit=="function"&&(b.form.submit=f))};return h},a.startState=f,a.copyState=e,g.prototype={eol:function(){return this.pos>=this.string.length},sol:function(){return this.pos==0},peek:function(){return this.string.charAt(this.pos)},next:function(){if(this.pos<this.string.length)return this.string.charAt(this.pos++)},eat:function(a){var b=this.string.charAt(this.pos);if(typeof a=="string")var c=b==a;else var c=b&&(a.test?a.test(b):a(b));if(c){++this.pos;return b}},eatWhile:function(a){var b=this.start;while(this.eat(a));return this.pos>b},eatSpace:function(){var a=this.pos;while(/[\s\u00a0]/.test(this.string.charAt(this.pos)))++this.pos;return this.pos>a},skipToEnd:function(){this.pos=this.string.length},skipTo:function(a){var b=this.string.indexOf(a,this.pos);if(b>-1){this.pos=b;return!0}},backUp:function(a){this.pos-=a},column:function(){return E(this.string,this.start)},indentation:function(){return E(this.string)},match:function(a,b,c){if(typeof a!="string"){var e=this.string.slice(this.pos).match(a);e&&b!==!1&&(this.pos+=e[0].length);return e}function d(a){return c?a.toLowerCase():a}if(d(this.string).indexOf(d(a),this.pos)==this.pos){b!==!1&&(this.pos+=a.length);return!0}},current:function(){return this.string.slice(this.start,this.pos)}},a.StringStream=g,h.prototype={replace:function(a,b,c){var d=[],e=this.marked;i(0,a,this.styles,d),c&&d.push(c,null),i(b,this.text.length,this.styles,d),this.styles=d,this.text=this.text.slice(0,a)+c+this.text.slice(b),this.stateAfter=null;if(e){var f=c.length-(b-a),g=this.text.length;function h(a){return a<=Math.min(b,b+f)?a:a+f}for(var j=0;j<e.length;++j){var k=e[j],l=!1;k.from>=g?l=!0:(k.from=h(k.from),k.to!=null&&(k.to=h(k.to)));if(l||k.from>=k.to)e.splice(j,1),j--}}},split:function(a,b){var c=[b,null];i(a,this.text.length,this.styles,c);return new h(b+this.text.slice(a),c)},addMark:function(a,b,c){var d=this.marked,e={from:a,to:b,style:c};this.marked==null&&(this.marked=[]),this.marked.push(e),this.marked.sort(function(a,b){return a.from-b.from});return e},removeMark:function(a){var b=this.marked;if(!!b)for(var c=0;c<b.length;++c)if(b[c]==a){b.splice(c,1);break}},highlight:function(a,b){var c=new g(this.text),d=this.styles,e=0,f=!1,h=d[0],i;this.text==""&&a.blankLine&&a.blankLine(b);while(!c.eol()){var j=a.token(c,b),k=this.text.slice(c.start,c.pos);c.start=c.pos,e&&d[e-1]==j?d[e-2]+=k:k&&(!f&&(d[e+1]!=j||e&&d[e-2]!=i)&&(f=!0),d[e++]=k,d[e++]=j,i=h,h=d[e]);if(c.pos>5e3){d[e++]=this.text.slice(c.pos),d[e++]=null;break}}d.length!=e&&(d.length=e,f=!0),e&&d[e-2]!=i&&(f=!0);return f||d.length<5&&this.text.length<10},getTokenAt:function(a,b,c){var d=this.text,e=new g(d);while(e.pos<c&&!e.eol()){e.start=e.pos;var f=a.token(e,b)}return{start:e.start,end:e.pos,string:e.current(),className:f||null,state:b}},indentation:function(){return E(this.text)},getHTML:function(a,b,c,d){function f(a,b){!a||(b?e.push('<span class="',b,'">',M(a),"</span>"):e.push(M(a)))}var e=[];c&&e.push(this.className?'<pre class="'+this.className+'">':"<pre>");var g=this.styles,h=this.text,i=this.marked;a==b&&(a=null);var j=h.length;d!=null&&(j=Math.min(d,j));if(!h&&d==null)f(" ",a!=null&&b==null?"CodeMirror-selected":null);else if(!i&&a==null)for(var k=0,l=0;l<j;k+=2){var m=g[k],n=m.length;l+n>j&&(m=m.slice(0,j-l)),l+=n,f(m,"cm-"+g[k+1])}else{var o=0,k=0,p="",q,r=0,s=-1,t=null;function u(){i&&(s+=1,t=s<i.length?i[s]:null)}u();while(o<j){var v=j,w="";if(a!=null)if(a>o)v=a;else if(b==null||b>o)w=" CodeMirror-selected",b!=null&&(v=Math.min(v,b));while(t&&t.to!=null&&t.to<=o)u();t&&(t.from>o?v=Math.min(v,t.from):(w+=" "+t.style,t.to!=null&&(v=Math.min(v,t.to))));for(;;){var x=o+p.length,y=q;w&&(y=q?q+w:w),f(x>v?p.slice(0,v-o):p,y);if(x>=v){p=p.slice(v-o),o=v;break}o=x,p=g[k++],q="cm-"+g[k++]}}a!=null&&b==null&&f(" ","CodeMirror-selected")}c&&e.push("</pre>");return e.join("")}},j.prototype={addChange:function(a,b,c){this.undone.length=0;var d=+(new Date),e=this.done[this.done.length-1];if(d-this.time>400||!e||e.start>a+b||e.start+e.added<a-e.added+e.old.length)this.done.push({start:a,added:b,old:c});else{var f=0;if(a<e.start){for(var g=e.start-a-1;g>=0;--g)e.old.unshift(c[g]);e.added+=e.start-a,e.start=a}else e.start<a&&(f=a-e.start,b+=f);for(var g=e.added-f,h=c.length;g<h;++g)e.old.push(c[g]);e.added<b&&(e.added=b)}this.time=d}},u.prototype={set:function(a,b){clearTimeout(this.id),this.id=setTimeout(b,a)}};var v=function(){var a=document.createElement("pre");a.innerHTML=" ";return!a.innerHTML}(),w=/gecko\/\d{7}/i.test(navigator.userAgent),x=/MSIE \d/.test(navigator.userAgent),y=/Apple Computer/.test(navigator.vendor),z="\n";(function(){var a=document.createElement("textarea");a.value="foo\nbar",a.value.indexOf("\r")>-1&&(z="\r\n")})();var A=8,B=/Mac/.test(navigator.platform),C={};for(var D=35;D<=40;++D)C[D]=C["c"+D]=!0;var L=document.createElement("div");a.htmlEscape=M;var P,Q,R;"\n\nb".split(/\n/).length!=3?P=function(a){var b=0,c,d=[];while((c=a.indexOf("\n",b))>-1)d.push(a.slice(b,a.charAt(c-1)=="\r"?c-1:c)),b=c+1;d.push(a.slice(b));return d}:P=function(a){return a.split(/\r?\n/)},a.splitLines=P,window.getSelection?(Q=function(a){try{return{start:a.selectionStart,end:a.selectionEnd}}catch(b){return null}},y?R=function(a,b,c){b==c?a.setSelectionRange(b,c):(a.setSelectionRange(b,c-1),window.getSelection().modify("extend","forward","character"))}:R=function(a,b,c){try{a.setSelectionRange(b,c)}catch(d){}}):(Q=function(a){try{var b=a.ownerDocument.selection.createRange()}catch(c){return null}if(!b||b.parentElement()!=a)return null;var d=a.value,e=d.length,f=a.createTextRange();f.moveToBookmark(b.getBookmark());var g=a.createTextRange();g.collapse(!1);if(f.compareEndPoints("StartToEnd",g)>-1)return{start:e,end:e};var h=-f.moveStart("character",-e);for(var i=d.indexOf("\r");i>-1&&i<h;i=d.indexOf("\r",i+1),h++);if(f.compareEndPoints("EndToEnd",g)>-1)return{start:h,end:e};var j=-f.moveEnd("character",-e);for(var i=d.indexOf("\r");i>-1&&i<j;i=d.indexOf("\r",i+1),j++);return{start:h,end:j}},R=function(a,b,c){var d=a.createTextRange();d.collapse(!0);var e=d.duplicate(),f=0,g=a.value;for(var h=g.indexOf("\n");h>-1&&h<b;h=g.indexOf("\n",h+1))++f;d.move("character",b-f);for(;h>-1&&h<c;h=g.indexOf("\n",h+1))++f;e.move("character",c-f),d.setEndPoint("EndToEnd",e),d.select()}),a.defineMode("null",function(){return{token:function(a){a.skipToEnd()}}}),a.defineMIME("text/plain","null");return a}();CodeMirror.defineMode("javascript",function(a,b){function R(a,b){if(a=="variable"){v(b);return u()}}function Q(a,b){if(a=="variable"){v(b);return u(Q)}if(a=="(")return u(z(")"),x,I(R,")"),A,C,y)}function P(a){a!=")"&&u(D)}function O(a,b){if(a==";")return u(P);if(b=="in")return u(D);return u(D,B(";"),P)}function N(a,b){if(b=="in")return u(D);return u(E,O)}function M(a){if(a=="var")return u(K,O);if(a==";")return t(O);if(a=="variable")return u(N);return t(O)}function L(a,b){if(b=="=")return u(D,L);if(a==",")return u(K)}function K(a,b){if(a=="variable"){v(b);return u(L)}return u()}function J(a){if(a=="}")return u();return t(C,J)}function I(a,b){function c(d){if(d==",")return u(a,c);if(d==b)return u();return u(B(b))}return function(d){return d==b?u():t(a,c)}}function H(a){a=="variable"&&(s.marked="property");if(o.hasOwnProperty(a))return u(B(":"),D)}function G(a){if(a=="variable"){s.marked="property";return u()}}function F(a){if(a==":")return u(A,C);return t(E,B(";"),A)}function E(a,b){if(a=="operator"&&/\+\+|--/.test(b))return u(E);if(a=="operator")return u(D);if(a!=";"){if(a=="(")return u(z(")"),I(D,")"),A,E);if(a==".")return u(G,E);if(a=="[")return u(z("]"),D,B("]"),A,E)}}function D(a){if(o.hasOwnProperty(a))return u(E);if(a=="function")return u(Q);if(a=="keyword c")return u(D);if(a=="(")return u(z(")"),D,B(")"),A,E);if(a=="operator")return u(D);if(a=="[")return u(z("]"),I(D,"]"),A,E);if(a=="{")return u(z("}"),I(H,"}"),A,E);return u()}function C(a){if(a=="var")return u(z("vardef"),K,B(";"),A);if(a=="keyword a")return u(z("form"),D,C,A);if(a=="keyword b")return u(z("form"),C,A);if(a=="{")return u(z("}"),J,A);if(a==";")return u();if(a=="function")return u(Q);if(a=="for")return u(z("form"),B("("),z(")"),M,B(")"),A,C,A);if(a=="variable")return u(z("stat"),F);if(a=="switch")return u(z("form"),D,z("}","switch"),B("{"),J,A,A);if(a=="case")return u(D,B(":"));if(a=="default")return u(B(":"));if(a=="catch")return u(z("form"),x,B("("),R,B(")"),C,A,y);return t(z("stat"),D,B(";"),A)}function B(a){return function(b){return b==a?u():a==";"?t():u(arguments.callee)}}function A(){var a=s.state;a.lexical.prev&&(a.lexical.type==")"&&(a.indented=a.lexical.indented),a.lexical=a.lexical.prev)}function z(a,b){var c=function(){var c=s.state;c.lexical=new p(c.indented,s.stream.column(),a,null,c.lexical,b)};c.lex=!0;return c}function y(){s.state.localVars=s.state.context.vars,s.state.context=s.state.context.prev}function x(){s.state.context||(s.state.localVars=w),s.state.context={prev:s.state.context,vars:s.state.localVars}}function v(a){var b=s.state;if(b.context){s.marked="def";for(var c=b.localVars;c;c=c.next)if(c.name==a)return;b.localVars={name:a,next:b.localVars}}}function u(){t.apply(null,arguments);return!0}function t(){for(var a=arguments.length-1;a>=0;a--)s.cc.push(arguments[a])}function r(a,b,c,e,f){var g=a.cc;s.state=a,s.stream=f,s.marked=null,s.cc=g,a.lexical.hasOwnProperty("align")||(a.lexical.align=!0);for(;;){var h=g.length?g.pop():d?D:C;if(h(c,e)){while(g.length&&g[g.length-1].lex)g.pop()();if(s.marked)return s.marked;if(c=="variable"&&q(a,e))return"variable-2";return b}}}function q(a,b){for(var c=a.localVars;c;c=c.next)if(c.name==b)return!0}function p(a,b,c,d,e,f){this.indented=a,this.column=b,this.type=c,this.prev=e,this.info=f,d!=null&&(this.align=d)}function n(a,b){var c=!1,d;while(d=a.next()){if(d=="/"&&c){b.tokenize=l;break}c=d=="*"}return k("comment","comment")}function m(a){return function(b,c){h(b,a)||(c.tokenize=l);return k("string","string")}}function l(a,b){var c=a.next();if(c=='"'||c=="'")return g(a,b,m(c));if(/[\[\]{}\(\),;\:\.]/.test(c))return k(c);if(c=="0"&&a.eat(/x/i)){a.eatWhile(/[\da-f]/i);return k("number","number")}if(/\d/.test(c)){a.match(/^\d*(?:\.\d*)?(?:e[+\-]?\d+)?/);return k("number","number")}if(c=="/"){if(a.eat("*"))return g(a,b,n);if(a.eat("/")){a.skipToEnd();return k("comment","comment")}if(b.reAllowed){h(a,"/"),a.eatWhile(/[gimy]/);return k("regexp","string")}a.eatWhile(f);return k("operator",null,a.current())}if(f.test(c)){a.eatWhile(f);return k("operator",null,a.current())}a.eatWhile(/[\w\$_]/);var d=a.current(),i=e.propertyIsEnumerable(d)&&e[d];return i?k(i.type,i.style,d):k("variable","variable",d)}function k(a,b,c){i=a,j=c;return b}function h(a,b){var c=!1,d;while((d=a.next())!=null){if(d==b&&!c)return!1;c=!c&&d=="\\"}return c}function g(a,b,c){b.tokenize=c;return c(a,b)}var c=a.indentUnit,d=b.json,e=function(){function a(a){return{type:a,style:"keyword"}}var b=a("keyword a"),c=a("keyword b"),d=a("keyword c"),e=a("operator"),f={type:"atom",style:"atom"};return{"if":b,"while":b,"with":b,"else":c,"do":c,"try":c,"finally":c,"return":d,"break":d,"continue":d,"new":d,"delete":d,"throw":d,"var":a("var"),"function":a("function"),"catch":a("catch"),"for":a("for"),"switch":a("switch"),"case":a("case"),"default":a("default"),"in":e,"typeof":e,"instanceof":e,"true":f,"false":f,"null":f,"undefined":f,NaN:f,Infinity:f}}(),f=/[+\-*&%=<>!?|]/,i,j,o={atom:!0,number:!0,variable:!0,string:!0,regexp:!0},s={state:null,column:null,marked:null,cc:null},w={name:"this",next:{name:"arguments"}};A.lex=!0;return{startState:function(a){return{tokenize:l,reAllowed:!0,cc:[],lexical:new p((a||0)-c,0,"block",!1),localVars:null,context:null,indented:0}},token:function(a,b){a.sol()&&(b.lexical.hasOwnProperty("align")||(b.lexical.align=!1),b.indented=a.indentation());if(a.eatSpace())return null;var c=b.tokenize(a,b);if(i=="comment")return c;b.reAllowed=i=="operator"||i=="keyword c"||i.match(/^[\[{}\(,;:]$/);return r(b,c,i,j,a)},indent:function(a,b){if(a.tokenize!=l)return 0;var d=b&&b.charAt(0),e=a.lexical,f=e.type,g=d==f;return f=="vardef"?e.indented+4:f=="form"&&d=="{"?e.indented:f=="stat"||f=="form"?e.indented+c:e.info=="switch"&&!g?e.indented+(/^(?:case|default)\b/.test(b)?c:2*c):e.align?e.column+(g?0:1):e.indented+(g?0:c)},electricChars:":{}"}}),CodeMirror.defineMIME("text/javascript","javascript"),CodeMirror.defineMIME("application/json",{name:"javascript",json:!0}),CodeMirror.defineMode("xml",function(a,b){function w(a){return a=="string"?o(w):n()}function v(a){if(a=="word"&&d.allowUnquoted){m="string";return o()}if(a=="string")return o(w);return n()}function u(a){if(a=="word"){m="attribute";return o(u)}if(a=="equals")return o(v,u);return n()}function t(a){return function(b){a&&(m="error");if(b=="endTag")return o();return n()}}function s(a){return function(b){if(b=="selfcloseTag"||b=="endTag"&&d.autoSelfClosers.hasOwnProperty(l.tagName.toLowerCase()))return o();if(b=="endTag"){p(l.tagName,a);return o()}return o()}}function r(a){if(a=="openTag"){l.tagName=f;return o(u,s(l.startOfLine))}if(a=="closeTag"){var b=!1;l.context?(b=l.context.tagName!=f,q()):b=!0,b&&(m="error");return o(t(b))}if(a=="string"){(!l.context||l.context.name!="!cdata")&&p("!cdata"),l.tokenize==h&&q();return o()}return o()}function q(){l.context&&(l.context=l.context.prev)}function p(a,b){var c=d.doNotIndent.hasOwnProperty(a)||l.context&&l.context.noIndent;l.context={prev:l.context,tagName:a,indent:l.indented,startOfLine:b,noIndent:c}}function o(){n.apply(null,arguments);return!0}function n(){for(var a=arguments.length-1;a>=0;a--)l.cc.push(arguments[a])}function k(a,b){return function(c,d){while(!c.eol()){if(c.match(b)){d.tokenize=h;break}c.next()}return a}}function j(a){return function(b,c){while(!b.eol())if(b.next()==a){c.tokenize=i;break}return"string"}}function i(a,b){var c=a.next();if(c==">"||c=="/"&&a.eat(">")){b.tokenize=h,g=c==">"?"endTag":"selfcloseTag";return"tag"}if(c=="="){g="equals";return null}if(/[\'\"]/.test(c)){b.tokenize=j(c);return b.tokenize(a,b)}a.eatWhile(/[^\s\u00a0=<>\"\'\/?]/);return"word"}function h(a,b){function c(c){b.tokenize=c;return c(a,b)}var d=a.next();if(d=="<"){if(a.eat("!")){if(a.eat("["))return a.match("CDATA[")?c(k("atom","]]>")):null;if(a.match("--"))return c(k("comment","-->"));if(a.match("DOCTYPE",!0,!0)){a.eatWhile(/[\w\._\-]/);return c(k("meta",">"))}return null}if(a.eat("?")){a.eatWhile(/[\w\._\-]/),b.tokenize=k("meta","?>");return"meta"}g=a.eat("/")?"closeTag":"openTag",a.eatSpace(),f="";var e;while(e=a.eat(/[^\s\u00a0=<>\"\'\/?]/))f+=e;b.tokenize=i;return"tag"}if(d=="&"){a.eatWhile(/[^;]/),a.eat(";");return"atom"}a.eatWhile(/[^&<]/);return null}var c=a.indentUnit,d=b.htmlMode?{autoSelfClosers:{br:!0,img:!0,hr:!0,link:!0,input:!0,meta:!0,col:!0,frame:!0,base:!0,area:!0},doNotIndent:{pre:!0,"!cdata":!0},allowUnquoted:!0}:{autoSelfClosers:{},doNotIndent:{"!cdata":!0},allowUnquoted:!1},e=b.alignCDATA,f,g,l,m;return{startState:function(){return{tokenize:h,cc:[],indented:0,startOfLine:!0,tagName:null,context:null}},token:function(a,b){a.sol()&&(b.startOfLine=!0,b.indented=a.indentation());if(a.eatSpace())return null;m=g=f=null;var c=b.tokenize(a,b);if((c||g)&&c!="comment"){l=b;for(;;){var d=b.cc.pop()||r;if(d(g||c))break}}b.startOfLine=!1;return m||c},indent:function(a,b){var d=a.context;if(d&&d.noIndent)return 0;if(e&&/<!\[CDATA\[/.test(b))return 0;d&&/^<\//.test(b)&&(d=d.prev);while(d&&!d.startOfLine)d=d.prev;return d?d.indent+c:0},compareStates:function(a,b){if(a.indented!=b.indented||a.tagName!=b.tagName)return!1;for(var c=a.context,d=b.context;;c=c.prev,d=d.prev){if(!c||!d)return c==d;if(c.tagName!=d.tagName)return!1}},electricChars:"/"}}),CodeMirror.defineMIME("application/xml","xml"),CodeMirror.defineMIME("text/html",{name:"xml",htmlMode:!0}),CodeMirror.defineMode("css",function(a){function h(a){return function(b,c){var f=!1,g;while((g=b.next())!=null){if(g==a&&!f)break;f=!f&&g=="\\"}f||(c.tokenize=e);return d("string","string")}}function g(a,b){var c=0,f;while((f=a.next())!=null){if(c>=2&&f==">"){b.tokenize=e;break}c=f=="-"?c+1:0}return d("comment","comment")}function f(a,b){var c=!1,f;while((f=a.next())!=null){if(c&&f=="/"){b.tokenize=e;break}c=f=="*"}return d("comment","comment")}function e(a,b){var c=a.next();if(c=="@"){a.eatWhile(/\w/);return d("meta",a.current())}if(c=="/"&&a.eat("*")){b.tokenize=f;return f(a,b)}if(c=="<"&&a.eat("!")){b.tokenize=g;return g(a,b)}if(c=="=")d(null,"compare");else{if(c!="~"&&c!="|"||!a.eat("=")){if(c=='"'||c=="'"){b.tokenize=h(c);return b.tokenize(a,b)}if(c=="#"){a.eatWhile(/\w/);return d("atom","hash")}if(c=="!"){a.match(/^\s*\w*/);return d("keyword","important")}if(/\d/.test(c)){a.eatWhile(/[\w.%]/);return d("number","unit")}if(/[,.+>*\/]/.test(c))return d(null,"select-op");if(/[;{}:\[\]]/.test(c))return d(null,c);a.eatWhile(/[\w\\\-_]/);return d("variable","variable")}return d(null,"compare")}}function d(a,b){c=b;return a}var b=a.indentUnit,c;return{startState:function(a){return{tokenize:e,baseIndent:a||0,stack:[]}},token:function(a,b){if(a.eatSpace())return null;var d=b.tokenize(a,b),e=b.stack[b.stack.length-1];if(c=="hash"&&e=="rule")d="atom";else if(d=="variable")if(e=="rule")d="number";else if(!e||e=="@media{")d="tag";e=="rule"&&/^[\{\};]$/.test(c)&&b.stack.pop(),c=="{"?e=="@media"?b.stack[b.stack.length-1]="@media{":b.stack.push("{"):c=="}"?b.stack.pop():c=="@media"?b.stack.push("@media"):e=="{"&&c!="comment"&&b.stack.push("rule");return d},indent:function(a,c){var d=a.stack.length;/^\}/.test(c)&&(d-=a.stack[a.stack.length-1]=="rule"?2:1);return a.baseIndent+d*b},electricChars:"}"}}),CodeMirror.defineMIME("text/css","css"),CodeMirror.defineMode("htmlmixed",function(a,b){function i(a,b){if(a.match(/^<\/\s*style\s*>/i,!1)){b.token=f,b.localState=null,b.mode="html";return f(a,b)}return g(a,/<\/\s*style\s*>/,e.token(a,b.localState))}function h(a,b){if(a.match(/^<\/\s*script\s*>/i,!1)){b.token=f,b.curState=null,b.mode="html";return f(a,b)}return g(a,/<\/\s*script\s*>/,d.token(a,b.localState))}function g(a,b,c){var d=a.current(),e=d.search(b);e>-1&&a.backUp(d.length-e);return c}function f(a,b){var f=c.token(a,b.htmlState);f=="tag"&&a.current()==">"&&b.htmlState.context&&(/^script$/i.test(b.htmlState.context.tagName)?(b.token=h,b.localState=d.startState(c.indent(b.htmlState,"")),b.mode="javascript"):/^style$/i.test(b.htmlState.context.tagName)&&(b.token=i,b.localState=e.startState(c.indent(b.htmlState,"")),b.mode="css"));return f}var c=CodeMirror.getMode(a,{name:"xml",htmlMode:!0}),d=CodeMirror.getMode(a,"javascript"),e=CodeMirror.getMode(a,"css");return{startState:function(){var a=c.startState();return{token:f,localState:null,mode:"html",htmlState:a}},copyState:function(a){if(a.localState)var b=CodeMirror.copyState(a.token==i?e:d,a.localState);return{token:a.token,localState:b,mode:a.mode,htmlState:CodeMirror.copyState(c,a.htmlState)}},token:function(a,b){return b.token(a,b)},indent:function(a,b){return a.token==f||/^\s*<\//.test(b)?c.indent(a.htmlState,b):a.token==h?d.indent(a.localState,b):e.indent(a.localState,b)},electricChars:"/{}:"}}),CodeMirror.defineMIME("text/html","htmlmixed")
\ No newline at end of file
diff --git a/dist/docs/resources/js/paper.js b/dist/docs/resources/js/paper.js
deleted file mode 100644
index e69de29b..00000000
diff --git a/dist/docs/resources/js/reference.js b/dist/docs/resources/js/reference.js
deleted file mode 100644
index b39ee690..00000000
--- a/dist/docs/resources/js/reference.js
+++ /dev/null
@@ -1,258 +0,0 @@
-ContentEnd = HtmlElement.extend({
-	_class: 'content-end',
-
-	initialize: function() {
-		var anchor = $$('a[name]').getLast(),
-			that = this;
-		if (anchor) {
-			function resize() {
-				var bottom = $window.getScrollSize().height
-					- anchor.getOffset().y - $window.getSize().height;
-				that.setHeight(that.getHeight() - bottom);
-			}
-			$window.addEvents({
-				load: resize,
-				resize: resize
-			});
-			// Not sure why these are required twice, in addition to load()..
-			resize();
-			resize();
-		}
-	}
-});
-
-function createCodeMirror(place, options, source) {
-	return new CodeMirror(place, Hash.create({}, {
-		lineNumbers: true,
-		matchBrackets: true,
-		indentUnit: 4,
-		tabMode: 'shift',
-		value: source.getText().replace(/\t/gi, '    ').match(
-			// Remove first & last empty line
-			/^\s*?[\n\r]?([\u0000-\uffff]*?)[\n\r]?\s*?$/)[1]
-	}, options));
-}
-
-Code = HtmlElement.extend({
-	_class: 'code',
-
-	initialize: function() {
-		// Only format this element if it is visible, otherwise wait until
-		// it is made visible and then call initialize() manually.
-		if (this.initialized || this.getBounds().height == 0)
-			return;
-		var that = this;
-		var start = this.getProperty('start');
-		var highlight = this.getProperty('highlight');
-		var editor = createCodeMirror(function(el) {
-			that.replaceWith(el);
-		}, {
-			lineNumbers: !this.hasParent('.resource-text'),
-			firstLineNumber: (start || 1).toInt(),
-			readOnly: true
-		}, this);
-		if (highlight) {
-			var highlights = highlight.split(',');
-			for (var i = 0, l = highlights.length; i < l; i++) {
-				var highlight = highlights[i].split('-');
-				var hlStart = highlight[0].toInt() - 1;
-				var hlEnd = highlight.length == 2
-						? highlight[1].toInt() - 1 : hlStart;
-				if (start) {
-					hlStart -= start - 1;
-					hlEnd -= start - 1;
-				}
-				for (var j = hlStart; j <= hlEnd; j++) {
-					editor.setLineClass(j, 'highlight');
-				}
-			}
-		}
-		this.initialized = true;
-	}
-});
-
-PaperScript = HtmlElement.extend({
-	_class: 'paperscript',
-
-	initialize: function() {
-		// Only format this element if it is visible, otherwise wait until
-		// it is made visible and then call initialize() manually.
-		if (this.initialized || this.getBounds().height == 0)
-			return;
-		var script = $('script', this),
-			button = $('.button', this);
-		if (!script || !button)
-			return;
-		var source = button.injectAfter('div', {
-			className: 'source hidden'
-		});
-		var that = this,
-			canvas = $('canvas', this),
-			hasResize = canvas.getProperty('resize'),
-			showSplit = this.hasClass('split'),
-			sourceFirst = this.hasClass('source'),
-			width, height,
-			editor = null,
-			hasBorders = true;
-
-		function showSource(show) {
-			source.modifyClass('hidden', !show);
-			button.setText(show ? 'Run' : 'Source');
-			if (show && !editor) {
-				editor = createCodeMirror(source.$, {
-					/*
-					onKeyEvent: function(editor, event) {
-						event = new DomEvent(event);
-						if (event.type == 'keydown') {
-							var pos = editor.getCursor();
-							pos.ch += 4;
-							editor.setCursor(pos);
-							event.stop();
-						}
-					},
-					*/
-				}, script);
-			}
-		}
-
-		function runScript() {
-			var scope = paper.PaperScope.get(script.$);
-			if (scope) {
-				// Update script to edited version
-				var code = editor.getValue();
-				script.setText(code);
-				// Keep a reference to the used canvas, since we're going to
-				// fully clear the scope and initialize again with this canvas.
-				var canvas = scope.view.canvas;
-				// Clear scope first, then evaluate a new script.
-				scope.clear();
-				scope.initialize(canvas);
-				scope.evaluate(code);
-			}
-		}
-
-		function resize() {
-			if (!canvas.hasClass('hidden')) {
-				width = canvas.getWidth();
-				height = canvas.getHeight();
-			} else if (hasResize) {
-				// Can't get correct dimensions from hidden canvas,
-				// so calculate again.
-				var size = $window.getScrollSize();
-				var offset = source.getOffset();
-				width = size.width - offset.x;
-				height = size.height - offset.y;
-			}
-			// Resize the main element as well, so that the float:right button
-			// is always positioned correctly.
-			that.set({ width: width, height: height });
-			source.set({
-				width: width - (hasBorders ? 2 : 1),
-				height: height - (hasBorders ? 2 : 0)
-			});
-		}
-
-		function toggleView() {
-			var show = source.hasClass('hidden');
-			resize();
-			canvas.modifyClass('hidden', show);
-			showSource(show);
-			if (!show)
-				runScript();
-			// Remove padding
-			button.setStyle('right',
-				$('.CodeMirror', source).getScrollSize().height > height
-					? 24 : 8);
-		}
-
-		if (hasResize) {
-			// Delay the installing of the resize event, so paper.js installs
-			// its own before us.
-			(function() {
-				$window.addEvents({
-					resize: resize
-				});
-			}).delay(1);
-			hasBorders = false;
-			source.setStyles({
-				borderWidth: '0 0 0 1px'
-			});
-		}
-
-		if (showSplit) {
-			showSource(true);
-		} else if (sourceFirst) {
-			toggleView();
-		}
-
-		button.addEvents({
-			click: function(event) {
-				if (showSplit) {
-					runScript();
-				} else {
-					toggleView();
-				}
-				event.stop();
-			},
-
-			mousedown: function(event) {
-				event.stop();
-			}
-		});
-		this.initialized = true;
-	}
-});
-
-var lastMemberId = null;
-function toggleMember(id, scrollTo, dontScroll) {
-	var link = $('#' + id + '-link');
-	if (!link)
-		return true;
-	var desc = $('#' + id + '-description');
-	var v = !link.hasClass('hidden');
-	// Retrieve y-offset before any changes, so we can correct scrolling after
-	var offset = (v ? link : desc).getOffset().y;
-	if (lastMemberId && lastMemberId != id) {
-		var prevId = lastMemberId;
-		lastMemberId = null;
-		toggleMember(prevId, false, true);
-	}
-	lastMemberId = v && id;
-	link.modifyClass('hidden', v);
-	desc.modifyClass('hidden', !v);
-	if (!dontScroll) {
-		// Correct scrolling relatively to where we are, by checking the amount
-		// the element has shifted due to the above toggleMember call, and
-		// correcting by 11px offset, caused by 1px border and 10px padding.
-		var scroll = $window.getScrollOffset();
-		$window.setScrollOffset(scroll.x, scroll.y
-				+ (v ? desc : link).getOffset().y - offset + 11 * (v ? 1 : -1));
-	}
-	if (!desc.editor && v) {
-		desc.editor = $$('pre.code, .paperscript', desc).each(function(code) {
-			code.initialize();
-		});
-	}
-	if (scrollTo)
-		scrollToMember(id);
-	return false;
-}
-
-function scrollToElement(id) {
-	var e = $('#' + id + '-member');
-	if (e) {
-		if (e.hasClass('member'))
-			toggleMember(id);
-		var offs = e.getOffset();
-		$window.setScrollOffset(offs);
-	} else {
-		window.location.hash = id;
-	}
-}
-
-$document.addEvent('domready', function() {
-	var h = unescape(window.location.hash);
-	if (h) scrollToElement(h.substring(1));
-	if (window.paper)
-		paper.load();
-});
diff --git a/dist/paper.js b/dist/paper.js
deleted file mode 100644
index d2dbb9ac..00000000
--- a/dist/paper.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// Paper.js loader for development, as produced by the build/load.sh script
-document.write('<script type="text/javascript" src="../../lib/prepro.js"></script>');
-document.write('<script type="text/javascript" src="../../src/load.js"></script>');
\ No newline at end of file
diff --git a/lib/bootstrap.js b/lib/bootstrap.js
deleted file mode 100644
index aaed4e9f..00000000
--- a/lib/bootstrap.js
+++ /dev/null
@@ -1,411 +0,0 @@
-/**
- * Bootstrap JavaScript Library
- * (c) 2006 - 2011 Juerg Lehni, http://lehni.org/
- *
- * Bootstrap is released under the MIT license
- * http://bootstrapjs.org/
- *
- * Inspirations:
- * http://dean.edwards.name/weblog/2006/03/base/
- * http://dev.helma.org/Wiki/JavaScript+Inheritance+Sugar/
- * http://prototypejs.org/
- */
-
-var Base = new function() { // Bootstrap scope
-	// Fix __proto__ for browsers where it is not implemented (IE and Opera).
-	var fix = !this.__proto__,
-		hidden = /^(statics|generics|preserve|enumerable|prototype|__proto__|toString|valueOf)$/,
-		proto = Object.prototype,
-		/**
-		 * Private function that checks if an object contains a given property.
-		 * Naming it 'has' causes problems on Opera when defining
-		 * Object.prototype.has, as the local version then seems to be overriden
-		 * by that. Giving it a idfferent name fixes it.
-		 */
-		has = fix
-			? function(name) {
-				return name !== '__proto__' && this.hasOwnProperty(name);
-			}
-			: proto.hasOwnProperty,
-		toString = proto.toString,
-		proto = Array.prototype,
-		isArray = Array.isArray = Array.isArray || function(obj) {
-			return toString.call(obj) === '[object Array]';
-		},
-		slice = proto.slice,
-		forEach = proto.forEach || function(iter, bind) {
-			for (var i = 0, l = this.length; i < l; i++)
-				iter.call(bind, this[i], i, this);
-		},
-		forIn = function(iter, bind) {
-			// Do not use Object.keys for iteration as iterators might modify
-			// the object we're iterating over, making the hasOwnProperty still
-			// necessary.
-			for (var i in this)
-				if (this.hasOwnProperty(i))
-					iter.call(bind, this[i], i, this);
-		},
-		_define = Object.defineProperty,
-		_describe = Object.getOwnPropertyDescriptor;
-
-	// Support a mixed environment of some ECMAScript 5 features present,
-	// along with __defineGetter/Setter__ functions, as found in browsers today.
-	function define(obj, name, desc) {
-		// Unfortunately Safari seems to ignore configurable: true and
-		// does not override existing properties, so we need to delete
-		// first:
-		if (_define) {
-			try {
-				delete obj[name];
-				return _define(obj, name, desc);
-			} catch (e) {}
-		}
-		if ((desc.get || desc.set) && obj.__defineGetter__) {
-			desc.get && obj.__defineGetter__(name, desc.get);
-			desc.set && obj.__defineSetter__(name, desc.set);
-		} else {
-			obj[name] = desc.value;
-		}
-		return obj;
-	}
-
-	function describe(obj, name) {
-		if (_describe) {
-			try {
-				return _describe(obj, name);
-			} catch (e) {}
-		}
-		var get = obj.__lookupGetter__ && obj.__lookupGetter__(name);
-		return get
-			? { get: get, set: obj.__lookupSetter__(name), enumerable: true,
-					configurable: true }
-			: has.call(obj, name)
-				? { value: obj[name], enumerable: true, configurable: true,
-						writable: true }
-				: null;
-	}
-
-	/**
-	 * Private function that injects functions from src into dest, overriding
-	 * (and inherinting from) base.
-	 */
-	function inject(dest, src, enumerable, base, preserve, generics) {
-		var beans, bean;
-
-		/**
-		 * Private function that injects one field with given name and checks if
-		 * the field is a function that needs to be wrapped for calls of base().
-		 * This is only needed if the function in base is different from the one
-		 * in src, and if the one in src is actually calling base through base.
-		 * The string of the function is parsed for this.base to detect calls.
-		 */
-		function field(name, val, dontCheck, generics) {
-			// This does even work for prop: 0, as it will just be looked up
-			// again through describe.
-			var val = val || (val = describe(src, name))
-					&& (val.get ? val : val.value),
-				func = typeof val === 'function',
-				res = val,
-				// Only lookup previous value if we preserve or define a
-				// function that might need it for this.base(). If we're
-				// defining a getter, don't lookup previous value, but look if
-				// the property exists (name in dest) and store result in prev
-				prev = preserve || func
-					? (val && val.get ? name in dest : dest[name]) : null;
-			// Make generics first, as we might jump out bellow in the
-			// val !== (src.__proto__ || Object.prototype)[name] check,
-			// e.g. when explicitely reinjecting Array.prototype methods
-			// to produce generics of them.
-			if (generics && func && (!preserve || !generics[name])) {
-				generics[name] = function(bind) {
-					// Do not call Array.slice generic here, as on Safari,
-					// this seems to confuse scopes (calling another
-					// generic from generic-producing code).
-					return bind && dest[name].apply(bind,
-							slice.call(arguments, 1));
-				}
-			}
-			if ((dontCheck || val !== undefined && has.call(src, name))
-					&& (!preserve || !prev)) {
-				if (func) {
-					if (prev && /\bthis\.base\b/.test(val)) {
-						var fromBase = base && base[name] == prev;
-						res = function() {
-							// Look up the base function each time if we can,
-							// to reflect changes to the base class after
-							// inheritance.
-							var tmp = describe(this, 'base');
-							define(this, 'base', { value: fromBase
-								? base[name] : prev, configurable: true });
-							try {
-								return val.apply(this, arguments);
-							} finally {
-								tmp ? define(this, 'base', tmp)
-									: delete this.base;
-							}
-						};
-						// Make wrapping closure pretend to be the original
-						// function on inspection
-						res.toString = function() {
-							return val.toString();
-						}
-						res.valueOf = function() {
-							return val.valueOf();
-						}
-					}
-					// Produce bean properties if getters are specified. This
-					// does not produce properties for setter-only properties.
-					// Just collect beans for now, and look them up in dest at
-					// the end of fields injection. This ensures this.base()
-					// works in beans too, and inherits setters for redefined
-					// getters in subclasses. Only add getter beans if they do
-					// not expect arguments. Functions that should function both
-					// with optional arguments and as beans should not declare
-					// the parameters and use the arguments array internally
-					// instead.
-					if (beans && val.length == 0
-							&& (bean = name.match(/^(get|is)(([A-Z])(.*))$/)))
-						beans.push([ bean[3].toLowerCase() + bean[4], bean[2] ]);
-				}
-				// No need to look up getter if this is a function already.
-				if (!res || func || !res.get)
-					res = { value: res, writable: true };
-				// Only set/change configurable and enumerable if this field is
-				// configurable
-				if ((describe(dest, name)
-						|| { configurable: true }).configurable) {
-					res.configurable = true;
-					res.enumerable = enumerable;
-				}
-				define(dest, name, res);
-			}
-		}
-		// Iterate through all definitions in src now and call field() for each.
-		if (src) {
-			beans = [];
-			for (var name in src)
-				if (has.call(src, name) && !hidden.test(name))
-					field(name, null, true, generics);
-			// IE (and some other browsers?) never enumerate these, even  if
-			// they are simply set on an object. Force their creation. Do not
-			// create generics for these, and check them for not being defined
-			// (by passing undefined for dontCheck).
-			field('toString');
-			field('valueOf');
-			// Now finally define beans as well. Look up methods on dest, for
-			// support of this.base() (See above).
-			for (var i = 0, l = beans && beans.length; i < l; i++)
-				try {
-					var bean = beans[i], part = bean[1];
-					field(bean[0], {
-						get: dest['get' + part] || dest['is' + part],
-						set: dest['set' + part]
-					}, true);
-				} catch (e) {}
-		}
-		return dest;
-	}
-
-	/**
-	 * Private function that creates a constructor to extend the given object.
-	 * When this constructor is called through new, a new object is craeted
-	 * that inherits all from obj.
-	 */
-	function extend(obj) {
-		// Create the constructor for the new prototype that calls initialize
-		// if it is defined.
-		var ctor = function(dont) {
-			// Fix __proto__
-			if (fix) define(this, '__proto__', { value: obj });
-			// Call the constructor function, if defined and we are not
-			// inheriting, in which case ctor.dont would be set, see bellow.
-			if (this.initialize && dont !== ctor.dont)
-				return this.initialize.apply(this, arguments);
-		}
-		ctor.prototype = obj;
-		// Add a toString function that delegates to initialize if possible
-		ctor.toString = function() {
-			return (this.prototype.initialize || function() {}).toString();
-		}
-		return ctor;
-	}
-
-	/**
-	 * Converts the argument to an iterator function. If none is specified, the
-	 * identity function is returned.
-	 * This supports normal functions, which are returned unmodified, and values
-	 * to compare to. Wherever this function is used in the Enumerable
-	 * functions, a value, a Function or null may be passed.
-	 */
-	function iterator(iter) {
-		return !iter
-			? function(val) { return val }
-			: typeof iter !== 'function'
-				? function(val) { return val == iter }
-				: iter;
-	}
-
-	function each(obj, iter, bind, asArray) {
-		try {
-			if (obj)
-				(asArray || asArray === undefined && isArray(obj)
-					? forEach : forIn).call(obj, iterator(iter),
-						bind = bind || obj);
-		} catch (e) {
-			if (e !== Base.stop) throw e;
-		}
-		return bind;
-	}
-
-	function clone(obj) {
-		return each(obj, function(val, i) {
-			this[i] = val;
-		}, new obj.constructor());
-	}
-
-	// Inject into new ctor object that's passed to inject(), and then returned
-	return inject(function() {}, {
-		inject: function(src/*, ... */) {
-			if (src) {
-				var proto = this.prototype,
-					base = proto.__proto__ && proto.__proto__.constructor,
-					// Allow the whole scope to just define statics by defining
-					// statics: true.
-					statics = src.statics == true ? src : src.statics;
-				if (statics != src)
-					inject(proto, src, src.enumerable, base && base.prototype,
-							src.preserve, src.generics && this);
-				// Define new static fields as enumerable, and inherit from
-				// base. enumerable is necessary so they can be copied over from
-				// base, and it does not harm to have enumerable properties in
-				// the constructor. Use the preserve setting in src.preserve for
-				// statics too, not their own.
-				inject(this, statics, true, base, src.preserve);
-			}
-			// If there are more than one argument, loop through them and call
-			// inject again. Do not simple inline the above code in one loop,
-			// since each of the passed objects might override this.inject.
-			for (var i = 1, l = arguments.length; i < l; i++)
-				this.inject(arguments[i]);
-			return this;
-		},
-
-		extend: function(src/* , ... */) {
-			// The new prototype extends the constructor on which extend is
-			// called. Fix constructor.
-			// TODO: Consider using Object.create instead of using this.dont if
-			// available?
-			var proto = new this(this.dont),
-				ctor = extend(proto);
-			define(proto, 'constructor',
-					{ value: ctor, writable: true, configurable: true });
-			// Define an object to be passed as the first parameter in
-			// constructors when initialize should not be called.
-			ctor.dont = {};
-			// Copy over static fields, as prototype-like inheritance
-			// is not possible for static fields. Mark them as enumerable
-			// so they can be copied over again.
-			inject(ctor, this, true);
-			// Inject all the definitions in src. Use the new inject instead of
-			// the one in ctor, in case it was overriden. this is needed when
-			// overriding the static .inject(). But only inject if there's
-			// something to actually inject.
-			return arguments.length ? this.inject.apply(ctor, arguments) : ctor;
-		}
-		// Pass true for enumerable, so inject() and extend() can be passed on
-		// to subclasses of Base through Base.inject() / extend().
-	}, true).inject({
-		/**
-		 * Returns true if the object contains a property with the given name,
-		 * false otherwise.
-		 * Just like in .each, objects only contained in the prototype(s) are
-		 * filtered.
-		 */
-		has: has,
-		each: each,
-
-		/**
-		 * Injects the fields from the given object, adding this.base()
-		 * functionality
-		 */
-		inject: function(/* src, ... */) {
-			for (var i = 0, l = arguments.length; i < l; i++)
-				inject(this, arguments[i]);
-			return this;
-		},
-
-		/**
-		 * Returns a new object that inherits all properties from "this",
-		 * through proper JS inheritance, not copying.
-		 * Optionally, src and hide parameters can be passed to fill in the
-		 * newly created object just like in inject(), to copy the behavior
-		 * of Function.prototype.extend.
-		 */
-		extend: function(/* src, ... */) {
-			// Notice the "new" here: the private extend returns a constructor
-			// as it's used for Function.prototype.extend as well. But when
-			// extending objects, we want to return a new object that inherits
-			// from "this". In that case, the constructor is never used again,
-			// its just created to create a new object with the proper
-			// inheritance set and is garbage collected right after.
-			var res = new (extend(this));
-			return res.inject.apply(res, arguments);
-		},
-
-		each: function(iter, bind) {
-			return each(this, iter, bind);
-		},
-
-		/**
-		 * Creates a new object of the same type and copies over all
-		 * name / value pairs from this object.
-		 */
-		clone: function() {
-			return clone(this);
-		},
-
-		statics: {
-			// Expose some local privates as Base generics.
-			each: each,
-			clone: clone,
-			define: define,
-			describe: describe,
-			iterator: iterator,
-
-			has: function(obj, name) {
-				return has.call(obj, name);
-			},
-
-			type: function(obj) {
-				return (obj || obj === 0) && (obj._type || typeof obj) || null;
-			},
-
-			check: function(obj) {
-				return !!(obj || obj === 0);
-			},
-
-			/**
-			 * Returns the first argument that is defined.
-			 * Null is counted as defined too, since !== undefined is used for
-			 * comparisons. In this it differs from Mootools!
-			 */
-			pick: function() {
-				for (var i = 0, l = arguments.length; i < l; i++)
-					if (arguments[i] !== undefined)
-						return arguments[i];
-				return null;
-			},
-
-			/**
-			 * A special constant, to be thrown by closures passed to each()
-			 *
-			 * $continue / Base.next is not implemented, as the same
-			 * functionality can achieved by using return in the closure.
-			 * In prototype, the implementation of $continue also leads to a
-			 * huge speed decrease, as the closure is wrapped in another closure
-			 * that does nothing else than handling $continue.
-			 */
-			stop: {}
-		}
-	});
-}
diff --git a/lib/parse-js-min.js b/lib/parse-js-min.js
deleted file mode 100644
index c0bdddac..00000000
--- a/lib/parse-js-min.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * A JavaScript tokenizer / parser / generator, originally written in Lisp.
- * Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
- * http://marijn.haverbeke.nl/parse-js/
- *
- * Ported by to JavaScript by Mihai Bazon
- * Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
- * http://mihai.bazon.net/blog/
- *
- * Modifications and adaptions to browser (c) 2011, Juerg Lehni
- * http://lehni.org/
- *
- * Distributed under the BSD license.
- */var parse_js=new function(){function W(a,b,c){var d=[];for(var e=0;e<a.length;++e)d.push(b.call(c,a[e],e));return d}function V(c){return/^[a-z_$][a-z0-9_$]*$/i.test(c)&&c!="this"&&!M(d,c)&&!M(b,c)&&!M(a,c)}function U(a,b){var c={};a===!0&&(a={});for(var d in b)M(b,d)&&(c[d]=a&&M(a,d)?a[d]:b[d]);return c}function T(a,b){return b<1?"":Array(b+1).join(a)}function S(a,b){function z(a){var b=a[0],c=r[b];if(!c)throw new Error("Can't find generator for \""+b+'"');y.push(a);var d=c.apply(b,a.slice(1));y.pop();return d}function x(a){var b=a[0],c=a[1];c!=null&&(b=k([g(b),"=",m(c,"seq")]));return b}function w(a){return a?a.length==0?"{}":"{"+e+j(function(){return u(a).join(e)})+e+h("}"):";"}function v(a){var b=a.length;return b==0?"{}":"{"+e+W(a,function(a,d){var f=a[1].length>0,g=j(function(){return h(a[0]?k(["case",z(a[0])+":"]):"default:")},.5)+(f?e+j(function(){return u(a[1]).join(e)}):"");!c&&f&&d<b-1&&(g+=";");return g}).join(e)+e+h("}")}function u(a,b){for(var d=[],e=a.length-1,f=0;f<=e;++f){var g=a[f],i=z(g);i!=";"&&(!c&&f==e&&(g[0]=="while"&&O(g[2])||L(g[0],["for","for-in"])&&O(g[4])||g[0]=="if"&&O(g[2])&&!g[3]||g[0]=="if"&&g[3]&&O(g[3])?i=i.replace(/;*\s*$/,";"):i=i.replace(/;+\s*$/,"")),d.push(i))}return b?d:W(d,h)}function t(a,b,c,d){var e=d||"function";a&&(e+=" "+g(a)),e+="("+l(W(b,g))+")";return k([e,w(c)])}function s(a){if(a[0]=="do")return z(["block",[a]]);var b=a;for(;;){var c=b[0];if(c=="if"){if(!b[3])return z(["block",[a]]);b=b[3]}else if(c=="while"||c=="do")b=b[2];else if(c=="for"||c=="for-in")b=b[4];else break}return z(a)}function q(a){var b=a.toString(10),c=[b.replace(/^0\./,".")],d;Math.floor(a)===a?(c.push("0x"+a.toString(16).toLowerCase(),"0"+a.toString(8)),(d=/^(.*?)(0+)$/.exec(a))&&c.push(d[1]+"e"+d[2].length)):(d=/^0?\.(0+)(.*)$/.exec(a))&&c.push(d[2]+"e-"+(d[1].length+d[2].length),b.substr(b.indexOf(".")));return n(c)}function o(a){if(a[0]=="function"||a[0]=="object"){var b=J(y),c=b.pop(),d=b.pop();while(d){if(d[0]=="stat")return!0;if((d[0]=="seq"||d[0]=="call"||d[0]=="dot"||d[0]=="sub"||d[0]=="conditional")&&d[1]===c||(d[0]=="binary"||d[0]=="assign"||d[0]=="unary-postfix")&&d[2]===c)c=d,d=b.pop();else return!1}}return!M(P,a[0])}function n(a){if(a.length==1)return a[0];if(a.length==2){var b=a[1];a=a[0];return a.length<=b.length?a:b}return n([a[0],n(a.slice(1))])}function m(a){var b=z(a);for(var c=1;c<arguments.length;++c){var d=arguments[c];if(d instanceof Function&&d(a)||a[0]==d)return"("+b+")"}return b}function l(a){return a.join(","+f)}function k(a){if(c)return a.join(" ");var b=[];for(var d=0;d<a.length;++d){var e=a[d+1];b.push(a[d]),e&&(/[a-z0-9_\x24]$/i.test(a[d].toString())&&/^[a-z0-9_\x24]/i.test(e.toString())||/[\+\-]$/.test(a[d].toString())&&/^[\+\-]/.test(e.toString()))&&b.push(" ")}return b.join("")}function j(a,b){b==null&&(b=1),d+=b;try{return a.apply(null,J(arguments,1))}finally{d-=b}}function h(a){a==null&&(a=""),c&&(a=T(" ",b.indent_start+d*b.indent_level)+a);return a}function g(a){return a.toString()}b=U(b,{indent_start:0,indent_level:4,quote_keys:!1,space_colon:!1,beautify:!1});var c=!!b.beautify,d=0,e=c?"\n":"",f=c?" ":"",r={string:Q,num:q,name:g,toplevel:function(a){return u(a).join(e)},splice:function(a){var b=y[y.length-2][0];return M(R,b)?w.apply(this,arguments):W(u(a,!0),function(a,b){return b>0?h(a):a}).join(e)},block:w,"var":function(a){return"var "+l(W(a,x))+";"},"const":function(a){return"const "+l(W(a,x))+";"},"try":function(a,b,c){var d=["try",w(a)];b&&d.push("catch","("+b[0]+")",w(b[1])),c&&d.push("finally",w(c));return k(d)},"throw":function(a){return k(["throw",z(a)])+";"},"new":function(a,b){b=b.length>0?"("+l(W(b,z))+")":"";return k(["new",m(a,"seq","binary","conditional","assign",function(a){var b=N(),c={};try{b.with_walkers({call:function(){throw c},"function":function(){return this}},function(){b.walk(a)})}catch(d){if(d===c)return!0;throw d}})+b])},"switch":function(a,b){return k(["switch","("+z(a)+")",v(b)])},"break":function(a){var b="break";a!=null&&(b+=" "+g(a));return b+";"},"continue":function(a){var b="continue";a!=null&&(b+=" "+g(a));return b+";"},conditional:function(a,b,c){return k([m(a,"assign","seq","conditional"),"?",m(b,"seq"),":",m(c,"seq")])},assign:function(a,b,c){a&&a!==!0?a+="=":a="=";return k([z(b),a,m(c,"seq")])},dot:function(a){var b=z(a),c=1;a[0]=="num"?/\./.test(a[1])||(b+="."):o(a)&&(b="("+b+")");while(c<arguments.length)b+="."+g(arguments[c++]);return b},call:function(a,b){var c=z(a);o(a)&&(c="("+c+")");return c+"("+l(W(b,function(a){return m(a,"seq")}))+")"},"function":t,defun:t,"if":function(a,b,c){var d=["if","("+z(a)+")",c?s(b):z(b)];c&&d.push("else",z(c));return k(d)},"for":function(a,b,c,d){var e=["for"];a=(a!=null?z(a):"").replace(/;*\s*$/,";"+f),b=(b!=null?z(b):"").replace(/;*\s*$/,";"+f),c=(c!=null?z(c):"").replace(/;*\s*$/,"");var g=a+b+c;g=="; ; "&&(g=";;"),e.push("("+g+")",z(d));return k(e)},"for-in":function(a,b,c,d){return k(["for","("+(a?z(a).replace(/;+$/,""):z(b)),"in",z(c)+")",z(d)])},"while":function(a,b){return k(["while","("+z(a)+")",z(b)])},"do":function(a,b){return k(["do",z(b),"while","("+z(a)+")"])+";"},"return":function(a){var b=["return"];a!=null&&b.push(z(a));return k(b)+";"},binary:function(a,b,c){var d=z(b),e=z(c);if(L(b[0],["assign","conditional","seq"])||b[0]=="binary"&&B[a]>B[b[1]])d="("+d+")";if(L(c[0],["assign","conditional","seq"])||c[0]=="binary"&&B[a]>=B[c[1]]&&(c[1]!=a||!L(a,["&&","||","*"])))e="("+e+")";return k([d,a,e])},"unary-prefix":function(a,b){var c=z(b);b[0]=="num"||b[0]=="unary-prefix"&&!M(i,a+b[1])||!o(b)||(c="("+c+")");return a+(p(a.charAt(0))?" ":"")+c},"unary-postfix":function(a,b){var c=z(b);b[0]=="num"||b[0]=="unary-postfix"&&!M(i,a+b[1])||!o(b)||(c="("+c+")");return c+a},sub:function(a,b){var c=z(a);o(a)&&(c="("+c+")");return c+"["+z(b)+"]"},object:function(a){return a.length==0?"{}":"{"+e+j(function(){return W(a,function(a){if(a.length==3)return h(t(a[0],a[1][2],a[1][3],a[2]));var d=a[0],e=z(a[1]);b.quote_keys?d=Q(d):(typeof d=="number"||!c&&+d+""==d)&&parseFloat(d)>=0?d=q(+d):V(d)||(d=Q(d));return h(k(c&&b.space_colon?[d,":",e]:[d+":",e]))}).join(","+e)})+e+h("}")},regexp:function(a,b){return"/"+a+"/"+b},array:function(a){return a.length==0?"[]":k(["[",l(W(a,function(a){return!c&&a[0]=="atom"&&a[1]=="undefined"?"":m(a,"seq")})),"]"])},stat:function(a){return z(a).replace(/;*\s*$/,";")},seq:function(){return l(W(J(arguments),z))},label:function(a,b){return k([g(a),":",z(b)])},"with":function(a,b){return k(["with","("+z(a)+")",z(b)])},atom:function(a){return g(a)}},y=[];return z(a)}function Q(a){var b=0,c=0;a=a.replace(/[\\\b\f\n\r\t\x22\x27]/g,function(a){switch(a){case"\\":return"\\\\";case"\b":return"\\b";case"\f":return"\\f";case"\n":return"\\n";case"\r":return"\\r";case"\t":return"\\t";case'"':++b;return'"';case"'":++c;return"'"}return a});return b>c?"'"+a.replace(/\x27/g,"\\'")+"'":'"'+a.replace(/\x22/g,'\\"')+'"'}function O(a){return!a||a[0]=="block"&&(!a[1]||a[1].length==0)}function N(){function g(a,b){var c={},e;for(e in a)M(a,e)&&(c[e]=d[e],d[e]=a[e]);var f=b();for(e in c)M(c,e)&&(c[e]?d[e]=c[e]:delete d[e]);return f}function f(a){if(a==null)return null;try{e.push(a);var b=a[0],f=d[b];if(f){var g=f.apply(a,a.slice(1));if(g!=null)return g}f=c[b];return f.apply(a,a.slice(1))}finally{e.pop()}}function b(a){var b=[this[0]];a!=null&&b.push(W(a,f));return b}function a(a){return[this[0],W(a,function(a){var b=[a[0]];a.length>1&&(b[1]=f(a[1]));return b})]}var c={string:function(a){return[this[0],a]},num:function(a){return[this[0],a]},name:function(a){return[this[0],a]},toplevel:function(a){return[this[0],W(a,f)]},block:b,splice:b,"var":a,"const":a,"try":function(a,b,c){return[this[0],W(a,f),b!=null?[b[0],W(b[1],f)]:null,c!=null?W(c,f):null]},"throw":function(a){return[this[0],f(a)]},"new":function(a,b){return[this[0],f(a),W(b,f)]},"switch":function(a,b){return[this[0],f(a),W(b,function(a){return[a[0]?f(a[0]):null,W(a[1],f)]})]},"break":function(a){return[this[0],a]},"continue":function(a){return[this[0],a]},conditional:function(a,b,c){return[this[0],f(a),f(b),f(c)]},assign:function(a,b,c){return[this[0],a,f(b),f(c)]},dot:function(a){return[this[0],f(a)].concat(J(arguments,1))},call:function(a,b){return[this[0],f(a),W(b,f)]},"function":function(a,b,c){return[this[0],a,b.slice(),W(c,f)]},defun:function(a,b,c){return[this[0],a,b.slice(),W(c,f)]},"if":function(a,b,c){return[this[0],f(a),f(b),f(c)]},"for":function(a,b,c,d){return[this[0],f(a),f(b),f(c),f(d)]},"for-in":function(a,b,c,d){return[this[0],f(a),f(b),f(c),f(d)]},"while":function(a,b){return[this[0],f(a),f(b)]},"do":function(a,b){return[this[0],f(a),f(b)]},"return":function(a){return[this[0],f(a)]},binary:function(a,b,c){return[this[0],a,f(b),f(c)]},"unary-prefix":function(a,b){return[this[0],a,f(b)]},"unary-postfix":function(a,b){return[this[0],a,f(b)]},sub:function(a,b){return[this[0],f(a),f(b)]},object:function(a){return[this[0],W(a,function(a){return a.length==2?[a[0],f(a[1])]:[a[0],f(a[1]),a[2]]})]},regexp:function(a,b){return[this[0],a,b]},array:function(a){return[this[0],W(a,f)]},stat:function(a){return[this[0],f(a)]},seq:function(){return[this[0]].concat(W(J(arguments),f))},label:function(a,b){return[this[0],a,f(b)]},"with":function(a,b){return[this[0],f(a),f(b)]},atom:function(a){return[this[0],a]}},d={},e=[];return{walk:f,with_walkers:g,parent:function(){return e[e.length-2]},stack:function(){return e}}}function M(a,b){return Object.prototype.hasOwnProperty.call(a,b)}function L(a,b){for(var c=b.length;--c>=0;)if(b[c]===a)return!0;return!1}function K(a){return a.split("")}function J(a,b){return Array.prototype.slice.call(a,b||0)}function I(a){var b={};for(var c=0;c<a.length;++c)b[a[c]]=!0;return b}function H(a){a instanceof Function&&(a=a());for(var b=1,c=arguments.length;--c>0;++b)arguments[b]();return a}function G(a){var b=J(arguments,1);return function(){return a.apply(this,b.concat(J(arguments)))}}function F(a,b,c){function bk(a){try{++d.in_loop;return a()}finally{--d.in_loop}}function bi(a){var b=bg(a),c=d.token.value;if(e("operator")&&M(A,c)){if(bh(b)){g();return p("assign",A[c],b,bi(a))}i("Invalid assignment")}return b}function bh(a){if(!b)return!0;switch(a[0]){case"dot":case"sub":case"new":case"call":return!0;case"name":return a[1]!="this"}}function bg(a){var b=bf(a);if(e("operator","?")){g();var c=bj(!1);m(":");return p("conditional",b,c,bj(!1,a))}return b}function bf(a){return be(Y(!0),0,a)}function be(a,b,c){var f=e("operator")?d.token.value:null;f&&f=="in"&&c&&(f=null);var h=f!=null?B[f]:null;if(h!=null&&h>b){g();var i=be(Y(!0),h,c);return be(p("binary",f,a,i),b,c)}return a}function bd(a,b,c){(b=="++"||b=="--")&&!bh(c)&&i("Invalid use of "+b+" operator");return p(a,b,c)}function bc(a,b){if(e("punc",".")){g();return bc(p("dot",a,bb()),b)}if(e("punc","[")){g();return bc(p("sub",a,H(bj,G(m,"]"))),b)}if(b&&e("punc","(")){g();return bc(p("call",a,Z(")")),!0)}return b&&e("operator")&&M(z,d.token.value)?H(G(bd,"unary-postfix",d.token.value,a),g):a}function bb(){switch(d.token.type){case"name":case"operator":case"keyword":case"atom":return H(d.token.value,g);default:k()}}function ba(){switch(d.token.type){case"num":case"string":return H(d.token.value,g)}return bb()}function _(){var a=!0,c=[];while(!e("punc","}")){a?a=!1:m(",");if(!b&&e("punc","}"))break;var f=d.token.type,h=ba();f!="name"||h!="get"&&h!="set"||!!e("punc",":")?(m(":"),c.push([h,bj(!1)])):c.push([bb(),P(!1),h])}g();return p("object",c)}function $(){return p("array",Z("]",!b,!0))}function Z(a,b,c){var d=!0,f=[];while(!e("punc",a)){d?d=!1:m(",");if(b&&e("punc",a))break;e("punc",",")&&c?f.push(["atom","undefined"]):f.push(bj(!1))}g();return f}function X(){var a=Y(!1),b;e("punc","(")?(g(),b=Z(")")):b=[];return bc(p("new",a,b),!0)}function W(){return p("const",U())}function V(a){return p("var",U(a))}function U(a){var b=[];for(;;){e("name")||k();var c=d.token.value;g(),e("operator","=")?(g(),b.push([c,bj(!1,a)])):b.push([c]);if(!e("punc",","))break;g()}return b}function T(){var a=R(),b,c;if(e("keyword","catch")){g(),m("("),e("name")||i("Name expected");var f=d.token.value;g(),m(")"),b=[f,R()]}e("keyword","finally")&&(g(),c=R()),!b&&!c&&i("Missing catch/finally blocks");return p("try",a,b,c)}function R(){m("{");var a=[];while(!e("punc","}"))e("eof")&&k(),a.push(t());g();return a}function Q(){var a=q(),b=t(),c;e("keyword","else")&&(g(),c=t());return p("if",a,b,c)}function O(a){var b=a[0]=="var"?p("name",a[1][0]):a;g();var c=bj();m(")");return p("for-in",a,b,c,bk(t))}function N(a){m(";");var b=e("punc",";")?null:bj();m(";");var c=e("punc",")")?null:bj();m(")");return p("for",a,b,c,bk(t))}function K(){m("(");var a=null;if(!e("punc",";")){a=e("keyword","var")?(g(),V(!0)):bj(!0,!0);if(e("operator","in"))return O(a)}return N(a)}function I(a){var b;n()||(b=e("name")?d.token.value:null),b!=null?(g(),L(b,d.labels)||i("Label "+b+" without matching loop or statement")):d.in_loop==0&&i(a+" not inside a loop or switch"),o();return p(a,b)}function F(){return p("stat",H(bj,o))}function w(a){d.labels.push(a);var c=d.token,e=t();b&&!M(C,e[0])&&k(c),d.labels.pop();return p("label",a,e)}function s(a){return c?function(){var b=d.token,c=a.apply(this,arguments);c[0]=r(c[0],b,h());return c}:a}function r(a,b,c){return a instanceof E?a:new E(a,b,c)}function q(){m("(");var a=bj();m(")");return a}function p(){return J(arguments)}function o(){e("punc",";")?g():n()||k()}function n(){return!b&&(d.token.nlb||e("eof")||e("punc","}"))}function m(a){return l("punc",a)}function l(a,b){if(e(a,b))return g();j(d.token,"Unexpected token "+d.token.type+", expected "+a)}function k(a){a==null&&(a=d.token),j(a,"Unexpected token: "+a.type+" ("+a.value+")")}function j(a,b){i(b,a.line,a.col)}function i(a,b,c,e){var f=d.input.context();u(a,b!=null?b:f.tokline,c!=null?c:f.tokcol,e!=null?e:f.tokpos)}function h(){return d.prev}function g(){d.prev=d.token,d.peeked?(d.token=d.peeked,d.peeked=null):d.token=d.input();return d.token}function f(){return d.peeked||(d.peeked=d.input())}function e(a,b){return v(d.token,a,b)}var d={input:typeof a=="string"?x(a,!0):a,token:null,prev:null,peeked:null,in_function:0,in_loop:0,labels:[]};d.token=g();var t=s(function(){e("operator","/")&&(d.peeked=null,d.token=d.input(!0));switch(d.token.type){case"num":case"string":case"regexp":case"operator":case"atom":return F();case"name":return v(f(),"punc",":")?w(H(d.token.value,g,g)):F();case"punc":switch(d.token.value){case"{":return p("block",R());case"[":case"(":return F();case";":g();return p("block");default:k()};case"keyword":switch(H(d.token.value,g)){case"break":return I("break");case"continue":return I("continue");case"debugger":o();return p("debugger");case"do":return function(a){l("keyword","while");return p("do",H(q,o),a)}(bk(t));case"for":return K();case"function":return P(!0);case"if":return Q();case"return":d.in_function==0&&i("'return' outside of function");return p("return",e("punc",";")?(g(),null):n()?null:H(bj,o));case"switch":return p("switch",q(),S());case"throw":return p("throw",H(bj,o));case"try":return T();case"var":return H(V,o);case"const":return H(W,o);case"while":return p("while",q(),bk(t));case"with":return p("with",q(),t());default:k()}}}),P=s(function(a){var b=e("name")?H(d.token.value,g):null;a&&!b&&k(),m("(");return p(a?"defun":"function",b,function(a,b){while(!e("punc",")"))a?a=!1:m(","),e("name")||k(),b.push(d.token.value),g();g();return b}(!0,[]),function(){++d.in_function;var a=d.in_loop;d.in_loop=0;var b=R();--d.in_function,d.in_loop=a;return b}())}),S=G(bk,function(){m("{");var a=[],b=null;while(!e("punc","}"))e("eof")&&k(),e("keyword","case")?(g(),b=[],a.push([bj(),b]),m(":")):e("keyword","default")?(g(),m(":"),b=[],a.push([null,b])):(b||k(),b.push(t()));g();return a}),Y=s(function(a){if(e("operator","new")){g();return X()}if(e("operator")&&M(y,d.token.value))return bd("unary-prefix",H(d.token.value,g),Y(a));if(e("punc")){switch(d.token.value){case"(":g();return bc(H(bj,G(m,")")),a);case"[":g();return bc($(),a);case"{":g();return bc(_(),a)}k()}if(e("keyword","function")){g();return bc(P(!1),a)}if(M(D,d.token.type)){var b=d.token.type=="regexp"?p("regexp",d.token.value[0],d.token.value[1]):p(d.token.type,d.token.value);return bc(H(b,g),a)}k()}),bj=s(function(a,b){arguments.length==0&&(a=!0);var c=bi(b);if(a&&e("punc",",")){g();return p("seq",c,bj(!0,b))}return c});return p("toplevel",function(a){while(!e("eof"))a.push(t());return a}([]))}function E(a,b,c){this.name=a,this.start=b,this.end=c}function x(b){function P(a){if(a)return I();y(),v();var b=g();if(!b)return x("eof");if(o(b))return C();if(b=='"'||b=="'")return F();if(M(l,b))return x("punc",h());if(b==".")return L();if(b=="/")return K();if(M(e,b))return J();if(b=="\\"||q(b))return N();B("Unexpected character '"+b+"'")}function O(a,b){try{return b()}catch(c){if(c===w)B(a);else throw c}}function N(){var b=A(r);return M(a,b)?M(i,b)?x("operator",b):M(d,b)?x("atom",b):x("keyword",b):x("name",b)}function L(){h();return o(g())?C("."):x("punc",".")}function K(){h();var a=f.regex_allowed;switch(g()){case"/":f.comments_before.push(G()),f.regex_allowed=a;return P();case"*":f.comments_before.push(H()),f.regex_allowed=a;return P()}return f.regex_allowed?I():J("/")}function J(a){function b(a){if(!g())return a;var c=a+g();if(M(i,c)){h();return b(c)}return a}return x("operator",b(a||h()))}function I(){return O("Unterminated regular expression",function(){var a=!1,b="",c,d=!1;while(c=h(!0))if(a)b+="\\"+c,a=!1;else if(c=="[")d=!0,b+=c;else if(c=="]"&&d)d=!1,b+=c;else{if(c=="/"&&!d)break;c=="\\"?a=!0:b+=c}var e=A(function(a){return M(m,a)});return x("regexp",[b,e])})}function H(){h();return O("Unterminated multiline comment",function(){var a=t("*/",!0),b=f.text.substring(f.pos,a),c=x("comment2",b,!0);f.pos=a+2,f.line+=b.split("\n").length-1,f.newline_before=b.indexOf("\n")>=0;return c})}function G(){h();var a=t("\n"),b;a==-1?(b=f.text.substr(f.pos),f.pos=f.text.length):(b=f.text.substring(f.pos,a),f.pos=a);return x("comment1",b,!0)}function F(){return O("Unterminated string constant",function(){var a=h(),b="";for(;;){var c=h(!0);if(c=="\\")c=D();else if(c==a)break;b+=c}return x("string",b)})}function E(a){var b=0;for(;a>0;--a){var c=parseInt(h(!0),16);isNaN(c)&&B("Invalid hex-character pattern in string"),b=b<<4|c}return b}function D(){var a=h(!0);switch(a){case"n":return"\n";case"r":return"\r";case"t":return"\t";case"b":return"\b";case"v":return"";case"f":return"\f";case"0":return"";case"x":return String.fromCharCode(E(2));case"u":return String.fromCharCode(E(4));case"\n":return"";default:return a}}function C(a){var b=!1,c=!1,d=!1,e=a==".",f=A(function(f,g){if(f=="x"||f=="X")return d?!1:d=!0;if(!d&&(f=="E"||f=="e"))return b?!1:b=c=!0;if(f=="-")return c||g==0&&!a?!0:!1;if(f=="+")return c;c=!1;if(f==".")return!e&&!d?e=!0:!1;return p(f)});a&&(f=a+f);var g=s(f);if(!isNaN(g))return x("num",g);B("Invalid syntax: "+f)}function B(a){u(a,f.tokline,f.tokcol,f.tokpos)}function A(a){var b="",c=g(),d=0;while(c&&a(c,d++))b+=h(),c=g();return b}function y(){while(M(j,g()))h()}function x(a,b,d){f.regex_allowed=a=="operator"&&!M(z,b)||a=="keyword"&&M(c,b)||a=="punc"&&M(k,b);var e={type:a,value:b,line:f.tokline,col:f.tokcol,pos:f.tokpos,nlb:f.newline_before};d||(e.comments_before=f.comments_before,f.comments_before=[]),f.newline_before=!1;return e}function v(){f.tokline=f.line,f.tokcol=f.col,f.tokpos=f.pos}function t(a,b){var c=f.text.indexOf(a,f.pos);if(b&&c==-1)throw w;return c}function n(){return!f.peek()}function h(a){var b=f.text.charAt(f.pos++);if(a&&!b)throw w;b=="\n"?(f.newline_before=!0,++f.line,f.col=0):++f.col;return b}function g(){return f.text.charAt(f.pos)}var f={text:b.replace(/\r\n?|[\n\u2028\u2029]/g,"\n").replace(/^\uFEFF/,""),pos:0,tokpos:0,line:0,tokline:0,col:0,tokcol:0,newline_before:!1,regex_allowed:!1,comments_before:[]};P.context=function(a){a&&(f=a);return f};return P}function v(a,b,c){return a.type==b&&(c==null||a.value==c)}function u(a,b,c,d){throw new t(a,b,c,d)}function t(a,b,c,d){this.message=a,this.line=b,this.col=c,this.pos=d}function s(a){if(f.test(a))return parseInt(a.substr(2),16);if(g.test(a))return parseInt(a.substr(1),8);if(h.test(a))return parseFloat(a)}function r(a){return q(a)||o(a)}function q(a){return a=="$"||a=="_"||n(a)}function p(a){return o(a)||n(a)}function o(a){a=a.charCodeAt(0);return a>=48&&a<=57}function n(a){a=a.charCodeAt(0);return a>=65&&a<=90||a>=97&&a<=122}var a=I(["break","case","catch","const","continue","default","delete","do","else","finally","for","function","if","in","instanceof","new","return","switch","throw","try","typeof","var","void","while","with"]),b=I(["abstract","boolean","byte","char","class","debugger","double","enum","export","extends","final","float","goto","implements","import","int","interface","long","native","package","private","protected","public","short","static","super","synchronized","throws","transient","volatile"]),c=I(["return","new","delete","throw","else","case"]),d=I(["false","null","true","undefined"]),e=I(K("+-*&%=<>!?|~^")),f=/^0x[0-9a-f]+$/i,g=/^0[0-7]+$/,h=/^\d*\.?\d*(?:e[+-]?\d*(?:\d\.?|\.?\d)\d*)?$/i,i=I(["in","instanceof","typeof","new","void","delete","++","--","+","-","!","~","&","|","^","*","/","%",">>","<<",">>>","<",">","<=",">=","==","===","!=","!==","?","=","+=","-=","/=","*=","%=",">>=","<<=",">>>=","|=","^=","&=","&&","||"]),j=I(K(" \n\r\t")),k=I(K("[{}(,.;:")),l=I(K("[]{}(),;:")),m=I(K("gmsiy"));t.prototype.toString=function(){return this.message+" (line: "+this.line+", col: "+this.col+", pos: "+this.pos+")"};var w={},y=I(["typeof","void","delete","--","++","!","~","-","+"]),z=I(["--","++"]),A=function(a,b,c){while(c<a.length)b[a[c]]=a[c].substr(0,a[c].length-1),c++;return b}(["+=","-=","/=","*=","%=",">>=","<<=",">>>=","|=","^=","&="],{"=":!0},0),B=function(a,b){for(var c=0,d=1;c<a.length;++c,++d){var e=a[c];for(var f=0;f<e.length;++f)b[e[f]]=d}return b}([["||"],["&&"],["|"],["^"],["&"],["==","===","!=","!=="],["<",">","<=",">=","in","instanceof"],[">>","<<",">>>"],["+","-"],["*","/","%"]],{}),C=I(["for","do","while","switch"]),D=I(["atom","num","string","regexp","name"]);E.prototype.toString=function(){return this.name};var P=I(["name","array","object","string","dot","sub","call","regexp"]),R=I(["if","while","do","for","for-in","with"]);return{parse:F,gen_code:S,tokenizer:x,ast_walker:N}}
\ No newline at end of file
diff --git a/lib/parse-js-unicode.js b/lib/parse-js-unicode.js
deleted file mode 100644
index 6baa67f3..00000000
--- a/lib/parse-js-unicode.js
+++ /dev/null
@@ -1,1997 +0,0 @@
-/**
- * A JavaScript tokenizer / parser / generator, originally written in Lisp.
- * Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
- * http://marijn.haverbeke.nl/parse-js/
- *
- * Ported by to JavaScript by Mihai Bazon
- * Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
- * http://mihai.bazon.net/blog/
- *
- * Modifications and adaptions to browser (c) 2011, Juerg Lehni
- * http://lehni.org/
- *
- * Distributed under the BSD license.
- */
-
-var parse_js = new function() {
-
-/* -----[ Tokenizer (constants) ]----- */
-
-var KEYWORDS = array_to_hash([
-	"break",
-	"case",
-	"catch",
-	"const",
-	"continue",
-	"default",
-	"delete",
-	"do",
-	"else",
-	"finally",
-	"for",
-	"function",
-	"if",
-	"in",
-	"instanceof",
-	"new",
-	"return",
-	"switch",
-	"throw",
-	"try",
-	"typeof",
-	"var",
-	"void",
-	"while",
-	"with"
-]);
-
-var RESERVED_WORDS = array_to_hash([
-	"abstract",
-	"boolean",
-	"byte",
-	"char",
-	"class",
-	"debugger",
-	"double",
-	"enum",
-	"export",
-	"extends",
-	"final",
-	"float",
-	"goto",
-	"implements",
-	"import",
-	"int",
-	"interface",
-	"long",
-	"native",
-	"package",
-	"private",
-	"protected",
-	"public",
-	"short",
-	"static",
-	"super",
-	"synchronized",
-	"throws",
-	"transient",
-	"volatile"
-]);
-
-var KEYWORDS_BEFORE_EXPRESSION = array_to_hash([
-	"return",
-	"new",
-	"delete",
-	"throw",
-	"else",
-	"case"
-]);
-
-var KEYWORDS_ATOM = array_to_hash([
-	"false",
-	"null",
-	"true",
-	"undefined"
-]);
-
-var OPERATOR_CHARS = array_to_hash(characters("+-*&%=<>!?|~^"));
-
-var RE_HEX_NUMBER = /^0x[0-9a-f]+$/i;
-var RE_OCT_NUMBER = /^0[0-7]+$/;
-var RE_DEC_NUMBER = /^\d*\.?\d*(?:e[+-]?\d*(?:\d\.?|\.?\d)\d*)?$/i;
-
-var OPERATORS = array_to_hash([
-	"in",
-	"instanceof",
-	"typeof",
-	"new",
-	"void",
-	"delete",
-	"++",
-	"--",
-	"+",
-	"-",
-	"!",
-	"~",
-	"&",
-	"|",
-	"^",
-	"*",
-	"/",
-	"%",
-	">>",
-	"<<",
-	">>>",
-	"<",
-	">",
-	"<=",
-	">=",
-	"==",
-	"===",
-	"!=",
-	"!==",
-	"?",
-	"=",
-	"+=",
-	"-=",
-	"/=",
-	"*=",
-	"%=",
-	">>=",
-	"<<=",
-	">>>=",
-	"|=",
-	"^=",
-	"&=",
-	"&&",
-	"||"
-]);
-
-var WHITESPACE_CHARS = array_to_hash(characters(" \u00a0\n\r\t\f\v\u200b"));
-
-var PUNC_BEFORE_EXPRESSION = array_to_hash(characters("[{}(,.;:"));
-
-var PUNC_CHARS = array_to_hash(characters("[]{}(),;:"));
-
-var REGEXP_MODIFIERS = array_to_hash(characters("gmsiy"));
-
-/* -----[ Tokenizer ]----- */
-
-// regexps adapted from http://xregexp.com/plugins/#unicode
-var UNICODE = {
-	letter: new RegExp("[\\u0041-\\u005A\\u0061-\\u007A\\u00AA\\u00B5\\u00BA\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02C1\\u02C6-\\u02D1\\u02E0-\\u02E4\\u02EC\\u02EE\\u0370-\\u0374\\u0376\\u0377\\u037A-\\u037D\\u0386\\u0388-\\u038A\\u038C\\u038E-\\u03A1\\u03A3-\\u03F5\\u03F7-\\u0481\\u048A-\\u0523\\u0531-\\u0556\\u0559\\u0561-\\u0587\\u05D0-\\u05EA\\u05F0-\\u05F2\\u0621-\\u064A\\u066E\\u066F\\u0671-\\u06D3\\u06D5\\u06E5\\u06E6\\u06EE\\u06EF\\u06FA-\\u06FC\\u06FF\\u0710\\u0712-\\u072F\\u074D-\\u07A5\\u07B1\\u07CA-\\u07EA\\u07F4\\u07F5\\u07FA\\u0904-\\u0939\\u093D\\u0950\\u0958-\\u0961\\u0971\\u0972\\u097B-\\u097F\\u0985-\\u098C\\u098F\\u0990\\u0993-\\u09A8\\u09AA-\\u09B0\\u09B2\\u09B6-\\u09B9\\u09BD\\u09CE\\u09DC\\u09DD\\u09DF-\\u09E1\\u09F0\\u09F1\\u0A05-\\u0A0A\\u0A0F\\u0A10\\u0A13-\\u0A28\\u0A2A-\\u0A30\\u0A32\\u0A33\\u0A35\\u0A36\\u0A38\\u0A39\\u0A59-\\u0A5C\\u0A5E\\u0A72-\\u0A74\\u0A85-\\u0A8D\\u0A8F-\\u0A91\\u0A93-\\u0AA8\\u0AAA-\\u0AB0\\u0AB2\\u0AB3\\u0AB5-\\u0AB9\\u0ABD\\u0AD0\\u0AE0\\u0AE1\\u0B05-\\u0B0C\\u0B0F\\u0B10\\u0B13-\\u0B28\\u0B2A-\\u0B30\\u0B32\\u0B33\\u0B35-\\u0B39\\u0B3D\\u0B5C\\u0B5D\\u0B5F-\\u0B61\\u0B71\\u0B83\\u0B85-\\u0B8A\\u0B8E-\\u0B90\\u0B92-\\u0B95\\u0B99\\u0B9A\\u0B9C\\u0B9E\\u0B9F\\u0BA3\\u0BA4\\u0BA8-\\u0BAA\\u0BAE-\\u0BB9\\u0BD0\\u0C05-\\u0C0C\\u0C0E-\\u0C10\\u0C12-\\u0C28\\u0C2A-\\u0C33\\u0C35-\\u0C39\\u0C3D\\u0C58\\u0C59\\u0C60\\u0C61\\u0C85-\\u0C8C\\u0C8E-\\u0C90\\u0C92-\\u0CA8\\u0CAA-\\u0CB3\\u0CB5-\\u0CB9\\u0CBD\\u0CDE\\u0CE0\\u0CE1\\u0D05-\\u0D0C\\u0D0E-\\u0D10\\u0D12-\\u0D28\\u0D2A-\\u0D39\\u0D3D\\u0D60\\u0D61\\u0D7A-\\u0D7F\\u0D85-\\u0D96\\u0D9A-\\u0DB1\\u0DB3-\\u0DBB\\u0DBD\\u0DC0-\\u0DC6\\u0E01-\\u0E30\\u0E32\\u0E33\\u0E40-\\u0E46\\u0E81\\u0E82\\u0E84\\u0E87\\u0E88\\u0E8A\\u0E8D\\u0E94-\\u0E97\\u0E99-\\u0E9F\\u0EA1-\\u0EA3\\u0EA5\\u0EA7\\u0EAA\\u0EAB\\u0EAD-\\u0EB0\\u0EB2\\u0EB3\\u0EBD\\u0EC0-\\u0EC4\\u0EC6\\u0EDC\\u0EDD\\u0F00\\u0F40-\\u0F47\\u0F49-\\u0F6C\\u0F88-\\u0F8B\\u1000-\\u102A\\u103F\\u1050-\\u1055\\u105A-\\u105D\\u1061\\u1065\\u1066\\u106E-\\u1070\\u1075-\\u1081\\u108E\\u10A0-\\u10C5\\u10D0-\\u10FA\\u10FC\\u1100-\\u1159\\u115F-\\u11A2\\u11A8-\\u11F9\\u1200-\\u1248\\u124A-\\u124D\\u1250-\\u1256\\u1258\\u125A-\\u125D\\u1260-\\u1288\\u128A-\\u128D\\u1290-\\u12B0\\u12B2-\\u12B5\\u12B8-\\u12BE\\u12C0\\u12C2-\\u12C5\\u12C8-\\u12D6\\u12D8-\\u1310\\u1312-\\u1315\\u1318-\\u135A\\u1380-\\u138F\\u13A0-\\u13F4\\u1401-\\u166C\\u166F-\\u1676\\u1681-\\u169A\\u16A0-\\u16EA\\u1700-\\u170C\\u170E-\\u1711\\u1720-\\u1731\\u1740-\\u1751\\u1760-\\u176C\\u176E-\\u1770\\u1780-\\u17B3\\u17D7\\u17DC\\u1820-\\u1877\\u1880-\\u18A8\\u18AA\\u1900-\\u191C\\u1950-\\u196D\\u1970-\\u1974\\u1980-\\u19A9\\u19C1-\\u19C7\\u1A00-\\u1A16\\u1B05-\\u1B33\\u1B45-\\u1B4B\\u1B83-\\u1BA0\\u1BAE\\u1BAF\\u1C00-\\u1C23\\u1C4D-\\u1C4F\\u1C5A-\\u1C7D\\u1D00-\\u1DBF\\u1E00-\\u1F15\\u1F18-\\u1F1D\\u1F20-\\u1F45\\u1F48-\\u1F4D\\u1F50-\\u1F57\\u1F59\\u1F5B\\u1F5D\\u1F5F-\\u1F7D\\u1F80-\\u1FB4\\u1FB6-\\u1FBC\\u1FBE\\u1FC2-\\u1FC4\\u1FC6-\\u1FCC\\u1FD0-\\u1FD3\\u1FD6-\\u1FDB\\u1FE0-\\u1FEC\\u1FF2-\\u1FF4\\u1FF6-\\u1FFC\\u2071\\u207F\\u2090-\\u2094\\u2102\\u2107\\u210A-\\u2113\\u2115\\u2119-\\u211D\\u2124\\u2126\\u2128\\u212A-\\u212D\\u212F-\\u2139\\u213C-\\u213F\\u2145-\\u2149\\u214E\\u2183\\u2184\\u2C00-\\u2C2E\\u2C30-\\u2C5E\\u2C60-\\u2C6F\\u2C71-\\u2C7D\\u2C80-\\u2CE4\\u2D00-\\u2D25\\u2D30-\\u2D65\\u2D6F\\u2D80-\\u2D96\\u2DA0-\\u2DA6\\u2DA8-\\u2DAE\\u2DB0-\\u2DB6\\u2DB8-\\u2DBE\\u2DC0-\\u2DC6\\u2DC8-\\u2DCE\\u2DD0-\\u2DD6\\u2DD8-\\u2DDE\\u2E2F\\u3005\\u3006\\u3031-\\u3035\\u303B\\u303C\\u3041-\\u3096\\u309D-\\u309F\\u30A1-\\u30FA\\u30FC-\\u30FF\\u3105-\\u312D\\u3131-\\u318E\\u31A0-\\u31B7\\u31F0-\\u31FF\\u3400\\u4DB5\\u4E00\\u9FC3\\uA000-\\uA48C\\uA500-\\uA60C\\uA610-\\uA61F\\uA62A\\uA62B\\uA640-\\uA65F\\uA662-\\uA66E\\uA67F-\\uA697\\uA717-\\uA71F\\uA722-\\uA788\\uA78B\\uA78C\\uA7FB-\\uA801\\uA803-\\uA805\\uA807-\\uA80A\\uA80C-\\uA822\\uA840-\\uA873\\uA882-\\uA8B3\\uA90A-\\uA925\\uA930-\\uA946\\uAA00-\\uAA28\\uAA40-\\uAA42\\uAA44-\\uAA4B\\uAC00\\uD7A3\\uF900-\\uFA2D\\uFA30-\\uFA6A\\uFA70-\\uFAD9\\uFB00-\\uFB06\\uFB13-\\uFB17\\uFB1D\\uFB1F-\\uFB28\\uFB2A-\\uFB36\\uFB38-\\uFB3C\\uFB3E\\uFB40\\uFB41\\uFB43\\uFB44\\uFB46-\\uFBB1\\uFBD3-\\uFD3D\\uFD50-\\uFD8F\\uFD92-\\uFDC7\\uFDF0-\\uFDFB\\uFE70-\\uFE74\\uFE76-\\uFEFC\\uFF21-\\uFF3A\\uFF41-\\uFF5A\\uFF66-\\uFFBE\\uFFC2-\\uFFC7\\uFFCA-\\uFFCF\\uFFD2-\\uFFD7\\uFFDA-\\uFFDC]"),
-	non_spacing_mark: new RegExp("[\\u0300-\\u036F\\u0483-\\u0487\\u0591-\\u05BD\\u05BF\\u05C1\\u05C2\\u05C4\\u05C5\\u05C7\\u0610-\\u061A\\u064B-\\u065E\\u0670\\u06D6-\\u06DC\\u06DF-\\u06E4\\u06E7\\u06E8\\u06EA-\\u06ED\\u0711\\u0730-\\u074A\\u07A6-\\u07B0\\u07EB-\\u07F3\\u0816-\\u0819\\u081B-\\u0823\\u0825-\\u0827\\u0829-\\u082D\\u0900-\\u0902\\u093C\\u0941-\\u0948\\u094D\\u0951-\\u0955\\u0962\\u0963\\u0981\\u09BC\\u09C1-\\u09C4\\u09CD\\u09E2\\u09E3\\u0A01\\u0A02\\u0A3C\\u0A41\\u0A42\\u0A47\\u0A48\\u0A4B-\\u0A4D\\u0A51\\u0A70\\u0A71\\u0A75\\u0A81\\u0A82\\u0ABC\\u0AC1-\\u0AC5\\u0AC7\\u0AC8\\u0ACD\\u0AE2\\u0AE3\\u0B01\\u0B3C\\u0B3F\\u0B41-\\u0B44\\u0B4D\\u0B56\\u0B62\\u0B63\\u0B82\\u0BC0\\u0BCD\\u0C3E-\\u0C40\\u0C46-\\u0C48\\u0C4A-\\u0C4D\\u0C55\\u0C56\\u0C62\\u0C63\\u0CBC\\u0CBF\\u0CC6\\u0CCC\\u0CCD\\u0CE2\\u0CE3\\u0D41-\\u0D44\\u0D4D\\u0D62\\u0D63\\u0DCA\\u0DD2-\\u0DD4\\u0DD6\\u0E31\\u0E34-\\u0E3A\\u0E47-\\u0E4E\\u0EB1\\u0EB4-\\u0EB9\\u0EBB\\u0EBC\\u0EC8-\\u0ECD\\u0F18\\u0F19\\u0F35\\u0F37\\u0F39\\u0F71-\\u0F7E\\u0F80-\\u0F84\\u0F86\\u0F87\\u0F90-\\u0F97\\u0F99-\\u0FBC\\u0FC6\\u102D-\\u1030\\u1032-\\u1037\\u1039\\u103A\\u103D\\u103E\\u1058\\u1059\\u105E-\\u1060\\u1071-\\u1074\\u1082\\u1085\\u1086\\u108D\\u109D\\u135F\\u1712-\\u1714\\u1732-\\u1734\\u1752\\u1753\\u1772\\u1773\\u17B7-\\u17BD\\u17C6\\u17C9-\\u17D3\\u17DD\\u180B-\\u180D\\u18A9\\u1920-\\u1922\\u1927\\u1928\\u1932\\u1939-\\u193B\\u1A17\\u1A18\\u1A56\\u1A58-\\u1A5E\\u1A60\\u1A62\\u1A65-\\u1A6C\\u1A73-\\u1A7C\\u1A7F\\u1B00-\\u1B03\\u1B34\\u1B36-\\u1B3A\\u1B3C\\u1B42\\u1B6B-\\u1B73\\u1B80\\u1B81\\u1BA2-\\u1BA5\\u1BA8\\u1BA9\\u1C2C-\\u1C33\\u1C36\\u1C37\\u1CD0-\\u1CD2\\u1CD4-\\u1CE0\\u1CE2-\\u1CE8\\u1CED\\u1DC0-\\u1DE6\\u1DFD-\\u1DFF\\u20D0-\\u20DC\\u20E1\\u20E5-\\u20F0\\u2CEF-\\u2CF1\\u2DE0-\\u2DFF\\u302A-\\u302F\\u3099\\u309A\\uA66F\\uA67C\\uA67D\\uA6F0\\uA6F1\\uA802\\uA806\\uA80B\\uA825\\uA826\\uA8C4\\uA8E0-\\uA8F1\\uA926-\\uA92D\\uA947-\\uA951\\uA980-\\uA982\\uA9B3\\uA9B6-\\uA9B9\\uA9BC\\uAA29-\\uAA2E\\uAA31\\uAA32\\uAA35\\uAA36\\uAA43\\uAA4C\\uAAB0\\uAAB2-\\uAAB4\\uAAB7\\uAAB8\\uAABE\\uAABF\\uAAC1\\uABE5\\uABE8\\uABED\\uFB1E\\uFE00-\\uFE0F\\uFE20-\\uFE26]"),
-	space_combining_mark: new RegExp("[\\u0903\\u093E-\\u0940\\u0949-\\u094C\\u094E\\u0982\\u0983\\u09BE-\\u09C0\\u09C7\\u09C8\\u09CB\\u09CC\\u09D7\\u0A03\\u0A3E-\\u0A40\\u0A83\\u0ABE-\\u0AC0\\u0AC9\\u0ACB\\u0ACC\\u0B02\\u0B03\\u0B3E\\u0B40\\u0B47\\u0B48\\u0B4B\\u0B4C\\u0B57\\u0BBE\\u0BBF\\u0BC1\\u0BC2\\u0BC6-\\u0BC8\\u0BCA-\\u0BCC\\u0BD7\\u0C01-\\u0C03\\u0C41-\\u0C44\\u0C82\\u0C83\\u0CBE\\u0CC0-\\u0CC4\\u0CC7\\u0CC8\\u0CCA\\u0CCB\\u0CD5\\u0CD6\\u0D02\\u0D03\\u0D3E-\\u0D40\\u0D46-\\u0D48\\u0D4A-\\u0D4C\\u0D57\\u0D82\\u0D83\\u0DCF-\\u0DD1\\u0DD8-\\u0DDF\\u0DF2\\u0DF3\\u0F3E\\u0F3F\\u0F7F\\u102B\\u102C\\u1031\\u1038\\u103B\\u103C\\u1056\\u1057\\u1062-\\u1064\\u1067-\\u106D\\u1083\\u1084\\u1087-\\u108C\\u108F\\u109A-\\u109C\\u17B6\\u17BE-\\u17C5\\u17C7\\u17C8\\u1923-\\u1926\\u1929-\\u192B\\u1930\\u1931\\u1933-\\u1938\\u19B0-\\u19C0\\u19C8\\u19C9\\u1A19-\\u1A1B\\u1A55\\u1A57\\u1A61\\u1A63\\u1A64\\u1A6D-\\u1A72\\u1B04\\u1B35\\u1B3B\\u1B3D-\\u1B41\\u1B43\\u1B44\\u1B82\\u1BA1\\u1BA6\\u1BA7\\u1BAA\\u1C24-\\u1C2B\\u1C34\\u1C35\\u1CE1\\u1CF2\\uA823\\uA824\\uA827\\uA880\\uA881\\uA8B4-\\uA8C3\\uA952\\uA953\\uA983\\uA9B4\\uA9B5\\uA9BA\\uA9BB\\uA9BD-\\uA9C0\\uAA2F\\uAA30\\uAA33\\uAA34\\uAA4D\\uAA7B\\uABE3\\uABE4\\uABE6\\uABE7\\uABE9\\uABEA\\uABEC]"),
-	connector_punctuation: new RegExp("[\\u005F\\u203F\\u2040\\u2054\\uFE33\\uFE34\\uFE4D-\\uFE4F\\uFF3F]")
-};
-
-function is_letter(ch) {
-	return UNICODE.letter.test(ch);
-};
-
-function is_digit(ch) {
-	ch = ch.charCodeAt(0);
-	return ch >= 48 && ch <= 57; //XXX: find out if "UnicodeDigit" means something else than 0..9
-};
-
-function is_alphanumeric_char(ch) {
-	return is_digit(ch) || is_letter(ch);
-};
-
-function is_unicode_combining_mark(ch) {
-	return UNICODE.non_spacing_mark.test(ch) || UNICODE.space_combining_mark.test(ch);
-};
-
-function is_unicode_connector_punctuation(ch) {
-	return UNICODE.connector_punctuation.test(ch);
-};
-
-function is_identifier_start(ch) {
-	return ch == "$" || ch == "_" || is_letter(ch);
-};
-
-function is_identifier_char(ch) {
-	return is_identifier_start(ch)
-		|| is_unicode_combining_mark(ch)
-		|| is_digit(ch)
-		|| is_unicode_connector_punctuation(ch)
-		|| ch == "\u200c" // zero-width non-joiner <ZWNJ>
-		|| ch == "\u200d" // zero-width joiner <ZWJ> (in my ECMA-262 PDF, this is also 200c)
-	;
-};
-
-function parse_js_number(num) {
-	if (RE_HEX_NUMBER.test(num)) {
-		return parseInt(num.substr(2), 16);
-	} else if (RE_OCT_NUMBER.test(num)) {
-		return parseInt(num.substr(1), 8);
-	} else if (RE_DEC_NUMBER.test(num)) {
-		return parseFloat(num);
-	}
-};
-
-function JS_Parse_Error(message, line, col, pos) {
-	this.message = message;
-	this.line = line;
-	this.col = col;
-	this.pos = pos;
-};
-
-JS_Parse_Error.prototype.toString = function() {
-	return this.message + " (line: " + this.line + ", col: " + this.col + ", pos: " + this.pos + ")";
-};
-
-function js_error(message, line, col, pos) {
-	throw new JS_Parse_Error(message, line, col, pos);
-};
-
-function is_token(token, type, val) {
-	return token.type == type && (val == null || token.value == val);
-};
-
-var EX_EOF = {};
-
-function tokenizer($TEXT) {
-
-	var S = {
-		text            : $TEXT.replace(/\r\n?|[\n\u2028\u2029]/g, "\n").replace(/^\uFEFF/, ''),
-		pos             : 0,
-		tokpos          : 0,
-		line            : 0,
-		tokline         : 0,
-		col             : 0,
-		tokcol          : 0,
-		newline_before  : false,
-		regex_allowed   : false,
-		comments_before : []
-	};
-
-	function peek() { return S.text.charAt(S.pos); };
-
-	function next(signal_eof) {
-		var ch = S.text.charAt(S.pos++);
-		if (signal_eof && !ch)
-			throw EX_EOF;
-		if (ch == "\n") {
-			S.newline_before = true;
-			++S.line;
-			S.col = 0;
-		} else {
-			++S.col;
-		}
-		return ch;
-	};
-
-	function eof() {
-		return !S.peek();
-	};
-
-	function find(what, signal_eof) {
-		var pos = S.text.indexOf(what, S.pos);
-		if (signal_eof && pos == -1) throw EX_EOF;
-		return pos;
-	};
-
-	function start_token() {
-		S.tokline = S.line;
-		S.tokcol = S.col;
-		S.tokpos = S.pos;
-	};
-
-	function token(type, value, is_comment) {
-		S.regex_allowed = ((type == "operator" && !HOP(UNARY_POSTFIX, value)) ||
-				   (type == "keyword" && HOP(KEYWORDS_BEFORE_EXPRESSION, value)) ||
-				   (type == "punc" && HOP(PUNC_BEFORE_EXPRESSION, value)));
-		var ret = {
-			type  : type,
-			value : value,
-			line  : S.tokline,
-			col   : S.tokcol,
-			pos   : S.tokpos,
-			nlb   : S.newline_before
-		};
-		if (!is_comment) {
-			ret.comments_before = S.comments_before;
-			S.comments_before = [];
-		}
-		S.newline_before = false;
-		return ret;
-	};
-
-	function skip_whitespace() {
-		while (HOP(WHITESPACE_CHARS, peek()))
-			next();
-	};
-
-	function read_while(pred) {
-		var ret = "", ch = peek(), i = 0;
-		while (ch && pred(ch, i++)) {
-			ret += next();
-			ch = peek();
-		}
-		return ret;
-	};
-
-	function parse_error(err) {
-		js_error(err, S.tokline, S.tokcol, S.tokpos);
-	};
-
-	function read_num(prefix) {
-		var has_e = false, after_e = false, has_x = false, has_dot = prefix == ".";
-		var num = read_while(function(ch, i){
-			if (ch == "x" || ch == "X") {
-				if (has_x) return false;
-				return has_x = true;
-			}
-			if (!has_x && (ch == "E" || ch == "e")) {
-				if (has_e) return false;
-				return has_e = after_e = true;
-			}
-			if (ch == "-") {
-				if (after_e || (i == 0 && !prefix)) return true;
-				return false;
-			}
-			if (ch == "+") return after_e;
-			after_e = false;
-			if (ch == ".") {
-				if (!has_dot && !has_x)
-					return has_dot = true;
-				return false;
-			}
-			return is_alphanumeric_char(ch);
-		});
-		if (prefix)
-			num = prefix + num;
-		var valid = parse_js_number(num);
-		if (!isNaN(valid)) {
-			return token("num", valid);
-		} else {
-			parse_error("Invalid syntax: " + num);
-		}
-	};
-
-	function read_escaped_char() {
-		var ch = next(true);
-		switch (ch) {
-			case "n" : return "\n";
-			case "r" : return "\r";
-			case "t" : return "\t";
-			case "b" : return "\b";
-			case "v" : return "\v";
-			case "f" : return "\f";
-			case "0" : return "\0";
-			case "x" : return String.fromCharCode(hex_bytes(2));
-			case "u" : return String.fromCharCode(hex_bytes(4));
-			case "\n": return "";
-			default  : return ch;
-		}
-	};
-
-	function hex_bytes(n) {
-		var num = 0;
-		for (; n > 0; --n) {
-			var digit = parseInt(next(true), 16);
-			if (isNaN(digit))
-				parse_error("Invalid hex-character pattern in string");
-			num = (num << 4) | digit;
-		}
-		return num;
-	};
-
-	function read_string() {
-		return with_eof_error("Unterminated string constant", function(){
-			var quote = next(), ret = "";
-			for (;;) {
-				var ch = next(true);
-				if (ch == "\\") {
-					// read OctalEscapeSequence (XXX: deprecated if "strict mode")
-					// https://github.com/mishoo/UglifyJS/issues/178
-					var octal_len = 0, first = null;
-					ch = read_while(function(ch){
-						if (ch >= "0" && ch <= "7") {
-							if (!first) {
-								first = ch;
-								return ++octal_len;
-							}
-							else if (first <= "3" && octal_len <= 2) return ++octal_len;
-							else if (first >= "4" && octal_len <= 1) return ++octal_len;
-						}
-						return false;
-					});
-					if (octal_len > 0) ch = String.fromCharCode(parseInt(ch, 8));
-					else ch = read_escaped_char();
-				}
-				else if (ch == quote) break;
-				ret += ch;
-			}
-			return token("string", ret);
-		});
-	};
-
-	function read_line_comment() {
-		next();
-		var i = find("\n"), ret;
-		if (i == -1) {
-			ret = S.text.substr(S.pos);
-			S.pos = S.text.length;
-		} else {
-			ret = S.text.substring(S.pos, i);
-			S.pos = i;
-		}
-		return token("comment1", ret, true);
-	};
-
-	function read_multiline_comment() {
-		next();
-		return with_eof_error("Unterminated multiline comment", function(){
-			var i = find("*/", true),
-				text = S.text.substring(S.pos, i),
-				tok = token("comment2", text, true);
-			S.pos = i + 2;
-			S.line += text.split("\n").length - 1;
-			S.newline_before = text.indexOf("\n") >= 0;
-			return tok;
-		});
-	};
-
-	function read_name() {
-		var backslash = false, name = "", ch;
-		while ((ch = peek()) != null) {
-			if (!backslash) {
-				if (ch == "\\") backslash = true, next();
-				else if (is_identifier_char(ch)) name += next();
-				else break;
-			}
-			else {
-				if (ch != "u") parse_error("Expecting UnicodeEscapeSequence -- uXXXX");
-				ch = read_escaped_char();
-				if (!is_identifier_char(ch)) parse_error("Unicode char: " + ch.charCodeAt(0) + " is not valid in identifier");
-				name += ch;
-				backslash = false;
-			}
-		}
-		return name;
-	};
-
-	function read_regexp() {
-		return with_eof_error("Unterminated regular expression", function(){
-			var prev_backslash = false, regexp = "", ch, in_class = false;
-			while ((ch = next(true))) if (prev_backslash) {
-				regexp += "\\" + ch;
-				prev_backslash = false;
-			} else if (ch == "[") {
-				in_class = true;
-				regexp += ch;
-			} else if (ch == "]" && in_class) {
-				in_class = false;
-				regexp += ch;
-			} else if (ch == "/" && !in_class) {
-				break;
-			} else if (ch == "\\") {
-				prev_backslash = true;
-			} else {
-				regexp += ch;
-			}
-			var mods = read_name();
-			return token("regexp", [ regexp, mods ]);
-		});
-	};
-
-	function read_operator(prefix) {
-		function grow(op) {
-			if (!peek()) return op;
-			var bigger = op + peek();
-			if (HOP(OPERATORS, bigger)) {
-				next();
-				return grow(bigger);
-			} else {
-				return op;
-			}
-		};
-		return token("operator", grow(prefix || next()));
-	};
-
-	function handle_slash() {
-		next();
-		var regex_allowed = S.regex_allowed;
-		switch (peek()) {
-			case "/":
-			S.comments_before.push(read_line_comment());
-			S.regex_allowed = regex_allowed;
-			return next_token();
-			case "*":
-			S.comments_before.push(read_multiline_comment());
-			S.regex_allowed = regex_allowed;
-			return next_token();
-		}
-		return S.regex_allowed ? read_regexp() : read_operator("/");
-	};
-
-	function handle_dot() {
-		next();
-		return is_digit(peek())
-			? read_num(".")
-			: token("punc", ".");
-	};
-
-	function read_word() {
-		var word = read_name();
-		return !HOP(KEYWORDS, word)
-			? token("name", word)
-			: HOP(OPERATORS, word)
-			? token("operator", word)
-			: HOP(KEYWORDS_ATOM, word)
-			? token("atom", word)
-			: token("keyword", word);
-	};
-
-	function with_eof_error(eof_error, cont) {
-		try {
-			return cont();
-		} catch(ex) {
-			if (ex === EX_EOF) parse_error(eof_error);
-			else throw ex;
-		}
-	};
-
-	function next_token(force_regexp) {
-		if (force_regexp)
-			return read_regexp();
-		skip_whitespace();
-		start_token();
-		var ch = peek();
-		if (!ch) return token("eof");
-		if (is_digit(ch)) return read_num();
-		if (ch == '"' || ch == "'") return read_string();
-		if (HOP(PUNC_CHARS, ch)) return token("punc", next());
-		if (ch == ".") return handle_dot();
-		if (ch == "/") return handle_slash();
-		if (HOP(OPERATOR_CHARS, ch)) return read_operator();
-		if (ch == "\\" || is_identifier_start(ch)) return read_word();
-		parse_error("Unexpected character '" + ch + "'");
-	};
-
-	next_token.context = function(nc) {
-		if (nc) S = nc;
-		return S;
-	};
-
-	return next_token;
-
-};
-
-/* -----[ Parser (constants) ]----- */
-
-var UNARY_PREFIX = array_to_hash([
-	"typeof",
-	"void",
-	"delete",
-	"--",
-	"++",
-	"!",
-	"~",
-	"-",
-	"+"
-]);
-
-var UNARY_POSTFIX = array_to_hash([ "--", "++" ]);
-
-var ASSIGNMENT = (function(a, ret, i){
-	while (i < a.length) {
-		ret[a[i]] = a[i].substr(0, a[i].length - 1);
-		i++;
-	}
-	return ret;
-})(
-	["+=", "-=", "/=", "*=", "%=", ">>=", "<<=", ">>>=", "|=", "^=", "&="],
-	{ "=": true },
-	0
-);
-
-var PRECEDENCE = (function(a, ret){
-	for (var i = 0, n = 1; i < a.length; ++i, ++n) {
-		var b = a[i];
-		for (var j = 0; j < b.length; ++j) {
-			ret[b[j]] = n;
-		}
-	}
-	return ret;
-})(
-	[
-		["||"],
-		["&&"],
-		["|"],
-		["^"],
-		["&"],
-		["==", "===", "!=", "!=="],
-		["<", ">", "<=", ">=", "in", "instanceof"],
-		[">>", "<<", ">>>"],
-		["+", "-"],
-		["*", "/", "%"]
-	],
-	{}
-);
-
-var STATEMENTS_WITH_LABELS = array_to_hash([ "for", "do", "while", "switch" ]);
-
-var ATOMIC_START_TOKEN = array_to_hash([ "atom", "num", "string", "regexp", "name" ]);
-
-/* -----[ Parser ]----- */
-
-function NodeWithToken(str, start, end) {
-	this.name = str;
-	this.start = start;
-	this.end = end;
-};
-
-NodeWithToken.prototype.toString = function() { return this.name; };
-
-function parse($TEXT, exigent_mode, embed_tokens) {
-
-	var S = {
-		input       : typeof $TEXT == "string" ? tokenizer($TEXT, true) : $TEXT,
-		token       : null,
-		prev        : null,
-		peeked      : null,
-		in_function : 0,
-		in_loop     : 0,
-		labels      : []
-	};
-
-	S.token = next();
-
-	function is(type, value) {
-		return is_token(S.token, type, value);
-	};
-
-	function peek() { return S.peeked || (S.peeked = S.input()); };
-
-	function next() {
-		S.prev = S.token;
-		if (S.peeked) {
-			S.token = S.peeked;
-			S.peeked = null;
-		} else {
-			S.token = S.input();
-		}
-		return S.token;
-	};
-
-	function prev() {
-		return S.prev;
-	};
-
-	function croak(msg, line, col, pos) {
-		var ctx = S.input.context();
-		js_error(msg,
-			 line != null ? line : ctx.tokline,
-			 col != null ? col : ctx.tokcol,
-			 pos != null ? pos : ctx.tokpos);
-	};
-
-	function token_error(token, msg) {
-		croak(msg, token.line, token.col);
-	};
-
-	function unexpected(token) {
-		if (token == null)
-			token = S.token;
-		token_error(token, "Unexpected token: " + token.type + " (" + token.value + ")");
-	};
-
-	function expect_token(type, val) {
-		if (is(type, val)) {
-			return next();
-		}
-		token_error(S.token, "Unexpected token " + S.token.type + ", expected " + type);
-	};
-
-	function expect(punc) { return expect_token("punc", punc); };
-
-	function can_insert_semicolon() {
-		return !exigent_mode && (
-			S.token.nlb || is("eof") || is("punc", "}")
-		);
-	};
-
-	function semicolon() {
-		if (is("punc", ";")) next();
-		else if (!can_insert_semicolon()) unexpected();
-	};
-
-	function as() {
-		return slice(arguments);
-	};
-
-	function parenthesised() {
-		expect("(");
-		var ex = expression();
-		expect(")");
-		return ex;
-	};
-
-	function add_tokens(str, start, end) {
-		return str instanceof NodeWithToken ? str : new NodeWithToken(str, start, end);
-	};
-
-	function maybe_embed_tokens(parser) {
-		if (embed_tokens) return function() {
-			var start = S.token;
-			var ast = parser.apply(this, arguments);
-			ast[0] = add_tokens(ast[0], start, prev());
-			return ast;
-		};
-		else return parser;
-	};
-
-	var statement = maybe_embed_tokens(function() {
-		if (is("operator", "/")) {
-			S.peeked = null;
-			S.token = S.input(true); // force regexp
-		}
-		switch (S.token.type) {
-			case "num":
-			case "string":
-			case "regexp":
-			case "operator":
-			case "atom":
-			return simple_statement();
-
-			case "name":
-			return is_token(peek(), "punc", ":")
-				? labeled_statement(prog1(S.token.value, next, next))
-				: simple_statement();
-
-			case "punc":
-			switch (S.token.value) {
-				case "{":
-				return as("block", block_());
-				case "[":
-				case "(":
-				return simple_statement();
-				case ";":
-				next();
-				return as("block");
-				default:
-				unexpected();
-			}
-
-			case "keyword":
-			switch (prog1(S.token.value, next)) {
-				case "break":
-				return break_cont("break");
-
-				case "continue":
-				return break_cont("continue");
-
-				case "debugger":
-				semicolon();
-				return as("debugger");
-
-				case "do":
-				return (function(body){
-					expect_token("keyword", "while");
-					return as("do", prog1(parenthesised, semicolon), body);
-				})(in_loop(statement));
-
-				case "for":
-				return for_();
-
-				case "function":
-				return function_(true);
-
-				case "if":
-				return if_();
-
-				case "return":
-				if (S.in_function == 0)
-					croak("'return' outside of function");
-				return as("return",
-					  is("punc", ";")
-					  ? (next(), null)
-					  : can_insert_semicolon()
-					  ? null
-					  : prog1(expression, semicolon));
-
-				case "switch":
-				return as("switch", parenthesised(), switch_block_());
-
-				case "throw":
-				return as("throw", prog1(expression, semicolon));
-
-				case "try":
-				return try_();
-
-				case "var":
-				return prog1(var_, semicolon);
-
-				case "const":
-				return prog1(const_, semicolon);
-
-				case "while":
-				return as("while", parenthesised(), in_loop(statement));
-
-				case "with":
-				return as("with", parenthesised(), statement());
-
-				default:
-				unexpected();
-			}
-		}
-	});
-
-	function labeled_statement(label) {
-		S.labels.push(label);
-		var start = S.token, stat = statement();
-		if (exigent_mode && !HOP(STATEMENTS_WITH_LABELS, stat[0]))
-			unexpected(start);
-		S.labels.pop();
-		return as("label", label, stat);
-	};
-
-	function simple_statement() {
-		return as("stat", prog1(expression, semicolon));
-	};
-
-	function break_cont(type) {
-		var name;
-		if (!can_insert_semicolon()) {
-			name = is("name") ? S.token.value : null;
-		}
-		if (name != null) {
-			next();
-			if (!member(name, S.labels))
-				croak("Label " + name + " without matching loop or statement");
-		}
-		else if (S.in_loop == 0)
-			croak(type + " not inside a loop or switch");
-		semicolon();
-		return as(type, name);
-	};
-
-	function for_() {
-		expect("(");
-		var init = null;
-		if (!is("punc", ";")) {
-			init = is("keyword", "var")
-				? (next(), var_(true))
-				: expression(true, true);
-			if (is("operator", "in"))
-				return for_in(init);
-		}
-		return regular_for(init);
-	};
-
-	function regular_for(init) {
-		expect(";");
-		var test = is("punc", ";") ? null : expression();
-		expect(";");
-		var step = is("punc", ")") ? null : expression();
-		expect(")");
-		return as("for", init, test, step, in_loop(statement));
-	};
-
-	function for_in(init) {
-		var lhs = init[0] == "var" ? as("name", init[1][0]) : init;
-		next();
-		var obj = expression();
-		expect(")");
-		return as("for-in", init, lhs, obj, in_loop(statement));
-	};
-
-	var function_ = maybe_embed_tokens(function(in_statement) {
-		var name = is("name") ? prog1(S.token.value, next) : null;
-		if (in_statement && !name)
-			unexpected();
-		expect("(");
-		return as(in_statement ? "defun" : "function",
-			  name,
-			  // arguments
-			  (function(first, a){
-				  while (!is("punc", ")")) {
-					  if (first) first = false; else expect(",");
-					  if (!is("name")) unexpected();
-					  a.push(S.token.value);
-					  next();
-				  }
-				  next();
-				  return a;
-			  })(true, []),
-			  // body
-			  (function(){
-				  ++S.in_function;
-				  var loop = S.in_loop;
-				  S.in_loop = 0;
-				  var a = block_();
-				  --S.in_function;
-				  S.in_loop = loop;
-				  return a;
-			  })());
-	});
-
-	function if_() {
-		var cond = parenthesised(), body = statement(), belse;
-		if (is("keyword", "else")) {
-			next();
-			belse = statement();
-		}
-		return as("if", cond, body, belse);
-	};
-
-	function block_() {
-		expect("{");
-		var a = [];
-		while (!is("punc", "}")) {
-			if (is("eof")) unexpected();
-			a.push(statement());
-		}
-		next();
-		return a;
-	};
-
-	var switch_block_ = curry(in_loop, function(){
-		expect("{");
-		var a = [], cur = null;
-		while (!is("punc", "}")) {
-			if (is("eof")) unexpected();
-			if (is("keyword", "case")) {
-				next();
-				cur = [];
-				a.push([ expression(), cur ]);
-				expect(":");
-			}
-			else if (is("keyword", "default")) {
-				next();
-				expect(":");
-				cur = [];
-				a.push([ null, cur ]);
-			}
-			else {
-				if (!cur) unexpected();
-				cur.push(statement());
-			}
-		}
-		next();
-		return a;
-	});
-
-	function try_() {
-		var body = block_(), bcatch, bfinally;
-		if (is("keyword", "catch")) {
-			next();
-			expect("(");
-			if (!is("name"))
-				croak("Name expected");
-			var name = S.token.value;
-			next();
-			expect(")");
-			bcatch = [ name, block_() ];
-		}
-		if (is("keyword", "finally")) {
-			next();
-			bfinally = block_();
-		}
-		if (!bcatch && !bfinally)
-			croak("Missing catch/finally blocks");
-		return as("try", body, bcatch, bfinally);
-	};
-
-	function vardefs(no_in) {
-		var a = [];
-		for (;;) {
-			if (!is("name"))
-				unexpected();
-			var name = S.token.value;
-			next();
-			if (is("operator", "=")) {
-				next();
-				a.push([ name, expression(false, no_in) ]);
-			} else {
-				a.push([ name ]);
-			}
-			if (!is("punc", ","))
-				break;
-			next();
-		}
-		return a;
-	};
-
-	function var_(no_in) {
-		return as("var", vardefs(no_in));
-	};
-
-	function const_() {
-		return as("const", vardefs());
-	};
-
-	function new_() {
-		var newexp = expr_atom(false), args;
-		if (is("punc", "(")) {
-			next();
-			args = expr_list(")");
-		} else {
-			args = [];
-		}
-		return subscripts(as("new", newexp, args), true);
-	};
-
-	var expr_atom = maybe_embed_tokens(function(allow_calls) {
-		if (is("operator", "new")) {
-			next();
-			return new_();
-		}
-		if (is("operator") && HOP(UNARY_PREFIX, S.token.value)) {
-			return make_unary("unary-prefix",
-					  prog1(S.token.value, next),
-					  expr_atom(allow_calls));
-		}
-		if (is("punc")) {
-			switch (S.token.value) {
-				case "(":
-				next();
-				return subscripts(prog1(expression, curry(expect, ")")), allow_calls);
-				case "[":
-				next();
-				return subscripts(array_(), allow_calls);
-				case "{":
-				next();
-				return subscripts(object_(), allow_calls);
-			}
-			unexpected();
-		}
-		if (is("keyword", "function")) {
-			next();
-			return subscripts(function_(false), allow_calls);
-		}
-		if (HOP(ATOMIC_START_TOKEN, S.token.type)) {
-			var atom = S.token.type == "regexp"
-				? as("regexp", S.token.value[0], S.token.value[1])
-				: as(S.token.type, S.token.value);
-			return subscripts(prog1(atom, next), allow_calls);
-		}
-		unexpected();
-	});
-
-	function expr_list(closing, allow_trailing_comma, allow_empty) {
-		var first = true, a = [];
-		while (!is("punc", closing)) {
-			if (first) first = false; else expect(",");
-			if (allow_trailing_comma && is("punc", closing)) break;
-			if (is("punc", ",") && allow_empty) {
-				a.push([ "atom", "undefined" ]);
-			} else {
-				a.push(expression(false));
-			}
-		}
-		next();
-		return a;
-	};
-
-	function array_() {
-		return as("array", expr_list("]", !exigent_mode, true));
-	};
-
-	function object_() {
-		var first = true, a = [];
-		while (!is("punc", "}")) {
-			if (first) first = false; else expect(",");
-			if (!exigent_mode && is("punc", "}"))
-				// allow trailing comma
-				break;
-			var type = S.token.type;
-			var name = as_property_name();
-			if (type == "name" && (name == "get" || name == "set") && !is("punc", ":")) {
-				a.push([ as_name(), function_(false), name ]);
-			} else {
-				expect(":");
-				a.push([ name, expression(false) ]);
-			}
-		}
-		next();
-		return as("object", a);
-	};
-
-	function as_property_name() {
-		switch (S.token.type) {
-			case "num":
-			case "string":
-			return prog1(S.token.value, next);
-		}
-		return as_name();
-	};
-
-	function as_name() {
-		switch (S.token.type) {
-			case "name":
-			case "operator":
-			case "keyword":
-			case "atom":
-			return prog1(S.token.value, next);
-			default:
-			unexpected();
-		}
-	};
-
-	function subscripts(expr, allow_calls) {
-		if (is("punc", ".")) {
-			next();
-			return subscripts(as("dot", expr, as_name()), allow_calls);
-		}
-		if (is("punc", "[")) {
-			next();
-			return subscripts(as("sub", expr, prog1(expression, curry(expect, "]"))), allow_calls);
-		}
-		if (allow_calls && is("punc", "(")) {
-			next();
-			return subscripts(as("call", expr, expr_list(")")), true);
-		}
-		if (allow_calls && is("operator") && HOP(UNARY_POSTFIX, S.token.value)) {
-			return prog1(curry(make_unary, "unary-postfix", S.token.value, expr),
-					next);
-		}
-		return expr;
-	};
-
-	function make_unary(tag, op, expr) {
-		if ((op == "++" || op == "--") && !is_assignable(expr))
-			croak("Invalid use of " + op + " operator");
-		return as(tag, op, expr);
-	};
-
-	function expr_op(left, min_prec, no_in) {
-		var op = is("operator") ? S.token.value : null;
-		if (op && op == "in" && no_in) op = null;
-		var prec = op != null ? PRECEDENCE[op] : null;
-		if (prec != null && prec > min_prec) {
-			next();
-			var right = expr_op(expr_atom(true), prec, no_in);
-			return expr_op(as("binary", op, left, right), min_prec, no_in);
-		}
-		return left;
-	};
-
-	function expr_ops(no_in) {
-		return expr_op(expr_atom(true), 0, no_in);
-	};
-
-	function maybe_conditional(no_in) {
-		var expr = expr_ops(no_in);
-		if (is("operator", "?")) {
-			next();
-			var yes = expression(false);
-			expect(":");
-			return as("conditional", expr, yes, expression(false, no_in));
-		}
-		return expr;
-	};
-
-	function is_assignable(expr) {
-		if (!exigent_mode) return true;
-		switch (expr[0]) {
-			case "dot":
-			case "sub":
-			case "new":
-			case "call":
-			return true;
-			case "name":
-			return expr[1] != "this";
-		}
-	};
-
-	function maybe_assign(no_in) {
-		var left = maybe_conditional(no_in), val = S.token.value;
-		if (is("operator") && HOP(ASSIGNMENT, val)) {
-			if (is_assignable(left)) {
-				next();
-				return as("assign", ASSIGNMENT[val], left, maybe_assign(no_in));
-			}
-			croak("Invalid assignment");
-		}
-		return left;
-	};
-
-	var expression = maybe_embed_tokens(function(commas, no_in) {
-		if (arguments.length == 0)
-			commas = true;
-		var expr = maybe_assign(no_in);
-		if (commas && is("punc", ",")) {
-			next();
-			return as("seq", expr, expression(true, no_in));
-		}
-		return expr;
-	});
-
-	function in_loop(cont) {
-		try {
-			++S.in_loop;
-			return cont();
-		} finally {
-			--S.in_loop;
-		}
-	};
-
-	return as("toplevel", (function(a){
-		while (!is("eof"))
-			a.push(statement());
-		return a;
-	})([]));
-
-};
-
-/* -----[ Utilities ]----- */
-
-function curry(f) {
-	var args = slice(arguments, 1);
-	return function() { return f.apply(this, args.concat(slice(arguments))); };
-};
-
-function prog1(ret) {
-	if (ret instanceof Function)
-		ret = ret();
-	for (var i = 1, n = arguments.length; --n > 0; ++i)
-		arguments[i]();
-	return ret;
-};
-
-function array_to_hash(a) {
-	var ret = {};
-	for (var i = 0; i < a.length; ++i)
-		ret[a[i]] = true;
-	return ret;
-};
-
-function slice(a, start) {
-	return Array.prototype.slice.call(a, start || 0);
-};
-
-function characters(str) {
-	return str.split("");
-};
-
-function member(name, array) {
-	for (var i = array.length; --i >= 0;)
-		if (array[i] === name)
-			return true;
-	return false;
-};
-
-function HOP(obj, prop) {
-	return Object.prototype.hasOwnProperty.call(obj, prop);
-};
-
-/* -----[ helper for AST traversal ]----- */
-
-function ast_walker() {
-	function _vardefs(defs) {
-		return [ this[0], MAP(defs, function(def){
-			var a = [ def[0] ];
-			if (def.length > 1)
-				a[1] = walk(def[1]);
-			return a;
-		}) ];
-	};
-	function _block(statements) {
-		var out = [ this[0] ];
-		if (statements != null)
-			out.push(MAP(statements, walk));
-		return out;
-	};
-	var walkers = {
-		"string": function(str) {
-			return [ this[0], str ];
-		},
-		"num": function(num) {
-			return [ this[0], num ];
-		},
-		"name": function(name) {
-			return [ this[0], name ];
-		},
-		"toplevel": function(statements) {
-			return [ this[0], MAP(statements, walk) ];
-		},
-		"block": _block,
-		"splice": _block,
-		"var": _vardefs,
-		"const": _vardefs,
-		"try": function(t, c, f) {
-			return [
-				this[0],
-				MAP(t, walk),
-				c != null ? [ c[0], MAP(c[1], walk) ] : null,
-				f != null ? MAP(f, walk) : null
-			];
-		},
-		"throw": function(expr) {
-			return [ this[0], walk(expr) ];
-		},
-		"new": function(ctor, args) {
-			return [ this[0], walk(ctor), MAP(args, walk) ];
-		},
-		"switch": function(expr, body) {
-			return [ this[0], walk(expr), MAP(body, function(branch){
-				return [ branch[0] ? walk(branch[0]) : null,
-					 MAP(branch[1], walk) ];
-			}) ];
-		},
-		"break": function(label) {
-			return [ this[0], label ];
-		},
-		"continue": function(label) {
-			return [ this[0], label ];
-		},
-		"conditional": function(cond, t, e) {
-			return [ this[0], walk(cond), walk(t), walk(e) ];
-		},
-		"assign": function(op, lvalue, rvalue) {
-			return [ this[0], op, walk(lvalue), walk(rvalue) ];
-		},
-		"dot": function(expr) {
-			return [ this[0], walk(expr) ].concat(slice(arguments, 1));
-		},
-		"call": function(expr, args) {
-			return [ this[0], walk(expr), MAP(args, walk) ];
-		},
-		"function": function(name, args, body) {
-			return [ this[0], name, args.slice(), MAP(body, walk) ];
-		},
-		"defun": function(name, args, body) {
-			return [ this[0], name, args.slice(), MAP(body, walk) ];
-		},
-		"if": function(conditional, t, e) {
-			return [ this[0], walk(conditional), walk(t), walk(e) ];
-		},
-		"for": function(init, cond, step, block) {
-			return [ this[0], walk(init), walk(cond), walk(step), walk(block) ];
-		},
-		"for-in": function(vvar, key, hash, block) {
-			return [ this[0], walk(vvar), walk(key), walk(hash), walk(block) ];
-		},
-		"while": function(cond, block) {
-			return [ this[0], walk(cond), walk(block) ];
-		},
-		"do": function(cond, block) {
-			return [ this[0], walk(cond), walk(block) ];
-		},
-		"return": function(expr) {
-			return [ this[0], walk(expr) ];
-		},
-		"binary": function(op, left, right) {
-			return [ this[0], op, walk(left), walk(right) ];
-		},
-		"unary-prefix": function(op, expr) {
-			return [ this[0], op, walk(expr) ];
-		},
-		"unary-postfix": function(op, expr) {
-			return [ this[0], op, walk(expr) ];
-		},
-		"sub": function(expr, subscript) {
-			return [ this[0], walk(expr), walk(subscript) ];
-		},
-		"object": function(props) {
-			return [ this[0], MAP(props, function(p){
-				return p.length == 2
-					? [ p[0], walk(p[1]) ]
-					: [ p[0], walk(p[1]), p[2] ]; // get/set-ter
-			}) ];
-		},
-		"regexp": function(rx, mods) {
-			return [ this[0], rx, mods ];
-		},
-		"array": function(elements) {
-			return [ this[0], MAP(elements, walk) ];
-		},
-		"stat": function(stat) {
-			return [ this[0], walk(stat) ];
-		},
-		"seq": function() {
-			return [ this[0] ].concat(MAP(slice(arguments), walk));
-		},
-		"label": function(name, block) {
-			return [ this[0], name, walk(block) ];
-		},
-		"with": function(expr, block) {
-			return [ this[0], walk(expr), walk(block) ];
-		},
-		"atom": function(name) {
-			return [ this[0], name ];
-		}
-	};
-
-	var user = {};
-	var stack = [];
-	function walk(ast) {
-		if (ast == null)
-			return null;
-		try {
-			stack.push(ast);
-			var type = ast[0];
-			var gen = user[type];
-			if (gen) {
-				var ret = gen.apply(ast, ast.slice(1));
-				if (ret != null)
-					return ret;
-			}
-			gen = walkers[type];
-			return gen.apply(ast, ast.slice(1));
-		} finally {
-			stack.pop();
-		}
-	};
-
-	function with_walkers(walkers, cont){
-		var save = {}, i;
-		for (i in walkers) if (HOP(walkers, i)) {
-			save[i] = user[i];
-			user[i] = walkers[i];
-		}
-		var ret = cont();
-		for (i in save) if (HOP(save, i)) {
-			if (!save[i]) delete user[i];
-			else user[i] = save[i];
-		}
-		return ret;
-	};
-
-	return {
-		walk: walk,
-		with_walkers: with_walkers,
-		parent: function() {
-			return stack[stack.length - 2]; // last one is current node
-		},
-		stack: function() {
-			return stack;
-		}
-	};
-};
-
-function empty(b) {
-	return !b || (b[0] == "block" && (!b[1] || b[1].length == 0));
-};
-
-/* -----[ re-generate code from the AST ]----- */
-
-var DOT_CALL_NO_PARENS = array_to_hash([
-	"name",
-	"array",
-	"object",
-	"string",
-	"dot",
-	"sub",
-	"call",
-	"regexp"
-]);
-
-function make_string(str, ascii_only) {
-	var dq = 0, sq = 0;
-	str = str.replace(/[\\\b\f\n\r\t\x22\x27\u2028\u2029]/g, function(s){
-		switch (s) {
-			case "\\": return "\\\\";
-			case "\b": return "\\b";
-			case "\f": return "\\f";
-			case "\n": return "\\n";
-			case "\r": return "\\r";
-			case "\t": return "\\t";
-			case "\u2028": return "\\u2028";
-			case "\u2029": return "\\u2029";
-			case '"': ++dq; return '"';
-			case "'": ++sq; return "'";
-		}
-		return s;
-	});
-	if (ascii_only) str = to_ascii(str);
-	if (dq > sq) return "'" + str.replace(/\x27/g, "\\'") + "'";
-	else return '"' + str.replace(/\x22/g, '\\"') + '"';
-};
-
-function to_ascii(str) {
-	return str.replace(/[\u0080-\uffff]/g, function(ch) {
-		var code = ch.charCodeAt(0).toString(16);
-		while (code.length < 4) code = "0" + code;
-		return "\\u" + code;
-	});
-};
-
-var SPLICE_NEEDS_BRACKETS = array_to_hash([ "if", "while", "do", "for", "for-in", "with" ]);
-
-function gen_code(ast, options) {
-	options = defaults(options, {
-		indent_start : 0,
-		indent_level : 4,
-		quote_keys   : false,
-		space_colon  : false,
-		beautify	 : false,
-		ascii_only   : false,
-		inline_script: false
-	});
-	var beautify = !!options.beautify;
-	var indentation = 0,
-		newline = beautify ? "\n" : "",
-		space = beautify ? " " : "";
-
-	function encode_string(str) {
-		var ret = make_string(str, options.ascii_only);
-		if (options.inline_script)
-			ret = ret.replace(/<\x2fscript([>/\t\n\f\r ])/gi, "<\\/script$1");
-		return ret;
-	};
-
-	function make_name(name) {
-		name = name.toString();
-		if (options.ascii_only)
-			name = to_ascii(name);
-		return name;
-	};
-
-	function indent(line) {
-		if (line == null)
-			line = "";
-		if (beautify)
-			line = repeat_string(" ", options.indent_start + indentation * options.indent_level) + line;
-		return line;
-	};
-
-	function with_indent(cont, incr) {
-		if (incr == null) incr = 1;
-		indentation += incr;
-		try { return cont.apply(null, slice(arguments, 1)); }
-		finally { indentation -= incr; }
-	};
-
-	function add_spaces(a) {
-		if (beautify)
-			return a.join(" ");
-		var b = [];
-		for (var i = 0; i < a.length; ++i) {
-			var next = a[i + 1];
-			b.push(a[i]);
-			if (next &&
-				((/[a-z0-9_\x24]$/i.test(a[i].toString()) && /^[a-z0-9_\x24]/i.test(next.toString())) ||
-				 (/[\+\-]$/.test(a[i].toString()) && /^[\+\-]/.test(next.toString())))) {
-				b.push(" ");
-			}
-		}
-		return b.join("");
-	};
-
-	function add_commas(a) {
-		return a.join("," + space);
-	};
-
-	function parenthesize(expr) {
-		var gen = make(expr);
-		for (var i = 1; i < arguments.length; ++i) {
-			var el = arguments[i];
-			if ((el instanceof Function && el(expr)) || expr[0] == el)
-				return "(" + gen + ")";
-		}
-		return gen;
-	};
-
-	function best_of(a) {
-		if (a.length == 1) {
-			return a[0];
-		}
-		if (a.length == 2) {
-			var b = a[1];
-			a = a[0];
-			return a.length <= b.length ? a : b;
-		}
-		return best_of([ a[0], best_of(a.slice(1)) ]);
-	};
-
-	function needs_parens(expr) {
-		if (expr[0] == "function" || expr[0] == "object") {
-			// dot/call on a literal function requires the
-			// function literal itself to be parenthesized
-			// only if it's the first "thing" in a
-			// statement.  This means that the parent is
-			// "stat", but it could also be a "seq" and
-			// we're the first in this "seq" and the
-			// parent is "stat", and so on.  Messy stuff,
-			// but it worths the trouble.
-			var a = slice($stack), self = a.pop(), p = a.pop();
-			while (p) {
-				if (p[0] == "stat") return true;
-				if (((p[0] == "seq" || p[0] == "call" || p[0] == "dot" || p[0] == "sub" || p[0] == "conditional") && p[1] === self) ||
-					((p[0] == "binary" || p[0] == "assign" || p[0] == "unary-postfix") && p[2] === self)) {
-					self = p;
-					p = a.pop();
-				} else {
-					return false;
-				}
-			}
-		}
-		return !HOP(DOT_CALL_NO_PARENS, expr[0]);
-	};
-
-	function make_num(num) {
-		var str = num.toString(10), a = [ str.replace(/^0\./, ".") ], m;
-		if (Math.floor(num) === num) {
-			a.push("0x" + num.toString(16).toLowerCase(), // probably pointless
-				   "0" + num.toString(8)); // same.
-			if ((m = /^(.*?)(0+)$/.exec(num))) {
-				a.push(m[1] + "e" + m[2].length);
-			}
-		} else if ((m = /^0?\.(0+)(.*)$/.exec(num))) {
-			a.push(m[2] + "e-" + (m[1].length + m[2].length),
-				   str.substr(str.indexOf(".")));
-		}
-		return best_of(a);
-	};
-
-	var generators = {
-		"string": encode_string,
-		"num": make_num,
-		"name": make_name,
-		"toplevel": function(statements) {
-			return make_block_statements(statements)
-				.join(newline);
-		},
-		"splice": function(statements) {
-			var parent = $stack[$stack.length - 2][0];
-			if (HOP(SPLICE_NEEDS_BRACKETS, parent)) {
-				// we need block brackets in this case
-				return make_block.apply(this, arguments);
-			} else {
-				return MAP(make_block_statements(statements, true),
-					   function(line, i) {
-						   // the first line is already indented
-						   return i > 0 ? indent(line) : line;
-					   }).join(newline);
-			}
-		},
-		"block": make_block,
-		"var": function(defs) {
-			return "var " + add_commas(MAP(defs, make_1vardef)) + ";";
-		},
-		"const": function(defs) {
-			return "const " + add_commas(MAP(defs, make_1vardef)) + ";";
-		},
-		"try": function(tr, ca, fi) {
-			var out = [ "try", make_block(tr) ];
-			if (ca) out.push("catch", "(" + ca[0] + ")", make_block(ca[1]));
-			if (fi) out.push("finally", make_block(fi));
-			return add_spaces(out);
-		},
-		"throw": function(expr) {
-			return add_spaces([ "throw", make(expr) ]) + ";";
-		},
-		"new": function(ctor, args) {
-			args = args.length > 0 ? "(" + add_commas(MAP(args, make)) + ")" : "";
-			return add_spaces([ "new", parenthesize(ctor, "seq", "binary", "conditional", "assign", function(expr){
-				var w = ast_walker(), has_call = {};
-				try {
-					w.with_walkers({
-						"call": function() { throw has_call },
-						"function": function() { return this }
-					}, function(){
-						w.walk(expr);
-					});
-				} catch(ex) {
-					if (ex === has_call)
-						return true;
-					throw ex;
-				}
-			}) + args ]);
-		},
-		"switch": function(expr, body) {
-			return add_spaces([ "switch", "(" + make(expr) + ")", make_switch_block(body) ]);
-		},
-		"break": function(label) {
-			var out = "break";
-			if (label != null)
-				out += " " + make_name(label);
-			return out + ";";
-		},
-		"continue": function(label) {
-			var out = "continue";
-			if (label != null)
-				out += " " + make_name(label);
-			return out + ";";
-		},
-		"conditional": function(co, th, el) {
-			return add_spaces([ parenthesize(co, "assign", "seq", "conditional"), "?",
-						parenthesize(th, "seq"), ":",
-						parenthesize(el, "seq") ]);
-		},
-		"assign": function(op, lvalue, rvalue) {
-			if (op && op !== true) op += "=";
-			else op = "=";
-			return add_spaces([ make(lvalue), op, parenthesize(rvalue, "seq") ]);
-		},
-		"dot": function(expr) {
-			var out = make(expr), i = 1;
-			if (expr[0] == "num") {
-				if (!/\./.test(expr[1]))
-					out += ".";
-			} else if (needs_parens(expr))
-				out = "(" + out + ")";
-			while (i < arguments.length)
-				out += "." + make_name(arguments[i++]);
-			return out;
-		},
-		"call": function(func, args) {
-			var f = make(func);
-			if (needs_parens(func))
-				f = "(" + f + ")";
-			return f + "(" + add_commas(MAP(args, function(expr){
-				return parenthesize(expr, "seq");
-			})) + ")";
-		},
-		"function": make_function,
-		"defun": make_function,
-		"if": function(co, th, el) {
-			var out = [ "if", "(" + make(co) + ")", el ? make_then(th) : make(th) ];
-			if (el) {
-				out.push("else", make(el));
-			}
-			return add_spaces(out);
-		},
-		"for": function(init, cond, step, block) {
-			var out = [ "for" ];
-			init = (init != null ? make(init) : "").replace(/;*\s*$/, ";" + space);
-			cond = (cond != null ? make(cond) : "").replace(/;*\s*$/, ";" + space);
-			step = (step != null ? make(step) : "").replace(/;*\s*$/, "");
-			var args = init + cond + step;
-			if (args == "; ; ") args = ";;";
-			out.push("(" + args + ")", make(block));
-			return add_spaces(out);
-		},
-		"for-in": function(vvar, key, hash, block) {
-			return add_spaces([ "for", "(" +
-						(vvar ? make(vvar).replace(/;+$/, "") : make(key)),
-						"in",
-						make(hash) + ")", make(block) ]);
-		},
-		"while": function(condition, block) {
-			return add_spaces([ "while", "(" + make(condition) + ")", make(block) ]);
-		},
-		"do": function(condition, block) {
-			return add_spaces([ "do", make(block), "while", "(" + make(condition) + ")" ]) + ";";
-		},
-		"return": function(expr) {
-			var out = [ "return" ];
-			if (expr != null) out.push(make(expr));
-			return add_spaces(out) + ";";
-		},
-		"binary": function(operator, lvalue, rvalue) {
-			var left = make(lvalue), right = make(rvalue);
-			// XXX: I'm pretty sure other cases will bite here.
-			//	  we need to be smarter.
-			//	  adding parens all the time is the safest bet.
-			if (member(lvalue[0], [ "assign", "conditional", "seq" ]) ||
-				lvalue[0] == "binary" && PRECEDENCE[operator] > PRECEDENCE[lvalue[1]]) {
-				left = "(" + left + ")";
-			}
-			if (member(rvalue[0], [ "assign", "conditional", "seq" ]) ||
-				rvalue[0] == "binary" && PRECEDENCE[operator] >= PRECEDENCE[rvalue[1]] &&
-				!(rvalue[1] == operator && member(operator, [ "&&", "||", "*" ]))) {
-				right = "(" + right + ")";
-			}
-			else if (!beautify && options.inline_script && (operator == "<" || operator == "<<")
-				 && rvalue[0] == "regexp" && /^script/i.test(rvalue[1])) {
-				right = " " + right;
-			}
-			return add_spaces([ left, operator, right ]);
-		},
-		"unary-prefix": function(operator, expr) {
-			var val = make(expr);
-			if (!(expr[0] == "num" || (expr[0] == "unary-prefix" && !HOP(OPERATORS, operator + expr[1])) || !needs_parens(expr)))
-				val = "(" + val + ")";
-			return operator + (is_alphanumeric_char(operator.charAt(0)) ? " " : "") + val;
-		},
-		"unary-postfix": function(operator, expr) {
-			var val = make(expr);
-			if (!(expr[0] == "num" || (expr[0] == "unary-postfix" && !HOP(OPERATORS, operator + expr[1])) || !needs_parens(expr)))
-				val = "(" + val + ")";
-			return val + operator;
-		},
-		"sub": function(expr, subscript) {
-			var hash = make(expr);
-			if (needs_parens(expr))
-				hash = "(" + hash + ")";
-			return hash + "[" + make(subscript) + "]";
-		},
-		"object": function(props) {
-			if (props.length == 0)
-				return "{}";
-			return "{" + newline + with_indent(function(){
-				return MAP(props, function(p){
-					if (p.length == 3) {
-						// getter/setter.  The name is in p[0], the arg.list in p[1][2], the
-						// body in p[1][3] and type ("get" / "set") in p[2].
-						return indent(make_function(p[0], p[1][2], p[1][3], p[2]));
-					}
-					var key = p[0], val = parenthesize(p[1], "seq");
-					if (options.quote_keys) {
-						key = encode_string(key);
-					} else if ((typeof key == "number" || !beautify && +key + "" == key)
-						   && parseFloat(key) >= 0) {
-						key = make_num(+key);
-					} else if (!is_identifier(key)) {
-						key = encode_string(key);
-					}
-					return indent(add_spaces(beautify && options.space_colon
-								 ? [ key, ":", val ]
-								 : [ key + ":", val ]));
-				}).join("," + newline);
-			}) + newline + indent("}");
-		},
-		"regexp": function(rx, mods) {
-			return "/" + rx + "/" + mods;
-		},
-		"array": function(elements) {
-			if (elements.length == 0) return "[]";
-			return add_spaces([ "[", add_commas(MAP(elements, function(el){
-				if (!beautify && el[0] == "atom" && el[1] == "undefined") return "";
-				return parenthesize(el, "seq");
-			})), "]" ]);
-		},
-		"stat": function(stmt) {
-			return make(stmt).replace(/;*\s*$/, ";");
-		},
-		"seq": function() {
-			return add_commas(MAP(slice(arguments), make));
-		},
-		"label": function(name, block) {
-			return add_spaces([ make_name(name), ":", make(block) ]);
-		},
-		"with": function(expr, block) {
-			return add_spaces([ "with", "(" + make(expr) + ")", make(block) ]);
-		},
-		"atom": function(name) {
-			return make_name(name);
-		}
-	};
-
-	// The squeezer replaces "block"-s that contain only a single
-	// statement with the statement itself; technically, the AST
-	// is correct, but this can create problems when we output an
-	// IF having an ELSE clause where the THEN clause ends in an
-	// IF *without* an ELSE block (then the outer ELSE would refer
-	// to the inner IF).  This function checks for this case and
-	// adds the block brackets if needed.
-	function make_then(th) {
-		if (th[0] == "do") {
-			// https://github.com/mishoo/UglifyJS/issues/#issue/57
-			// IE croaks with "syntax error" on code like this:
-			//	 if (foo) do ... while(cond); else ...
-			// we need block brackets around do/while
-			return make([ "block", [ th ]]);
-		}
-		var b = th;
-		while (true) {
-			var type = b[0];
-			if (type == "if") {
-				if (!b[3])
-					// no else, we must add the block
-					return make([ "block", [ th ]]);
-				b = b[3];
-			}
-			else if (type == "while" || type == "do") b = b[2];
-			else if (type == "for" || type == "for-in") b = b[4];
-			else break;
-		}
-		return make(th);
-	};
-
-	function make_function(name, args, body, keyword) {
-		var out = keyword || "function";
-		if (name) {
-			out += " " + make_name(name);
-		}
-		out += "(" + add_commas(MAP(args, make_name)) + ")";
-		return add_spaces([ out, make_block(body) ]);
-	};
-
-	function make_block_statements(statements, noindent) {
-		for (var a = [], last = statements.length - 1, i = 0; i <= last; ++i) {
-			var stat = statements[i];
-			var code = make(stat);
-			if (code != ";") {
-				if (!beautify && i == last) {
-					if ((stat[0] == "while" && empty(stat[2])) ||
-						(member(stat[0], [ "for", "for-in"] ) && empty(stat[4])) ||
-						(stat[0] == "if" && empty(stat[2]) && !stat[3]) ||
-						(stat[0] == "if" && stat[3] && empty(stat[3]))) {
-						code = code.replace(/;*\s*$/, ";");
-					} else {
-						code = code.replace(/;+\s*$/, "");
-					}
-				}
-				a.push(code);
-			}
-		}
-		return noindent ? a : MAP(a, indent);
-	};
-
-	function make_switch_block(body) {
-		var n = body.length;
-		if (n == 0) return "{}";
-		return "{" + newline + MAP(body, function(branch, i){
-			var has_body = branch[1].length > 0, code = with_indent(function(){
-				return indent(branch[0]
-						  ? add_spaces([ "case", make(branch[0]) + ":" ])
-						  : "default:");
-			}, 0.5) + (has_body ? newline + with_indent(function(){
-				return make_block_statements(branch[1]).join(newline);
-			}) : "");
-			if (!beautify && has_body && i < n - 1)
-				code += ";";
-			return code;
-		}).join(newline) + newline + indent("}");
-	};
-
-	function make_block(statements) {
-		if (!statements) return ";";
-		if (statements.length == 0) return "{}";
-		return "{" + newline + with_indent(function(){
-			return make_block_statements(statements).join(newline);
-		}) + newline + indent("}");
-	};
-
-	function make_1vardef(def) {
-		var name = def[0], val = def[1];
-		if (val != null)
-			name = add_spaces([ make_name(name), "=", parenthesize(val, "seq") ]);
-		return name;
-	};
-
-	var $stack = [];
-
-	function make(node) {
-		var type = node[0];
-		var gen = generators[type];
-		if (!gen)
-			throw new Error("Can't find generator for \"" + type + "\"");
-		$stack.push(node);
-		var ret = gen.apply(type, node.slice(1));
-		$stack.pop();
-		return ret;
-	};
-
-	return make(ast);
-};
-
-/* -----[ Utilities ]----- */
-
-function repeat_string(str, i) {
-	return i < 1 ? "" : new Array(i + 1).join(str);
-};
-
-function defaults(args, defs) {
-	var ret = {};
-	if (args === true)
-		args = {};
-	for (var i in defs) if (HOP(defs, i)) {
-		ret[i] = (args && HOP(args, i)) ? args[i] : defs[i];
-	}
-	return ret;
-};
-
-function is_identifier(name) {
-	return /^[a-z_$][a-z0-9_$]*$/i.test(name)
-		&& name != "this"
-		&& !HOP(KEYWORDS_ATOM, name)
-		&& !HOP(RESERVED_WORDS, name)
-		&& !HOP(KEYWORDS, name);
-};
-
-function MAP(a, f, o) {
-	var ret = [];
-	for (var i = 0; i < a.length; ++i) {
-		ret.push(f.call(o, a[i], i));
-	}
-	return ret;
-};
-
-/* -----[ Exports ]----- */
-
-return {
-	parse: parse,
-	gen_code: gen_code,
-	tokenizer: tokenizer,
-	ast_walker: ast_walker
-};
-
-};
diff --git a/lib/parse-js.js b/lib/parse-js.js
deleted file mode 100644
index 749b715b..00000000
--- a/lib/parse-js.js
+++ /dev/null
@@ -1,1916 +0,0 @@
-/**
- * A JavaScript tokenizer / parser / generator, originally written in Lisp.
- * Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
- * http://marijn.haverbeke.nl/parse-js/
- *
- * Ported by to JavaScript by Mihai Bazon
- * Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
- * http://mihai.bazon.net/blog/
- *
- * Modifications and adaptions to browser (c) 2011, Juerg Lehni
- * http://lehni.org/
- *
- * Distributed under the BSD license.
- */
-
-var parse_js = new function() {
-
-/* -----[ Tokenizer (constants) ]----- */
-
-var KEYWORDS = array_to_hash([
-	"break",
-	"case",
-	"catch",
-	"const",
-	"continue",
-	"default",
-	"delete",
-	"do",
-	"else",
-	"finally",
-	"for",
-	"function",
-	"if",
-	"in",
-	"instanceof",
-	"new",
-	"return",
-	"switch",
-	"throw",
-	"try",
-	"typeof",
-	"var",
-	"void",
-	"while",
-	"with"
-]);
-
-var RESERVED_WORDS = array_to_hash([
-	"abstract",
-	"boolean",
-	"byte",
-	"char",
-	"class",
-	"debugger",
-	"double",
-	"enum",
-	"export",
-	"extends",
-	"final",
-	"float",
-	"goto",
-	"implements",
-	"import",
-	"int",
-	"interface",
-	"long",
-	"native",
-	"package",
-	"private",
-	"protected",
-	"public",
-	"short",
-	"static",
-	"super",
-	"synchronized",
-	"throws",
-	"transient",
-	"volatile"
-]);
-
-var KEYWORDS_BEFORE_EXPRESSION = array_to_hash([
-	"return",
-	"new",
-	"delete",
-	"throw",
-	"else",
-	"case"
-]);
-
-var KEYWORDS_ATOM = array_to_hash([
-	"false",
-	"null",
-	"true",
-	"undefined"
-]);
-
-var OPERATOR_CHARS = array_to_hash(characters("+-*&%=<>!?|~^"));
-
-var RE_HEX_NUMBER = /^0x[0-9a-f]+$/i;
-var RE_OCT_NUMBER = /^0[0-7]+$/;
-var RE_DEC_NUMBER = /^\d*\.?\d*(?:e[+-]?\d*(?:\d\.?|\.?\d)\d*)?$/i;
-
-var OPERATORS = array_to_hash([
-	"in",
-	"instanceof",
-	"typeof",
-	"new",
-	"void",
-	"delete",
-	"++",
-	"--",
-	"+",
-	"-",
-	"!",
-	"~",
-	"&",
-	"|",
-	"^",
-	"*",
-	"/",
-	"%",
-	">>",
-	"<<",
-	">>>",
-	"<",
-	">",
-	"<=",
-	">=",
-	"==",
-	"===",
-	"!=",
-	"!==",
-	"?",
-	"=",
-	"+=",
-	"-=",
-	"/=",
-	"*=",
-	"%=",
-	">>=",
-	"<<=",
-	">>>=",
-	"|=",
-	"^=",
-	"&=",
-	"&&",
-	"||"
-]);
-
-var WHITESPACE_CHARS = array_to_hash(characters(" \n\r\t"));
-
-var PUNC_BEFORE_EXPRESSION = array_to_hash(characters("[{}(,.;:"));
-
-var PUNC_CHARS = array_to_hash(characters("[]{}(),;:"));
-
-var REGEXP_MODIFIERS = array_to_hash(characters("gmsiy"));
-
-/* -----[ Tokenizer ]----- */
-
-function is_letter(ch) {
-	ch = ch.charCodeAt(0);
-	return (ch >= 65 && ch <= 90) ||
-		(ch >= 97 && ch <= 122);
-};
-
-function is_digit(ch) {
-	ch = ch.charCodeAt(0);
-	return ch >= 48 && ch <= 57;
-};
-
-function is_alphanumeric_char(ch) {
-	return is_digit(ch) || is_letter(ch);
-};
-
-function is_identifier_start(ch) {
-	return ch == "$" || ch == "_" || is_letter(ch);
-};
-
-function is_identifier_char(ch) {
-	return is_identifier_start(ch) || is_digit(ch);
-};
-
-function parse_js_number(num) {
-	if (RE_HEX_NUMBER.test(num)) {
-		return parseInt(num.substr(2), 16);
-	} else if (RE_OCT_NUMBER.test(num)) {
-		return parseInt(num.substr(1), 8);
-	} else if (RE_DEC_NUMBER.test(num)) {
-		return parseFloat(num);
-	}
-};
-
-function JS_Parse_Error(message, line, col, pos) {
-	this.message = message;
-	this.line = line;
-	this.col = col;
-	this.pos = pos;
-};
-
-JS_Parse_Error.prototype.toString = function() {
-	return this.message + " (line: " + this.line + ", col: " + this.col + ", pos: " + this.pos + ")";
-};
-
-function js_error(message, line, col, pos) {
-	throw new JS_Parse_Error(message, line, col, pos);
-};
-
-function is_token(token, type, val) {
-	return token.type == type && (val == null || token.value == val);
-};
-
-var EX_EOF = {};
-
-function tokenizer($TEXT) {
-
-	var S = {
-		text            : $TEXT.replace(/\r\n?|[\n\u2028\u2029]/g, "\n").replace(/^\uFEFF/, ''),
-		pos             : 0,
-		tokpos          : 0,
-		line            : 0,
-		tokline         : 0,
-		col             : 0,
-		tokcol          : 0,
-		newline_before  : false,
-		regex_allowed   : false,
-		comments_before : []
-	};
-
-	function peek() { return S.text.charAt(S.pos); };
-
-	function next(signal_eof) {
-		var ch = S.text.charAt(S.pos++);
-		if (signal_eof && !ch)
-			throw EX_EOF;
-		if (ch == "\n") {
-			S.newline_before = true;
-			++S.line;
-			S.col = 0;
-		} else {
-			++S.col;
-		}
-		return ch;
-	};
-
-	function eof() {
-		return !S.peek();
-	};
-
-	function find(what, signal_eof) {
-		var pos = S.text.indexOf(what, S.pos);
-		if (signal_eof && pos == -1) throw EX_EOF;
-		return pos;
-	};
-
-	function start_token() {
-		S.tokline = S.line;
-		S.tokcol = S.col;
-		S.tokpos = S.pos;
-	};
-
-	function token(type, value, is_comment) {
-		S.regex_allowed = ((type == "operator" && !HOP(UNARY_POSTFIX, value)) ||
-				   (type == "keyword" && HOP(KEYWORDS_BEFORE_EXPRESSION, value)) ||
-				   (type == "punc" && HOP(PUNC_BEFORE_EXPRESSION, value)));
-		var ret = {
-			type  : type,
-			value : value,
-			line  : S.tokline,
-			col   : S.tokcol,
-			pos   : S.tokpos,
-			nlb   : S.newline_before
-		};
-		if (!is_comment) {
-			ret.comments_before = S.comments_before;
-			S.comments_before = [];
-		}
-		S.newline_before = false;
-		return ret;
-	};
-
-	function skip_whitespace() {
-		while (HOP(WHITESPACE_CHARS, peek()))
-			next();
-	};
-
-	function read_while(pred) {
-		var ret = "", ch = peek(), i = 0;
-		while (ch && pred(ch, i++)) {
-			ret += next();
-			ch = peek();
-		}
-		return ret;
-	};
-
-	function parse_error(err) {
-		js_error(err, S.tokline, S.tokcol, S.tokpos);
-	};
-
-	function read_num(prefix) {
-		var has_e = false, after_e = false, has_x = false, has_dot = prefix == ".";
-		var num = read_while(function(ch, i){
-			if (ch == "x" || ch == "X") {
-				if (has_x) return false;
-				return has_x = true;
-			}
-			if (!has_x && (ch == "E" || ch == "e")) {
-				if (has_e) return false;
-				return has_e = after_e = true;
-			}
-			if (ch == "-") {
-				if (after_e || (i == 0 && !prefix)) return true;
-				return false;
-			}
-			if (ch == "+") return after_e;
-			after_e = false;
-			if (ch == ".") {
-				if (!has_dot && !has_x)
-					return has_dot = true;
-				return false;
-			}
-			return is_alphanumeric_char(ch);
-		});
-		if (prefix)
-			num = prefix + num;
-		var valid = parse_js_number(num);
-		if (!isNaN(valid)) {
-			return token("num", valid);
-		} else {
-			parse_error("Invalid syntax: " + num);
-		}
-	};
-
-	function read_escaped_char() {
-		var ch = next(true);
-		switch (ch) {
-			case "n" : return "\n";
-			case "r" : return "\r";
-			case "t" : return "\t";
-			case "b" : return "\b";
-			case "v" : return "\v";
-			case "f" : return "\f";
-			case "0" : return "\0";
-			case "x" : return String.fromCharCode(hex_bytes(2));
-			case "u" : return String.fromCharCode(hex_bytes(4));
-			case "\n": return "";
-			default  : return ch;
-		}
-	};
-
-	function hex_bytes(n) {
-		var num = 0;
-		for (; n > 0; --n) {
-			var digit = parseInt(next(true), 16);
-			if (isNaN(digit))
-				parse_error("Invalid hex-character pattern in string");
-			num = (num << 4) | digit;
-		}
-		return num;
-	};
-
-	function read_string() {
-		return with_eof_error("Unterminated string constant", function(){
-			var quote = next(), ret = "";
-			for (;;) {
-				var ch = next(true);
-				if (ch == "\\") ch = read_escaped_char();
-				else if (ch == quote) break;
-				ret += ch;
-			}
-			return token("string", ret);
-		});
-	};
-
-	function read_line_comment() {
-		next();
-		var i = find("\n"), ret;
-		if (i == -1) {
-			ret = S.text.substr(S.pos);
-			S.pos = S.text.length;
-		} else {
-			ret = S.text.substring(S.pos, i);
-			S.pos = i;
-		}
-		return token("comment1", ret, true);
-	};
-
-	function read_multiline_comment() {
-		next();
-		return with_eof_error("Unterminated multiline comment", function(){
-			var i = find("*/", true),
-				text = S.text.substring(S.pos, i),
-				tok = token("comment2", text, true);
-			S.pos = i + 2;
-			S.line += text.split("\n").length - 1;
-			S.newline_before = text.indexOf("\n") >= 0;
-			return tok;
-		});
-	};
-
-	function read_regexp() {
-		return with_eof_error("Unterminated regular expression", function(){
-			var prev_backslash = false, regexp = "", ch, in_class = false;
-			while ((ch = next(true))) if (prev_backslash) {
-				regexp += "\\" + ch;
-				prev_backslash = false;
-			} else if (ch == "[") {
-				in_class = true;
-				regexp += ch;
-			} else if (ch == "]" && in_class) {
-				in_class = false;
-				regexp += ch;
-			} else if (ch == "/" && !in_class) {
-				break;
-			} else if (ch == "\\") {
-				prev_backslash = true;
-			} else {
-				regexp += ch;
-			}
-			var mods = read_while(function(ch){
-				return HOP(REGEXP_MODIFIERS, ch);
-			});
-			return token("regexp", [ regexp, mods ]);
-		});
-	};
-
-	function read_operator(prefix) {
-		function grow(op) {
-			if (!peek()) return op;
-			var bigger = op + peek();
-			if (HOP(OPERATORS, bigger)) {
-				next();
-				return grow(bigger);
-			} else {
-				return op;
-			}
-		};
-		return token("operator", grow(prefix || next()));
-	};
-
-	function handle_slash() {
-		next();
-		var regex_allowed = S.regex_allowed;
-		switch (peek()) {
-			case "/":
-			S.comments_before.push(read_line_comment());
-			S.regex_allowed = regex_allowed;
-			return next_token();
-			case "*":
-			S.comments_before.push(read_multiline_comment());
-			S.regex_allowed = regex_allowed;
-			return next_token();
-		}
-		return S.regex_allowed ? read_regexp() : read_operator("/");
-	};
-
-	function handle_dot() {
-		next();
-		return is_digit(peek())
-			? read_num(".")
-			: token("punc", ".");
-	};
-
-	function read_word() {
-		var word = read_while(is_identifier_char);
-		return !HOP(KEYWORDS, word)
-			? token("name", word)
-			: HOP(OPERATORS, word)
-			? token("operator", word)
-			: HOP(KEYWORDS_ATOM, word)
-			? token("atom", word)
-			: token("keyword", word);
-	};
-
-	function with_eof_error(eof_error, cont) {
-		try {
-			return cont();
-		} catch(ex) {
-			if (ex === EX_EOF) parse_error(eof_error);
-			else throw ex;
-		}
-	};
-
-	function next_token(force_regexp) {
-		if (force_regexp)
-			return read_regexp();
-		skip_whitespace();
-		start_token();
-		var ch = peek();
-		if (!ch) return token("eof");
-		if (is_digit(ch)) return read_num();
-		if (ch == '"' || ch == "'") return read_string();
-		if (HOP(PUNC_CHARS, ch)) return token("punc", next());
-		if (ch == ".") return handle_dot();
-		if (ch == "/") return handle_slash();
-		if (HOP(OPERATOR_CHARS, ch)) return read_operator();
-		if (ch == "\\" || is_identifier_start(ch)) return read_word();
-		parse_error("Unexpected character '" + ch + "'");
-	};
-
-	next_token.context = function(nc) {
-		if (nc) S = nc;
-		return S;
-	};
-
-	return next_token;
-
-};
-
-/* -----[ Parser (constants) ]----- */
-
-var UNARY_PREFIX = array_to_hash([
-	"typeof",
-	"void",
-	"delete",
-	"--",
-	"++",
-	"!",
-	"~",
-	"-",
-	"+"
-]);
-
-var UNARY_POSTFIX = array_to_hash([ "--", "++" ]);
-
-var ASSIGNMENT = (function(a, ret, i){
-	while (i < a.length) {
-		ret[a[i]] = a[i].substr(0, a[i].length - 1);
-		i++;
-	}
-	return ret;
-})(
-	["+=", "-=", "/=", "*=", "%=", ">>=", "<<=", ">>>=", "|=", "^=", "&="],
-	{ "=": true },
-	0
-);
-
-var PRECEDENCE = (function(a, ret){
-	for (var i = 0, n = 1; i < a.length; ++i, ++n) {
-		var b = a[i];
-		for (var j = 0; j < b.length; ++j) {
-			ret[b[j]] = n;
-		}
-	}
-	return ret;
-})(
-	[
-		["||"],
-		["&&"],
-		["|"],
-		["^"],
-		["&"],
-		["==", "===", "!=", "!=="],
-		["<", ">", "<=", ">=", "in", "instanceof"],
-		[">>", "<<", ">>>"],
-		["+", "-"],
-		["*", "/", "%"]
-	],
-	{}
-);
-
-var STATEMENTS_WITH_LABELS = array_to_hash([ "for", "do", "while", "switch" ]);
-
-var ATOMIC_START_TOKEN = array_to_hash([ "atom", "num", "string", "regexp", "name" ]);
-
-/* -----[ Parser ]----- */
-
-function NodeWithToken(str, start, end) {
-	this.name = str;
-	this.start = start;
-	this.end = end;
-};
-
-NodeWithToken.prototype.toString = function() { return this.name; };
-
-function parse($TEXT, exigent_mode, embed_tokens) {
-
-	var S = {
-		input       : typeof $TEXT == "string" ? tokenizer($TEXT, true) : $TEXT,
-		token       : null,
-		prev        : null,
-		peeked      : null,
-		in_function : 0,
-		in_loop     : 0,
-		labels      : []
-	};
-
-	S.token = next();
-
-	function is(type, value) {
-		return is_token(S.token, type, value);
-	};
-
-	function peek() { return S.peeked || (S.peeked = S.input()); };
-
-	function next() {
-		S.prev = S.token;
-		if (S.peeked) {
-			S.token = S.peeked;
-			S.peeked = null;
-		} else {
-			S.token = S.input();
-		}
-		return S.token;
-	};
-
-	function prev() {
-		return S.prev;
-	};
-
-	function croak(msg, line, col, pos) {
-		var ctx = S.input.context();
-		js_error(msg,
-			 line != null ? line : ctx.tokline,
-			 col != null ? col : ctx.tokcol,
-			 pos != null ? pos : ctx.tokpos);
-	};
-
-	function token_error(token, msg) {
-		croak(msg, token.line, token.col);
-	};
-
-	function unexpected(token) {
-		if (token == null)
-			token = S.token;
-		token_error(token, "Unexpected token: " + token.type + " (" + token.value + ")");
-	};
-
-	function expect_token(type, val) {
-		if (is(type, val)) {
-			return next();
-		}
-		token_error(S.token, "Unexpected token " + S.token.type + ", expected " + type);
-	};
-
-	function expect(punc) { return expect_token("punc", punc); };
-
-	function can_insert_semicolon() {
-		return !exigent_mode && (
-			S.token.nlb || is("eof") || is("punc", "}")
-		);
-	};
-
-	function semicolon() {
-		if (is("punc", ";")) next();
-		else if (!can_insert_semicolon()) unexpected();
-	};
-
-	function as() {
-		return slice(arguments);
-	};
-
-	function parenthesised() {
-		expect("(");
-		var ex = expression();
-		expect(")");
-		return ex;
-	};
-
-	function add_tokens(str, start, end) {
-		return str instanceof NodeWithToken ? str : new NodeWithToken(str, start, end);
-	};
-
-	function maybe_embed_tokens(parser) {
-		if (embed_tokens) return function() {
-			var start = S.token;
-			var ast = parser.apply(this, arguments);
-			ast[0] = add_tokens(ast[0], start, prev());
-			return ast;
-		};
-		else return parser;
-	};
-
-	var statement = maybe_embed_tokens(function() {
-		if (is("operator", "/")) {
-			S.peeked = null;
-			S.token = S.input(true); // force regexp
-		}
-		switch (S.token.type) {
-			case "num":
-			case "string":
-			case "regexp":
-			case "operator":
-			case "atom":
-			return simple_statement();
-
-			case "name":
-			return is_token(peek(), "punc", ":")
-				? labeled_statement(prog1(S.token.value, next, next))
-				: simple_statement();
-
-			case "punc":
-			switch (S.token.value) {
-				case "{":
-				return as("block", block_());
-				case "[":
-				case "(":
-				return simple_statement();
-				case ";":
-				next();
-				return as("block");
-				default:
-				unexpected();
-			}
-
-			case "keyword":
-			switch (prog1(S.token.value, next)) {
-				case "break":
-				return break_cont("break");
-
-				case "continue":
-				return break_cont("continue");
-
-				case "debugger":
-				semicolon();
-				return as("debugger");
-
-				case "do":
-				return (function(body){
-					expect_token("keyword", "while");
-					return as("do", prog1(parenthesised, semicolon), body);
-				})(in_loop(statement));
-
-				case "for":
-				return for_();
-
-				case "function":
-				return function_(true);
-
-				case "if":
-				return if_();
-
-				case "return":
-				if (S.in_function == 0)
-					croak("'return' outside of function");
-				return as("return",
-					  is("punc", ";")
-					  ? (next(), null)
-					  : can_insert_semicolon()
-					  ? null
-					  : prog1(expression, semicolon));
-
-				case "switch":
-				return as("switch", parenthesised(), switch_block_());
-
-				case "throw":
-				return as("throw", prog1(expression, semicolon));
-
-				case "try":
-				return try_();
-
-				case "var":
-				return prog1(var_, semicolon);
-
-				case "const":
-				return prog1(const_, semicolon);
-
-				case "while":
-				return as("while", parenthesised(), in_loop(statement));
-
-				case "with":
-				return as("with", parenthesised(), statement());
-
-				default:
-				unexpected();
-			}
-		}
-	});
-
-	function labeled_statement(label) {
-		S.labels.push(label);
-		var start = S.token, stat = statement();
-		if (exigent_mode && !HOP(STATEMENTS_WITH_LABELS, stat[0]))
-			unexpected(start);
-		S.labels.pop();
-		return as("label", label, stat);
-	};
-
-	function simple_statement() {
-		return as("stat", prog1(expression, semicolon));
-	};
-
-	function break_cont(type) {
-		var name;
-		if (!can_insert_semicolon()) {
-			name = is("name") ? S.token.value : null;
-		}
-		if (name != null) {
-			next();
-			if (!member(name, S.labels))
-				croak("Label " + name + " without matching loop or statement");
-		}
-		else if (S.in_loop == 0)
-			croak(type + " not inside a loop or switch");
-		semicolon();
-		return as(type, name);
-	};
-
-	function for_() {
-		expect("(");
-		var init = null;
-		if (!is("punc", ";")) {
-			init = is("keyword", "var")
-				? (next(), var_(true))
-				: expression(true, true);
-			if (is("operator", "in"))
-				return for_in(init);
-		}
-		return regular_for(init);
-	};
-
-	function regular_for(init) {
-		expect(";");
-		var test = is("punc", ";") ? null : expression();
-		expect(";");
-		var step = is("punc", ")") ? null : expression();
-		expect(")");
-		return as("for", init, test, step, in_loop(statement));
-	};
-
-	function for_in(init) {
-		var lhs = init[0] == "var" ? as("name", init[1][0]) : init;
-		next();
-		var obj = expression();
-		expect(")");
-		return as("for-in", init, lhs, obj, in_loop(statement));
-	};
-
-	var function_ = maybe_embed_tokens(function(in_statement) {
-		var name = is("name") ? prog1(S.token.value, next) : null;
-		if (in_statement && !name)
-			unexpected();
-		expect("(");
-		return as(in_statement ? "defun" : "function",
-			  name,
-			  // arguments
-			  (function(first, a){
-				  while (!is("punc", ")")) {
-					  if (first) first = false; else expect(",");
-					  if (!is("name")) unexpected();
-					  a.push(S.token.value);
-					  next();
-				  }
-				  next();
-				  return a;
-			  })(true, []),
-			  // body
-			  (function(){
-				  ++S.in_function;
-				  var loop = S.in_loop;
-				  S.in_loop = 0;
-				  var a = block_();
-				  --S.in_function;
-				  S.in_loop = loop;
-				  return a;
-			  })());
-	});
-
-	function if_() {
-		var cond = parenthesised(), body = statement(), belse;
-		if (is("keyword", "else")) {
-			next();
-			belse = statement();
-		}
-		return as("if", cond, body, belse);
-	};
-
-	function block_() {
-		expect("{");
-		var a = [];
-		while (!is("punc", "}")) {
-			if (is("eof")) unexpected();
-			a.push(statement());
-		}
-		next();
-		return a;
-	};
-
-	var switch_block_ = curry(in_loop, function(){
-		expect("{");
-		var a = [], cur = null;
-		while (!is("punc", "}")) {
-			if (is("eof")) unexpected();
-			if (is("keyword", "case")) {
-				next();
-				cur = [];
-				a.push([ expression(), cur ]);
-				expect(":");
-			}
-			else if (is("keyword", "default")) {
-				next();
-				expect(":");
-				cur = [];
-				a.push([ null, cur ]);
-			}
-			else {
-				if (!cur) unexpected();
-				cur.push(statement());
-			}
-		}
-		next();
-		return a;
-	});
-
-	function try_() {
-		var body = block_(), bcatch, bfinally;
-		if (is("keyword", "catch")) {
-			next();
-			expect("(");
-			if (!is("name"))
-				croak("Name expected");
-			var name = S.token.value;
-			next();
-			expect(")");
-			bcatch = [ name, block_() ];
-		}
-		if (is("keyword", "finally")) {
-			next();
-			bfinally = block_();
-		}
-		if (!bcatch && !bfinally)
-			croak("Missing catch/finally blocks");
-		return as("try", body, bcatch, bfinally);
-	};
-
-	function vardefs(no_in) {
-		var a = [];
-		for (;;) {
-			if (!is("name"))
-				unexpected();
-			var name = S.token.value;
-			next();
-			if (is("operator", "=")) {
-				next();
-				a.push([ name, expression(false, no_in) ]);
-			} else {
-				a.push([ name ]);
-			}
-			if (!is("punc", ","))
-				break;
-			next();
-		}
-		return a;
-	};
-
-	function var_(no_in) {
-		return as("var", vardefs(no_in));
-	};
-
-	function const_() {
-		return as("const", vardefs());
-	};
-
-	function new_() {
-		var newexp = expr_atom(false), args;
-		if (is("punc", "(")) {
-			next();
-			args = expr_list(")");
-		} else {
-			args = [];
-		}
-		return subscripts(as("new", newexp, args), true);
-	};
-
-	var expr_atom = maybe_embed_tokens(function(allow_calls) {
-		if (is("operator", "new")) {
-			next();
-			return new_();
-		}
-		if (is("operator") && HOP(UNARY_PREFIX, S.token.value)) {
-			return make_unary("unary-prefix",
-					  prog1(S.token.value, next),
-					  expr_atom(allow_calls));
-		}
-		if (is("punc")) {
-			switch (S.token.value) {
-				case "(":
-				next();
-				return subscripts(prog1(expression, curry(expect, ")")), allow_calls);
-				case "[":
-				next();
-				return subscripts(array_(), allow_calls);
-				case "{":
-				next();
-				return subscripts(object_(), allow_calls);
-			}
-			unexpected();
-		}
-		if (is("keyword", "function")) {
-			next();
-			return subscripts(function_(false), allow_calls);
-		}
-		if (HOP(ATOMIC_START_TOKEN, S.token.type)) {
-			var atom = S.token.type == "regexp"
-				? as("regexp", S.token.value[0], S.token.value[1])
-				: as(S.token.type, S.token.value);
-			return subscripts(prog1(atom, next), allow_calls);
-		}
-		unexpected();
-	});
-
-	function expr_list(closing, allow_trailing_comma, allow_empty) {
-		var first = true, a = [];
-		while (!is("punc", closing)) {
-			if (first) first = false; else expect(",");
-			if (allow_trailing_comma && is("punc", closing)) break;
-			if (is("punc", ",") && allow_empty) {
-				a.push([ "atom", "undefined" ]);
-			} else {
-				a.push(expression(false));
-			}
-		}
-		next();
-		return a;
-	};
-
-	function array_() {
-		return as("array", expr_list("]", !exigent_mode, true));
-	};
-
-	function object_() {
-		var first = true, a = [];
-		while (!is("punc", "}")) {
-			if (first) first = false; else expect(",");
-			if (!exigent_mode && is("punc", "}"))
-				// allow trailing comma
-				break;
-			var type = S.token.type;
-			var name = as_property_name();
-			if (type == "name" && (name == "get" || name == "set") && !is("punc", ":")) {
-				a.push([ as_name(), function_(false), name ]);
-			} else {
-				expect(":");
-				a.push([ name, expression(false) ]);
-			}
-		}
-		next();
-		return as("object", a);
-	};
-
-	function as_property_name() {
-		switch (S.token.type) {
-			case "num":
-			case "string":
-			return prog1(S.token.value, next);
-		}
-		return as_name();
-	};
-
-	function as_name() {
-		switch (S.token.type) {
-			case "name":
-			case "operator":
-			case "keyword":
-			case "atom":
-			return prog1(S.token.value, next);
-			default:
-			unexpected();
-		}
-	};
-
-	function subscripts(expr, allow_calls) {
-		if (is("punc", ".")) {
-			next();
-			return subscripts(as("dot", expr, as_name()), allow_calls);
-		}
-		if (is("punc", "[")) {
-			next();
-			return subscripts(as("sub", expr, prog1(expression, curry(expect, "]"))), allow_calls);
-		}
-		if (allow_calls && is("punc", "(")) {
-			next();
-			return subscripts(as("call", expr, expr_list(")")), true);
-		}
-		if (allow_calls && is("operator") && HOP(UNARY_POSTFIX, S.token.value)) {
-			return prog1(curry(make_unary, "unary-postfix", S.token.value, expr),
-					next);
-		}
-		return expr;
-	};
-
-	function make_unary(tag, op, expr) {
-		if ((op == "++" || op == "--") && !is_assignable(expr))
-			croak("Invalid use of " + op + " operator");
-		return as(tag, op, expr);
-	};
-
-	function expr_op(left, min_prec, no_in) {
-		var op = is("operator") ? S.token.value : null;
-		if (op && op == "in" && no_in) op = null;
-		var prec = op != null ? PRECEDENCE[op] : null;
-		if (prec != null && prec > min_prec) {
-			next();
-			var right = expr_op(expr_atom(true), prec, no_in);
-			return expr_op(as("binary", op, left, right), min_prec, no_in);
-		}
-		return left;
-	};
-
-	function expr_ops(no_in) {
-		return expr_op(expr_atom(true), 0, no_in);
-	};
-
-	function maybe_conditional(no_in) {
-		var expr = expr_ops(no_in);
-		if (is("operator", "?")) {
-			next();
-			var yes = expression(false);
-			expect(":");
-			return as("conditional", expr, yes, expression(false, no_in));
-		}
-		return expr;
-	};
-
-	function is_assignable(expr) {
-		if (!exigent_mode) return true;
-		switch (expr[0]) {
-			case "dot":
-			case "sub":
-			case "new":
-			case "call":
-			return true;
-			case "name":
-			return expr[1] != "this";
-		}
-	};
-
-	function maybe_assign(no_in) {
-		var left = maybe_conditional(no_in), val = S.token.value;
-		if (is("operator") && HOP(ASSIGNMENT, val)) {
-			if (is_assignable(left)) {
-				next();
-				return as("assign", ASSIGNMENT[val], left, maybe_assign(no_in));
-			}
-			croak("Invalid assignment");
-		}
-		return left;
-	};
-
-	var expression = maybe_embed_tokens(function(commas, no_in) {
-		if (arguments.length == 0)
-			commas = true;
-		var expr = maybe_assign(no_in);
-		if (commas && is("punc", ",")) {
-			next();
-			return as("seq", expr, expression(true, no_in));
-		}
-		return expr;
-	});
-
-	function in_loop(cont) {
-		try {
-			++S.in_loop;
-			return cont();
-		} finally {
-			--S.in_loop;
-		}
-	};
-
-	return as("toplevel", (function(a){
-		while (!is("eof"))
-			a.push(statement());
-		return a;
-	})([]));
-
-};
-
-/* -----[ Utilities ]----- */
-
-function curry(f) {
-	var args = slice(arguments, 1);
-	return function() { return f.apply(this, args.concat(slice(arguments))); };
-};
-
-function prog1(ret) {
-	if (ret instanceof Function)
-		ret = ret();
-	for (var i = 1, n = arguments.length; --n > 0; ++i)
-		arguments[i]();
-	return ret;
-};
-
-function array_to_hash(a) {
-	var ret = {};
-	for (var i = 0; i < a.length; ++i)
-		ret[a[i]] = true;
-	return ret;
-};
-
-function slice(a, start) {
-	return Array.prototype.slice.call(a, start || 0);
-};
-
-function characters(str) {
-	return str.split("");
-};
-
-function member(name, array) {
-	for (var i = array.length; --i >= 0;)
-		if (array[i] === name)
-			return true;
-	return false;
-};
-
-function HOP(obj, prop) {
-	return Object.prototype.hasOwnProperty.call(obj, prop);
-};
-
-/* -----[ helper for AST traversal ]----- */
-
-function ast_walker() {
-	function _vardefs(defs) {
-		return [ this[0], MAP(defs, function(def){
-			var a = [ def[0] ];
-			if (def.length > 1)
-				a[1] = walk(def[1]);
-			return a;
-		}) ];
-	};
-	function _block(statements) {
-		var out = [ this[0] ];
-		if (statements != null)
-			out.push(MAP(statements, walk));
-		return out;
-	};
-	var walkers = {
-		"string": function(str) {
-			return [ this[0], str ];
-		},
-		"num": function(num) {
-			return [ this[0], num ];
-		},
-		"name": function(name) {
-			return [ this[0], name ];
-		},
-		"toplevel": function(statements) {
-			return [ this[0], MAP(statements, walk) ];
-		},
-		"block": _block,
-		"splice": _block,
-		"var": _vardefs,
-		"const": _vardefs,
-		"try": function(t, c, f) {
-			return [
-				this[0],
-				MAP(t, walk),
-				c != null ? [ c[0], MAP(c[1], walk) ] : null,
-				f != null ? MAP(f, walk) : null
-			];
-		},
-		"throw": function(expr) {
-			return [ this[0], walk(expr) ];
-		},
-		"new": function(ctor, args) {
-			return [ this[0], walk(ctor), MAP(args, walk) ];
-		},
-		"switch": function(expr, body) {
-			return [ this[0], walk(expr), MAP(body, function(branch){
-				return [ branch[0] ? walk(branch[0]) : null,
-					 MAP(branch[1], walk) ];
-			}) ];
-		},
-		"break": function(label) {
-			return [ this[0], label ];
-		},
-		"continue": function(label) {
-			return [ this[0], label ];
-		},
-		"conditional": function(cond, t, e) {
-			return [ this[0], walk(cond), walk(t), walk(e) ];
-		},
-		"assign": function(op, lvalue, rvalue) {
-			return [ this[0], op, walk(lvalue), walk(rvalue) ];
-		},
-		"dot": function(expr) {
-			return [ this[0], walk(expr) ].concat(slice(arguments, 1));
-		},
-		"call": function(expr, args) {
-			return [ this[0], walk(expr), MAP(args, walk) ];
-		},
-		"function": function(name, args, body) {
-			return [ this[0], name, args.slice(), MAP(body, walk) ];
-		},
-		"defun": function(name, args, body) {
-			return [ this[0], name, args.slice(), MAP(body, walk) ];
-		},
-		"if": function(conditional, t, e) {
-			return [ this[0], walk(conditional), walk(t), walk(e) ];
-		},
-		"for": function(init, cond, step, block) {
-			return [ this[0], walk(init), walk(cond), walk(step), walk(block) ];
-		},
-		"for-in": function(vvar, key, hash, block) {
-			return [ this[0], walk(vvar), walk(key), walk(hash), walk(block) ];
-		},
-		"while": function(cond, block) {
-			return [ this[0], walk(cond), walk(block) ];
-		},
-		"do": function(cond, block) {
-			return [ this[0], walk(cond), walk(block) ];
-		},
-		"return": function(expr) {
-			return [ this[0], walk(expr) ];
-		},
-		"binary": function(op, left, right) {
-			return [ this[0], op, walk(left), walk(right) ];
-		},
-		"unary-prefix": function(op, expr) {
-			return [ this[0], op, walk(expr) ];
-		},
-		"unary-postfix": function(op, expr) {
-			return [ this[0], op, walk(expr) ];
-		},
-		"sub": function(expr, subscript) {
-			return [ this[0], walk(expr), walk(subscript) ];
-		},
-		"object": function(props) {
-			return [ this[0], MAP(props, function(p){
-				return p.length == 2
-					? [ p[0], walk(p[1]) ]
-					: [ p[0], walk(p[1]), p[2] ]; // get/set-ter
-			}) ];
-		},
-		"regexp": function(rx, mods) {
-			return [ this[0], rx, mods ];
-		},
-		"array": function(elements) {
-			return [ this[0], MAP(elements, walk) ];
-		},
-		"stat": function(stat) {
-			return [ this[0], walk(stat) ];
-		},
-		"seq": function() {
-			return [ this[0] ].concat(MAP(slice(arguments), walk));
-		},
-		"label": function(name, block) {
-			return [ this[0], name, walk(block) ];
-		},
-		"with": function(expr, block) {
-			return [ this[0], walk(expr), walk(block) ];
-		},
-		"atom": function(name) {
-			return [ this[0], name ];
-		}
-	};
-
-	var user = {};
-	var stack = [];
-	function walk(ast) {
-		if (ast == null)
-			return null;
-		try {
-			stack.push(ast);
-			var type = ast[0];
-			var gen = user[type];
-			if (gen) {
-				var ret = gen.apply(ast, ast.slice(1));
-				if (ret != null)
-					return ret;
-			}
-			gen = walkers[type];
-			return gen.apply(ast, ast.slice(1));
-		} finally {
-			stack.pop();
-		}
-	};
-
-	function with_walkers(walkers, cont){
-		var save = {}, i;
-		for (i in walkers) if (HOP(walkers, i)) {
-			save[i] = user[i];
-			user[i] = walkers[i];
-		}
-		var ret = cont();
-		for (i in save) if (HOP(save, i)) {
-			if (!save[i]) delete user[i];
-			else user[i] = save[i];
-		}
-		return ret;
-	};
-
-	return {
-		walk: walk,
-		with_walkers: with_walkers,
-		parent: function() {
-			return stack[stack.length - 2]; // last one is current node
-		},
-		stack: function() {
-			return stack;
-		}
-	};
-};
-
-function empty(b) {
-	return !b || (b[0] == "block" && (!b[1] || b[1].length == 0));
-};
-
-/* -----[ re-generate code from the AST ]----- */
-
-var DOT_CALL_NO_PARENS = array_to_hash([
-	"name",
-	"array",
-	"object",
-	"string",
-	"dot",
-	"sub",
-	"call",
-	"regexp"
-]);
-
-function make_string(str) {
-	var dq = 0, sq = 0;
-	str = str.replace(/[\\\b\f\n\r\t\x22\x27]/g, function(s){
-		switch (s) {
-			case "\\": return "\\\\";
-			case "\b": return "\\b";
-			case "\f": return "\\f";
-			case "\n": return "\\n";
-			case "\r": return "\\r";
-			case "\t": return "\\t";
-			case '"': ++dq; return '"';
-			case "'": ++sq; return "'";
-		}
-		return s;
-	});
-	if (dq > sq) return "'" + str.replace(/\x27/g, "\\'") + "'";
-	else return '"' + str.replace(/\x22/g, '\\"') + '"';
-};
-
-var SPLICE_NEEDS_BRACKETS = array_to_hash([ "if", "while", "do", "for", "for-in", "with" ]);
-
-function gen_code(ast, options) {
-	options = defaults(options, {
-		indent_start : 0,
-		indent_level : 4,
-		quote_keys   : false,
-		space_colon  : false,
-		beautify	 : false
-	});
-	var beautify = !!options.beautify;
-	var indentation = 0,
-		newline = beautify ? "\n" : "",
-		space = beautify ? " " : "";
-
-	function make_name(name) {
-		return name.toString();
-	};
-
-	function indent(line) {
-		if (line == null)
-			line = "";
-		if (beautify)
-			line = repeat_string(" ", options.indent_start + indentation * options.indent_level) + line;
-		return line;
-	};
-
-	function with_indent(cont, incr) {
-		if (incr == null) incr = 1;
-		indentation += incr;
-		try { return cont.apply(null, slice(arguments, 1)); }
-		finally { indentation -= incr; }
-	};
-
-	function add_spaces(a) {
-		if (beautify)
-			return a.join(" ");
-		var b = [];
-		for (var i = 0; i < a.length; ++i) {
-			var next = a[i + 1];
-			b.push(a[i]);
-			if (next &&
-				((/[a-z0-9_\x24]$/i.test(a[i].toString()) && /^[a-z0-9_\x24]/i.test(next.toString())) ||
-				 (/[\+\-]$/.test(a[i].toString()) && /^[\+\-]/.test(next.toString())))) {
-				b.push(" ");
-			}
-		}
-		return b.join("");
-	};
-
-	function add_commas(a) {
-		return a.join("," + space);
-	};
-
-	function parenthesize(expr) {
-		var gen = make(expr);
-		for (var i = 1; i < arguments.length; ++i) {
-			var el = arguments[i];
-			if ((el instanceof Function && el(expr)) || expr[0] == el)
-				return "(" + gen + ")";
-		}
-		return gen;
-	};
-
-	function best_of(a) {
-		if (a.length == 1) {
-			return a[0];
-		}
-		if (a.length == 2) {
-			var b = a[1];
-			a = a[0];
-			return a.length <= b.length ? a : b;
-		}
-		return best_of([ a[0], best_of(a.slice(1)) ]);
-	};
-
-	function needs_parens(expr) {
-		if (expr[0] == "function" || expr[0] == "object") {
-			// dot/call on a literal function requires the
-			// function literal itself to be parenthesized
-			// only if it's the first "thing" in a
-			// statement.  This means that the parent is
-			// "stat", but it could also be a "seq" and
-			// we're the first in this "seq" and the
-			// parent is "stat", and so on.  Messy stuff,
-			// but it worths the trouble.
-			var a = slice($stack), self = a.pop(), p = a.pop();
-			while (p) {
-				if (p[0] == "stat") return true;
-				if (((p[0] == "seq" || p[0] == "call" || p[0] == "dot" || p[0] == "sub" || p[0] == "conditional") && p[1] === self) ||
-					((p[0] == "binary" || p[0] == "assign" || p[0] == "unary-postfix") && p[2] === self)) {
-					self = p;
-					p = a.pop();
-				} else {
-					return false;
-				}
-			}
-		}
-		return !HOP(DOT_CALL_NO_PARENS, expr[0]);
-	};
-
-	function make_num(num) {
-		var str = num.toString(10), a = [ str.replace(/^0\./, ".") ], m;
-		if (Math.floor(num) === num) {
-			a.push("0x" + num.toString(16).toLowerCase(), // probably pointless
-				   "0" + num.toString(8)); // same.
-			if ((m = /^(.*?)(0+)$/.exec(num))) {
-				a.push(m[1] + "e" + m[2].length);
-			}
-		} else if ((m = /^0?\.(0+)(.*)$/.exec(num))) {
-			a.push(m[2] + "e-" + (m[1].length + m[2].length),
-				   str.substr(str.indexOf(".")));
-		}
-		return best_of(a);
-	};
-
-	var generators = {
-		"string": make_string,
-		"num": make_num,
-		"name": make_name,
-		"toplevel": function(statements) {
-			return make_block_statements(statements)
-				.join(newline);
-		},
-		"splice": function(statements) {
-			var parent = $stack[$stack.length - 2][0];
-			if (HOP(SPLICE_NEEDS_BRACKETS, parent)) {
-				// we need block brackets in this case
-				return make_block.apply(this, arguments);
-			} else {
-				return MAP(make_block_statements(statements, true),
-					   function(line, i) {
-						   // the first line is already indented
-						   return i > 0 ? indent(line) : line;
-					   }).join(newline);
-			}
-		},
-		"block": make_block,
-		"var": function(defs) {
-			return "var " + add_commas(MAP(defs, make_1vardef)) + ";";
-		},
-		"const": function(defs) {
-			return "const " + add_commas(MAP(defs, make_1vardef)) + ";";
-		},
-		"try": function(tr, ca, fi) {
-			var out = [ "try", make_block(tr) ];
-			if (ca) out.push("catch", "(" + ca[0] + ")", make_block(ca[1]));
-			if (fi) out.push("finally", make_block(fi));
-			return add_spaces(out);
-		},
-		"throw": function(expr) {
-			return add_spaces([ "throw", make(expr) ]) + ";";
-		},
-		"new": function(ctor, args) {
-			args = args.length > 0 ? "(" + add_commas(MAP(args, make)) + ")" : "";
-			return add_spaces([ "new", parenthesize(ctor, "seq", "binary", "conditional", "assign", function(expr){
-				var w = ast_walker(), has_call = {};
-				try {
-					w.with_walkers({
-						"call": function() { throw has_call },
-						"function": function() { return this }
-					}, function(){
-						w.walk(expr);
-					});
-				} catch(ex) {
-					if (ex === has_call)
-						return true;
-					throw ex;
-				}
-			}) + args ]);
-		},
-		"switch": function(expr, body) {
-			return add_spaces([ "switch", "(" + make(expr) + ")", make_switch_block(body) ]);
-		},
-		"break": function(label) {
-			var out = "break";
-			if (label != null)
-				out += " " + make_name(label);
-			return out + ";";
-		},
-		"continue": function(label) {
-			var out = "continue";
-			if (label != null)
-				out += " " + make_name(label);
-			return out + ";";
-		},
-		"conditional": function(co, th, el) {
-			return add_spaces([ parenthesize(co, "assign", "seq", "conditional"), "?",
-						parenthesize(th, "seq"), ":",
-						parenthesize(el, "seq") ]);
-		},
-		"assign": function(op, lvalue, rvalue) {
-			if (op && op !== true) op += "=";
-			else op = "=";
-			return add_spaces([ make(lvalue), op, parenthesize(rvalue, "seq") ]);
-		},
-		"dot": function(expr) {
-			var out = make(expr), i = 1;
-			if (expr[0] == "num") {
-				if (!/\./.test(expr[1]))
-					out += ".";
-			} else if (needs_parens(expr))
-				out = "(" + out + ")";
-			while (i < arguments.length)
-				out += "." + make_name(arguments[i++]);
-			return out;
-		},
-		"call": function(func, args) {
-			var f = make(func);
-			if (needs_parens(func))
-				f = "(" + f + ")";
-			return f + "(" + add_commas(MAP(args, function(expr){
-				return parenthesize(expr, "seq");
-			})) + ")";
-		},
-		"function": make_function,
-		"defun": make_function,
-		"if": function(co, th, el) {
-			var out = [ "if", "(" + make(co) + ")", el ? make_then(th) : make(th) ];
-			if (el) {
-				out.push("else", make(el));
-			}
-			return add_spaces(out);
-		},
-		"for": function(init, cond, step, block) {
-			var out = [ "for" ];
-			init = (init != null ? make(init) : "").replace(/;*\s*$/, ";" + space);
-			cond = (cond != null ? make(cond) : "").replace(/;*\s*$/, ";" + space);
-			step = (step != null ? make(step) : "").replace(/;*\s*$/, "");
-			var args = init + cond + step;
-			if (args == "; ; ") args = ";;";
-			out.push("(" + args + ")", make(block));
-			return add_spaces(out);
-		},
-		"for-in": function(vvar, key, hash, block) {
-			return add_spaces([ "for", "(" +
-						(vvar ? make(vvar).replace(/;+$/, "") : make(key)),
-						"in",
-						make(hash) + ")", make(block) ]);
-		},
-		"while": function(condition, block) {
-			return add_spaces([ "while", "(" + make(condition) + ")", make(block) ]);
-		},
-		"do": function(condition, block) {
-			return add_spaces([ "do", make(block), "while", "(" + make(condition) + ")" ]) + ";";
-		},
-		"return": function(expr) {
-			var out = [ "return" ];
-			if (expr != null) out.push(make(expr));
-			return add_spaces(out) + ";";
-		},
-		"binary": function(operator, lvalue, rvalue) {
-			var left = make(lvalue), right = make(rvalue);
-			// XXX: I'm pretty sure other cases will bite here.
-			//	  we need to be smarter.
-			//	  adding parens all the time is the safest bet.
-			if (member(lvalue[0], [ "assign", "conditional", "seq" ]) ||
-				lvalue[0] == "binary" && PRECEDENCE[operator] > PRECEDENCE[lvalue[1]]) {
-				left = "(" + left + ")";
-			}
-			if (member(rvalue[0], [ "assign", "conditional", "seq" ]) ||
-				rvalue[0] == "binary" && PRECEDENCE[operator] >= PRECEDENCE[rvalue[1]] &&
-				!(rvalue[1] == operator && member(operator, [ "&&", "||", "*" ]))) {
-				right = "(" + right + ")";
-			}
-			return add_spaces([ left, operator, right ]);
-		},
-		"unary-prefix": function(operator, expr) {
-			var val = make(expr);
-			if (!(expr[0] == "num" || (expr[0] == "unary-prefix" && !HOP(OPERATORS, operator + expr[1])) || !needs_parens(expr)))
-				val = "(" + val + ")";
-			return operator + (is_alphanumeric_char(operator.charAt(0)) ? " " : "") + val;
-		},
-		"unary-postfix": function(operator, expr) {
-			var val = make(expr);
-			if (!(expr[0] == "num" || (expr[0] == "unary-postfix" && !HOP(OPERATORS, operator + expr[1])) || !needs_parens(expr)))
-				val = "(" + val + ")";
-			return val + operator;
-		},
-		"sub": function(expr, subscript) {
-			var hash = make(expr);
-			if (needs_parens(expr))
-				hash = "(" + hash + ")";
-			return hash + "[" + make(subscript) + "]";
-		},
-		"object": function(props) {
-			if (props.length == 0)
-				return "{}";
-			return "{" + newline + with_indent(function(){
-				return MAP(props, function(p){
-					if (p.length == 3) {
-						// getter/setter.  The name is in p[0], the arg.list in p[1][2], the
-						// body in p[1][3] and type ("get" / "set") in p[2].
-						return indent(make_function(p[0], p[1][2], p[1][3], p[2]));
-					}
-					var key = p[0], val = make(p[1]);
-					if (options.quote_keys) {
-						key = make_string(key);
-					} else if ((typeof key == "number" || !beautify && +key + "" == key)
-						   && parseFloat(key) >= 0) {
-						key = make_num(+key);
-					} else if (!is_identifier(key)) {
-						key = make_string(key);
-					}
-					return indent(add_spaces(beautify && options.space_colon
-								 ? [ key, ":", val ]
-								 : [ key + ":", val ]));
-				}).join("," + newline);
-			}) + newline + indent("}");
-		},
-		"regexp": function(rx, mods) {
-			return "/" + rx + "/" + mods;
-		},
-		"array": function(elements) {
-			if (elements.length == 0) return "[]";
-			return add_spaces([ "[", add_commas(MAP(elements, function(el){
-				if (!beautify && el[0] == "atom" && el[1] == "undefined") return "";
-				return parenthesize(el, "seq");
-			})), "]" ]);
-		},
-		"stat": function(stmt) {
-			return make(stmt).replace(/;*\s*$/, ";");
-		},
-		"seq": function() {
-			return add_commas(MAP(slice(arguments), make));
-		},
-		"label": function(name, block) {
-			return add_spaces([ make_name(name), ":", make(block) ]);
-		},
-		"with": function(expr, block) {
-			return add_spaces([ "with", "(" + make(expr) + ")", make(block) ]);
-		},
-		"atom": function(name) {
-			return make_name(name);
-		}
-	};
-
-	// The squeezer replaces "block"-s that contain only a single
-	// statement with the statement itself; technically, the AST
-	// is correct, but this can create problems when we output an
-	// IF having an ELSE clause where the THEN clause ends in an
-	// IF *without* an ELSE block (then the outer ELSE would refer
-	// to the inner IF).  This function checks for this case and
-	// adds the block brackets if needed.
-	function make_then(th) {
-		if (th[0] == "do") {
-			// https://github.com/mishoo/UglifyJS/issues/#issue/57
-			// IE croaks with "syntax error" on code like this:
-			//	 if (foo) do ... while(cond); else ...
-			// we need block brackets around do/while
-			return make([ "block", [ th ]]);
-		}
-		var b = th;
-		while (true) {
-			var type = b[0];
-			if (type == "if") {
-				if (!b[3])
-					// no else, we must add the block
-					return make([ "block", [ th ]]);
-				b = b[3];
-			}
-			else if (type == "while" || type == "do") b = b[2];
-			else if (type == "for" || type == "for-in") b = b[4];
-			else break;
-		}
-		return make(th);
-	};
-
-	function make_function(name, args, body, keyword) {
-		var out = keyword || "function";
-		if (name) {
-			out += " " + make_name(name);
-		}
-		out += "(" + add_commas(MAP(args, make_name)) + ")";
-		return add_spaces([ out, make_block(body) ]);
-	};
-
-	function make_block_statements(statements, noindent) {
-		for (var a = [], last = statements.length - 1, i = 0; i <= last; ++i) {
-			var stat = statements[i];
-			var code = make(stat);
-			if (code != ";") {
-				if (!beautify && i == last) {
-					if ((stat[0] == "while" && empty(stat[2])) ||
-						(member(stat[0], [ "for", "for-in"] ) && empty(stat[4])) ||
-						(stat[0] == "if" && empty(stat[2]) && !stat[3]) ||
-						(stat[0] == "if" && stat[3] && empty(stat[3]))) {
-						code = code.replace(/;*\s*$/, ";");
-					} else {
-						code = code.replace(/;+\s*$/, "");
-					}
-				}
-				a.push(code);
-			}
-		}
-		return noindent ? a : MAP(a, indent);
-	};
-
-	function make_switch_block(body) {
-		var n = body.length;
-		if (n == 0) return "{}";
-		return "{" + newline + MAP(body, function(branch, i){
-			var has_body = branch[1].length > 0, code = with_indent(function(){
-				return indent(branch[0]
-						  ? add_spaces([ "case", make(branch[0]) + ":" ])
-						  : "default:");
-			}, 0.5) + (has_body ? newline + with_indent(function(){
-				return make_block_statements(branch[1]).join(newline);
-			}) : "");
-			if (!beautify && has_body && i < n - 1)
-				code += ";";
-			return code;
-		}).join(newline) + newline + indent("}");
-	};
-
-	function make_block(statements) {
-		if (!statements) return ";";
-		if (statements.length == 0) return "{}";
-		return "{" + newline + with_indent(function(){
-			return make_block_statements(statements).join(newline);
-		}) + newline + indent("}");
-	};
-
-	function make_1vardef(def) {
-		var name = def[0], val = def[1];
-		if (val != null)
-			name = add_spaces([ make_name(name), "=", parenthesize(val, "seq") ]);
-		return name;
-	};
-
-	var $stack = [];
-
-	function make(node) {
-		var type = node[0];
-		var gen = generators[type];
-		if (!gen)
-			throw new Error("Can't find generator for \"" + type + "\"");
-		$stack.push(node);
-		var ret = gen.apply(type, node.slice(1));
-		$stack.pop();
-		return ret;
-	};
-
-	return make(ast);
-};
-
-/* -----[ Utilities ]----- */
-
-function repeat_string(str, i) {
-	return i < 1 ? "" : new Array(i + 1).join(str);
-};
-
-function defaults(args, defs) {
-	var ret = {};
-	if (args === true)
-		args = {};
-	for (var i in defs) if (HOP(defs, i)) {
-		ret[i] = (args && HOP(args, i)) ? args[i] : defs[i];
-	}
-	return ret;
-};
-
-function is_identifier(name) {
-	return /^[a-z_$][a-z0-9_$]*$/i.test(name)
-		&& name != "this"
-		&& !HOP(KEYWORDS_ATOM, name)
-		&& !HOP(RESERVED_WORDS, name)
-		&& !HOP(KEYWORDS, name);
-};
-
-function MAP(a, f, o) {
-	var ret = [];
-	for (var i = 0; i < a.length; ++i) {
-		ret.push(f.call(o, a[i], i));
-	}
-	return ret;
-};
-
-/* -----[ Exports ]----- */
-
-return {
-	parse: parse,
-	gen_code: gen_code,
-	tokenizer: tokenizer,
-	ast_walker: ast_walker
-};
-
-};
diff --git a/lib/prepro.js b/lib/prepro.js
deleted file mode 100644
index c92796a7..00000000
--- a/lib/prepro.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/*
- * Paper.js
- *
- * This file is part of Paper.js, a JavaScript Vector Graphics Library,
- * based on Scriptographer.org and designed to be largely API compatible.
- * http://paperjs.org/
- * http://scriptographer.org/
- *
- * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
- * http://lehni.org/ & http://jonathanpuckey.com/
- *
- * Distributed under the MIT license. See LICENSE file for details.
- *
- * All rights reserved.
- */
-
-// Since loading prepro.js is also used further down to prevent inline scripts
-// from executing right away, check that its actual code is only executed once.
-if (!window.include) {
-	// Determine the source of prepro.js, so we can use it to prevent inline
-	// scripts from loading straight away.
-	var scripts = document.getElementsByTagName('script');
-	var script = scripts[scripts.length - 1];
-	var src = script.getAttribute('src');
-	var root = src.match(/^(.*\/)/)[1];
-
-	window.include = function(url) {
-		url = root + url;
-		var newRoot = url.match(/^(.*\/)/)[1];
-		// Load prepro.js again, just to prevent the setting of newRoot frome
-		// executing straight away, and delaying it until right before the 
-		// script at 'url' is loaded.
-		document.write([
-			'<script type="text/javascript" src="', src, '"></script>',
-			// Set newRoot, so include() from 'url' load from the right place
-			'<script type="text/javascript">root = "', newRoot, '";</script>',
-			// Load the actual script
-			'<script type="text/javascript" src="', url, '"></script>',
-			// Set root back to the root before
-			'<script type="text/javascript">root = "',  root, '";</script>'
-		].join(''));
-	}
-}
diff --git a/lib/stats.js b/lib/stats.js
deleted file mode 100644
index 5d85f626..00000000
--- a/lib/stats.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// stats.js r5 - http://github.com/mrdoob/stats.js
-var Stats=function(){function w(d,K,n){var u,f,c;for(f=0;f<30;f++)for(u=0;u<73;u++){c=(u+f*74)*4;d[c]=d[c+4];d[c+1]=d[c+5];d[c+2]=d[c+6]}for(f=0;f<30;f++){c=(73+f*74)*4;if(f<K){d[c]=b[n].bg.r;d[c+1]=b[n].bg.g;d[c+2]=b[n].bg.b}else{d[c]=b[n].fg.r;d[c+1]=b[n].fg.g;d[c+2]=b[n].fg.b}}}var v=0,x=2,e,y=0,l=(new Date).getTime(),J=l,z=l,o=0,A=1E3,B=0,m,g,a,p,C,q=0,D=1E3,E=0,h,i,r,F,s=0,G=1E3,H=0,j,k,t,I,b={fps:{bg:{r:16,g:16,b:48},fg:{r:0,g:255,b:255}},ms:{bg:{r:16,g:48,b:16},fg:{r:0,g:255,b:0}},mem:{bg:{r:48,
-g:16,b:26},fg:{r:255,g:0,b:128}}};e=document.createElement("div");e.style.cursor="pointer";e.style.width="80px";e.style.opacity="0.9";e.style.zIndex="10001";e.addEventListener("click",function(){v++;v==x&&(v=0);m.style.display="none";h.style.display="none";j.style.display="none";switch(v){case 0:m.style.display="block";break;case 1:h.style.display="block";break;case 2:j.style.display="block"}},false);m=document.createElement("div");m.style.backgroundColor="rgb("+Math.floor(b.fps.bg.r/2)+","+Math.floor(b.fps.bg.g/
-2)+","+Math.floor(b.fps.bg.b/2)+")";m.style.padding="2px 0px 3px 0px";e.appendChild(m);g=document.createElement("div");g.style.fontFamily="Helvetica, Arial, sans-serif";g.style.textAlign="left";g.style.fontSize="9px";g.style.color="rgb("+b.fps.fg.r+","+b.fps.fg.g+","+b.fps.fg.b+")";g.style.margin="0px 0px 1px 3px";g.innerHTML='<span style="font-weight:bold">FPS</span>';m.appendChild(g);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";m.appendChild(a);
-p=a.getContext("2d");p.fillStyle="rgb("+b.fps.bg.r+","+b.fps.bg.g+","+b.fps.bg.b+")";p.fillRect(0,0,a.width,a.height);C=p.getImageData(0,0,a.width,a.height);h=document.createElement("div");h.style.backgroundColor="rgb("+Math.floor(b.ms.bg.r/2)+","+Math.floor(b.ms.bg.g/2)+","+Math.floor(b.ms.bg.b/2)+")";h.style.padding="2px 0px 3px 0px";h.style.display="none";e.appendChild(h);i=document.createElement("div");i.style.fontFamily="Helvetica, Arial, sans-serif";i.style.textAlign="left";i.style.fontSize=
-"9px";i.style.color="rgb("+b.ms.fg.r+","+b.ms.fg.g+","+b.ms.fg.b+")";i.style.margin="0px 0px 1px 3px";i.innerHTML='<span style="font-weight:bold">MS</span>';h.appendChild(i);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";h.appendChild(a);r=a.getContext("2d");r.fillStyle="rgb("+b.ms.bg.r+","+b.ms.bg.g+","+b.ms.bg.b+")";r.fillRect(0,0,a.width,a.height);F=r.getImageData(0,0,a.width,a.height);try{if(performance&&performance.memory&&performance.memory.totalJSHeapSize)x=
-3}catch(L){}j=document.createElement("div");j.style.backgroundColor="rgb("+Math.floor(b.mem.bg.r/2)+","+Math.floor(b.mem.bg.g/2)+","+Math.floor(b.mem.bg.b/2)+")";j.style.padding="2px 0px 3px 0px";j.style.display="none";e.appendChild(j);k=document.createElement("div");k.style.fontFamily="Helvetica, Arial, sans-serif";k.style.textAlign="left";k.style.fontSize="9px";k.style.color="rgb("+b.mem.fg.r+","+b.mem.fg.g+","+b.mem.fg.b+")";k.style.margin="0px 0px 1px 3px";k.innerHTML='<span style="font-weight:bold">MEM</span>';
-j.appendChild(k);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";j.appendChild(a);t=a.getContext("2d");t.fillStyle="#301010";t.fillRect(0,0,a.width,a.height);I=t.getImageData(0,0,a.width,a.height);return{domElement:e,update:function(){y++;l=(new Date).getTime();q=l-J;D=Math.min(D,q);E=Math.max(E,q);w(F.data,Math.min(30,30-q/200*30),"ms");i.innerHTML='<span style="font-weight:bold">'+q+" MS</span> ("+D+"-"+E+")";r.putImageData(F,0,0);J=l;if(l>
-z+1E3){o=Math.round(y*1E3/(l-z));A=Math.min(A,o);B=Math.max(B,o);w(C.data,Math.min(30,30-o/100*30),"fps");g.innerHTML='<span style="font-weight:bold">'+o+" FPS</span> ("+A+"-"+B+")";p.putImageData(C,0,0);if(x==3){s=performance.memory.usedJSHeapSize*9.54E-7;G=Math.min(G,s);H=Math.max(H,s);w(I.data,Math.min(30,30-s/2),"mem");k.innerHTML='<span style="font-weight:bold">'+Math.round(s)+" MEM</span> ("+Math.round(G)+"-"+Math.round(H)+")";t.putImageData(I,0,0)}z=l;y=0}}}};
-
diff --git a/node.js/index.js b/node.js/index.js
deleted file mode 100644
index 243a9d1b..00000000
--- a/node.js/index.js
+++ /dev/null
@@ -1,58 +0,0 @@
-var fs = require('fs'),
-	vm = require('vm'),
-	path = require('path'),
-	Canvas = require('canvas');
-
-__dirname = path.resolve(__dirname, '../src/');
-
-// Create the context within which we will run the source files:
-var context = vm.createContext({
-	options: {
-		server: true,
-		version: 'dev'
-	},
-	fs: fs,
-	// Node Canvas library: https://github.com/learnboost/node-canvas
-	Canvas: Canvas,
-	HTMLCanvasElement: Canvas,
-	Image: Canvas.Image,
-	// Copy over global variables:
-    console: console,
-	require: require,
-	__dirname: __dirname,
-	__filename: __filename,
-	// Used to load and run source files within the same context:
-	include: function(uri) {
-		var source = fs.readFileSync(path.resolve(__dirname, uri), 'utf8');
-		// For relative includes, we save the current directory and then
-		// add the uri directory to __dirname:
-		var oldDirname = __dirname;
-		__dirname = path.resolve(__dirname, path.dirname(uri));
-		vm.runInContext(source, context, uri);
-		__dirname = oldDirname;
-	}
-});
-
-// Load Paper.js library files:
-context.include('paper.js');
-
-context.Base.each(context, function(val, key) {
-	if (val && val.prototype instanceof context.Base) {
-		val._name = key;
-		// Export all classes through PaperScope:
-		context.PaperScope.prototype[key] = val;
-	}
-});
-context.PaperScope.prototype['Canvas'] = context.Canvas;
-
-require.extensions['.pjs'] = function(module, uri) {
-	var source = context.PaperScript.compile(fs.readFileSync(uri, 'utf8'));
-	var envVars = 'var __dirname = \'' + path.dirname(uri) + '\';' + 
-				 'var __filename = \'' + uri + '\';';
-	vm.runInContext(envVars, context);
-	var scope = new context.PaperScope();
-	context.PaperScript.evaluate(source, scope);
-	module.exports = scope;
-};
-
-module.exports = new context.PaperScope();
\ No newline at end of file

From a974ec8205dd0303a4cce09f17f003301ad08226 Mon Sep 17 00:00:00 2001
From: Andrew <jaroles@stetson.edu>
Date: Sun, 30 Sep 2012 21:01:45 -0400
Subject: [PATCH 41/51] Mergin the branches

---
 build/.gitignore                          |    3 +
 build/build.sh                            |   38 +
 build/dist.sh                             |   21 +
 build/docs.sh                             |   38 +
 build/load.sh                             |   22 +
 build/parse-js.sh                         |   20 +
 build/prepro.js                           |  174 +
 build/preprocess.sh                       |   51 +
 build/zip.sh                              |   39 +
 dist/.gitignore                           |    3 +
 dist/docs/classes/CharacterStyle.html     |  569 ++
 dist/docs/classes/Color.html              |  712 ++
 dist/docs/classes/CompoundPath.html       | 5349 +++++++++++++
 dist/docs/classes/Curve.html              |  878 +++
 dist/docs/classes/CurveLocation.html      |  505 ++
 dist/docs/classes/Event.html              |   73 +
 dist/docs/classes/Gradient.html           |  200 +
 dist/docs/classes/GradientColor.html      |  465 ++
 dist/docs/classes/GradientStop.html       |  258 +
 dist/docs/classes/GrayColor.html          |  749 ++
 dist/docs/classes/Group.html              | 3587 +++++++++
 dist/docs/classes/HitResult.html          |  242 +
 dist/docs/classes/HsbColor.html           |  766 ++
 dist/docs/classes/HslColor.html           |  730 ++
 dist/docs/classes/Item.html               | 3289 ++++++++
 dist/docs/classes/Key.html                |  100 +
 dist/docs/classes/KeyEvent.html           |  220 +
 dist/docs/classes/Layer.html              | 3588 +++++++++
 dist/docs/classes/Line.html               |  329 +
 dist/docs/classes/Matrix.html             | 1824 +++++
 dist/docs/classes/PaperScope.html         |  475 ++
 dist/docs/classes/PaperScript.html        |  137 +
 dist/docs/classes/ParagraphStyle.html     |   92 +
 dist/docs/classes/Path.html               | 6698 ++++++++++++++++
 dist/docs/classes/PathItem.html           | 4279 ++++++++++
 dist/docs/classes/PathStyle.html          |  497 ++
 dist/docs/classes/PlacedItem.html         | 3493 ++++++++
 dist/docs/classes/PlacedSymbol.html       | 3620 +++++++++
 dist/docs/classes/Point.html              | 2196 ++++++
 dist/docs/classes/PointText.html          | 3688 +++++++++
 dist/docs/classes/Project.html            |  567 ++
 dist/docs/classes/Raster.html             | 4204 ++++++++++
 dist/docs/classes/Rectangle.html          | 1380 ++++
 dist/docs/classes/RgbColor.html           |  765 ++
 dist/docs/classes/Segment.html            |  544 ++
 dist/docs/classes/Size.html               | 1247 +++
 dist/docs/classes/Symbol.html             |  271 +
 dist/docs/classes/TextItem.html           | 3600 +++++++++
 dist/docs/classes/Tool.html               |  584 ++
 dist/docs/classes/ToolEvent.html          |  406 +
 dist/docs/classes/View.html               |  538 ++
 dist/docs/classes/global.html             |  574 ++
 dist/docs/classes/index.html              |   96 +
 dist/docs/index.html                      |   13 +
 dist/docs/resources/css/assets/bullet.gif |  Bin 0 -> 44 bytes
 dist/docs/resources/css/codemirror.css    |  141 +
 dist/docs/resources/css/paperscript.css   |   64 +
 dist/docs/resources/css/reference.css     |  128 +
 dist/docs/resources/css/style.css         |   86 +
 dist/docs/resources/js/bootstrap.js       | 4040 ++++++++++
 dist/docs/resources/js/codemirror.js      |    1 +
 dist/docs/resources/js/paper.js           | 8761 +++++++++++++++++++++
 dist/docs/resources/js/reference.js       |  258 +
 dist/paper.js                             |    3 +
 lib/bootstrap.js                          |  411 +
 lib/parse-js-min.js                       |   14 +
 lib/parse-js-unicode.js                   | 1997 +++++
 lib/parse-js.js                           | 1916 +++++
 lib/prepro.js                             |   43 +
 lib/stats.js                              |   10 +
 node.js/index.js                          |   58 +
 71 files changed, 82737 insertions(+)
 create mode 100644 build/.gitignore
 create mode 100644 build/build.sh
 create mode 100644 build/dist.sh
 create mode 100644 build/docs.sh
 create mode 100644 build/load.sh
 create mode 100644 build/parse-js.sh
 create mode 100644 build/prepro.js
 create mode 100644 build/preprocess.sh
 create mode 100644 build/zip.sh
 create mode 100644 dist/.gitignore
 create mode 100644 dist/docs/classes/CharacterStyle.html
 create mode 100644 dist/docs/classes/Color.html
 create mode 100644 dist/docs/classes/CompoundPath.html
 create mode 100644 dist/docs/classes/Curve.html
 create mode 100644 dist/docs/classes/CurveLocation.html
 create mode 100644 dist/docs/classes/Event.html
 create mode 100644 dist/docs/classes/Gradient.html
 create mode 100644 dist/docs/classes/GradientColor.html
 create mode 100644 dist/docs/classes/GradientStop.html
 create mode 100644 dist/docs/classes/GrayColor.html
 create mode 100644 dist/docs/classes/Group.html
 create mode 100644 dist/docs/classes/HitResult.html
 create mode 100644 dist/docs/classes/HsbColor.html
 create mode 100644 dist/docs/classes/HslColor.html
 create mode 100644 dist/docs/classes/Item.html
 create mode 100644 dist/docs/classes/Key.html
 create mode 100644 dist/docs/classes/KeyEvent.html
 create mode 100644 dist/docs/classes/Layer.html
 create mode 100644 dist/docs/classes/Line.html
 create mode 100644 dist/docs/classes/Matrix.html
 create mode 100644 dist/docs/classes/PaperScope.html
 create mode 100644 dist/docs/classes/PaperScript.html
 create mode 100644 dist/docs/classes/ParagraphStyle.html
 create mode 100644 dist/docs/classes/Path.html
 create mode 100644 dist/docs/classes/PathItem.html
 create mode 100644 dist/docs/classes/PathStyle.html
 create mode 100644 dist/docs/classes/PlacedItem.html
 create mode 100644 dist/docs/classes/PlacedSymbol.html
 create mode 100644 dist/docs/classes/Point.html
 create mode 100644 dist/docs/classes/PointText.html
 create mode 100644 dist/docs/classes/Project.html
 create mode 100644 dist/docs/classes/Raster.html
 create mode 100644 dist/docs/classes/Rectangle.html
 create mode 100644 dist/docs/classes/RgbColor.html
 create mode 100644 dist/docs/classes/Segment.html
 create mode 100644 dist/docs/classes/Size.html
 create mode 100644 dist/docs/classes/Symbol.html
 create mode 100644 dist/docs/classes/TextItem.html
 create mode 100644 dist/docs/classes/Tool.html
 create mode 100644 dist/docs/classes/ToolEvent.html
 create mode 100644 dist/docs/classes/View.html
 create mode 100644 dist/docs/classes/global.html
 create mode 100644 dist/docs/classes/index.html
 create mode 100644 dist/docs/index.html
 create mode 100644 dist/docs/resources/css/assets/bullet.gif
 create mode 100644 dist/docs/resources/css/codemirror.css
 create mode 100644 dist/docs/resources/css/paperscript.css
 create mode 100644 dist/docs/resources/css/reference.css
 create mode 100644 dist/docs/resources/css/style.css
 create mode 100644 dist/docs/resources/js/bootstrap.js
 create mode 100644 dist/docs/resources/js/codemirror.js
 create mode 100644 dist/docs/resources/js/paper.js
 create mode 100644 dist/docs/resources/js/reference.js
 create mode 100644 dist/paper.js
 create mode 100644 lib/bootstrap.js
 create mode 100644 lib/parse-js-min.js
 create mode 100644 lib/parse-js-unicode.js
 create mode 100644 lib/parse-js.js
 create mode 100644 lib/prepro.js
 create mode 100644 lib/stats.js
 create mode 100644 node.js/index.js

diff --git a/build/.gitignore b/build/.gitignore
new file mode 100644
index 00000000..baa4f768
--- /dev/null
+++ b/build/.gitignore
@@ -0,0 +1,3 @@
+/scriptographer.sh
+/*.tmproj
+/sync.sh
diff --git a/build/build.sh b/build/build.sh
new file mode 100644
index 00000000..e57127be
--- /dev/null
+++ b/build/build.sh
@@ -0,0 +1,38 @@
+#!/bin/sh
+
+# Paper.js
+#
+# This file is part of Paper.js, a JavaScript Vector Graphics Library,
+# based on Scriptographer.org and designed to be largely API compatible.
+# http://scriptographer.org/
+#
+# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+# http://lehni.org/ & http://jonathanpuckey.com/
+#
+# Distributed under the MIT license. See LICENSE file for details.
+#
+# All rights reserved.
+
+# Usage:
+# build.sh MODE
+#
+# MODE:
+#	commented		Preprocessed but still formated and commented
+#	stripped		Formated but without comments (default)
+#	compressed		Uses UglifyJS to reduce file size
+
+if [ $# -eq 0 ]
+then
+	MODE="stripped"
+else
+	MODE=$1
+fi
+
+# Create the dist folder if it does not exist yet.
+if [ ! -d ../dist/ ]
+then
+	mkdir ../dist/
+fi
+
+./preprocess.sh $MODE ../src/paper.js ../dist/paper.js '{ "browser": true }'
+#./preprocess.sh $MODE ../src/paper.js ../dist/paper-server.js '{ "server": true }'
diff --git a/build/dist.sh b/build/dist.sh
new file mode 100644
index 00000000..6283502a
--- /dev/null
+++ b/build/dist.sh
@@ -0,0 +1,21 @@
+#!/bin/sh
+
+# Paper.js
+#
+# This file is part of Paper.js, a JavaScript Vector Graphics Library,
+# based on Scriptographer.org and designed to be largely API compatible.
+# http://scriptographer.org/
+#
+# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+# http://lehni.org/ & http://jonathanpuckey.com/
+#
+# Distributed under the MIT license. See LICENSE file for details.
+#
+# All rights reserved.
+
+echo "Building paper.js"
+./build.sh
+echo "Building docs"
+./docs.sh
+echo "Zipping paperjs.zip"
+./zip.sh
diff --git a/build/docs.sh b/build/docs.sh
new file mode 100644
index 00000000..b55606a0
--- /dev/null
+++ b/build/docs.sh
@@ -0,0 +1,38 @@
+#!/bin/sh
+
+# Paper.js
+#
+# This file is part of Paper.js, a JavaScript Vector Graphics Library,
+# based on Scriptographer.org and designed to be largely API compatible.
+# http://scriptographer.org/
+#
+# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+# http://lehni.org/ & http://jonathanpuckey.com/
+#
+# Distributed under the MIT license. See LICENSE file for details.
+#
+# All rights reserved.
+
+# Generate documentation
+#
+# MODE:
+#	docs			Generates the JS API docs - Default
+#	serverdocs		Generates the website templates for the online JS API docs
+
+if [ $# -eq 0 ]
+then
+	MODE="docs"
+else
+	MODE=$1
+fi
+
+cd jsdoc-toolkit
+java -jar jsrun.jar app/run.js -c=conf/$MODE.conf -D="renderMode:$MODE"
+cd ..
+
+if [ $MODE = "docs" ]
+then
+	# Build paper.js library for documentation
+	./preprocess.sh stripped ../src/paper.js ../dist/docs/resources/js/paper.js\
+		'{ "browser": true }'
+fi
diff --git a/build/load.sh b/build/load.sh
new file mode 100644
index 00000000..8ed8a3cc
--- /dev/null
+++ b/build/load.sh
@@ -0,0 +1,22 @@
+#!/bin/sh
+
+# Paper.js
+#
+# This file is part of Paper.js, a JavaScript Vector Graphics Library,
+# based on Scriptographer.org and designed to be largely API compatible.
+# http://scriptographer.org/
+#
+# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+# http://lehni.org/ & http://jonathanpuckey.com/
+#
+# Distributed under the MIT license. See LICENSE file for details.
+#
+# All rights reserved.
+
+# Generate a paper.js file that uses load.js to directly load the library
+# through the seperate source files in the src directory. Very useful during
+# development of the library itself.
+
+echo "// Paper.js loader for development, as produced by the build/load.sh script
+document.write('<script type=\"text/javascript\" src=\"../../lib/prepro.js\"></script>');
+document.write('<script type=\"text/javascript\" src=\"../../src/load.js\"></script>');" > ../dist/paper.js;
\ No newline at end of file
diff --git a/build/parse-js.sh b/build/parse-js.sh
new file mode 100644
index 00000000..7410b68a
--- /dev/null
+++ b/build/parse-js.sh
@@ -0,0 +1,20 @@
+#!/bin/sh
+
+# Paper.js
+#
+# This file is part of Paper.js, a JavaScript Vector Graphics Library,
+# based on Scriptographer.org and designed to be largely API compatible.
+# http://scriptographer.org/
+#
+# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+# http://lehni.org/ & http://jonathanpuckey.com/
+#
+# Distributed under the MIT license. See LICENSE file for details.
+#
+# All rights reserved.
+
+# Generate a paper.js file that uses load.js to directly load the library
+# through the seperate source files in the src directory. Very useful during
+# development of the library itself.
+
+./preprocess.sh compressed ../lib/parse-js.js ../lib/parse-js-min.js '{}'
diff --git a/build/prepro.js b/build/prepro.js
new file mode 100644
index 00000000..1ba879dd
--- /dev/null
+++ b/build/prepro.js
@@ -0,0 +1,174 @@
+#! /usr/bin/env node
+/*
+ * Paper.js
+ *
+ * This file is part of Paper.js, a JavaScript Vector Graphics Library,
+ * based on Scriptographer.org and designed to be largely API compatible.
+ * http://paperjs.org/
+ * http://scriptographer.org/
+ *
+ * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+ * http://lehni.org/ & http://jonathanpuckey.com/
+ *
+ * Distributed under the MIT license. See LICENSE file for details.
+ *
+ * All rights reserved.
+ */
+
+/**
+ * Prepro.js - A simple preprocesssor for JavaScript that speaks JavaScript,
+ * written in JavaScript, allowing preprocessing to either happen at build time
+ * or compile time. Very useful for libraries that are built for distribution,
+ * but can be also compiled from seperate sources directly for development,
+ * supporting build time switches.
+ */
+
+// Required libs
+
+var fs = require('fs'),
+	path = require('path');
+
+// Parse arguments
+
+var args = process.argv.slice(2),
+	options = {},
+	files = [],
+	strip = false;
+
+while (args.length > 0) {
+	var arg = args.shift();
+	switch (arg) {
+	case '-d':
+		// Definitions are provided as JSON and supposed to be object literals
+		var def = JSON.parse(args.shift());
+		// Merge new definitions into options object.
+		for (var key in def)
+			options[key] = def[key];
+		break;	
+	case '-c':
+		strip = true;
+		break;
+	default:
+		files.push(arg);
+	}
+}
+
+// Preprocessing
+
+var code = [],
+	out = [];
+
+function include(base, file) {
+	// Compose a pathname from base and file, which is specified relatively,
+	// and normalize the new path, to get rid of ..
+	file = path.normalize(path.join(base, file));
+	var content = fs.readFileSync(file).toString();
+	content.split(/\r\n|\n|\r/mg).forEach(function(line) {
+		// See if our line starts with the preprocess prefix.
+		var match = line.match(/^\s*\/\*#\*\/\s*(.*)$/);
+		if (match) {
+			// Check if the preprocessing line is an include statement, and if
+			// so, handle it straight away
+			line = match[1];
+			if (match = line.match(/^include\(['"]([^;]*)['"]\);?$/)) {
+				// Pass on the dirname of the current file as the new base
+				include(path.dirname(file), match[1]);
+			} else {
+				// Any other preprocessing code is simply added, for later 
+				// evaluation.
+				code.push(line);
+			}
+		} else {
+			// Perhaps we need to replace some values? Supported formats are:
+			// /*#=*/ options.NAME (outside comments)
+			// *#=* options.NAME (inside comments)
+			line = line.replace(/\/?\*#=\*\/?\s*options\.([\w]*)/g,
+				function(all, name) {
+					return options[name];
+				}
+			);
+			// Now add a statement that when evaluated writes out this code line
+			code.push('out.push(' + JSON.stringify(line) + ');');
+		}
+	});
+}
+
+// Include all files. Everything else happens from there, through include()
+files.forEach(function(file) {
+	include(path.resolve(), file);
+});
+
+// Evaluate the resulting code: Calls puts() and writes the result to stdout.
+eval(code.join('\n'));
+
+// Convert the resulting lines to one string again.
+var out = out.join('\n');
+
+if (strip) {
+	out = stripComments(out);
+	// Strip empty lines that contain only white space and line breaks, as they
+	// are left-overs from comment removal.
+	out = out.replace(/^[ \t]+(\r\n|\n|\r)/gm, function(all) {
+		return '';
+	});
+	// Replace a sequence of more than two line breaks with only two.
+	out = out.replace(/(\r\n|\n|\r)(\r\n|\n|\r)+/g, function(all, lineBreak) {
+		return lineBreak + lineBreak;
+	});
+}
+
+// Write the result out
+process.stdout.write(out);
+
+/**
+ * Strips comments out of JavaScript code, based on:
+ * http://james.padolsey.com/javascript/removing-comments-in-javascript/
+*/
+function stripComments(str) {
+	str = ('__' + str + '__').split('');
+	var singleQuote = false,
+		doubleQuote = false,
+		blockComment = false,
+		lineComment = false,
+		preserveComment = false;
+	for (var i = 0, l = str.length; i < l; i++) {
+		if (singleQuote) {
+			if (str[i] == "'" && str[i - 1] !== '\\')
+				singleQuote = false;
+		} else if (doubleQuote) {
+			if (str[i] == '"' && str[i - 1] !== '\\')
+				doubleQuote = false;
+		} else if (blockComment) {
+			// Is the block comment closing?
+			if (str[i] == '*' && str[i + 1] == '/') {
+				if (!preserveComment)
+					str[i] = str[i + 1] = '';
+				blockComment = preserveComment = false;
+			} else if (!preserveComment) {
+				str[i] = '';
+			}
+		} else if (lineComment) {
+			// One-line comments end with the line-break
+			if (str[i + 1] == '\n' || str[i + 1] == '\r')
+				lineComment = false;
+			str[i] = '';
+		} else {
+			doubleQuote = str[i] == '"';
+			singleQuote = str[i] == "'";
+			if (!blockComment && str[i] == '/') {
+				if (str[i + 1] == '*') {
+					// Do not filter out conditional comments and comments marked
+					// as protected (/*! */)
+					preserveComment = str[i + 2] == '@' || str[i + 2] == '!';
+					if (!preserveComment)
+						str[i] = '';
+					blockComment = true;
+				} else if (str[i + 1] == '/') {
+					str[i] = '';
+					lineComment = true;
+				}
+	 		}
+		}
+ 	}
+	return str.join('').slice(2, -2);
+}
diff --git a/build/preprocess.sh b/build/preprocess.sh
new file mode 100644
index 00000000..860fdd73
--- /dev/null
+++ b/build/preprocess.sh
@@ -0,0 +1,51 @@
+#!/bin/sh
+
+# Paper.js
+#
+# This file is part of Paper.js, a JavaScript Vector Graphics Library,
+# based on Scriptographer.org and designed to be largely API compatible.
+# http://scriptographer.org/
+#
+# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+# http://lehni.org/ & http://jonathanpuckey.com/
+#
+# Distributed under the MIT license. See LICENSE file for details.
+#
+# All rights reserved.
+
+# preprocess.sh
+#
+# A simple code preprocessing wrapper that uses a combination of cpp, jssrip.py
+# and sed to preprocess JavaScript files containing C-style preprocess macros
+# (#include, #ifdef, etc.). Three options offer control over wether comments
+# are preserved or stripped and whitespaces are compressed.
+#
+# Usage:
+# preprocess.sh MODE SOURCE DESTINATION ARGUMENTS
+#
+# ARGUMENTS:
+#	e.g. "-DBROWSER"
+#
+# MODE:
+#	commented		Preprocessed but still formated and commented
+#	stripped		Formated but without comments
+#	compressed		Uses UglifyJS to reduce file size
+
+VERSION=0.22
+DATE=$(git log -1 --pretty=format:%ad)
+
+COMMAND="./prepro.js -d '{ \"version\": $VERSION, \"date\": \"$DATE\" }' -d '$4' $2"
+
+case $1 in
+	stripped)
+		eval "$COMMAND -c" > $3
+		;;
+	commented)
+		eval $COMMAND > $3
+		;;
+	compressed)
+		eval $COMMAND > temp.js
+		../../uglifyjs/bin/uglifyjs temp.js --extra --unsafe --reserved-names "$eval,$sign" > $3
+		rm temp.js
+		;;
+esac
diff --git a/build/zip.sh b/build/zip.sh
new file mode 100644
index 00000000..afc07257
--- /dev/null
+++ b/build/zip.sh
@@ -0,0 +1,39 @@
+#!/bin/sh
+
+# Paper.js
+#
+# This file is part of Paper.js, a JavaScript Vector Graphics Library,
+# based on Scriptographer.org and designed to be largely API compatible.
+# http://scriptographer.org/
+#
+# Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+# http://lehni.org/ & http://jonathanpuckey.com/
+#
+# Distributed under the MIT license. See LICENSE file for details.
+#
+# All rights reserved.
+
+if [ -f paperjs.zip ]
+then
+	rm paperjs.zip
+fi
+# Create a temporary folder to copy all files in for zipping
+mkdir zip
+cd zip
+BASE=../..
+# Copy license over
+cp $BASE/LICENSE.txt .
+# Make library folder and copy paper.js there
+mkdir lib
+cp $BASE/dist/paper.js lib
+# Copy examples over
+cp -r $BASE/examples .
+# Replace ../../dist/ with ../../lib/ in each example
+find examples -type f -print0 | xargs -0 perl -i -pe 's/\.\.\/\.\.\/dist\//\.\.\/\.\.\/lib\//g'
+# Copy docs over
+cp -r $BASE/dist/docs .
+# Zip the whole thing
+zip -9 -r $BASE/dist/paperjs.zip * LICENSE.txt -x "*/.DS_Store"
+cd ..
+# Remove the temporary folder again
+rm -fr zip
diff --git a/dist/.gitignore b/dist/.gitignore
new file mode 100644
index 00000000..61f11ea6
--- /dev/null
+++ b/dist/.gitignore
@@ -0,0 +1,3 @@
+/paper-server.js
+/serverdocs/
+/paperjs.zip
diff --git a/dist/docs/classes/CharacterStyle.html b/dist/docs/classes/CharacterStyle.html
new file mode 100644
index 00000000..359b7469
--- /dev/null
+++ b/dist/docs/classes/CharacterStyle.html
@@ -0,0 +1,569 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>CharacterStyle</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>CharacterStyle</h1>
+
+<p> Extends <b><a href="../classes/PathStyle.html"><tt>PathStyle</tt></a></b></p>
+
+<p>The CharacterStyle object represents the character style of a text
+item (<a href="../classes/TextItem.html#characterstyle"><tt>textItem.characterStyle</tt></a>)</p>
+<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var text = new PointText(new Point(50, 50));
+text.content = 'Hello world.';
+text.characterStyle = {
+	fontSize: 50,
+	fillColor: 'black',
+};</pre>
+
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="font-member" class="member">
+<div id="font-link" class="member-link">
+<a name="font" href="#" onClick="return toggleMember('font', false);"><tt><b>font</b></tt></a>
+</div>
+<div id="font-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('font', false);"><tt><b>font</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('font', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The font of the character style.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'sans-serif'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="fontsize-member" class="member">
+<div id="fontsize-link" class="member-link">
+<a name="fontsize" href="#" onClick="return toggleMember('fontsize', false);"><tt><b>fontSize</b></tt></a>
+</div>
+<div id="fontsize-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fontsize', false);"><tt><b>fontSize</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fontsize', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The font size of the character style in points.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>10</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/PathStyle.html"><tt>PathStyle</tt></a></h2>
+
+	
+	<h3>Stroke Style</h3>
+
+<div id="strokecolor-member" class="member">
+<div id="strokecolor-link" class="member-link">
+<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+<div id="strokecolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the stroke color of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to RGB red:
+circle.strokeColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokewidth-member" class="member">
+<div id="strokewidth-link" class="member-link">
+<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+<div id="strokewidth-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The width of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's stroke width:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to black:
+circle.strokeColor = 'black';
+
+// Set its stroke width to 10:
+circle.strokeWidth = 10;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokecap-member" class="member">
+<div id="strokecap-link" class="member-link">
+<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+<div id="strokecap-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
+have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'butt'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('round', 'square', 'butt')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke caps:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+var line = new Path(new Point(80, 50), new Point(420, 50));
+line.strokeColor = 'black';
+line.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+line.selected = true;
+
+// Set the stroke cap of the line to be round:
+line.strokeCap = 'round';
+
+// Copy the path and set its stroke cap to be square:
+var line2 = line.clone();
+line2.position.y += 50;
+line2.strokeCap = 'square';
+
+// Make another copy and set its stroke cap to be butt:
+var line2 = line.clone();
+line2.position.y += 100;
+line2.strokeCap = 'butt';
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokejoin-member" class="member">
+<div id="strokejoin-link" class="member-link">
+<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+<div id="strokejoin-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the corners of paths when they have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'miter'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt> ('miter', 'round', 'bevel')
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke joins:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+var path = new Path();
+path.add(new Point(80, 100));
+path.add(new Point(120, 40));
+path.add(new Point(160, 100));
+path.strokeColor = 'black';
+path.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+path.selected = true;
+
+var path2 = path.clone();
+path2.position.x += path2.bounds.width * 1.5;
+path2.strokeJoin = 'round';
+
+var path3 = path2.clone();
+path3.position.x += path3.bounds.width * 1.5;
+path3.strokeJoin = 'bevel';
+</script>
+<div class="canvas"><canvas width="516" height="120" id="canvas-3"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="dashoffset-member" class="member">
+<div id="dashoffset-link" class="member-link">
+<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+<div id="dashoffset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The dash offset of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>0</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="dasharray-member" class="member">
+<div id="dasharray-link" class="member-link">
+<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+<div id="dasharray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>[]</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Array</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+var path = new Path.Circle(new Point(80, 50), 40);
+path.strokeWidth = 2;
+path.strokeColor = 'black';
+
+// Set the dashed stroke to [10pt dash, 4pt gap]:
+path.dashArray = [10, 4];
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="miterlimit-member" class="member">
+<div id="miterlimit-link" class="member-link">
+<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+<div id="miterlimit-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The miter limit of the stroke.</p>
+<p>When two line segments meet at a sharp angle and miter joins have been
+specified for <a href="../classes/PathStyle.html#strokejoin" onclick="return toggleMember('strokejoin', true);"><tt>strokeJoin</tt></a>, it is possible for the miter to extend
+far beyond the <a href="../classes/PathStyle.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a> of the path. The miterLimit imposes a
+limit on the ratio of the miter length to the <a href="../classes/PathStyle.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>10</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Fill Style</h3>
+
+<div id="fillcolor-member" class="member">
+<div id="fillcolor-link" class="member-link">
+<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+<div id="fillcolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The fill color.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the fill color of a path to red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-5">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set the fill color of the circle to RGB red:
+circle.fillColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Color.html b/dist/docs/classes/Color.html
new file mode 100644
index 00000000..c230d9b0
--- /dev/null
+++ b/dist/docs/classes/Color.html
@@ -0,0 +1,712 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Color</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Color</h1>
+
+<p>All properties and functions that expect color values accept
+instances of the different color classes such as <a href="../classes/RgbColor.html"><tt>RgbColor</tt></a>,
+<a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> and <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>, and also accept named colors
+and hex values as strings which are then converted to instances of
+<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> internally.</p>
+<p>
+<b>Example</b> &mdash; Named color values:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+// Create a circle shaped path at {x: 80, y: 50}
+// with a radius of 30.
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// Pass a color name to the fillColor property, which is internally
+// converted to an RgbColor.
+circle.fillColor = 'green';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Hex color values:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+// Create a circle shaped path at {x: 80, y: 50}
+// with a radius of 30.
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// Pass a hex string to the fillColor property, which is internally
+// converted to an RgbColor.
+circle.fillColor = '#ff0000';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+</div>
+
+
+
+<!-- ============================== properties ========================= -->
+	<div class="reference-members"><h2>Operators</h2>
+		
+			<div id="equals-member" class="member">
+<div id="equals-link" class="member-link">
+<a name="equals" href="#" onClick="return toggleMember('equals', false);"><tt><tt><b>==</b> Color</tt></tt></a>
+</div>
+<div id="equals-description" class="member-description hidden">
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('equals', false);"><tt><b>==</b> Color</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Checks if the component color values of the color are the
+same as those of the supplied one.</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+		
+		
+	</div>
+
+
+</div>
+</div>
+
+		
+	</div>
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="type-member" class="member">
+<div id="type-link" class="member-link">
+<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
+</div>
+<div id="type-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Returns the type of the color as a string.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('rgb', 'hsb', 'gray')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var color = new RgbColor(1, 0, 0);
+console.log(color.type); // 'rgb'</pre>
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="alpha-member" class="member">
+<div id="alpha-link" class="member-link">
+<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
+</div>
+<div id="alpha-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
+colors of the different subclasses support alpha values.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A filled path with a half transparent stroke:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// Fill the circle with red and give it a 20pt green stroke:
+circle.style = {
+	fillColor: 'red',
+	strokeColor: 'green',
+	strokeWidth: 20
+};
+
+// Make the stroke half transparent:
+circle.strokeColor.alpha = 0.5;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>RGB Components</h3>
+
+<div id="red-member" class="member">
+<div id="red-link" class="member-link">
+<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
+</div>
+<div id="red-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of red in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the amount of red in a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.fillColor = 'blue';
+
+// Blue + red = purple:
+circle.fillColor.red = 1;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="green-member" class="member">
+<div id="green-link" class="member-link">
+<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
+</div>
+<div id="green-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of green in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the amount of green in a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// First we set the fill color to red:
+circle.fillColor = 'red';
+
+// Red + green = yellow:
+circle.fillColor.green = 1;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="blue-member" class="member">
+<div id="blue-link" class="member-link">
+<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
+</div>
+<div id="blue-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of blue in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the amount of blue in a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-5">
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// First we set the fill color to red:
+circle.fillColor = 'red';
+
+// Red + blue = purple:
+circle.fillColor.blue = 1;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Gray Components</h3>
+
+<div id="gray-member" class="member">
+<div id="gray-link" class="member-link">
+<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
+</div>
+<div id="gray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of gray in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>HSB Components</h3>
+
+<div id="hue-member" class="member">
+<div id="hue-link" class="member-link">
+<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
+</div>
+<div id="hue-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The hue of the color as a value in degrees between <tt>0</tt> and
+<tt>360</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the hue of a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-6">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.fillColor = 'red';
+circle.fillColor.hue += 30;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Hue cycling:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-7">
+// Create a rectangle shaped path, using the dimensions
+// of the view:
+var path = new Path.Rectangle(view.bounds);
+path.fillColor = 'red';
+
+function onFrame(event) {
+	path.fillColor.hue += 0.5;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="saturation-member" class="member">
+<div id="saturation-link" class="member-link">
+<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
+</div>
+<div id="saturation-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="brightness-member" class="member">
+<div id="brightness-link" class="member-link">
+<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
+</div>
+<div id="brightness-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>HSL Components</h3>
+
+<div id="lightness-member" class="member">
+<div id="lightness-link" class="member-link">
+<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
+</div>
+<div id="lightness-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the color object
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="hasalpha-member" class="member">
+<div id="hasalpha-link" class="member-link">
+<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
+</div>
+<div id="hasalpha-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the color has an alpha value.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<h3>String Representations</h3>
+
+<div id="tostring-member" class="member">
+<div id="tostring-link" class="member-link">
+<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+<div id="tostring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the color.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="tocssstring-member" class="member">
+<div id="tocssstring-link" class="member-link">
+<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
+</div>
+<div id="tocssstring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A css string representation of the color.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/CompoundPath.html b/dist/docs/classes/CompoundPath.html
new file mode 100644
index 00000000..3719a11c
--- /dev/null
+++ b/dist/docs/classes/CompoundPath.html
@@ -0,0 +1,5349 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>CompoundPath</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>CompoundPath</h1>
+
+<p> Extends <b><a href="../classes/PathItem.html"><tt>PathItem</tt></a></b>, <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
+
+<p>A compound path contains two or more paths, holes are drawn
+where the paths overlap. All the paths in a compound path take on the
+style of the backmost path and can be accessed through its
+<a href="../classes/Item.html#children"><tt>item.children</tt></a> list.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="compoundpath-member" class="member">
+<div id="compoundpath-link" class="member-link">
+<a name="compoundpath" href="#" onClick="return toggleMember('compoundpath', false);"><tt><b>CompoundPath</b>([paths])</tt></a>
+</div>
+<div id="compoundpath-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('compoundpath', false);"><tt><b>CompoundPath</b>([paths])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('compoundpath', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a new compound path item and places it in the active layer.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>paths:</tt> 
+Array of <a href="../classes/Path.html"><tt>Path</tt></a> objects
+&mdash;&nbsp;the paths to place within the compound path.
+&mdash;&nbsp;optional
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> &mdash; Create a circle shaped path with a hole in it:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+var circle = new Path.Circle(new Point(50, 50), 30);
+var innerCircle = new Path.Circle(new Point(50, 50), 10);
+var compoundPath = new CompoundPath([circle, innerCircle]);
+compoundPath.fillColor = 'red';
+
+// Move the inner circle 5pt to the right:
+compoundPath.children[1].position.x += 5;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="simplify-member" class="member">
+<div id="simplify-link" class="member-link">
+<a name="simplify" href="#" onClick="return toggleMember('simplify', false);"><tt><b>simplify</b>()</tt></a>
+</div>
+<div id="simplify-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('simplify', false);"><tt><b>simplify</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('simplify', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>If this is a compound path with only one path inside,
+the path is moved outside and the compound path is erased.</p>
+<p>Otherwise, the compound path is returned unmodified.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a> / <a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the simplified compound path
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+
+<!-- =========================== inherited methods ========================= -->
+<div class="reference-members"><h2>Methods inherited from <a href="../classes/PathItem.html"><tt>PathItem</tt></a></h2>
+
+	
+<div id="smooth-member" class="member">
+<div id="smooth-link" class="member-link">
+<a name="smooth" href="#" onClick="return toggleMember('smooth', false);"><tt><b>smooth</b>()</tt></a>
+</div>
+<div id="smooth-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('smooth', false);"><tt><b>smooth</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('smooth', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Smooth bezier curves without changing the amount of segments or their
+points, by only smoothing and adjusting their handle points, for both
+open ended and closed paths.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Smoothing a closed shape:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+// Create a rectangular path with its top-left point at
+// {x: 30, y: 25} and a size of {width: 50, height: 50}:
+var path = new Path.Rectangle(new Point(30, 25), new Size(50, 50));
+path.strokeColor = 'black';
+
+// Select the path, so we can see its handles:
+path.fullySelected = true;
+
+// Create a copy of the path and move it 100pt to the right:
+var copy = path.clone();
+copy.position.x += 100;
+
+// Smooth the segments of the copy:
+copy.smooth();
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+var path = new Path();
+path.strokeColor = 'black';
+
+path.add(new Point(30, 50));
+
+var y = 5;
+var x = 3;
+
+for (var i = 0; i < 28; i++) {
+    y *= -1.1;
+    x *= 1.1;
+    path.lineBy(x, y);
+}
+
+// Create a copy of the path and move it 100pt down:
+var copy = path.clone();
+copy.position.y += 120;
+
+// Set its stroke color to red:
+copy.strokeColor = 'red';
+
+// Smooth the segments of the copy:
+copy.smooth();
+</script>
+<div class="canvas"><canvas width="516" height="220" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<h3>Postscript Style Drawing Commands</h3>
+
+<div id="moveto-point-member" class="member">
+<div id="moveto-point-link" class="member-link">
+<a name="moveto-point" href="#" onClick="return toggleMember('moveto-point', false);"><tt><b>moveTo</b>(point)</tt></a>
+</div>
+<div id="moveto-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('moveto-point', false);"><tt><b>moveTo</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveto-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>If called on a <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, a new <a href="../classes/Path.html"><tt>Path</tt></a> is created as a
+child and the point is added as its first segment. On a normal empty
+<a href="../classes/Path.html"><tt>Path</tt></a>, the point is simply added as its first segment.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="lineto-point-member" class="member">
+<div id="lineto-point-link" class="member-link">
+<a name="lineto-point" href="#" onClick="return toggleMember('lineto-point', false);"><tt><b>lineTo</b>(point)</tt></a>
+</div>
+<div id="lineto-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lineto-point', false);"><tt><b>lineTo</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lineto-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="cubiccurveto-handle1-handle2-to-member" class="member">
+<div id="cubiccurveto-handle1-handle2-to-link" class="member-link">
+<a name="cubiccurveto-handle1-handle2-to" href="#" onClick="return toggleMember('cubiccurveto-handle1-handle2-to', false);"><tt><b>cubicCurveTo</b>(handle1, handle2, to)</tt></a>
+</div>
+<div id="cubiccurveto-handle1-handle2-to-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('cubiccurveto-handle1-handle2-to', false);"><tt><b>cubicCurveTo</b>(handle1, handle2, to)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('cubiccurveto-handle1-handle2-to', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds a cubic bezier curve to the path, defined by two handles and a to
+point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>handle1:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>handle2:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="quadraticcurveto-handle-to-member" class="member">
+<div id="quadraticcurveto-handle-to-link" class="member-link">
+<a name="quadraticcurveto-handle-to" href="#" onClick="return toggleMember('quadraticcurveto-handle-to', false);"><tt><b>quadraticCurveTo</b>(handle, to)</tt></a>
+</div>
+<div id="quadraticcurveto-handle-to-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('quadraticcurveto-handle-to', false);"><tt><b>quadraticCurveTo</b>(handle, to)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('quadraticcurveto-handle-to', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds a quadratic bezier curve to the path, defined by a handle and a to
+point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>handle:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="curveto-through-to-member" class="member">
+<div id="curveto-through-to-link" class="member-link">
+<a name="curveto-through-to" href="#" onClick="return toggleMember('curveto-through-to', false);"><tt><b>curveTo</b>(through, to[, parameter])</tt></a>
+</div>
+<div id="curveto-through-to-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('curveto-through-to', false);"><tt><b>curveTo</b>(through, to[, parameter])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveto-through-to', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Draws a curve from the position of the last segment point in the path
+that goes through the specified <tt>through</tt> point, to the specified
+<tt>to</tt> point by adding one segment to the path.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>through:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point through which the curve should go
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point where the curve should end
+
+</li>
+
+<li>
+<tt>parameter:</tt> 
+<tt>Number</tt>
+
+&mdash;&nbsp;optional, default: <tt>0.5</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+var myPath;
+function onMouseDrag(event) {
+	// If we created a path before, remove it:
+	if (myPath) {
+	    myPath.remove();
+	}
+
+	// Create a new path and add a segment point to it
+	// at {x: 150, y: 150):
+	myPath = new Path();
+	myPath.add(150, 150);
+
+	// Draw a curve through the position of the mouse to 'toPoint'
+	var toPoint = new Point(350, 150);
+	myPath.curveTo(event.point, toPoint);
+
+	// Select the path, so we can see its segments:
+	myPath.selected = true;
+}
+
+// When the mouse is released, deselect the path
+// and set its stroke-color to black:
+function onMouseUp(event) {
+	myPath.selected = false;
+	myPath.strokeColor = 'black';
+}
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-3"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="arcto-through-to-member" class="member">
+<div id="arcto-through-to-link" class="member-link">
+<a name="arcto-through-to" href="#" onClick="return toggleMember('arcto-through-to', false);"><tt><b>arcTo</b>(through, to)</tt></a>
+</div>
+<div id="arcto-through-to-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('arcto-through-to', false);"><tt><b>arcTo</b>(through, to)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcto-through-to', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Draws an arc from the position of the last segment point in the path that
+goes through the specified <tt>through</tt> point, to the specified
+<tt>to</tt> point by adding one or more segments to the path.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>through:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point where the arc should pass through
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point where the arc should end
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+var path = new Path();
+path.strokeColor = 'black';
+
+var firstPoint = new Point(30, 75);
+path.add(firstPoint);
+
+// The point through which we will create the arc:
+var throughPoint = new Point(40, 40);
+
+// The point at which the arc will end:
+var toPoint = new Point(130, 75);
+
+// Draw an arc through 'throughPoint' to 'toPoint'
+path.arcTo(throughPoint, toPoint);
+
+// Add a red circle shaped path at the position of 'throughPoint':
+var circle = new Path.Circle(throughPoint, 3);
+circle.fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-5">
+var myPath;
+function onMouseDrag(event) {
+	// If we created a path before, remove it:
+	if (myPath) {
+	    myPath.remove();
+	}
+
+	// Create a new path and add a segment point to it
+	// at {x: 150, y: 150):
+	myPath = new Path();
+	myPath.add(150, 150);
+
+	// Draw an arc through the position of the mouse to 'toPoint'
+	var toPoint = new Point(350, 150);
+	myPath.arcTo(event.point, toPoint);
+
+	// Select the path, so we can see its segments:
+	myPath.selected = true;
+}
+
+// When the mouse is released, deselect the path
+// and fill it with black.
+function onMouseUp(event) {
+	myPath.selected = false;
+	myPath.fillColor = 'black';
+}
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-5"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="arcto-to-member" class="member">
+<div id="arcto-to-link" class="member-link">
+<a name="arcto-to" href="#" onClick="return toggleMember('arcto-to', false);"><tt><b>arcTo</b>(to[, clockwise])</tt></a>
+</div>
+<div id="arcto-to-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('arcto-to', false);"><tt><b>arcTo</b>(to[, clockwise])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcto-to', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Draws an arc from the position of the last segment point in the path to
+the specified point by adding one or more segments to the path.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>to:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point where the arc should end
+
+</li>
+
+<li>
+<tt>clockwise:</tt> 
+<tt>Boolean</tt>
+&mdash;&nbsp;specifies whether the arc should be
+       drawn in clockwise direction.
+&mdash;&nbsp;optional, default: <tt>true</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-6">
+var path = new Path();
+path.strokeColor = 'black';
+
+path.add(new Point(30, 75));
+path.arcTo(new Point(130, 75));
+
+var path2 = new Path();
+path2.strokeColor = 'red';
+path2.add(new Point(180, 25));
+
+// To draw an arc in anticlockwise direction,
+// we pass 'false' as the second argument to arcTo:
+path2.arcTo(new Point(280, 25), false);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-7">
+var myPath;
+
+// The mouse has to move at least 20 points before
+// the next mouse drag event is fired:
+tool.minDistance = 20;
+
+// When the user clicks, create a new path and add
+// the current mouse position to it as its first segment:
+function onMouseDown(event) {
+	myPath = new Path();
+	myPath.strokeColor = 'black';
+	myPath.add(event.point);
+}
+
+// On each mouse drag event, draw an arc to the current
+// position of the mouse:
+function onMouseDrag(event) {
+	myPath.arcTo(event.point);
+}
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-7"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="closepath-member" class="member">
+<div id="closepath-link" class="member-link">
+<a name="closepath" href="#" onClick="return toggleMember('closepath', false);"><tt><b>closePath</b>()</tt></a>
+</div>
+<div id="closepath-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('closepath', false);"><tt><b>closePath</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('closepath', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Closes the path. When closed, Paper.js connects the first and last
+segments.</p>
+	
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Path.html#closed"><tt>path.closed</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Relative Drawing Commands</h3>
+
+<div id="moveby-point-member" class="member">
+<div id="moveby-point-link" class="member-link">
+<a name="moveby-point" href="#" onClick="return toggleMember('moveby-point', false);"><tt><b>moveBy</b>(point)</tt></a>
+</div>
+<div id="moveby-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('moveby-point', false);"><tt><b>moveBy</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveby-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>If called on a <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, a new <a href="../classes/Path.html"><tt>Path</tt></a> is created as a
+child and the point is added as its first segment relative to the
+position of the last segment of the current path.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="lineby-vector-member" class="member">
+<div id="lineby-vector-link" class="member-link">
+<a name="lineby-vector" href="#" onClick="return toggleMember('lineby-vector', false);"><tt><b>lineBy</b>(vector)</tt></a>
+</div>
+<div id="lineby-vector-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lineby-vector', false);"><tt><b>lineBy</b>(vector)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lineby-vector', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds a segment relative to the last segment point of the path.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>vector:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The vector which is added to the position of the
+       last segment of the path, to become the new segment.
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-8">
+var path = new Path();
+path.strokeColor = 'black';
+
+// Add a segment at {x: 50, y: 50}
+path.add(25, 25);
+
+// Add a segment relative to the last segment of the path.
+// 50 in x direction and 0 in y direction, becomes {x: 75, y: 25}
+path.lineBy(50, 0);
+
+// 0 in x direction and 50 in y direction, becomes {x: 75, y: 75}
+path.lineBy(0, 50);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Drawing a spiral using lineBy:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-9">
+var path = new Path();
+path.strokeColor = 'black';
+
+// Add the first segment at {x: 50, y: 50}
+path.add(view.center);
+
+// Loop 500 times:
+for (var i = 0; i < 500; i++) {
+	// Create a vector with an ever increasing length
+	// and an angle in increments of 45 degrees
+	var vector = new Point({
+	    angle: i * 45,
+	    length: i / 2
+	});
+	// Add the vector relatively to the last segment point:
+	path.lineBy(vector);
+}
+
+// Smooth the handles of the path:
+path.smooth();
+
+// Uncomment the following line and click on 'run' to see
+// the construction of the path:
+// path.selected = true;
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-9"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="curveby-throughVector-toVector-member" class="member">
+<div id="curveby-throughVector-toVector-link" class="member-link">
+<a name="curveby-throughVector-toVector" href="#" onClick="return toggleMember('curveby-throughVector-toVector', false);"><tt><b>curveBy</b>(throughVector, toVector[, parameter])</tt></a>
+</div>
+<div id="curveby-throughVector-toVector-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('curveby-throughVector-toVector', false);"><tt><b>curveBy</b>(throughVector, toVector[, parameter])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveby-throughVector-toVector', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>throughVector:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>toVector:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>parameter:</tt> 
+<tt>Number</tt>
+
+&mdash;&nbsp;optional, default: <tt>0.5</tt>
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="arcby-throughVector-toVector-member" class="member">
+<div id="arcby-throughVector-toVector-link" class="member-link">
+<a name="arcby-throughVector-toVector" href="#" onClick="return toggleMember('arcby-throughVector-toVector', false);"><tt><b>arcBy</b>(throughVector, toVector)</tt></a>
+</div>
+<div id="arcby-throughVector-toVector-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('arcby-throughVector-toVector', false);"><tt><b>arcBy</b>(throughVector, toVector)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcby-throughVector-toVector', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>throughVector:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>toVector:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+</div>
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="id-member" class="member">
+<div id="id-link" class="member-link">
+<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+<div id="id-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The unique id of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="name-member" class="member">
+<div id="name-link" class="member-link">
+<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+<div id="name-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The name of the item. If the item has a name, it can be accessed by name
+through its parent's children list.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-10">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and add path to it as a child:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="style-member" class="member">
+<div id="style-link" class="member-link">
+<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+<div id="style-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The path style of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-11">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.style = {
+	fillColor: 'blue',
+	strokeColor: 'red',
+	strokeWidth: 5
+};
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Copying the style of another item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-12">
+var path = new Path.Circle(new Point(50, 50), 30);
+path.fillColor = 'red';
+
+var path2 = new Path.Circle(new Point(180, 50), 20);
+// Copy the path style of path:
+path2.style = path.style;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Applying the same style object to multiple items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-13">
+var myStyle = {
+	fillColor: 'red',
+	strokeColor: 'blue',
+	strokeWidth: 4
+};
+
+var path = new Path.Circle(new Point(80, 50), 30);
+path.style = myStyle;
+
+var path2 = new Path.Circle(new Point(150, 50), 20);
+path2.style = myStyle;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="visible-member" class="member">
+<div id="visible-link" class="member-link">
+<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+<div id="visible-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
+item won't be drawn.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>true</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Hiding an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-14">
+var path = new Path.Circle(new Point(50, 50), 20);
+path.fillColor = 'red';
+
+// Hide the path:
+path.visible = false;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="blendmode-member" class="member">
+<div id="blendmode-link" class="member-link">
+<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+<div id="blendmode-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The blend mode of the item.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'normal'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
+'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
+'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
+'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's blend mode:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-15">
+// Create a white rectangle in the background
+// with the same dimensions as the view:
+var background = new Path.Rectangle(view.bounds);
+background.fillColor = 'white';
+
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.fillColor = 'blue';
+
+// Set the blend mode of circle2:
+circle2.blendMode = 'multiply';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="opacity-member" class="member">
+<div id="opacity-link" class="member-link">
+<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+<div id="opacity-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Making an item 50% transparent:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-16">
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.style = {
+	fillColor: 'blue',
+	strokeColor: 'green',
+	strokeWidth: 10
+};
+
+// Make circle2 50% transparent:
+circle2.opacity = 0.5;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="guide-member" class="member">
+<div id="guide-link" class="member-link">
+<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+<div id="guide-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item functions as a guide. When set to
+<tt>true</tt>, the item will be drawn at the end as a guide.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="selected-member" class="member">
+<div id="selected-link" class="member-link">
+<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+<div id="selected-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether an item is selected and will also return <tt>true</tt>
+if the item is partially selected (groups with some selected or partially
+selected paths).</p>
+<p>Paper.js draws the visual outlines of selected items on top of your
+project. This can be useful for debugging, as it allows you to see the
+construction of paths, position of path curves, individual segment points
+and bounding boxes of symbol and raster items.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Selecting an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-17">
+var path = new Path.Circle(new Size(80, 50), 35);
+path.selected = true; // Select the path
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="clipmask-member" class="member">
+<div id="clipmask-link" class="member-link">
+<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+<div id="clipmask-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item defines a clip mask. This can only be set on
+paths, compound paths, and text frame objects, and only if the item is
+already contained within a clipping group.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Position and Bounding Boxes</h3>
+
+<div id="position-member" class="member">
+<div id="position-link" class="member-link">
+<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+<div id="position-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item's position within the project. This is the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the position of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-18">
+// Create a circle at position { x: 10, y: 10 }
+var circle = new Path.Circle(new Point(10, 10), 10);
+circle.fillColor = 'red';
+
+// Move the circle to { x: 20, y: 20 }
+circle.position = new Point(20, 20);
+
+// Move the circle 100 points to the right and 50 points down
+circle.position += new Point(100, 50);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Changing the x coordinate of an item's position:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-19">
+// Create a circle at position { x: 20, y: 20 }
+var circle = new Path.Circle(new Point(20, 20), 10);
+circle.fillColor = 'red';
+
+// Move the circle 100 points to the right
+circle.position.x += 100;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="matrix-member" class="member">
+<div id="matrix-link" class="member-link">
+<a name="matrix" href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
+</div>
+<div id="matrix-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('matrix', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item's transformation matrix, defining position and dimensions in the
+document.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="bounds-member" class="member">
+<div id="bounds-link" class="member-link">
+<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+<div id="bounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item excluding stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokebounds-member" class="member">
+<div id="strokebounds-link" class="member-link">
+<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+<div id="strokebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="handlebounds-member" class="member">
+<div id="handlebounds-link" class="member-link">
+<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+<div id="handlebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including handles.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Project Hierarchy</h3>
+
+<div id="project-member" class="member">
+<div id="project-link" class="member-link">
+<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+<div id="project-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The project that this item belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Project.html"><tt>Project</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="layer-member" class="member">
+<div id="layer-link" class="member-link">
+<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+<div id="layer-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The layer that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Layer.html"><tt>Layer</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="parent-member" class="member">
+<div id="parent-link" class="member-link">
+<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+<div id="parent-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var path = new Path();
+
+// New items are placed in the active layer:
+console.log(path.parent == project.activeLayer); // true
+
+var group = new Group();
+group.addChild(path);
+
+// Now the parent of the path has become the group:
+console.log(path.parent == group); // true</pre>
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="children-member" class="member">
+<div id="children-link" class="member-link">
+<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+<div id="children-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The children items contained within this item. Items that define a
+<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
+<p><b>Please note:</b> The children array should not be modified directly
+using array functions. To remove single items from the children list, use
+<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
+<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
+<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Accessing items in the children array:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-20">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// Access the path through the group's children array:
+group.children[0].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Accessing children by name:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-21">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'orange';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Passing an array of items to item.children:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-22">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+var group = new Group();
+group.children = [path];
+
+// The path is the first child of the group:
+group.firstChild.fillColor = 'green';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="firstchild-member" class="member">
+<div id="firstchild-link" class="member-link">
+<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+<div id="firstchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The first item contained within this item. This is a shortcut for
+accessing <tt>item.children[0]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="lastchild-member" class="member">
+<div id="lastchild-link" class="member-link">
+<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+<div id="lastchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The last item contained within this item.This is a shortcut for
+accessing <tt>item.children[item.children.length - 1]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="nextsibling-member" class="member">
+<div id="nextsibling-link" class="member-link">
+<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+<div id="nextsibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The next item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="previoussibling-member" class="member">
+<div id="previoussibling-link" class="member-link">
+<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+<div id="previoussibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The previous item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="index-member" class="member">
+<div id="index-link" class="member-link">
+<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+<div id="index-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The index of this item within the list of its parent's children.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Stroke Style</h3>
+
+<div id="strokecolor-member" class="member">
+<div id="strokecolor-link" class="member-link">
+<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+<div id="strokecolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the stroke color of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-23">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to RGB red:
+circle.strokeColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokewidth-member" class="member">
+<div id="strokewidth-link" class="member-link">
+<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+<div id="strokewidth-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The width of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's stroke width:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-24">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to black:
+circle.strokeColor = 'black';
+
+// Set its stroke width to 10:
+circle.strokeWidth = 10;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokecap-member" class="member">
+<div id="strokecap-link" class="member-link">
+<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+<div id="strokecap-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
+have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'butt'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('round', 'square', 'butt')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke caps:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-25">
+var line = new Path(new Point(80, 50), new Point(420, 50));
+line.strokeColor = 'black';
+line.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+line.selected = true;
+
+// Set the stroke cap of the line to be round:
+line.strokeCap = 'round';
+
+// Copy the path and set its stroke cap to be square:
+var line2 = line.clone();
+line2.position.y += 50;
+line2.strokeCap = 'square';
+
+// Make another copy and set its stroke cap to be butt:
+var line2 = line.clone();
+line2.position.y += 100;
+line2.strokeCap = 'butt';
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-25"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokejoin-member" class="member">
+<div id="strokejoin-link" class="member-link">
+<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+<div id="strokejoin-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the corners of paths when they have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'miter'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt> ('miter', 'round', 'bevel')
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke joins:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-26">
+var path = new Path();
+path.add(new Point(80, 100));
+path.add(new Point(120, 40));
+path.add(new Point(160, 100));
+path.strokeColor = 'black';
+path.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+path.selected = true;
+
+var path2 = path.clone();
+path2.position.x += path2.bounds.width * 1.5;
+path2.strokeJoin = 'round';
+
+var path3 = path2.clone();
+path3.position.x += path3.bounds.width * 1.5;
+path3.strokeJoin = 'bevel';
+</script>
+<div class="canvas"><canvas width="516" height="120" id="canvas-26"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="dashoffset-member" class="member">
+<div id="dashoffset-link" class="member-link">
+<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+<div id="dashoffset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The dash offset of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>0</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="dasharray-member" class="member">
+<div id="dasharray-link" class="member-link">
+<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+<div id="dasharray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>[]</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Array</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-27">
+var path = new Path.Circle(new Point(80, 50), 40);
+path.strokeWidth = 2;
+path.strokeColor = 'black';
+
+// Set the dashed stroke to [10pt dash, 4pt gap]:
+path.dashArray = [10, 4];
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="miterlimit-member" class="member">
+<div id="miterlimit-link" class="member-link">
+<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+<div id="miterlimit-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The miter limit of the stroke.</p>
+<p>When two line segments meet at a sharp angle and miter joins have been
+specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
+extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
+miterLimit imposes a limit on the ratio of the miter length to the
+<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>10</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Fill Style</h3>
+
+<div id="fillcolor-member" class="member">
+<div id="fillcolor-link" class="member-link">
+<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+<div id="fillcolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The fill color of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the fill color of a path to red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-28">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set the fill color of the circle to RGB red:
+circle.fillColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Event Handlers</h3>
+
+<div id="onframe-member" class="member">
+<div id="onframe-link" class="member-link">
+<a name="onframe" href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
+</div>
+<div id="onframe-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onframe', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Item level handler function to be called on each frame of an animation.</p>
+<p>The function receives an event object which contains information about
+the frame event:</p>
+<p><b><tt>event.count</tt></b>: the number of times the frame event was
+fired.</p>
+<p><b><tt>event.time</tt></b>: the total amount of time passed since the
+first frame event in seconds.</p>
+<p><b><tt>event.delta</tt></b>: the time passed in seconds since the last
+frame event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/View.html#onframe"><tt>view.onFrame</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Creating an animation:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-29">
+// Create a rectangle shaped path with its top left point at:
+// {x: 50, y: 25} and a size of {width: 50, height: 50}
+var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
+path.fillColor = 'black';
+
+path.onFrame = function(event) {
+	// Every frame, rotate the path by 3 degrees:
+	this.rotate(3);
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="onmousedown-member" class="member">
+<div id="onmousedown-link" class="member-link">
+<a name="onmousedown" href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
+</div>
+<div id="onmousedown-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousedown', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The function to be called when the mouse button is pushed down on the
+item. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains
+information about the mouse event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Press the mouse button down on the circle shaped path, to make it red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-30">
+// Create a circle shaped path at the center of the view:
+var path = new Path.Circle(view.center, 25);
+path.fillColor = 'black';
+
+// When the mouse is pressed on the item,
+// set its fill color to red:
+path.onMouseDown = function(event) {
+	this.fillColor = 'red';
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-30"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Press the mouse on the circle shaped paths to remove them:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-31">
+// Loop 30 times:
+for (var i = 0; i < 30; i++) {
+	// Create a circle shaped path at a random position
+	// in the view:
+	var position = Point.random() * view.size;
+	var path = new Path.Circle(position, 25);
+	path.fillColor = 'black';
+	path.strokeColor = 'white';
+	// When the mouse is pressed on the item, remove it:
+	path.onMouseDown = function(event) {
+		this.remove();
+	}
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-31"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="onmouseup-member" class="member">
+<div id="onmouseup-link" class="member-link">
+<a name="onmouseup" href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
+</div>
+<div id="onmouseup-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmouseup', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The function to be called when the mouse button is released over the item.</p>
+<p>The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains
+information about the mouse event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Release the mouse button over the circle shaped path, to make it red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-32">
+// Create a circle shaped path at the center of the view:
+var path = new Path.Circle(view.center, 25);
+path.fillColor = 'black';
+
+// When the mouse is released over the item,
+// set its fill color to red:
+path.onMouseUp = function(event) {
+	this.fillColor = 'red';
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-32"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="onclick-member" class="member">
+<div id="onclick-link" class="member-link">
+<a name="onclick" href="#" onClick="return toggleMember('onclick', false);"><tt><b>onClick</b></tt></a>
+</div>
+<div id="onclick-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onclick', false);"><tt><b>onClick</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onclick', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The function to be called when the mouse clicks on the item. The function
+receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information about the
+mouse event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Click on the circle shaped path, to make it red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-33">
+// Create a circle shaped path at the center of the view:
+var path = new Path.Circle(view.center, 25);
+path.fillColor = 'black';
+
+// When the mouse is clicked on the item,
+// set its fill color to red:
+path.onClick = function(event) {
+	this.fillColor = 'red';
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Click on the circle shaped paths to remove them:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-34">
+// Loop 30 times:
+for (var i = 0; i < 30; i++) {
+	// Create a circle shaped path at a random position
+	// in the view:
+	var position = Point.random() * view.size;
+	var path = new Path.Circle(position, 25);
+	path.fillColor = 'black';
+	path.strokeColor = 'white';
+	// When the mouse is clicked on the item, remove it:
+	path.onClick = function(event) {
+		this.remove();
+	}
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-34"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="ondoubleclick-member" class="member">
+<div id="ondoubleclick-link" class="member-link">
+<a name="ondoubleclick" href="#" onClick="return toggleMember('ondoubleclick', false);"><tt><b>onDoubleClick</b></tt></a>
+</div>
+<div id="ondoubleclick-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('ondoubleclick', false);"><tt><b>onDoubleClick</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ondoubleclick', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The function to be called when the mouse double clicks on the item. The
+function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains information
+about the mouse event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Double click on the circle shaped path, to make it red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-35">
+// Create a circle shaped path at the center of the view:
+var path = new Path.Circle(view.center, 25);
+path.fillColor = 'black';
+
+// When the mouse is double clicked on the item,
+// set its fill color to red:
+path.onDoubleClick = function(event) {
+	this.fillColor = 'red';
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Double click on the circle shaped paths to remove them:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-36">
+// Loop 30 times:
+for (var i = 0; i < 30; i++) {
+	// Create a circle shaped path at a random position
+	// in the view:
+	var position = Point.random() * view.size;
+	var path = new Path.Circle(position, 25);
+	path.fillColor = 'black';
+	path.strokeColor = 'white';
+	// When the mouse is clicked on the item, remove it:
+	path.onDoubleClick = function(event) {
+		this.remove();
+	}
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="onmousemove-member" class="member">
+<div id="onmousemove-link" class="member-link">
+<a name="onmousemove" href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
+</div>
+<div id="onmousemove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousemove', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The function to be called repeatedly when the mouse moves on top of the
+item. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains
+information about the mouse event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Move over the circle shaped path, to change its opacity:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-37">
+// Create a circle shaped path at the center of the view:
+var path = new Path.Circle(view.center, 25);
+path.fillColor = 'black';
+
+// When the mouse moves on top of the item, set its opacity
+// to a random value between 0 and 1:
+path.onMouseMove = function(event) {
+	this.opacity = Math.random();
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-37"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="onmouseenter-member" class="member">
+<div id="onmouseenter-link" class="member-link">
+<a name="onmouseenter" href="#" onClick="return toggleMember('onmouseenter', false);"><tt><b>onMouseEnter</b></tt></a>
+</div>
+<div id="onmouseenter-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onmouseenter', false);"><tt><b>onMouseEnter</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmouseenter', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The function to be called when the mouse moves over the item. This
+function will only be called again, once the mouse moved outside of the
+item first. The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which
+contains information about the mouse event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set back to black.
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-38">
+// Create a circle shaped path at the center of the view:
+var path = new Path.Circle(view.center, 25);
+path.fillColor = 'black';
+
+// When the mouse enters the item, set its fill color to red:
+path.onMouseEnter = function(event) {
+	this.fillColor = 'red';
+}
+// When the mouse leaves the item, set its fill color to black:
+path.onMouseLeave = function(event) {
+	this.fillColor = 'black';
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-38"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; When you click the mouse, you create new circle shaped items. When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set back to black.
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-39">
+function enter(event) {
+	this.fillColor = 'red';
+}
+
+function leave(event) {
+	this.fillColor = 'black';
+}
+
+// When the mouse is pressed:
+function onMouseDown(event) {
+	// Create a circle shaped path at the position of the mouse:
+	var path = new Path.Circle(event.point, 25);
+	path.fillColor = 'black';
+
+	// When the mouse enters the item, set its fill color to red:
+	path.onMouseEnter = enter;
+
+	// When the mouse leaves the item, set its fill color to black:
+	path.onMouseLeave = leave;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-39"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="onmouseleave-member" class="member">
+<div id="onmouseleave-link" class="member-link">
+<a name="onmouseleave" href="#" onClick="return toggleMember('onmouseleave', false);"><tt><b>onMouseLeave</b></tt></a>
+</div>
+<div id="onmouseleave-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onmouseleave', false);"><tt><b>onMouseLeave</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmouseleave', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The function to be called when the mouse moves out of the item.</p>
+<p>The function receives a <a href="../classes/MouseEvent.html"><tt>MouseEvent</tt></a> object which contains
+information about the mouse event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Move the mouse over the circle shaped path and then move it out of it again to set its fill color to red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-40">
+// Create a circle shaped path at the center of the view:
+var path = new Path.Circle(view.center, 25);
+path.fillColor = 'black';
+
+// When the mouse leaves the item, set its fill color to red:
+path.onMouseLeave = function(event) {
+	this.fillColor = 'red';
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-40"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+<!-- =========================== inherited methods ========================= -->
+<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Clones the item within the same project and places the copy above the
+item.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Cloning items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-41">
+var circle = new Path.Circle(new Point(50, 50), 10);
+circle.fillColor = 'red';
+
+// Make 20 copies of the circle:
+for (var i = 0; i < 20; i++) {
+	var copy = circle.clone();
+
+	// Distribute the copies horizontally, so we can see them:
+	copy.position.x += i * copy.bounds.width;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-41"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="copyto-item-member" class="member">
+<div id="copyto-item-link" class="member-link">
+<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+<div id="copyto-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>When passed a project, copies the item to the project,
+or duplicates it within the same project. When passed an item,
+copies the item into the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
+&mdash;&nbsp;the item or project to
+copy the item to
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rasterize-member" class="member">
+<div id="rasterize-link" class="member-link">
+<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+<div id="rasterize-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rasterizes the item into a newly created Raster object. The item itself
+is not removed after rasterization.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>resolution:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the resolution of the raster in dpi
+&mdash;&nbsp;optional, default: <tt>72</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Rasterizing an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-42">
+var circle = new Path.Circle(new Point(80, 50), 5);
+circle.fillColor = 'red';
+
+// Create a rasterized version of the path:
+var raster = circle.rasterize();
+
+// Move it 100pt to the right:
+raster.position.x += 100;
+
+// Scale the path and the raster by 300%, so we can compare them:
+circle.scale(5);
+raster.scale(5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-42"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="hittest-point-member" class="member">
+<div id="hittest-point-link" class="member-link">
+<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+<div id="hittest-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Perform a hit test on the item (and its children, if it is a
+<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
+<p>The optional options object allows you to control the specifics of the
+hit test and may contain a combination of the following values:</p>
+<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
+points.</p>
+<p><b>options.type:</b> Only hit test again a certain item
+type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
+<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
+<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
+items, taking into account stroke width.</p>
+<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
+<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
+<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
+(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
+<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
+last segment points of open path items.</p>
+<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
+side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
+(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
+<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
+<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The point where the hit test should be performed
+
+</li>
+
+<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+
+&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
+tolerance: 2 }</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
+information about what exactly was hit or <tt>null</tt> if nothing was
+hit.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Operations</h3>
+
+<div id="addchild-item-member" class="member">
+<div id="addchild-item-link" class="member-link">
+<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+<div id="addchild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified item as a child of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be added as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchild-index-item-member" class="member">
+<div id="insertchild-index-item-link" class="member-link">
+<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+<div id="insertchild-index-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="addchildren-items-member" class="member">
+<div id="addchildren-items-link" class="member-link">
+<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+<div id="addchildren-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified items as children of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>items:</tt> 
+<tt>item</tt>
+&mdash;&nbsp;The items to be added as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchildren-index-items-member" class="member">
+<div id="insertchildren-index-items-link" class="member-link">
+<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+<div id="insertchildren-index-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified items as children of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>items:</tt> 
+Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+&mdash;&nbsp;The items to be appended as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertabove-item-member" class="member">
+<div id="insertabove-item-link" class="member-link">
+<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+<div id="insertabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertbelow-item-member" class="member">
+<div id="insertbelow-item-link" class="member-link">
+<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+<div id="insertbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendtop-item-member" class="member">
+<div id="appendtop-item-link" class="member-link">
+<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+<div id="appendtop-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it above all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendbottom-item-member" class="member">
+<div id="appendbottom-item-link" class="member-link">
+<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+<div id="appendbottom-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it below all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="moveabove-item-member" class="member">
+<div id="moveabove-item-link" class="member-link">
+<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+<div id="moveabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="movebelow-item-member" class="member">
+<div id="movebelow-item-link" class="member-link">
+<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+<div id="movebelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves the item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item below which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="remove-member" class="member">
+<div id="remove-link" class="member-link">
+<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+<div id="remove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item from the project. If the item has children, they are also
+removed.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-member" class="member">
+<div id="removechildren-link" class="member-link">
+<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+<div id="removechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-from-member" class="member">
+<div id="removechildren-from-link" class="member-link">
+<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+<div id="removechildren-from-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the children from the specified <tt>from</tt> index to the
+<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>from:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the beginning index, inclusive
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the ending index, exclusive
+&mdash;&nbsp;optional, default: <tt>children.length</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="reversechildren-member" class="member">
+<div id="reversechildren-link" class="member-link">
+<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+<div id="reversechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Reverses the order of the item's children</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Tests</h3>
+
+<div id="haschildren-member" class="member">
+<div id="haschildren-link" class="member-link">
+<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+<div id="haschildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item contains any children items.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isabove-item-member" class="member">
+<div id="isabove-item-link" class="member-link">
+<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+<div id="isabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if this item is above the specified item in the stacking order
+of the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isbelow-item-member" class="member">
+<div id="isbelow-item-link" class="member-link">
+<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+<div id="isbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is below the specified item in the stacking order of
+the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isparent-item-member" class="member">
+<div id="isparent-item-link" class="member-link">
+<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+<div id="isparent-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is the parent of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="ischild-item-member" class="member">
+<div id="ischild-item-link" class="member-link">
+<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+<div id="ischild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is a child of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isdescendant-item-member" class="member">
+<div id="isdescendant-item-link" class="member-link">
+<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+<div id="isdescendant-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is contained within the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isancestor-item-member" class="member">
+<div id="isancestor-item-link" class="member-link">
+<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+<div id="isancestor-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is an ancestor of the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
+item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isgroupedwith-item-member" class="member">
+<div id="isgroupedwith-item-link" class="member-link">
+<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+<div id="isgroupedwith-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the item is grouped with the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Transform Functions</h3>
+
+<div id="scale-scale-apply-member" class="member">
+<div id="scale-scale-apply-link" class="member-link">
+<a name="scale-scale-apply" href="#" onClick="return toggleMember('scale-scale-apply', false);"><tt><b>scale</b>(scale[, center, apply])</tt></a>
+</div>
+<div id="scale-scale-apply-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-scale-apply', false);"><tt><b>scale</b>(scale[, center, apply])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale-apply', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given value from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>scale:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+<li>
+<tt>apply:</tt> 
+<tt>Boolean</tt>
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item from its center point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-43">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path by 150% from its center point
+circle.scale(1.5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-43"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Scaling an item from a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-44">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path 150% from its bottom left corner
+circle.scale(1.5, circle.bounds.bottomLeft);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-44"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="scale-hor-ver-apply-member" class="member">
+<div id="scale-hor-ver-apply-link" class="member-link">
+<a name="scale-hor-ver-apply" href="#" onClick="return toggleMember('scale-hor-ver-apply', false);"><tt><b>scale</b>(hor, ver[, center, apply])</tt></a>
+</div>
+<div id="scale-hor-ver-apply-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-hor-ver-apply', false);"><tt><b>scale</b>(hor, ver[, center, apply])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver-apply', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given values from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal scale factor
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+<li>
+<tt>apply:</tt> 
+<tt>Boolean</tt>
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item horizontally by 300%:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-45">
+// Create a circle shaped path at { x: 100, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(100, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path horizontally by 300%
+circle.scale(3, 1);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-45"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="translate-delta-apply-member" class="member">
+<div id="translate-delta-apply-link" class="member-link">
+<a name="translate-delta-apply" href="#" onClick="return toggleMember('translate-delta-apply', false);"><tt><b>translate</b>(delta, apply)</tt></a>
+</div>
+<div id="translate-delta-apply-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('translate-delta-apply', false);"><tt><b>translate</b>(delta, apply)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta-apply', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Translates (moves) the item by the given offset point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>delta:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the offset to translate the item by
+
+</li>
+
+<li>
+<tt>apply:</tt> 
+<tt>Boolean</tt>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rotate-angle-apply-member" class="member">
+<div id="rotate-angle-apply-link" class="member-link">
+<a name="rotate-angle-apply" href="#" onClick="return toggleMember('rotate-angle-apply', false);"><tt><b>rotate</b>(angle[, center, apply])</tt></a>
+</div>
+<div id="rotate-angle-apply-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rotate-angle-apply', false);"><tt><b>rotate</b>(angle[, center, apply])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle-apply', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rotates the item by a given angle around the given point.</p>
+<p>Angles are oriented clockwise and measured in degrees.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>angle:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the rotation angle
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+<li>
+<tt>apply:</tt> 
+<tt>Boolean</tt>
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Rotating an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-46">
+// Create a rectangle shaped path with its top left
+// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
+var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
+path.fillColor = 'black';
+
+// Rotate the path by 30 degrees:
+path.rotate(30);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-46"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Rotating an item around a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-47">
+// Create a rectangle shaped path with its top left
+// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
+var topLeft = new Point(175, 50);
+var size = new Size(100, 100);
+var path = new Path.Rectangle(topLeft, size);
+path.fillColor = 'black';
+
+// Draw a circle shaped path in the center of the view,
+// to show the rotation point:
+var circle = new Path.Circle(view.center, 5);
+circle.fillColor = 'white';
+
+// Each frame rotate the path 3 degrees around the center point
+// of the view:
+function onFrame(event) {
+	path.rotate(3, view.center);
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-47"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="shear-point-apply-member" class="member">
+<div id="shear-point-apply-link" class="member-link">
+<a name="shear-point-apply" href="#" onClick="return toggleMember('shear-point-apply', false);"><tt><b>shear</b>(point[, center, apply])</tt></a>
+</div>
+<div id="shear-point-apply-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-point-apply', false);"><tt><b>shear</b>(point[, center, apply])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point-apply', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given value from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+<li>
+<tt>apply:</tt> 
+<tt>Boolean</tt>
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="shear-hor-ver-apply-member" class="member">
+<div id="shear-hor-ver-apply-link" class="member-link">
+<a name="shear-hor-ver-apply" href="#" onClick="return toggleMember('shear-hor-ver-apply', false);"><tt><b>shear</b>(hor, ver[, center, apply])</tt></a>
+</div>
+<div id="shear-hor-ver-apply-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-hor-ver-apply', false);"><tt><b>shear</b>(hor, ver[, center, apply])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver-apply', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given values from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal shear factor.
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical shear factor.
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+<li>
+<tt>apply:</tt> 
+<tt>Boolean</tt>
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="transform-matrix-apply-member" class="member">
+<div id="transform-matrix-apply-link" class="member-link">
+<a name="transform-matrix-apply" href="#" onClick="return toggleMember('transform-matrix-apply', false);"><tt><b>transform</b>(matrix, apply)</tt></a>
+</div>
+<div id="transform-matrix-apply-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('transform-matrix-apply', false);"><tt><b>transform</b>(matrix, apply)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-apply', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>matrix:</tt> 
+<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+&mdash;&nbsp;the matrix by which the item shall be transformed.
+
+</li>
+
+<li>
+<tt>apply:</tt> 
+<tt>Boolean</tt>
+&mdash;&nbsp;controls wether the transformation should just be
+concatenated to <a href="../classes/Item.html#matrix" onclick="return toggleMember('matrix', true);"><tt>matrix</tt></a> (<tt>false</tt>) or if it should directly
+be applied to item's content and its children.
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="fitbounds-rectangle-member" class="member">
+<div id="fitbounds-rectangle-link" class="member-link">
+<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+<div id="fitbounds-rectangle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
+rectangle, without changing its aspect ratio.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rectangle:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+
+
+</li>
+
+<li>
+<tt>fill:</tt> 
+<tt>Boolean</tt>
+
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-48">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-48"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-49">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds, true);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-49"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-50">
+var path = new Path.Circle(new Point(80, 50), 30);
+path.fillColor = 'red';
+
+// Fit the path to the bounding rectangle of the view:
+path.fitBounds(view.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-50"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<h3>Event Handling</h3>
+
+<div id="attach-type-function-member" class="member">
+<div id="attach-type-function-link" class="member-link">
+<a name="attach-type-function" href="#" onClick="return toggleMember('attach-type-function', false);"><tt><b>attach</b>(type, function)</tt></a>
+</div>
+<div id="attach-type-function-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('attach-type-function', false);"><tt><b>attach</b>(type, function)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('attach-type-function', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Attach an event handler to the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>type:</tt> 
+<tt>String('mousedown'|'mouseup'|'mousedrag'|'click'|'doubleclick'|'mousemove'|'mouseenter'|'mouseleave')</tt>
+&mdash;&nbsp;the event
+type
+
+</li>
+
+<li>
+<tt>function:</tt> 
+<tt>Function</tt>
+&mdash;&nbsp;The function to be called when the event
+occurs
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Change the fill color of the path to red when the mouse enters its shape and back to black again, when it leaves its shape.
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-51">
+// Create a circle shaped path at the center of the view:
+var path = new Path.Circle(view.center, 25);
+path.fillColor = 'black';
+
+// When the mouse enters the item, set its fill color to red:
+path.attach('mouseenter', function() {
+	this.fillColor = 'red';
+});
+
+// When the mouse leaves the item, set its fill color to black:
+path.attach('mouseleave', function() {
+	this.fillColor = 'black';
+});
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-51"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="attach-param-member" class="member">
+<div id="attach-param-link" class="member-link">
+<a name="attach-param" href="#" onClick="return toggleMember('attach-param', false);"><tt><b>attach</b>(param)</tt></a>
+</div>
+<div id="attach-param-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('attach-param', false);"><tt><b>attach</b>(param)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('attach-param', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Attach one or more event handlers to the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>param:</tt> 
+<tt>Object</tt>
+&mdash;&nbsp;An object literal containing one or more of the
+following properties: <tt>mousedown, mouseup, mousedrag, click,
+doubleclick, mousemove, mouseenter, mouseleave</tt>.
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Change the fill color of the path to red when the mouse enters its shape and back to black again, when it leaves its shape.
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-52">
+// Create a circle shaped path at the center of the view:
+var path = new Path.Circle(view.center, 25);
+path.fillColor = 'black';
+
+// When the mouse enters the item, set its fill color to red:
+path.attach({
+	mouseenter: function(event) {
+		this.fillColor = 'red';
+	},
+	mouseleave: function(event) {
+		this.fillColor = 'black';
+	}
+});
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-52"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; When you click the mouse, you create new circle shaped items. When you move the mouse over the item, its fill color is set to red. When you move the mouse outside again, its fill color is set black.
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-53">
+var pathHandlers = {
+	mouseenter: function(event) {
+		this.fillColor = 'red';
+	},
+	mouseleave: function(event) {
+		this.fillColor = 'black';
+	}
+}
+
+// When the mouse is pressed:
+function onMouseDown(event) {
+	// Create a circle shaped path at the position of the mouse:
+	var path = new Path.Circle(event.point, 25);
+	path.fillColor = 'black';
+
+	// Attach the handers inside the object literal to the path:
+	path.attach(pathHandlers);
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-53"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="detach-type-function-member" class="member">
+<div id="detach-type-function-link" class="member-link">
+<a name="detach-type-function" href="#" onClick="return toggleMember('detach-type-function', false);"><tt><b>detach</b>(type, function)</tt></a>
+</div>
+<div id="detach-type-function-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('detach-type-function', false);"><tt><b>detach</b>(type, function)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('detach-type-function', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Detach an event handler from the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>type:</tt> 
+<tt>String('mousedown'|'mouseup'|'mousedrag'|'click'|'doubleclick'|'mousemove'|'mouseenter'|'mouseleave')</tt>
+&mdash;&nbsp;the event
+type
+
+</li>
+
+<li>
+<tt>function:</tt> 
+<tt>Function</tt>
+&mdash;&nbsp;The function to be detached
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="detach-param-member" class="member">
+<div id="detach-param-link" class="member-link">
+<a name="detach-param" href="#" onClick="return toggleMember('detach-param', false);"><tt><b>detach</b>(param)</tt></a>
+</div>
+<div id="detach-param-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('detach-param', false);"><tt><b>detach</b>(param)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('detach-param', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Detach one or more event handlers to the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>param:</tt> 
+<tt>Object</tt>
+&mdash;&nbsp;An object literal containing one or more of the
+following properties: <tt>mousedown, mouseup, mousedrag, click,
+doubleclick, mousemove, mouseenter, mouseleave</tt>
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="fire-type-event-member" class="member">
+<div id="fire-type-event-link" class="member-link">
+<a name="fire-type-event" href="#" onClick="return toggleMember('fire-type-event', false);"><tt><b>fire</b>(type, event)</tt></a>
+</div>
+<div id="fire-type-event-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fire-type-event', false);"><tt><b>fire</b>(type, event)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fire-type-event', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Fire an event on the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>type:</tt> 
+<tt>String('mousedown'|'mouseup'|'mousedrag'|'click'|'doubleclick'|'mousemove'|'mouseenter'|'mouseleave')</tt>
+&mdash;&nbsp;the event
+type
+
+</li>
+
+<li>
+<tt>event:</tt> 
+<tt>Object</tt>
+&mdash;&nbsp;An object literal containing properties describing
+the event.
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="responds-type-member" class="member">
+<div id="responds-type-link" class="member-link">
+<a name="responds-type" href="#" onClick="return toggleMember('responds-type', false);"><tt><b>responds</b>(type)</tt></a>
+</div>
+<div id="responds-type-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('responds-type', false);"><tt><b>responds</b>(type)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('responds-type', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Check if the item has one or more event handlers of the specified type.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>type:</tt> 
+<tt>String('mousedown'|'mouseup'|'mousedrag'|'click'|'doubleclick'|'mousemove'|'mouseenter'|'mouseleave')</tt>
+&mdash;&nbsp;the event
+type
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item has one or more event handlers of
+the specified type, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Remove On Event</h3>
+
+<div id="removeon-object-member" class="member">
+<div id="removeon-object-link" class="member-link">
+<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+<div id="removeon-object-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the events specified in the passed object literal
+occur.</p>
+<p>The object literal can contain the following values:</p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
+fired: <tt>object.move = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
+fired: <tt>object.drag = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
+fired: <tt>object.down = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
+fired: <tt>object.up = true</tt></p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>object:</tt> 
+<tt>Object</tt>
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-54">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path on the next onMouseDrag or onMouseDown event:
+	path.removeOn({
+		drag: true,
+		down: true
+	});
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-54"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonmove-member" class="member">
+<div id="removeonmove-link" class="member-link">
+<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+<div id="removeonmove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Move your mouse below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-55">
+function onMouseMove(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next move event, automatically remove the path:
+	path.removeOnMove();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-55"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondown-member" class="member">
+<div id="removeondown-link" class="member-link">
+<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+<div id="removeondown-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-56">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, next time the mouse is pressed:
+	path.removeOnDown();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-56"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondrag-member" class="member">
+<div id="removeondrag-link" class="member-link">
+<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+<div id="removeondrag-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-57">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next drag event, automatically remove the path:
+	path.removeOnDrag();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-57"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonup-member" class="member">
+<div id="removeonup-link" class="member-link">
+<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+<div id="removeonup-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-58">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, when the mouse is released:
+	path.removeOnUp();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-58"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+</div>
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Curve.html b/dist/docs/classes/Curve.html
new file mode 100644
index 00000000..97d51079
--- /dev/null
+++ b/dist/docs/classes/Curve.html
@@ -0,0 +1,878 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Curve</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Curve</h1>
+
+<p>The Curve object represents the parts of a path that are connected by
+two following <a href="../classes/Segment.html"><tt>Segment</tt></a> objects. The curves of a path can be accessed
+through its <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array.</p>
+<p>While a segment describe the anchor point and its incoming and outgoing
+handles, a Curve object describes the curve passing between two such
+segments. Curves and segments represent two different ways of looking at the
+same thing, but focusing on different aspects. Curves for example offer many
+convenient ways to work with parts of the path, finding lengths, positions or
+tangents at given offsets.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7-member" class="member">
+<div id="curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7-link" class="member-link">
+<a name="curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7" href="#" onClick="return toggleMember('curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7', false);"><tt><b>Curve</b>(segment1, segment2, arg2, arg3, arg4, arg5, arg6, arg7)</tt></a>
+</div>
+<div id="curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7', false);"><tt><b>Curve</b>(segment1, segment2, arg2, arg3, arg4, arg5, arg6, arg7)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curve-segment1-segment2-arg2-arg3-arg4-arg5-arg6-arg7', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a new curve object.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>segment1:</tt> 
+<a href="../classes/Segment.html"><tt>Segment</tt></a>
+
+
+</li>
+
+<li>
+<tt>segment2:</tt> 
+<a href="../classes/Segment.html"><tt>Segment</tt></a>
+
+
+</li>
+
+<li>
+<tt>arg2:</tt> 
+
+
+
+</li>
+
+<li>
+<tt>arg3:</tt> 
+
+
+
+</li>
+
+<li>
+<tt>arg4:</tt> 
+
+
+
+</li>
+
+<li>
+<tt>arg5:</tt> 
+
+
+
+</li>
+
+<li>
+<tt>arg6:</tt> 
+
+
+
+</li>
+
+<li>
+<tt>arg7:</tt> 
+
+
+
+</li>
+
+</ul>
+
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="point1-member" class="member">
+<div id="point1-link" class="member-link">
+<a name="point1" href="#" onClick="return toggleMember('point1', false);"><tt><b>point1</b></tt></a>
+</div>
+<div id="point1-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('point1', false);"><tt><b>point1</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point1', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The first anchor point of the curve.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="point2-member" class="member">
+<div id="point2-link" class="member-link">
+<a name="point2" href="#" onClick="return toggleMember('point2', false);"><tt><b>point2</b></tt></a>
+</div>
+<div id="point2-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('point2', false);"><tt><b>point2</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point2', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The second anchor point of the curve.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="handle1-member" class="member">
+<div id="handle1-link" class="member-link">
+<a name="handle1" href="#" onClick="return toggleMember('handle1', false);"><tt><b>handle1</b></tt></a>
+</div>
+<div id="handle1-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('handle1', false);"><tt><b>handle1</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handle1', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The handle point that describes the tangent in the first anchor point.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="handle2-member" class="member">
+<div id="handle2-link" class="member-link">
+<a name="handle2" href="#" onClick="return toggleMember('handle2', false);"><tt><b>handle2</b></tt></a>
+</div>
+<div id="handle2-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('handle2', false);"><tt><b>handle2</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handle2', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The handle point that describes the tangent in the second anchor point.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="segment1-member" class="member">
+<div id="segment1-link" class="member-link">
+<a name="segment1" href="#" onClick="return toggleMember('segment1', false);"><tt><b>segment1</b></tt></a>
+</div>
+<div id="segment1-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('segment1', false);"><tt><b>segment1</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment1', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The first segment of the curve.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Segment.html"><tt>Segment</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="segment2-member" class="member">
+<div id="segment2-link" class="member-link">
+<a name="segment2" href="#" onClick="return toggleMember('segment2', false);"><tt><b>segment2</b></tt></a>
+</div>
+<div id="segment2-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('segment2', false);"><tt><b>segment2</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment2', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The second segment of the curve.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Segment.html"><tt>Segment</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="path-member" class="member">
+<div id="path-link" class="member-link">
+<a name="path" href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
+</div>
+<div id="path-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The path that the curve belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Path.html"><tt>Path</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="index-member" class="member">
+<div id="index-link" class="member-link">
+<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+<div id="index-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The index of the curve in the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="next-member" class="member">
+<div id="next-link" class="member-link">
+<a name="next" href="#" onClick="return toggleMember('next', false);"><tt><b>next</b></tt></a>
+</div>
+<div id="next-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('next', false);"><tt><b>next</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('next', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The next curve in the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array that the curve
+belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Curve.html"><tt>Curve</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="previous-member" class="member">
+<div id="previous-link" class="member-link">
+<a name="previous" href="#" onClick="return toggleMember('previous', false);"><tt><b>previous</b></tt></a>
+</div>
+<div id="previous-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('previous', false);"><tt><b>previous</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previous', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The previous curve in the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array that the curve
+belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Curve.html"><tt>Curve</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="selected-member" class="member">
+<div id="selected-link" class="member-link">
+<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+<div id="selected-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the handles of the curve are selected.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="length-member" class="member">
+<div id="length-link" class="member-link">
+<a name="length" href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
+</div>
+<div id="length-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('length', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The approximated length of the curve in points.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="islinear-member" class="member">
+<div id="islinear-link" class="member-link">
+<a name="islinear" href="#" onClick="return toggleMember('islinear', false);"><tt><b>isLinear</b>()</tt></a>
+</div>
+<div id="islinear-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('islinear', false);"><tt><b>isLinear</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('islinear', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if this curve is linear, meaning it does not define any curve
+handle.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the curve is linear, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="getparameterat-offset-member" class="member">
+<div id="getparameterat-offset-link" class="member-link">
+<a name="getparameterat-offset" href="#" onClick="return toggleMember('getparameterat-offset', false);"><tt><b>getParameterAt</b>(offset[, start])</tt></a>
+</div>
+<div id="getparameterat-offset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getparameterat-offset', false);"><tt><b>getParameterAt</b>(offset[, start])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getparameterat-offset', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>offset:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>start:</tt> 
+<tt>Number</tt>
+
+&mdash;&nbsp;optional
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Number</tt></tt>
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="getpoint-parameter-member" class="member">
+<div id="getpoint-parameter-link" class="member-link">
+<a name="getpoint-parameter" href="#" onClick="return toggleMember('getpoint-parameter', false);"><tt><b>getPoint</b>(parameter)</tt></a>
+</div>
+<div id="getpoint-parameter-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getpoint-parameter', false);"><tt><b>getPoint</b>(parameter)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getpoint-parameter', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns the point on the curve at the specified position.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>parameter:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the position at which to find the point as
+       a value between <tt>0</tt> and <tt>1</tt>.
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="gettangent-parameter-member" class="member">
+<div id="gettangent-parameter-link" class="member-link">
+<a name="gettangent-parameter" href="#" onClick="return toggleMember('gettangent-parameter', false);"><tt><b>getTangent</b>(parameter)</tt></a>
+</div>
+<div id="gettangent-parameter-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('gettangent-parameter', false);"><tt><b>getTangent</b>(parameter)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gettangent-parameter', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns the tangent point on the curve at the specified position.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>parameter:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the position at which to find the tangent
+       point as a value between <tt>0</tt> and <tt>1</tt>.
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="getnormal-parameter-member" class="member">
+<div id="getnormal-parameter-link" class="member-link">
+<a name="getnormal-parameter" href="#" onClick="return toggleMember('getnormal-parameter', false);"><tt><b>getNormal</b>(parameter)</tt></a>
+</div>
+<div id="getnormal-parameter-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getnormal-parameter', false);"><tt><b>getNormal</b>(parameter)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getnormal-parameter', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns the normal point on the curve at the specified position.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>parameter:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the position at which to find the normal
+       point as a value between <tt>0</tt> and <tt>1</tt>.
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="getparameter-point-member" class="member">
+<div id="getparameter-point-link" class="member-link">
+<a name="getparameter-point" href="#" onClick="return toggleMember('getparameter-point', false);"><tt><b>getParameter</b>(point)</tt></a>
+</div>
+<div id="getparameter-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getparameter-point', false);"><tt><b>getParameter</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getparameter-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Number</tt></tt>
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="reverse-member" class="member">
+<div id="reverse-link" class="member-link">
+<a name="reverse" href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
+</div>
+<div id="reverse-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reverse', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a reversed version of the curve, without modifying the curve
+itself.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Curve.html"><tt>Curve</tt></a></tt>&nbsp;&mdash;&nbsp;a reversed version of the curve
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a copy of the curve.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Curve.html"><tt>Curve</tt></a></tt>
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="tostring-member" class="member">
+<div id="tostring-link" class="member-link">
+<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+<div id="tostring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the curve.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/CurveLocation.html b/dist/docs/classes/CurveLocation.html
new file mode 100644
index 00000000..86dbcaae
--- /dev/null
+++ b/dist/docs/classes/CurveLocation.html
@@ -0,0 +1,505 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>CurveLocation</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>CurveLocation</h1>
+
+<p>CurveLocation objects describe a location on <a href="../classes/Curve.html"><tt>Curve</tt></a>
+objects, as defined by the curve <a href="../classes/CurveLocation.html#parameter" onclick="return toggleMember('parameter', true);"><tt>parameter</tt></a>, a value between
+<tt>0</tt> (beginning of the curve) and <tt>1</tt> (end of the curve). If
+the curve is part of a <a href="../classes/Path.html"><tt>Path</tt></a> item, its <a href="../classes/CurveLocation.html#index" onclick="return toggleMember('index', true);"><tt>index</tt></a> inside the
+<a href="../classes/Path.html#curves"><tt>path.curves</tt></a> array is also provided.</p>
+<p>The class is in use in many places, such as
+<a href="../classes/Path.html#getlocationat-offset"><tt>path.getLocationAt(offset)</tt></a>, Path#getNearestLocation(point), etc.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="curvelocation-curve-parameter-point-distance-member" class="member">
+<div id="curvelocation-curve-parameter-point-distance-link" class="member-link">
+<a name="curvelocation-curve-parameter-point-distance" href="#" onClick="return toggleMember('curvelocation-curve-parameter-point-distance', false);"><tt><b>CurveLocation</b>(curve, parameter, point, distance)</tt></a>
+</div>
+<div id="curvelocation-curve-parameter-point-distance-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('curvelocation-curve-parameter-point-distance', false);"><tt><b>CurveLocation</b>(curve, parameter, point, distance)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curvelocation-curve-parameter-point-distance', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a new CurveLocation object.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>curve:</tt> 
+<a href="../classes/Curve.html"><tt>Curve</tt></a>
+
+
+</li>
+
+<li>
+<tt>parameter:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>distance:</tt> 
+
+
+
+</li>
+
+</ul>
+
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="segment-member" class="member">
+<div id="segment-link" class="member-link">
+<a name="segment" href="#" onClick="return toggleMember('segment', false);"><tt><b>segment</b></tt></a>
+</div>
+<div id="segment-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('segment', false);"><tt><b>segment</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The segment of the curve which is closer to the described location.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Segment.html"><tt>Segment</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="curve-member" class="member">
+<div id="curve-link" class="member-link">
+<a name="curve" href="#" onClick="return toggleMember('curve', false);"><tt><b>curve</b></tt></a>
+</div>
+<div id="curve-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('curve', false);"><tt><b>curve</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curve', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The curve by which the location is defined.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Curve.html"><tt>Curve</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="path-member" class="member">
+<div id="path-link" class="member-link">
+<a name="path" href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
+</div>
+<div id="path-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The path this curve belongs to, if any.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="index-member" class="member">
+<div id="index-link" class="member-link">
+<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+<div id="index-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The index of the curve within the <a href="../classes/Path.html#curves"><tt>path.curves</tt></a> list, if the
+curve is part of a <a href="../classes/Path.html"><tt>Path</tt></a> item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Index</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="offset-member" class="member">
+<div id="offset-link" class="member-link">
+<a name="offset" href="#" onClick="return toggleMember('offset', false);"><tt><b>offset</b></tt></a>
+</div>
+<div id="offset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('offset', false);"><tt><b>offset</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('offset', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The length of the path from its beginning up to the location described
+by this object.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="curveoffset-member" class="member">
+<div id="curveoffset-link" class="member-link">
+<a name="curveoffset" href="#" onClick="return toggleMember('curveoffset', false);"><tt><b>curveOffset</b></tt></a>
+</div>
+<div id="curveoffset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('curveoffset', false);"><tt><b>curveOffset</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveoffset', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The length of the curve from its beginning up to the location described
+by this object.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="parameter-member" class="member">
+<div id="parameter-link" class="member-link">
+<a name="parameter" href="#" onClick="return toggleMember('parameter', false);"><tt><b>parameter</b></tt></a>
+</div>
+<div id="parameter-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('parameter', false);"><tt><b>parameter</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parameter', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The curve parameter, as used by various bezier curve calculations. It is
+value between <tt>0</tt> (beginning of the curve) and <tt>1</tt> (end of
+the curve).</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="point-member" class="member">
+<div id="point-link" class="member-link">
+<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
+</div>
+<div id="point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The point which is defined by the <a href="../classes/CurveLocation.html#curve" onclick="return toggleMember('curve', true);"><tt>curve</tt></a> and
+<a href="../classes/CurveLocation.html#parameter" onclick="return toggleMember('parameter', true);"><tt>parameter</tt></a>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="tangent-member" class="member">
+<div id="tangent-link" class="member-link">
+<a name="tangent" href="#" onClick="return toggleMember('tangent', false);"><tt><b>tangent</b></tt></a>
+</div>
+<div id="tangent-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tangent', false);"><tt><b>tangent</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tangent', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The tangential vector to the <a href="../classes/CurveLocation.html#curve" onclick="return toggleMember('curve', true);"><tt>curve</tt></a> at the given location.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="normal-member" class="member">
+<div id="normal-link" class="member-link">
+<a name="normal" href="#" onClick="return toggleMember('normal', false);"><tt><b>normal</b></tt></a>
+</div>
+<div id="normal-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('normal', false);"><tt><b>normal</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('normal', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The normal vector to the <a href="../classes/CurveLocation.html#curve" onclick="return toggleMember('curve', true);"><tt>curve</tt></a> at the given location.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="distance-member" class="member">
+<div id="distance-link" class="member-link">
+<a name="distance" href="#" onClick="return toggleMember('distance', false);"><tt><b>distance</b></tt></a>
+</div>
+<div id="distance-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('distance', false);"><tt><b>distance</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('distance', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The distance from the queried point to the returned location.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="tostring-member" class="member">
+<div id="tostring-link" class="member-link">
+<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+<div id="tostring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the curve location.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Event.html b/dist/docs/classes/Event.html
new file mode 100644
index 00000000..d0848eb9
--- /dev/null
+++ b/dist/docs/classes/Event.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Event</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Event</h1>
+
+
+
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="modifiers-member" class="member">
+<div id="modifiers-link" class="member-link">
+<a name="modifiers" href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
+</div>
+<div id="modifiers-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modifiers', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>object</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Gradient.html b/dist/docs/classes/Gradient.html
new file mode 100644
index 00000000..f95530ea
--- /dev/null
+++ b/dist/docs/classes/Gradient.html
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Gradient</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Gradient</h1>
+
+<p>The Gradient object.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="gradient-stops-member" class="member">
+<div id="gradient-stops-link" class="member-link">
+<a name="gradient-stops" href="#" onClick="return toggleMember('gradient-stops', false);"><tt><b>Gradient</b>(stops[, type])</tt></a>
+</div>
+<div id="gradient-stops-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('gradient-stops', false);"><tt><b>Gradient</b>(stops[, type])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gradient-stops', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a gradient object</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>stops:</tt> 
+Array of <a href="../classes/GradientStop.html"><tt>GradientStop</tt></a> objects
+
+
+</li>
+
+<li>
+<tt>type:</tt> 
+<tt>String</tt>
+&mdash;&nbsp;'linear' or 'radial'
+&mdash;&nbsp;optional, default: <tt>'linear'</tt>
+</li>
+
+</ul>
+
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+<!-- ============================== properties ========================= -->
+	<div class="reference-members"><h2>Operators</h2>
+		
+			<div id="equals-member" class="member">
+<div id="equals-link" class="member-link">
+<a name="equals" href="#" onClick="return toggleMember('equals', false);"><tt><tt><b>==</b> Gradient</tt></tt></a>
+</div>
+<div id="equals-description" class="member-description hidden">
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('equals', false);"><tt><b>==</b> Gradient</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Checks whether the gradient is equal to the supplied gradient.</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> they are equal, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+		
+		
+	</div>
+
+
+</div>
+</div>
+
+		
+	</div>
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="stops-member" class="member">
+<div id="stops-link" class="member-link">
+<a name="stops" href="#" onClick="return toggleMember('stops', false);"><tt><b>stops</b></tt></a>
+</div>
+<div id="stops-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('stops', false);"><tt><b>stops</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('stops', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The gradient stops on the gradient ramp.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/GradientStop.html"><tt>GradientStop</tt></a> objects
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Gradient.html"><tt>Gradient</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the gradient
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/GradientColor.html b/dist/docs/classes/GradientColor.html
new file mode 100644
index 00000000..76f32a67
--- /dev/null
+++ b/dist/docs/classes/GradientColor.html
@@ -0,0 +1,465 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>GradientColor</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>GradientColor</h1>
+
+<p>The GradientColor object.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="gradientcolor-gradient-origin-destination-member" class="member">
+<div id="gradientcolor-gradient-origin-destination-link" class="member-link">
+<a name="gradientcolor-gradient-origin-destination" href="#" onClick="return toggleMember('gradientcolor-gradient-origin-destination', false);"><tt><b>GradientColor</b>(gradient, origin, destination[, hilite])</tt></a>
+</div>
+<div id="gradientcolor-gradient-origin-destination-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('gradientcolor-gradient-origin-destination', false);"><tt><b>GradientColor</b>(gradient, origin, destination[, hilite])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gradientcolor-gradient-origin-destination', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a gradient color object.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>gradient:</tt> 
+<a href="../classes/Gradient.html"><tt>Gradient</tt></a>
+
+
+</li>
+
+<li>
+<tt>origin:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>destination:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>hilite:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> &mdash; Applying a linear gradient color containing evenly distributed color stops:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+// Define two points which we will be using to construct
+// the path and to position the gradient color:
+var topLeft = view.center - [80, 80];
+var bottomRight = view.center + [80, 80];
+
+// Create a rectangle shaped path between
+// the topLeft and bottomRight points:
+var path = new Path.Rectangle(topLeft, bottomRight);
+
+// Create the gradient, passing it an array of colors to be converted
+// to evenly distributed color stops:
+var gradient = new Gradient(['yellow', 'red', 'blue']);
+
+// Have the gradient color run between the topLeft and
+// bottomRight points we defined earlier:
+var gradientColor = new GradientColor(gradient, topLeft, bottomRight);
+
+// Set the fill color of the path to the gradient color:
+path.fillColor = gradientColor;
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-0"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Applying a radial gradient color containing unevenly distributed color stops:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+// Create a circle shaped path at the center of the view
+// with a radius of 80:
+var path = new Path.Circle(view.center, 80);
+
+// The stops array: yellow mixes with red between 0 and 15%,
+// 15% to 30% is pure red, red mixes with black between 30% to 100%:
+var stops = [['yellow', 0], ['red', 0.15], ['red', 0.3], ['black', 0.9]];
+
+// Create a radial gradient using the color stops array:
+var gradient = new Gradient(stops, 'radial');
+
+// We will use the center point of the circle shaped path as
+// the origin point for our gradient color
+var from = path.position;
+
+// The destination point of the gradient color will be the
+// center point of the path + 80pt in horizontal direction:
+var to = path.position + [80, 0];
+
+// Create the gradient color:
+var gradientColor = new GradientColor(gradient, from, to);
+
+// Set the fill color of the path to the gradient color:
+path.fillColor = gradientColor;
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-1"></canvas></div>
+</div>
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="origin-member" class="member">
+<div id="origin-link" class="member-link">
+<a name="origin" href="#" onClick="return toggleMember('origin', false);"><tt><b>origin</b></tt></a>
+</div>
+<div id="origin-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('origin', false);"><tt><b>origin</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('origin', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The origin point of the gradient.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Move the origin point of the gradient, by moving your mouse over the view below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+// Create a rectangle shaped path with the same dimensions as
+// that of the view and fill it with a gradient color:
+var path = new Path.Rectangle(view.bounds);
+var gradient = new Gradient(['yellow', 'red', 'blue']);
+
+// Have the gradient color run from the top left point of the view,
+// to the bottom right point of the view:
+var from = view.bounds.topLeft;
+var to = view.bounds.bottomRight;
+var gradientColor = new GradientColor(gradient, from, to);
+path.fillColor = gradientColor;
+
+function onMouseMove(event) {
+	// Set the origin point of the path's gradient color
+	// to the position of the mouse:
+	path.fillColor.origin = event.point;
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="destination-member" class="member">
+<div id="destination-link" class="member-link">
+<a name="destination" href="#" onClick="return toggleMember('destination', false);"><tt><b>destination</b></tt></a>
+</div>
+<div id="destination-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('destination', false);"><tt><b>destination</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('destination', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The destination point of the gradient.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Move the destination point of the gradient, by moving your mouse over the view below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+// Create a circle shaped path at the center of the view,
+// using 40% of the height of the view as its radius
+// and fill it with a radial gradient color:
+var path = new Path.Circle(view.center, view.bounds.height * 0.4);
+
+var gradient = new Gradient(['yellow', 'red', 'black'], 'radial');
+var from = view.center;
+var to = view.bounds.bottomRight;
+var gradientColor = new GradientColor(gradient, from, to);
+path.fillColor = gradientColor;
+
+function onMouseMove(event) {
+	// Set the origin point of the path's gradient color
+	// to the position of the mouse:
+	path.fillColor.destination = event.point;
+}
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-3"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="hilite-member" class="member">
+<div id="hilite-link" class="member-link">
+<a name="hilite" href="#" onClick="return toggleMember('hilite', false);"><tt><b>hilite</b></tt></a>
+</div>
+<div id="hilite-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hilite', false);"><tt><b>hilite</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hilite', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The hilite point of the gradient.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Move the hilite point of the gradient, by moving your mouse over the view below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+// Create a circle shaped path at the center of the view,
+// using 40% of the height of the view as its radius
+// and fill it with a radial gradient color:
+var path = new Path.Circle(view.center, view.bounds.height * 0.4);
+var gradient = new Gradient(['yellow', 'red', 'black'], 'radial');
+var from = path.position;
+var to = path.bounds.rightCenter;
+var gradientColor = new GradientColor(gradient, from, to);
+path.fillColor = gradientColor;
+
+function onMouseMove(event) {
+	// Set the origin hilite of the path's gradient color
+	// to the position of the mouse:
+	path.fillColor.hilite = event.point;
+}
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-4"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/GradientColor.html"><tt>GradientColor</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the gradient color
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="equals-color-member" class="member">
+<div id="equals-color-link" class="member-link">
+<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
+</div>
+<div id="equals-color-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the gradient color has the same properties as that of the
+supplied one.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>color:</tt> 
+<a href="../classes/GradientColor.html"><tt>GradientColor</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the GradientColor is the same, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="transform-matrix-member" class="member">
+<div id="transform-matrix-link" class="member-link">
+<a name="transform-matrix" href="#" onClick="return toggleMember('transform-matrix', false);"><tt><b>transform</b>(matrix)</tt></a>
+</div>
+<div id="transform-matrix-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('transform-matrix', false);"><tt><b>transform</b>(matrix)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the gradient color by the specified matrix.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>matrix:</tt> 
+<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+&mdash;&nbsp;the matrix to transform the gradient color by
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/GradientStop.html b/dist/docs/classes/GradientStop.html
new file mode 100644
index 00000000..0e879e34
--- /dev/null
+++ b/dist/docs/classes/GradientStop.html
@@ -0,0 +1,258 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>GradientStop</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>GradientStop</h1>
+
+<p>The GradientStop object.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="gradientstop-member" class="member">
+<div id="gradientstop-link" class="member-link">
+<a name="gradientstop" href="#" onClick="return toggleMember('gradientstop', false);"><tt><b>GradientStop</b>([color[, rampPoint]])</tt></a>
+</div>
+<div id="gradientstop-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('gradientstop', false);"><tt><b>GradientStop</b>([color[, rampPoint]])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gradientstop', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a GradientStop object.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>color:</tt> 
+<a href="../classes/Color.html"><tt>Color</tt></a>
+&mdash;&nbsp;the color of the stop
+&mdash;&nbsp;optional, default: <tt>new RgbColor(0, 0, 0)</tt>
+</li>
+
+<li>
+<tt>rampPoint:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the position of the stop on the gradient
+                              ramp {@default 0}
+&mdash;&nbsp;optional, default: <tt>0</tt>
+</li>
+
+</ul>
+
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="ramppoint-member" class="member">
+<div id="ramppoint-link" class="member-link">
+<a name="ramppoint" href="#" onClick="return toggleMember('ramppoint', false);"><tt><b>rampPoint</b></tt></a>
+</div>
+<div id="ramppoint-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('ramppoint', false);"><tt><b>rampPoint</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ramppoint', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The ramp-point of the gradient stop as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Animating a gradient's ramp points:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+// Create a circle shaped path at the center of the view,
+// using 40% of the height of the view as its radius
+// and fill it with a radial gradient color:
+var path = new Path.Circle(view.center, view.bounds.height * 0.4);
+
+// Prepare the gradient color and apply it to the path:
+var colors = [['yellow', 0.05], ['red', 0.2], ['black', 1]];
+var gradient = new Gradient(colors, 'radial');
+var from = path.position;
+var to = path.bounds.rightCenter;
+var gradientColor = new GradientColor(gradient, from, to);
+path.fillColor = gradientColor;
+
+// This function is called each frame of the animation:
+function onFrame(event) {
+	var blackStop = gradient.stops[2];
+	// Animate the rampPoint between 0.7 and 0.9:
+	blackStop.rampPoint = Math.sin(event.time * 5) * 0.1 + 0.8;
+
+	// Animate the rampPoint between 0.2 and 0.4
+	var redStop = gradient.stops[1];
+	redStop.rampPoint = Math.sin(event.time * 3) * 0.1 + 0.3;
+}
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-0"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="color-member" class="member">
+<div id="color-link" class="member-link">
+<a name="color" href="#" onClick="return toggleMember('color', false);"><tt><b>color</b></tt></a>
+</div>
+<div id="color-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('color', false);"><tt><b>color</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('color', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color of the gradient stop.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Color.html"><tt>Color</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Animating a gradient's ramp points:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+// Create a circle shaped path at the center of the view,
+// using 40% of the height of the view as its radius
+// and fill it with a radial gradient color:
+var path = new Path.Circle(view.center, view.bounds.height * 0.4);
+
+// Create a radial gradient that mixes red and black evenly:
+var gradient = new Gradient(['red', 'black'], 'radial');
+
+// Fill the path with a gradient color that runs from its center,
+// to the right center of its bounding rectangle:
+var from = path.position;
+var to = path.bounds.rightCenter;
+var gradientColor = new GradientColor(gradient, from, to);
+path.fillColor = gradientColor;
+
+// This function is called each frame of the animation:
+function onFrame(event) {
+	// Change the hue of the first stop's color:
+	gradient.stops[0].color.hue += 1;
+}
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-1"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/GradientColor.html"><tt>GradientColor</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the gradient-stop
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/GrayColor.html b/dist/docs/classes/GrayColor.html
new file mode 100644
index 00000000..c3987ba6
--- /dev/null
+++ b/dist/docs/classes/GrayColor.html
@@ -0,0 +1,749 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>GrayColor</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>GrayColor</h1>
+
+<p> Extends <b><a href="../classes/Color.html"><tt>Color</tt></a></b></p>
+
+<p>A GrayColor object is used to represent any gray color value.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="graycolor-gray-member" class="member">
+<div id="graycolor-gray-link" class="member-link">
+<a name="graycolor-gray" href="#" onClick="return toggleMember('graycolor-gray', false);"><tt><b>GrayColor</b>(gray[, alpha])</tt></a>
+</div>
+<div id="graycolor-gray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('graycolor-gray', false);"><tt><b>GrayColor</b>(gray[, alpha])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('graycolor-gray', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a GrayColor object</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>gray:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the amount of gray in the color as a value
+between <tt>0</tt> and <tt>1</tt>
+
+</li>
+
+<li>
+<tt>alpha:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the alpha of the color as a value between
+<tt>0</tt> and <tt>1</tt>
+&mdash;&nbsp;optional
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> &mdash; Creating a GrayColor:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+// Create a circle shaped path at {x: 80, y: 50}
+// with a radius of 30:
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// Create a GrayColor with 50% gray:
+circle.fillColor = new GrayColor(0.5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="gray-member" class="member">
+<div id="gray-link" class="member-link">
+<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
+</div>
+<div id="gray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of gray in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
+
+	
+<div id="type-member" class="member">
+<div id="type-link" class="member-link">
+<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
+</div>
+<div id="type-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Returns the type of the color as a string.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('rgb', 'hsb', 'gray')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var color = new RgbColor(1, 0, 0);
+console.log(color.type); // 'rgb'</pre>
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="alpha-member" class="member">
+<div id="alpha-link" class="member-link">
+<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
+</div>
+<div id="alpha-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
+colors of the different subclasses support alpha values.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A filled path with a half transparent stroke:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// Fill the circle with red and give it a 20pt green stroke:
+circle.style = {
+	fillColor: 'red',
+	strokeColor: 'green',
+	strokeWidth: 20
+};
+
+// Make the stroke half transparent:
+circle.strokeColor.alpha = 0.5;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+	<h3>RGB Components</h3>
+
+<div id="red-member" class="member">
+<div id="red-link" class="member-link">
+<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
+</div>
+<div id="red-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of red in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the amount of red in a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.fillColor = 'blue';
+
+// Blue + red = purple:
+circle.fillColor.red = 1;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="green-member" class="member">
+<div id="green-link" class="member-link">
+<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
+</div>
+<div id="green-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of green in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the amount of green in a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// First we set the fill color to red:
+circle.fillColor = 'red';
+
+// Red + green = yellow:
+circle.fillColor.green = 1;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="blue-member" class="member">
+<div id="blue-link" class="member-link">
+<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
+</div>
+<div id="blue-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of blue in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the amount of blue in a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// First we set the fill color to red:
+circle.fillColor = 'red';
+
+// Red + blue = purple:
+circle.fillColor.blue = 1;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+	<h3>HSB Components</h3>
+
+<div id="hue-member" class="member">
+<div id="hue-link" class="member-link">
+<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
+</div>
+<div id="hue-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The hue of the color as a value in degrees between <tt>0</tt> and
+<tt>360</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the hue of a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-5">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.fillColor = 'red';
+circle.fillColor.hue += 30;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Hue cycling:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-6">
+// Create a rectangle shaped path, using the dimensions
+// of the view:
+var path = new Path.Rectangle(view.bounds);
+path.fillColor = 'red';
+
+function onFrame(event) {
+	path.fillColor.hue += 0.5;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="saturation-member" class="member">
+<div id="saturation-link" class="member-link">
+<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
+</div>
+<div id="saturation-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="brightness-member" class="member">
+<div id="brightness-link" class="member-link">
+<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
+</div>
+<div id="brightness-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>HSL Components</h3>
+
+<div id="lightness-member" class="member">
+<div id="lightness-link" class="member-link">
+<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
+</div>
+<div id="lightness-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+<!-- =========================== inherited methods ========================= -->
+<div class="reference-members"><h2>Methods inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
+
+	
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the color object
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="hasalpha-member" class="member">
+<div id="hasalpha-link" class="member-link">
+<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
+</div>
+<div id="hasalpha-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the color has an alpha value.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="equals-color-member" class="member">
+<div id="equals-color-link" class="member-link">
+<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
+</div>
+<div id="equals-color-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the component color values of the color are the
+same as those of the supplied one.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>color:</tt> 
+<a href="../classes/Color.html"><tt>Color</tt></a>
+&mdash;&nbsp;the color to compare with
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>String Representations</h3>
+
+<div id="tostring-member" class="member">
+<div id="tostring-link" class="member-link">
+<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+<div id="tostring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the color.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="tocssstring-member" class="member">
+<div id="tocssstring-link" class="member-link">
+<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
+</div>
+<div id="tocssstring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A css string representation of the color.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+</div>
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Group.html b/dist/docs/classes/Group.html
new file mode 100644
index 00000000..426e459f
--- /dev/null
+++ b/dist/docs/classes/Group.html
@@ -0,0 +1,3587 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Group</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Group</h1>
+
+<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
+
+<p>A Group is a collection of items. When you transform a Group, its
+children are treated as a single unit without changing their relative
+positions.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="group-member" class="member">
+<div id="group-link" class="member-link">
+<a name="group" href="#" onClick="return toggleMember('group', false);"><tt><b>Group</b>([children])</tt></a>
+</div>
+<div id="group-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('group', false);"><tt><b>Group</b>([children])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('group', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a new Group item and places it at the top of the active layer.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>children:</tt> 
+Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+&mdash;&nbsp;An array of children that will be added to the
+newly created group.
+&mdash;&nbsp;optional
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> &mdash; Create a group containing two paths:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+var path = new Path(new Point(100, 100), new Point(100, 200));
+var path2 = new Path(new Point(50, 150), new Point(150, 150));
+
+// Create a group from the two paths:
+var group = new Group([path, path2]);
+
+// Set the stroke color of all items in the group:
+group.strokeColor = 'black';
+
+// Move the group to the center of the view:
+group.position = view.center;
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-0"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Click in the view to add a path to the group, which in turn is rotated every frame:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+var group = new Group();
+
+function onMouseDown(event) {
+	// Create a new circle shaped path at the position
+	// of the mouse:
+	var path = new Path.Circle(event.point, 5);
+	path.fillColor = 'black';
+
+	// Add the path to the group's children list:
+	group.addChild(path);
+}
+
+function onFrame(event) {
+	// Rotate the group by 1 degree from
+	// the centerpoint of the view:
+	group.rotate(1, view.center);
+}
+</script>
+<div class="canvas"><canvas width="516" height="320" id="canvas-1"></canvas></div>
+</div>
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="clipped-member" class="member">
+<div id="clipped-link" class="member-link">
+<a name="clipped" href="#" onClick="return toggleMember('clipped', false);"><tt><b>clipped</b></tt></a>
+</div>
+<div id="clipped-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clipped', false);"><tt><b>clipped</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipped', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the group item is to be clipped.</p>
+<p>When setting to <tt>true</tt>, the first child in the group is
+automatically defined as the clipping mask.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="id-member" class="member">
+<div id="id-link" class="member-link">
+<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+<div id="id-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The unique id of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="name-member" class="member">
+<div id="name-link" class="member-link">
+<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+<div id="name-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The name of the item. If the item has a name, it can be accessed by name
+through its parent's children list.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and add path to it as a child:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="position-member" class="member">
+<div id="position-link" class="member-link">
+<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+<div id="position-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item's position within the project. This is the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the position of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+// Create a circle at position { x: 10, y: 10 }
+var circle = new Path.Circle(new Point(10, 10), 10);
+circle.fillColor = 'red';
+
+// Move the circle to { x: 20, y: 20 }
+circle.position = new Point(20, 20);
+
+// Move the circle 100 points to the right and 50 points down
+circle.position += new Point(100, 50);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Changing the x coordinate of an item's position:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+// Create a circle at position { x: 20, y: 20 }
+var circle = new Path.Circle(new Point(20, 20), 10);
+circle.fillColor = 'red';
+
+// Move the circle 100 points to the right
+circle.position.x += 100;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="style-member" class="member">
+<div id="style-link" class="member-link">
+<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+<div id="style-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The path style of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-5">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.style = {
+	fillColor: 'blue',
+	strokeColor: 'red',
+	strokeWidth: 5
+};
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Copying the style of another item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-6">
+var path = new Path.Circle(new Point(50, 50), 30);
+path.fillColor = 'red';
+
+var path2 = new Path.Circle(new Point(180, 50), 20);
+// Copy the path style of path:
+path2.style = path.style;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Applying the same style object to multiple items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-7">
+var myStyle = {
+	fillColor: 'red',
+	strokeColor: 'blue',
+	strokeWidth: 4
+};
+
+var path = new Path.Circle(new Point(80, 50), 30);
+path.style = myStyle;
+
+var path2 = new Path.Circle(new Point(150, 50), 20);
+path2.style = myStyle;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="visible-member" class="member">
+<div id="visible-link" class="member-link">
+<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+<div id="visible-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
+item won't be drawn.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>true</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Hiding an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-8">
+var path = new Path.Circle(new Point(50, 50), 20);
+path.fillColor = 'red';
+
+// Hide the path:
+path.visible = false;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="blendmode-member" class="member">
+<div id="blendmode-link" class="member-link">
+<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+<div id="blendmode-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The blend mode of the item.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'normal'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
+'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
+'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
+'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's blend mode:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-9">
+// Create a white rectangle in the background
+// with the same dimensions as the view:
+var background = new Path.Rectangle(view.bounds);
+background.fillColor = 'white';
+
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.fillColor = 'blue';
+
+// Set the blend mode of circle2:
+circle2.blendMode = 'multiply';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="opacity-member" class="member">
+<div id="opacity-link" class="member-link">
+<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+<div id="opacity-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Making an item 50% transparent:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-10">
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.style = {
+	fillColor: 'blue',
+	strokeColor: 'green',
+	strokeWidth: 10
+};
+
+// Make circle2 50% transparent:
+circle2.opacity = 0.5;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="guide-member" class="member">
+<div id="guide-link" class="member-link">
+<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+<div id="guide-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item functions as a guide. When set to
+<tt>true</tt>, the item will be drawn at the end as a guide.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="selected-member" class="member">
+<div id="selected-link" class="member-link">
+<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+<div id="selected-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether an item is selected and will also return <tt>true</tt>
+if the item is partially selected (groups with some selected or partially
+selected paths).</p>
+<p>Paper.js draws the visual outlines of selected items on top of your
+project. This can be useful for debugging, as it allows you to see the
+construction of paths, position of path curves, individual segment points
+and bounding boxes of symbol and raster items.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Selecting an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-11">
+var path = new Path.Circle(new Size(80, 50), 35);
+path.selected = true; // Select the path
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="clipmask-member" class="member">
+<div id="clipmask-link" class="member-link">
+<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+<div id="clipmask-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item defines a clip mask. This can only be set on
+paths, compound paths, and text frame objects, and only if the item is
+already contained within a clipping group.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Project Hierarchy</h3>
+
+<div id="project-member" class="member">
+<div id="project-link" class="member-link">
+<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+<div id="project-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The project that this item belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Project.html"><tt>Project</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="layer-member" class="member">
+<div id="layer-link" class="member-link">
+<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+<div id="layer-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The layer that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Layer.html"><tt>Layer</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="parent-member" class="member">
+<div id="parent-link" class="member-link">
+<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+<div id="parent-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var path = new Path();
+
+// New items are placed in the active layer:
+console.log(path.parent == project.activeLayer); // true
+
+var group = new Group();
+group.addChild(path);
+
+// Now the parent of the path has become the group:
+console.log(path.parent == group); // true</pre>
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="children-member" class="member">
+<div id="children-link" class="member-link">
+<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+<div id="children-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The children items contained within this item. Items that define a
+<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
+<p><b>Please note:</b> The children array should not be modified directly
+using array functions. To remove single items from the children list, use
+<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
+<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
+<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Accessing items in the children array:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-12">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// Access the path through the group's children array:
+group.children[0].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Accessing children by name:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-13">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'orange';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Passing an array of items to item.children:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-14">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+var group = new Group();
+group.children = [path];
+
+// The path is the first child of the group:
+group.firstChild.fillColor = 'green';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="firstchild-member" class="member">
+<div id="firstchild-link" class="member-link">
+<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+<div id="firstchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The first item contained within this item. This is a shortcut for
+accessing <tt>item.children[0]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="lastchild-member" class="member">
+<div id="lastchild-link" class="member-link">
+<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+<div id="lastchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The last item contained within this item.This is a shortcut for
+accessing <tt>item.children[item.children.length - 1]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="nextsibling-member" class="member">
+<div id="nextsibling-link" class="member-link">
+<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+<div id="nextsibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The next item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="previoussibling-member" class="member">
+<div id="previoussibling-link" class="member-link">
+<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+<div id="previoussibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The previous item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="index-member" class="member">
+<div id="index-link" class="member-link">
+<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+<div id="index-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The index of this item within the list of its parent's children.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Bounding Rectangles</h3>
+
+<div id="bounds-member" class="member">
+<div id="bounds-link" class="member-link">
+<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+<div id="bounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item excluding stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokebounds-member" class="member">
+<div id="strokebounds-link" class="member-link">
+<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+<div id="strokebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="handlebounds-member" class="member">
+<div id="handlebounds-link" class="member-link">
+<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+<div id="handlebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including handles.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Stroke Style</h3>
+
+<div id="strokecolor-member" class="member">
+<div id="strokecolor-link" class="member-link">
+<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+<div id="strokecolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the stroke color of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-15">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to RGB red:
+circle.strokeColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokewidth-member" class="member">
+<div id="strokewidth-link" class="member-link">
+<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+<div id="strokewidth-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The width of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's stroke width:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-16">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to black:
+circle.strokeColor = 'black';
+
+// Set its stroke width to 10:
+circle.strokeWidth = 10;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokecap-member" class="member">
+<div id="strokecap-link" class="member-link">
+<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+<div id="strokecap-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
+have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'butt'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('round', 'square', 'butt')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke caps:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-17">
+var line = new Path(new Point(80, 50), new Point(420, 50));
+line.strokeColor = 'black';
+line.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+line.selected = true;
+
+// Set the stroke cap of the line to be round:
+line.strokeCap = 'round';
+
+// Copy the path and set its stroke cap to be square:
+var line2 = line.clone();
+line2.position.y += 50;
+line2.strokeCap = 'square';
+
+// Make another copy and set its stroke cap to be butt:
+var line2 = line.clone();
+line2.position.y += 100;
+line2.strokeCap = 'butt';
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-17"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokejoin-member" class="member">
+<div id="strokejoin-link" class="member-link">
+<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+<div id="strokejoin-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the corners of paths when they have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'miter'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt> ('miter', 'round', 'bevel')
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke joins:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-18">
+var path = new Path();
+path.add(new Point(80, 100));
+path.add(new Point(120, 40));
+path.add(new Point(160, 100));
+path.strokeColor = 'black';
+path.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+path.selected = true;
+
+var path2 = path.clone();
+path2.position.x += path2.bounds.width * 1.5;
+path2.strokeJoin = 'round';
+
+var path3 = path2.clone();
+path3.position.x += path3.bounds.width * 1.5;
+path3.strokeJoin = 'bevel';
+</script>
+<div class="canvas"><canvas width="516" height="120" id="canvas-18"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="dashoffset-member" class="member">
+<div id="dashoffset-link" class="member-link">
+<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+<div id="dashoffset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The dash offset of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>0</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="dasharray-member" class="member">
+<div id="dasharray-link" class="member-link">
+<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+<div id="dasharray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>[]</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Array</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-19">
+var path = new Path.Circle(new Point(80, 50), 40);
+path.strokeWidth = 2;
+path.strokeColor = 'black';
+
+// Set the dashed stroke to [10pt dash, 4pt gap]:
+path.dashArray = [10, 4];
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="miterlimit-member" class="member">
+<div id="miterlimit-link" class="member-link">
+<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+<div id="miterlimit-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The miter limit of the stroke.</p>
+<p>When two line segments meet at a sharp angle and miter joins have been
+specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
+extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
+miterLimit imposes a limit on the ratio of the miter length to the
+<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>10</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Fill Style</h3>
+
+<div id="fillcolor-member" class="member">
+<div id="fillcolor-link" class="member-link">
+<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+<div id="fillcolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The fill color of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the fill color of a path to red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-20">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set the fill color of the circle to RGB red:
+circle.fillColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+<!-- =========================== inherited methods ========================= -->
+<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Clones the item within the same project and places the copy above the
+item.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Cloning items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-21">
+var circle = new Path.Circle(new Point(50, 50), 10);
+circle.fillColor = 'red';
+
+// Make 20 copies of the circle:
+for (var i = 0; i < 20; i++) {
+	var copy = circle.clone();
+
+	// Distribute the copies horizontally, so we can see them:
+	copy.position.x += i * copy.bounds.width;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="copyto-item-member" class="member">
+<div id="copyto-item-link" class="member-link">
+<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+<div id="copyto-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>When passed a project, copies the item to the project,
+or duplicates it within the same project. When passed an item,
+copies the item into the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
+&mdash;&nbsp;the item or project to
+copy the item to
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rasterize-member" class="member">
+<div id="rasterize-link" class="member-link">
+<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+<div id="rasterize-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rasterizes the item into a newly created Raster object. The item itself
+is not removed after rasterization.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>resolution:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the resolution of the raster in dpi
+&mdash;&nbsp;optional, default: <tt>72</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Rasterizing an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-22">
+var circle = new Path.Circle(new Point(80, 50), 5);
+circle.fillColor = 'red';
+
+// Create a rasterized version of the path:
+var raster = circle.rasterize();
+
+// Move it 100pt to the right:
+raster.position.x += 100;
+
+// Scale the path and the raster by 300%, so we can compare them:
+circle.scale(5);
+raster.scale(5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="hittest-point-member" class="member">
+<div id="hittest-point-link" class="member-link">
+<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+<div id="hittest-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Perform a hit test on the item (and its children, if it is a
+<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
+<p>The optional options object allows you to control the specifics of the
+hit test and may contain a combination of the following values:</p>
+<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
+points.</p>
+<p><b>options.type:</b> Only hit test again a certain item
+type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
+<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
+<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
+items, taking into account stroke width.</p>
+<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
+<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
+<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
+(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
+<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
+last segment points of open path items.</p>
+<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
+side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
+(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
+<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
+<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The point where the hit test should be performed
+
+</li>
+
+<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+
+&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
+tolerance: 2 }</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
+information about what exactly was hit or <tt>null</tt> if nothing was
+hit.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Operations</h3>
+
+<div id="addchild-item-member" class="member">
+<div id="addchild-item-link" class="member-link">
+<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+<div id="addchild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified item as a child of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be added as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchild-index-item-member" class="member">
+<div id="insertchild-index-item-link" class="member-link">
+<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+<div id="insertchild-index-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="addchildren-items-member" class="member">
+<div id="addchildren-items-link" class="member-link">
+<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+<div id="addchildren-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified items as children of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>items:</tt> 
+<tt>item</tt>
+&mdash;&nbsp;The items to be added as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchildren-index-items-member" class="member">
+<div id="insertchildren-index-items-link" class="member-link">
+<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+<div id="insertchildren-index-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified items as children of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>items:</tt> 
+Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+&mdash;&nbsp;The items to be appended as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertabove-item-member" class="member">
+<div id="insertabove-item-link" class="member-link">
+<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+<div id="insertabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertbelow-item-member" class="member">
+<div id="insertbelow-item-link" class="member-link">
+<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+<div id="insertbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendtop-item-member" class="member">
+<div id="appendtop-item-link" class="member-link">
+<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+<div id="appendtop-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it above all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendbottom-item-member" class="member">
+<div id="appendbottom-item-link" class="member-link">
+<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+<div id="appendbottom-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it below all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="moveabove-item-member" class="member">
+<div id="moveabove-item-link" class="member-link">
+<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+<div id="moveabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="movebelow-item-member" class="member">
+<div id="movebelow-item-link" class="member-link">
+<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+<div id="movebelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves the item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item below which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="remove-member" class="member">
+<div id="remove-link" class="member-link">
+<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+<div id="remove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item from the project. If the item has children, they are also
+removed.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-member" class="member">
+<div id="removechildren-link" class="member-link">
+<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+<div id="removechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-from-member" class="member">
+<div id="removechildren-from-link" class="member-link">
+<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+<div id="removechildren-from-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the children from the specified <tt>from</tt> index to the
+<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>from:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the beginning index, inclusive
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the ending index, exclusive
+&mdash;&nbsp;optional, default: <tt>children.length</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="reversechildren-member" class="member">
+<div id="reversechildren-link" class="member-link">
+<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+<div id="reversechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Reverses the order of the item's children</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Tests</h3>
+
+<div id="haschildren-member" class="member">
+<div id="haschildren-link" class="member-link">
+<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+<div id="haschildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item contains any children items.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isabove-item-member" class="member">
+<div id="isabove-item-link" class="member-link">
+<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+<div id="isabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if this item is above the specified item in the stacking order
+of the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isbelow-item-member" class="member">
+<div id="isbelow-item-link" class="member-link">
+<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+<div id="isbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is below the specified item in the stacking order of
+the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isparent-item-member" class="member">
+<div id="isparent-item-link" class="member-link">
+<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+<div id="isparent-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is the parent of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="ischild-item-member" class="member">
+<div id="ischild-item-link" class="member-link">
+<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+<div id="ischild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is a child of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isdescendant-item-member" class="member">
+<div id="isdescendant-item-link" class="member-link">
+<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+<div id="isdescendant-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is contained within the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isancestor-item-member" class="member">
+<div id="isancestor-item-link" class="member-link">
+<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+<div id="isancestor-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is an ancestor of the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
+item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isgroupedwith-item-member" class="member">
+<div id="isgroupedwith-item-link" class="member-link">
+<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+<div id="isgroupedwith-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the item is grouped with the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Transform Functions</h3>
+
+<div id="scale-scale-member" class="member">
+<div id="scale-scale-link" class="member-link">
+<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+<div id="scale-scale-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given value from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>scale:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item from its center point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-23">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path by 150% from its center point
+circle.scale(1.5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Scaling an item from a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-24">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path 150% from its bottom left corner
+circle.scale(1.5, circle.bounds.bottomLeft);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="scale-hor-ver-member" class="member">
+<div id="scale-hor-ver-link" class="member-link">
+<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="scale-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given values from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal scale factor
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item horizontally by 300%:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-25">
+// Create a circle shaped path at { x: 100, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(100, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path horizontally by 300%
+circle.scale(3, 1);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="translate-delta-member" class="member">
+<div id="translate-delta-link" class="member-link">
+<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+<div id="translate-delta-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Translates (moves) the item by the given offset point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>delta:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the offset to translate the item by
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rotate-angle-member" class="member">
+<div id="rotate-angle-link" class="member-link">
+<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+<div id="rotate-angle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rotates the item by a given angle around the given point.</p>
+<p>Angles are oriented clockwise and measured in degrees.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>angle:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the rotation angle
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Rotating an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-26">
+// Create a rectangle shaped path with its top left
+// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
+var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
+path.fillColor = 'black';
+
+// Rotate the path by 30 degrees:
+path.rotate(30);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Rotating an item around a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-27">
+// Create a rectangle shaped path with its top left
+// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
+var topLeft = new Point(175, 50);
+var size = new Size(100, 100);
+var path = new Path.Rectangle(topLeft, size);
+path.fillColor = 'black';
+
+// Draw a circle shaped path in the center of the view,
+// to show the rotation point:
+var circle = new Path.Circle(view.center, 5);
+circle.fillColor = 'white';
+
+// Each frame rotate the path 3 degrees around the center point
+// of the view:
+function onFrame(event) {
+	path.rotate(3, view.center);
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-27"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="shear-point-member" class="member">
+<div id="shear-point-link" class="member-link">
+<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+<div id="shear-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given value from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="shear-hor-ver-member" class="member">
+<div id="shear-hor-ver-link" class="member-link">
+<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="shear-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given values from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal shear factor.
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical shear factor.
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="transform-matrix-flags-member" class="member">
+<div id="transform-matrix-flags-link" class="member-link">
+<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+<div id="transform-matrix-flags-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>matrix:</tt> 
+<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+
+
+</li>
+
+<li>
+<tt>flags:</tt> 
+
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="fitbounds-rectangle-member" class="member">
+<div id="fitbounds-rectangle-link" class="member-link">
+<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+<div id="fitbounds-rectangle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
+rectangle, without changing its aspect ratio.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rectangle:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+
+
+</li>
+
+<li>
+<tt>fill:</tt> 
+<tt>Boolean</tt>
+
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-28">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-29">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds, true);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-30">
+var path = new Path.Circle(new Point(80, 50), 30);
+path.fillColor = 'red';
+
+// Fit the path to the bounding rectangle of the view:
+path.fitBounds(view.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-30"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<h3>Remove On Event</h3>
+
+<div id="removeon-object-member" class="member">
+<div id="removeon-object-link" class="member-link">
+<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+<div id="removeon-object-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the events specified in the passed object literal
+occur.</p>
+<p>The object literal can contain the following values:</p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
+fired: <tt>object.move = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
+fired: <tt>object.drag = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
+fired: <tt>object.down = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
+fired: <tt>object.up = true</tt></p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>object:</tt> 
+<tt>Object</tt>
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-31">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path on the next onMouseDrag or onMouseDown event:
+	path.removeOn({
+		drag: true,
+		down: true
+	});
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-31"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonmove-member" class="member">
+<div id="removeonmove-link" class="member-link">
+<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+<div id="removeonmove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Move your mouse below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-32">
+function onMouseMove(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next move event, automatically remove the path:
+	path.removeOnMove();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-32"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondown-member" class="member">
+<div id="removeondown-link" class="member-link">
+<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+<div id="removeondown-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-33">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, next time the mouse is pressed:
+	path.removeOnDown();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-33"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondrag-member" class="member">
+<div id="removeondrag-link" class="member-link">
+<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+<div id="removeondrag-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-34">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next drag event, automatically remove the path:
+	path.removeOnDrag();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-34"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonup-member" class="member">
+<div id="removeonup-link" class="member-link">
+<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+<div id="removeonup-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-35">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, when the mouse is released:
+	path.removeOnUp();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-35"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+</div>
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/HitResult.html b/dist/docs/classes/HitResult.html
new file mode 100644
index 00000000..78b14184
--- /dev/null
+++ b/dist/docs/classes/HitResult.html
@@ -0,0 +1,242 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>HitResult</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>HitResult</h1>
+
+<p>A HitResult object contains information about the results of a hit
+test. It is returned by <a href="../classes/Item.html#hittest-point"><tt>item.hitTest(point)</tt></a> and
+<a href="../classes/Project.html#hittest-point"><tt>project.hitTest(point)</tt></a>.</p>
+
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="type-member" class="member">
+<div id="type-link" class="member-link">
+<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
+</div>
+<div id="type-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Describes the type of the hit result. For example, if you hit a segment
+point, the type would be 'segment'.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('segment', 'handle-in', 'handle-out', 'stroke', 'fill',
+'bounds', 'center')</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="name-member" class="member">
+<div id="name-link" class="member-link">
+<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+<div id="name-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>If the HitResult has a <a href="../classes/HitResult.html#type"><tt>hitResult.type</tt></a> of 'bounds', this property
+describes which corner of the bounding rectangle was hit.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('top-left', 'top-right', 'bottom-left', 'bottom-right',
+'left-center', 'top-center', 'right-center', 'bottom-center')</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="item-member" class="member">
+<div id="item-link" class="member-link">
+<a name="item" href="#" onClick="return toggleMember('item', false);"><tt><b>item</b></tt></a>
+</div>
+<div id="item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('item', false);"><tt><b>item</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('item', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item that was hit.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="location-member" class="member">
+<div id="location-link" class="member-link">
+<a name="location" href="#" onClick="return toggleMember('location', false);"><tt><b>location</b></tt></a>
+</div>
+<div id="location-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('location', false);"><tt><b>location</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('location', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>If the HitResult has a type of 'stroke', this property gives more
+information about the exact position that was hit on the path.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="segment-member" class="member">
+<div id="segment-link" class="member-link">
+<a name="segment" href="#" onClick="return toggleMember('segment', false);"><tt><b>segment</b></tt></a>
+</div>
+<div id="segment-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('segment', false);"><tt><b>segment</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>If the HitResult has a type of 'stroke', 'segment', 'handle-in' or
+'handle-out', this property refers to the Segment that was hit or that
+is closest to the hitResult.location on the curve.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Segment.html"><tt>Segment</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="point-member" class="member">
+<div id="point-link" class="member-link">
+<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
+</div>
+<div id="point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The hit point.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/HsbColor.html b/dist/docs/classes/HsbColor.html
new file mode 100644
index 00000000..b02271d5
--- /dev/null
+++ b/dist/docs/classes/HsbColor.html
@@ -0,0 +1,766 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>HsbColor</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>HsbColor</h1>
+
+<p> Extends <b><a href="../classes/Color.html"><tt>Color</tt></a></b></p>
+
+<p>An HsbColor object is used to represent any HSB color value.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="hsbcolor-hue-saturation-brightness-member" class="member">
+<div id="hsbcolor-hue-saturation-brightness-link" class="member-link">
+<a name="hsbcolor-hue-saturation-brightness" href="#" onClick="return toggleMember('hsbcolor-hue-saturation-brightness', false);"><tt><b>HsbColor</b>(hue, saturation, brightness[, alpha])</tt></a>
+</div>
+<div id="hsbcolor-hue-saturation-brightness-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hsbcolor-hue-saturation-brightness', false);"><tt><b>HsbColor</b>(hue, saturation, brightness[, alpha])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hsbcolor-hue-saturation-brightness', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates an HsbColor object</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hue:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the hue of the color as a value in degrees between
+<tt>0</tt> and <tt>360</tt>.
+
+</li>
+
+<li>
+<tt>saturation:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the saturation of the color as a value
+between <tt>0</tt> and <tt>1</tt>
+
+</li>
+
+<li>
+<tt>brightness:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the brightness of the color as a value
+between <tt>0</tt> and <tt>1</tt>
+
+</li>
+
+<li>
+<tt>alpha:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the alpha of the color as a value between
+<tt>0</tt> and <tt>1</tt>
+&mdash;&nbsp;optional
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> &mdash; Creating an HsbColor:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+// Create a circle shaped path at {x: 80, y: 50}
+// with a radius of 30:
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// Create an HsbColor with a hue of 90 degrees, a saturation
+// 100% and a brightness of 100%:
+circle.fillColor = new HsbColor(90, 1, 1);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="hue-member" class="member">
+<div id="hue-link" class="member-link">
+<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
+</div>
+<div id="hue-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The hue of the color as a value in degrees between <tt>0</tt> and
+<tt>360</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the hue of a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.fillColor = 'red';
+circle.fillColor.hue += 30;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Hue cycling:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+// Create a rectangle shaped path, using the dimensions
+// of the view:
+var path = new Path.Rectangle(view.bounds);
+path.fillColor = 'red';
+
+function onFrame(event) {
+	path.fillColor.hue += 0.5;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="saturation-member" class="member">
+<div id="saturation-link" class="member-link">
+<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
+</div>
+<div id="saturation-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="brightness-member" class="member">
+<div id="brightness-link" class="member-link">
+<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
+</div>
+<div id="brightness-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
+
+	
+<div id="type-member" class="member">
+<div id="type-link" class="member-link">
+<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
+</div>
+<div id="type-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Returns the type of the color as a string.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('rgb', 'hsb', 'gray')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var color = new RgbColor(1, 0, 0);
+console.log(color.type); // 'rgb'</pre>
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="alpha-member" class="member">
+<div id="alpha-link" class="member-link">
+<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
+</div>
+<div id="alpha-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
+colors of the different subclasses support alpha values.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A filled path with a half transparent stroke:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// Fill the circle with red and give it a 20pt green stroke:
+circle.style = {
+	fillColor: 'red',
+	strokeColor: 'green',
+	strokeWidth: 20
+};
+
+// Make the stroke half transparent:
+circle.strokeColor.alpha = 0.5;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+	<h3>RGB Components</h3>
+
+<div id="red-member" class="member">
+<div id="red-link" class="member-link">
+<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
+</div>
+<div id="red-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of red in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the amount of red in a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.fillColor = 'blue';
+
+// Blue + red = purple:
+circle.fillColor.red = 1;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="green-member" class="member">
+<div id="green-link" class="member-link">
+<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
+</div>
+<div id="green-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of green in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the amount of green in a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-5">
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// First we set the fill color to red:
+circle.fillColor = 'red';
+
+// Red + green = yellow:
+circle.fillColor.green = 1;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="blue-member" class="member">
+<div id="blue-link" class="member-link">
+<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
+</div>
+<div id="blue-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of blue in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the amount of blue in a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-6">
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// First we set the fill color to red:
+circle.fillColor = 'red';
+
+// Red + blue = purple:
+circle.fillColor.blue = 1;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Gray Components</h3>
+
+<div id="gray-member" class="member">
+<div id="gray-link" class="member-link">
+<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
+</div>
+<div id="gray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of gray in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>HSL Components</h3>
+
+<div id="lightness-member" class="member">
+<div id="lightness-link" class="member-link">
+<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
+</div>
+<div id="lightness-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+<!-- =========================== inherited methods ========================= -->
+<div class="reference-members"><h2>Methods inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
+
+	
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the color object
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="hasalpha-member" class="member">
+<div id="hasalpha-link" class="member-link">
+<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
+</div>
+<div id="hasalpha-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the color has an alpha value.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="equals-color-member" class="member">
+<div id="equals-color-link" class="member-link">
+<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
+</div>
+<div id="equals-color-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the component color values of the color are the
+same as those of the supplied one.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>color:</tt> 
+<a href="../classes/Color.html"><tt>Color</tt></a>
+&mdash;&nbsp;the color to compare with
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>String Representations</h3>
+
+<div id="tostring-member" class="member">
+<div id="tostring-link" class="member-link">
+<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+<div id="tostring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the color.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="tocssstring-member" class="member">
+<div id="tocssstring-link" class="member-link">
+<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
+</div>
+<div id="tocssstring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A css string representation of the color.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+</div>
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/HslColor.html b/dist/docs/classes/HslColor.html
new file mode 100644
index 00000000..c22ca01c
--- /dev/null
+++ b/dist/docs/classes/HslColor.html
@@ -0,0 +1,730 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>HslColor</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>HslColor</h1>
+
+<p> Extends <b><a href="../classes/Color.html"><tt>Color</tt></a></b></p>
+
+<p>An HslColor object is used to represent any HSL color value.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="hslcolor-hue-saturation-lightness-member" class="member">
+<div id="hslcolor-hue-saturation-lightness-link" class="member-link">
+<a name="hslcolor-hue-saturation-lightness" href="#" onClick="return toggleMember('hslcolor-hue-saturation-lightness', false);"><tt><b>HslColor</b>(hue, saturation, lightness[, alpha])</tt></a>
+</div>
+<div id="hslcolor-hue-saturation-lightness-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hslcolor-hue-saturation-lightness', false);"><tt><b>HslColor</b>(hue, saturation, lightness[, alpha])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hslcolor-hue-saturation-lightness', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates an HslColor object</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hue:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the hue of the color as a value in degrees between
+<tt>0</tt> and <tt>360</tt>.
+
+</li>
+
+<li>
+<tt>saturation:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the saturation of the color as a value
+between <tt>0</tt> and <tt>1</tt>
+
+</li>
+
+<li>
+<tt>lightness:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the lightness of the color as a value
+between <tt>0</tt> and <tt>1</tt>
+
+</li>
+
+<li>
+<tt>alpha:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the alpha of the color as a value between
+<tt>0</tt> and <tt>1</tt>
+&mdash;&nbsp;optional
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> &mdash; Creating an HslColor:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+// Create a circle shaped path at {x: 80, y: 50}
+// with a radius of 30:
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// Create an HslColor with a hue of 90 degrees, a saturation
+// 100% and a lightness of 50%:
+circle.fillColor = new HslColor(90, 1, 0.5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="hue-member" class="member">
+<div id="hue-link" class="member-link">
+<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
+</div>
+<div id="hue-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The hue of the color as a value in degrees between <tt>0</tt> and
+<tt>360</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="saturation-member" class="member">
+<div id="saturation-link" class="member-link">
+<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
+</div>
+<div id="saturation-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="lightness-member" class="member">
+<div id="lightness-link" class="member-link">
+<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
+</div>
+<div id="lightness-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
+
+	
+<div id="type-member" class="member">
+<div id="type-link" class="member-link">
+<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
+</div>
+<div id="type-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Returns the type of the color as a string.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('rgb', 'hsb', 'gray')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var color = new RgbColor(1, 0, 0);
+console.log(color.type); // 'rgb'</pre>
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="alpha-member" class="member">
+<div id="alpha-link" class="member-link">
+<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
+</div>
+<div id="alpha-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
+colors of the different subclasses support alpha values.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A filled path with a half transparent stroke:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// Fill the circle with red and give it a 20pt green stroke:
+circle.style = {
+	fillColor: 'red',
+	strokeColor: 'green',
+	strokeWidth: 20
+};
+
+// Make the stroke half transparent:
+circle.strokeColor.alpha = 0.5;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+	<h3>RGB Components</h3>
+
+<div id="red-member" class="member">
+<div id="red-link" class="member-link">
+<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
+</div>
+<div id="red-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of red in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the amount of red in a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.fillColor = 'blue';
+
+// Blue + red = purple:
+circle.fillColor.red = 1;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="green-member" class="member">
+<div id="green-link" class="member-link">
+<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
+</div>
+<div id="green-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of green in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the amount of green in a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// First we set the fill color to red:
+circle.fillColor = 'red';
+
+// Red + green = yellow:
+circle.fillColor.green = 1;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="blue-member" class="member">
+<div id="blue-link" class="member-link">
+<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
+</div>
+<div id="blue-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of blue in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the amount of blue in a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// First we set the fill color to red:
+circle.fillColor = 'red';
+
+// Red + blue = purple:
+circle.fillColor.blue = 1;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Gray Components</h3>
+
+<div id="gray-member" class="member">
+<div id="gray-link" class="member-link">
+<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
+</div>
+<div id="gray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of gray in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="brightness-member" class="member">
+<div id="brightness-link" class="member-link">
+<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
+</div>
+<div id="brightness-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+<!-- =========================== inherited methods ========================= -->
+<div class="reference-members"><h2>Methods inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
+
+	
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the color object
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="hasalpha-member" class="member">
+<div id="hasalpha-link" class="member-link">
+<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
+</div>
+<div id="hasalpha-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the color has an alpha value.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="equals-color-member" class="member">
+<div id="equals-color-link" class="member-link">
+<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
+</div>
+<div id="equals-color-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the component color values of the color are the
+same as those of the supplied one.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>color:</tt> 
+<a href="../classes/Color.html"><tt>Color</tt></a>
+&mdash;&nbsp;the color to compare with
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>String Representations</h3>
+
+<div id="tostring-member" class="member">
+<div id="tostring-link" class="member-link">
+<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+<div id="tostring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the color.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="tocssstring-member" class="member">
+<div id="tocssstring-link" class="member-link">
+<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
+</div>
+<div id="tocssstring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A css string representation of the color.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+</div>
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Item.html b/dist/docs/classes/Item.html
new file mode 100644
index 00000000..43952d74
--- /dev/null
+++ b/dist/docs/classes/Item.html
@@ -0,0 +1,3289 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Item</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Item</h1>
+
+<p>The Item type allows you to access and modify the items in
+Paper.js projects. Its functionality is inherited by different project
+item types such as <a href="../classes/Path.html"><tt>Path</tt></a>, <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, <a href="../classes/Group.html"><tt>Group</tt></a>,
+<a href="../classes/Layer.html"><tt>Layer</tt></a> and <a href="../classes/Raster.html"><tt>Raster</tt></a>. They each add a layer of functionality that
+is unique to their type, but share the underlying properties and functions
+that they inherit from Item.</p>
+
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="id-member" class="member">
+<div id="id-link" class="member-link">
+<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+<div id="id-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The unique id of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="name-member" class="member">
+<div id="name-link" class="member-link">
+<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+<div id="name-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The name of the item. If the item has a name, it can be accessed by name
+through its parent's children list.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and add path to it as a child:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="position-member" class="member">
+<div id="position-link" class="member-link">
+<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+<div id="position-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item's position within the project. This is the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the position of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+// Create a circle at position { x: 10, y: 10 }
+var circle = new Path.Circle(new Point(10, 10), 10);
+circle.fillColor = 'red';
+
+// Move the circle to { x: 20, y: 20 }
+circle.position = new Point(20, 20);
+
+// Move the circle 100 points to the right and 50 points down
+circle.position += new Point(100, 50);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Changing the x coordinate of an item's position:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+// Create a circle at position { x: 20, y: 20 }
+var circle = new Path.Circle(new Point(20, 20), 10);
+circle.fillColor = 'red';
+
+// Move the circle 100 points to the right
+circle.position.x += 100;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="style-member" class="member">
+<div id="style-link" class="member-link">
+<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+<div id="style-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The path style of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.style = {
+	fillColor: 'blue',
+	strokeColor: 'red',
+	strokeWidth: 5
+};
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Copying the style of another item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+var path = new Path.Circle(new Point(50, 50), 30);
+path.fillColor = 'red';
+
+var path2 = new Path.Circle(new Point(180, 50), 20);
+// Copy the path style of path:
+path2.style = path.style;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Applying the same style object to multiple items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-5">
+var myStyle = {
+	fillColor: 'red',
+	strokeColor: 'blue',
+	strokeWidth: 4
+};
+
+var path = new Path.Circle(new Point(80, 50), 30);
+path.style = myStyle;
+
+var path2 = new Path.Circle(new Point(150, 50), 20);
+path2.style = myStyle;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="visible-member" class="member">
+<div id="visible-link" class="member-link">
+<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+<div id="visible-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
+item won't be drawn.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>true</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Hiding an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-6">
+var path = new Path.Circle(new Point(50, 50), 20);
+path.fillColor = 'red';
+
+// Hide the path:
+path.visible = false;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="blendmode-member" class="member">
+<div id="blendmode-link" class="member-link">
+<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+<div id="blendmode-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The blend mode of the item.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'normal'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
+'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
+'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
+'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's blend mode:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-7">
+// Create a white rectangle in the background
+// with the same dimensions as the view:
+var background = new Path.Rectangle(view.bounds);
+background.fillColor = 'white';
+
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.fillColor = 'blue';
+
+// Set the blend mode of circle2:
+circle2.blendMode = 'multiply';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="opacity-member" class="member">
+<div id="opacity-link" class="member-link">
+<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+<div id="opacity-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Making an item 50% transparent:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-8">
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.style = {
+	fillColor: 'blue',
+	strokeColor: 'green',
+	strokeWidth: 10
+};
+
+// Make circle2 50% transparent:
+circle2.opacity = 0.5;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="guide-member" class="member">
+<div id="guide-link" class="member-link">
+<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+<div id="guide-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item functions as a guide. When set to
+<tt>true</tt>, the item will be drawn at the end as a guide.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="selected-member" class="member">
+<div id="selected-link" class="member-link">
+<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+<div id="selected-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether an item is selected and will also return <tt>true</tt>
+if the item is partially selected (groups with some selected or partially
+selected paths).</p>
+<p>Paper.js draws the visual outlines of selected items on top of your
+project. This can be useful for debugging, as it allows you to see the
+construction of paths, position of path curves, individual segment points
+and bounding boxes of symbol and raster items.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Selecting an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-9">
+var path = new Path.Circle(new Size(80, 50), 35);
+path.selected = true; // Select the path
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="clipmask-member" class="member">
+<div id="clipmask-link" class="member-link">
+<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+<div id="clipmask-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item defines a clip mask. This can only be set on
+paths, compound paths, and text frame objects, and only if the item is
+already contained within a clipping group.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Project Hierarchy</h3>
+
+<div id="project-member" class="member">
+<div id="project-link" class="member-link">
+<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+<div id="project-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The project that this item belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Project.html"><tt>Project</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="layer-member" class="member">
+<div id="layer-link" class="member-link">
+<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+<div id="layer-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The layer that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Layer.html"><tt>Layer</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="parent-member" class="member">
+<div id="parent-link" class="member-link">
+<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+<div id="parent-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var path = new Path();
+
+// New items are placed in the active layer:
+console.log(path.parent == project.activeLayer); // true
+
+var group = new Group();
+group.addChild(path);
+
+// Now the parent of the path has become the group:
+console.log(path.parent == group); // true</pre>
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="children-member" class="member">
+<div id="children-link" class="member-link">
+<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+<div id="children-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The children items contained within this item. Items that define a
+<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
+<p><b>Please note:</b> The children array should not be modified directly
+using array functions. To remove single items from the children list, use
+<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
+<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
+<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Accessing items in the children array:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-10">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// Access the path through the group's children array:
+group.children[0].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Accessing children by name:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-11">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'orange';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Passing an array of items to item.children:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-12">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+var group = new Group();
+group.children = [path];
+
+// The path is the first child of the group:
+group.firstChild.fillColor = 'green';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="firstchild-member" class="member">
+<div id="firstchild-link" class="member-link">
+<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+<div id="firstchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The first item contained within this item. This is a shortcut for
+accessing <tt>item.children[0]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="lastchild-member" class="member">
+<div id="lastchild-link" class="member-link">
+<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+<div id="lastchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The last item contained within this item.This is a shortcut for
+accessing <tt>item.children[item.children.length - 1]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="nextsibling-member" class="member">
+<div id="nextsibling-link" class="member-link">
+<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+<div id="nextsibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The next item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="previoussibling-member" class="member">
+<div id="previoussibling-link" class="member-link">
+<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+<div id="previoussibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The previous item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="index-member" class="member">
+<div id="index-link" class="member-link">
+<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+<div id="index-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The index of this item within the list of its parent's children.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Bounding Rectangles</h3>
+
+<div id="bounds-member" class="member">
+<div id="bounds-link" class="member-link">
+<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+<div id="bounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item excluding stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="strokebounds-member" class="member">
+<div id="strokebounds-link" class="member-link">
+<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+<div id="strokebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="handlebounds-member" class="member">
+<div id="handlebounds-link" class="member-link">
+<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+<div id="handlebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including handles.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Stroke Style</h3>
+
+<div id="strokecolor-member" class="member">
+<div id="strokecolor-link" class="member-link">
+<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+<div id="strokecolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the stroke color of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-13">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to RGB red:
+circle.strokeColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="strokewidth-member" class="member">
+<div id="strokewidth-link" class="member-link">
+<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+<div id="strokewidth-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The width of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's stroke width:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-14">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to black:
+circle.strokeColor = 'black';
+
+// Set its stroke width to 10:
+circle.strokeWidth = 10;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="strokecap-member" class="member">
+<div id="strokecap-link" class="member-link">
+<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+<div id="strokecap-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
+have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'butt'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('round', 'square', 'butt')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke caps:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-15">
+var line = new Path(new Point(80, 50), new Point(420, 50));
+line.strokeColor = 'black';
+line.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+line.selected = true;
+
+// Set the stroke cap of the line to be round:
+line.strokeCap = 'round';
+
+// Copy the path and set its stroke cap to be square:
+var line2 = line.clone();
+line2.position.y += 50;
+line2.strokeCap = 'square';
+
+// Make another copy and set its stroke cap to be butt:
+var line2 = line.clone();
+line2.position.y += 100;
+line2.strokeCap = 'butt';
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-15"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="strokejoin-member" class="member">
+<div id="strokejoin-link" class="member-link">
+<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+<div id="strokejoin-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the corners of paths when they have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'miter'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt> ('miter', 'round', 'bevel')
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke joins:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-16">
+var path = new Path();
+path.add(new Point(80, 100));
+path.add(new Point(120, 40));
+path.add(new Point(160, 100));
+path.strokeColor = 'black';
+path.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+path.selected = true;
+
+var path2 = path.clone();
+path2.position.x += path2.bounds.width * 1.5;
+path2.strokeJoin = 'round';
+
+var path3 = path2.clone();
+path3.position.x += path3.bounds.width * 1.5;
+path3.strokeJoin = 'bevel';
+</script>
+<div class="canvas"><canvas width="516" height="120" id="canvas-16"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="dashoffset-member" class="member">
+<div id="dashoffset-link" class="member-link">
+<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+<div id="dashoffset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The dash offset of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>0</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="dasharray-member" class="member">
+<div id="dasharray-link" class="member-link">
+<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+<div id="dasharray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>[]</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Array</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-17">
+var path = new Path.Circle(new Point(80, 50), 40);
+path.strokeWidth = 2;
+path.strokeColor = 'black';
+
+// Set the dashed stroke to [10pt dash, 4pt gap]:
+path.dashArray = [10, 4];
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="miterlimit-member" class="member">
+<div id="miterlimit-link" class="member-link">
+<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+<div id="miterlimit-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The miter limit of the stroke.</p>
+<p>When two line segments meet at a sharp angle and miter joins have been
+specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
+extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
+miterLimit imposes a limit on the ratio of the miter length to the
+<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>10</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Fill Style</h3>
+
+<div id="fillcolor-member" class="member">
+<div id="fillcolor-link" class="member-link">
+<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+<div id="fillcolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The fill color of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the fill color of a path to red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-18">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set the fill color of the circle to RGB red:
+circle.fillColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Clones the item within the same project and places the copy above the
+item.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Cloning items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-19">
+var circle = new Path.Circle(new Point(50, 50), 10);
+circle.fillColor = 'red';
+
+// Make 20 copies of the circle:
+for (var i = 0; i < 20; i++) {
+	var copy = circle.clone();
+
+	// Distribute the copies horizontally, so we can see them:
+	copy.position.x += i * copy.bounds.width;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="copyto-item-member" class="member">
+<div id="copyto-item-link" class="member-link">
+<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+<div id="copyto-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>When passed a project, copies the item to the project,
+or duplicates it within the same project. When passed an item,
+copies the item into the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
+&mdash;&nbsp;the item or project to
+copy the item to
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="rasterize-member" class="member">
+<div id="rasterize-link" class="member-link">
+<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+<div id="rasterize-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rasterizes the item into a newly created Raster object. The item itself
+is not removed after rasterization.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>resolution:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the resolution of the raster in dpi
+&mdash;&nbsp;optional, default: <tt>72</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Rasterizing an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-20">
+var circle = new Path.Circle(new Point(80, 50), 5);
+circle.fillColor = 'red';
+
+// Create a rasterized version of the path:
+var raster = circle.rasterize();
+
+// Move it 100pt to the right:
+raster.position.x += 100;
+
+// Scale the path and the raster by 300%, so we can compare them:
+circle.scale(5);
+raster.scale(5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="hittest-point-member" class="member">
+<div id="hittest-point-link" class="member-link">
+<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+<div id="hittest-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Perform a hit test on the item (and its children, if it is a
+<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
+<p>The optional options object allows you to control the specifics of the
+hit test and may contain a combination of the following values:</p>
+<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
+points.</p>
+<p><b>options.type:</b> Only hit test again a certain item
+type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
+<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
+<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
+items, taking into account stroke width.</p>
+<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
+<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
+<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
+(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
+<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
+last segment points of open path items.</p>
+<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
+side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
+(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
+<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
+<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The point where the hit test should be performed
+
+</li>
+
+<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+
+&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
+tolerance: 2 }</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
+information about what exactly was hit or <tt>null</tt> if nothing was
+hit.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<h3>Hierarchy Operations</h3>
+
+<div id="addchild-item-member" class="member">
+<div id="addchild-item-link" class="member-link">
+<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+<div id="addchild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified item as a child of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be added as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="insertchild-index-item-member" class="member">
+<div id="insertchild-index-item-link" class="member-link">
+<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+<div id="insertchild-index-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="addchildren-items-member" class="member">
+<div id="addchildren-items-link" class="member-link">
+<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+<div id="addchildren-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified items as children of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>items:</tt> 
+<tt>item</tt>
+&mdash;&nbsp;The items to be added as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="insertchildren-index-items-member" class="member">
+<div id="insertchildren-index-items-link" class="member-link">
+<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+<div id="insertchildren-index-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified items as children of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>items:</tt> 
+Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+&mdash;&nbsp;The items to be appended as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="insertabove-item-member" class="member">
+<div id="insertabove-item-link" class="member-link">
+<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+<div id="insertabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="insertbelow-item-member" class="member">
+<div id="insertbelow-item-link" class="member-link">
+<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+<div id="insertbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="remove-member" class="member">
+<div id="remove-link" class="member-link">
+<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+<div id="remove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item from the project. If the item has children, they are also
+removed.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="removechildren-member" class="member">
+<div id="removechildren-link" class="member-link">
+<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+<div id="removechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="removechildren-from-member" class="member">
+<div id="removechildren-from-link" class="member-link">
+<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+<div id="removechildren-from-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the children from the specified <tt>from</tt> index to the
+<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>from:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the beginning index, inclusive
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the ending index, exclusive
+&mdash;&nbsp;optional, default: <tt>children.length</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="reversechildren-member" class="member">
+<div id="reversechildren-link" class="member-link">
+<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+<div id="reversechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Reverses the order of the item's children</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<h3>Hierarchy Tests</h3>
+
+<div id="haschildren-member" class="member">
+<div id="haschildren-link" class="member-link">
+<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+<div id="haschildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item contains any children items.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="isabove-item-member" class="member">
+<div id="isabove-item-link" class="member-link">
+<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+<div id="isabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if this item is above the specified item in the stacking order
+of the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="isbelow-item-member" class="member">
+<div id="isbelow-item-link" class="member-link">
+<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+<div id="isbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is below the specified item in the stacking order of
+the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="isparent-item-member" class="member">
+<div id="isparent-item-link" class="member-link">
+<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+<div id="isparent-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is the parent of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="ischild-item-member" class="member">
+<div id="ischild-item-link" class="member-link">
+<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+<div id="ischild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is a child of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="isdescendant-item-member" class="member">
+<div id="isdescendant-item-link" class="member-link">
+<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+<div id="isdescendant-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is contained within the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="isancestor-item-member" class="member">
+<div id="isancestor-item-link" class="member-link">
+<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+<div id="isancestor-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is an ancestor of the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
+item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="isgroupedwith-item-member" class="member">
+<div id="isgroupedwith-item-link" class="member-link">
+<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+<div id="isgroupedwith-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the item is grouped with the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<h3>Transform Functions</h3>
+
+<div id="scale-scale-member" class="member">
+<div id="scale-scale-link" class="member-link">
+<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+<div id="scale-scale-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given value from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>scale:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item from its center point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-21">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path by 150% from its center point
+circle.scale(1.5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Scaling an item from a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-22">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path 150% from its bottom left corner
+circle.scale(1.5, circle.bounds.bottomLeft);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="scale-hor-ver-member" class="member">
+<div id="scale-hor-ver-link" class="member-link">
+<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="scale-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given values from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal scale factor
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item horizontally by 300%:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-23">
+// Create a circle shaped path at { x: 100, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(100, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path horizontally by 300%
+circle.scale(3, 1);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="translate-delta-member" class="member">
+<div id="translate-delta-link" class="member-link">
+<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+<div id="translate-delta-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Translates (moves) the item by the given offset point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>delta:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the offset to translate the item by
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="rotate-angle-member" class="member">
+<div id="rotate-angle-link" class="member-link">
+<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+<div id="rotate-angle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rotates the item by a given angle around the given point.</p>
+<p>Angles are oriented clockwise and measured in degrees.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>angle:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the rotation angle
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Rotating an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-24">
+// Create a rectangle shaped path with its top left
+// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
+var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
+path.fillColor = 'black';
+
+// Rotate the path by 30 degrees:
+path.rotate(30);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Rotating an item around a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-25">
+// Create a rectangle shaped path with its top left
+// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
+var topLeft = new Point(175, 50);
+var size = new Size(100, 100);
+var path = new Path.Rectangle(topLeft, size);
+path.fillColor = 'black';
+
+// Draw a circle shaped path in the center of the view,
+// to show the rotation point:
+var circle = new Path.Circle(view.center, 5);
+circle.fillColor = 'white';
+
+// Each frame rotate the path 3 degrees around the center point
+// of the view:
+function onFrame(event) {
+	path.rotate(3, view.center);
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-25"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="shear-point-member" class="member">
+<div id="shear-point-link" class="member-link">
+<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+<div id="shear-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given value from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="shear-hor-ver-member" class="member">
+<div id="shear-hor-ver-link" class="member-link">
+<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="shear-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given values from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal shear factor.
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical shear factor.
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="transform-matrix-flags-member" class="member">
+<div id="transform-matrix-flags-link" class="member-link">
+<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+<div id="transform-matrix-flags-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>matrix:</tt> 
+<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+
+
+</li>
+
+<li>
+<tt>flags:</tt> 
+
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="fitbounds-rectangle-member" class="member">
+<div id="fitbounds-rectangle-link" class="member-link">
+<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+<div id="fitbounds-rectangle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
+rectangle, without changing its aspect ratio.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rectangle:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+
+
+</li>
+
+<li>
+<tt>fill:</tt> 
+<tt>Boolean</tt>
+
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-26">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-27">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds, true);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-28">
+var path = new Path.Circle(new Point(80, 50), 30);
+path.fillColor = 'red';
+
+// Fit the path to the bounding rectangle of the view:
+path.fitBounds(view.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-28"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<h3>Remove On Event</h3>
+
+<div id="removeon-object-member" class="member">
+<div id="removeon-object-link" class="member-link">
+<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+<div id="removeon-object-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the events specified in the passed object literal
+occur.</p>
+<p>The object literal can contain the following values:</p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
+fired: <tt>object.move = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
+fired: <tt>object.drag = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
+fired: <tt>object.down = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
+fired: <tt>object.up = true</tt></p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>object:</tt> 
+<tt>Object</tt>
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-29">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path on the next onMouseDrag or onMouseDown event:
+	path.removeOn({
+		drag: true,
+		down: true
+	});
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-29"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="removeonmove-member" class="member">
+<div id="removeonmove-link" class="member-link">
+<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+<div id="removeonmove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Move your mouse below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-30">
+function onMouseMove(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next move event, automatically remove the path:
+	path.removeOnMove();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-30"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="removeondown-member" class="member">
+<div id="removeondown-link" class="member-link">
+<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+<div id="removeondown-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-31">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, next time the mouse is pressed:
+	path.removeOnDown();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-31"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="removeondrag-member" class="member">
+<div id="removeondrag-link" class="member-link">
+<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+<div id="removeondrag-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-32">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next drag event, automatically remove the path:
+	path.removeOnDrag();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-32"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="removeonup-member" class="member">
+<div id="removeonup-link" class="member-link">
+<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+<div id="removeonup-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-33">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, when the mouse is released:
+	path.removeOnUp();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-33"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Key.html b/dist/docs/classes/Key.html
new file mode 100644
index 00000000..4f5f511f
--- /dev/null
+++ b/dist/docs/classes/Key.html
@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Key</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Key</h1>
+
+
+
+</div>
+
+
+
+
+
+
+
+
+	<div class="reference-members"><h2>Static Methods</h2>
+		
+			
+<div id="isdown-key-member" class="member">
+<div id="isdown-key-link" class="member-link">
+<a name="isdown-key" href="#" onClick="return toggleMember('isdown-key', false);"><tt><b>Key.isDown</b>(key)</tt></a>
+</div>
+<div id="isdown-key-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isdown-key', false);"><tt><b>Key.isDown</b>(key)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdown-key', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified key is pressed.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>key:</tt> 
+<tt>String</tt>
+&mdash;&nbsp;One of: 'backspace', 'enter', 'shift', 'control',
+'option', 'pause', 'caps-lock', 'escape', 'space', 'end', 'home',
+'left', 'up', 'right', 'down', 'delete', 'command'
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the key is pressed, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Whenever the user clicks, create a circle shaped path. If the 'a' key is pressed, fill it with red, otherwise fill it with blue:
+</p>
+
+
+<pre class="code">function onMouseDown(event) {
+	var path = new Path.Circle(event.point, 10);
+	if(Key.isDown('a')) {
+		path.fillColor = 'red';
+	} else {
+		path.fillColor = 'blue';
+	}
+}</pre>
+
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/KeyEvent.html b/dist/docs/classes/KeyEvent.html
new file mode 100644
index 00000000..3a19161f
--- /dev/null
+++ b/dist/docs/classes/KeyEvent.html
@@ -0,0 +1,220 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>KeyEvent</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>KeyEvent</h1>
+
+<p> Extends <b><a href="../classes/Event.html"><tt>Event</tt></a></b></p>
+
+<p>KeyEvent The KeyEvent object is received by the <a href="../classes/Tool.html"><tt>Tool</tt></a>'s
+keyboard handlers <a href="../classes/Tool.html#onkeydown"><tt>tool.onKeyDown</tt></a>, <a href="../classes/Tool.html#onkeyup"><tt>tool.onKeyUp</tt></a>,
+The KeyEvent object is the only parameter passed to these functions
+and contains information about the keyboard event.</p>
+
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="type-member" class="member">
+<div id="type-link" class="member-link">
+<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
+</div>
+<div id="type-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The type of key event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('keydown', 'keyup')</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="character-member" class="member">
+<div id="character-link" class="member-link">
+<a name="character" href="#" onClick="return toggleMember('character', false);"><tt><b>character</b></tt></a>
+</div>
+<div id="character-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('character', false);"><tt><b>character</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('character', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The string character of the key that caused this key event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="key-member" class="member">
+<div id="key-link" class="member-link">
+<a name="key" href="#" onClick="return toggleMember('key', false);"><tt><b>key</b></tt></a>
+</div>
+<div id="key-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('key', false);"><tt><b>key</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('key', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The key that caused this key event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="tostring-member" class="member">
+<div id="tostring-link" class="member-link">
+<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+<div id="tostring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the key event.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
+
+	
+<div id="modifiers-member" class="member">
+<div id="modifiers-link" class="member-link">
+<a name="modifiers" href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
+</div>
+<div id="modifiers-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modifiers', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>object</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Layer.html b/dist/docs/classes/Layer.html
new file mode 100644
index 00000000..3f626910
--- /dev/null
+++ b/dist/docs/classes/Layer.html
@@ -0,0 +1,3588 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Layer</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Layer</h1>
+
+<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b>, <b><a href="../classes/Group.html"><tt>Group</tt></a></b></p>
+
+<p>The Layer item represents a layer in a Paper.js project.</p>
+<p>The layer which is currently active can be accessed through
+<a href="../classes/Project.html#activelayer"><tt>project.activeLayer</tt></a>.</p>
+<p>An array of all layers in a project can be accessed through
+<a href="../classes/Project.html#layers"><tt>project.layers</tt></a>.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="layer-member" class="member">
+<div id="layer-link" class="member-link">
+<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>Layer</b>([children])</tt></a>
+</div>
+<div id="layer-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('layer', false);"><tt><b>Layer</b>([children])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a new Layer item and places it at the end of the
+<a href="../classes/Project.html#layers"><tt>project.layers</tt></a> array. The newly created layer will be activated,
+so all newly created items will be placed within it.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>children:</tt> 
+Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+&mdash;&nbsp;An array of items that will be added to the
+newly created layer.
+&mdash;&nbsp;optional
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var layer = new Layer();</pre>
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="activate-member" class="member">
+<div id="activate-link" class="member-link">
+<a name="activate" href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
+</div>
+<div id="activate-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activate', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Activates the layer.</p>
+	
+	
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var layer = new Layer();
+layer.activate();
+console.log(project.activeLayer == layer); // true</pre>
+
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="id-member" class="member">
+<div id="id-link" class="member-link">
+<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+<div id="id-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The unique id of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="name-member" class="member">
+<div id="name-link" class="member-link">
+<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+<div id="name-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The name of the item. If the item has a name, it can be accessed by name
+through its parent's children list.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and add path to it as a child:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="position-member" class="member">
+<div id="position-link" class="member-link">
+<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+<div id="position-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item's position within the project. This is the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the position of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+// Create a circle at position { x: 10, y: 10 }
+var circle = new Path.Circle(new Point(10, 10), 10);
+circle.fillColor = 'red';
+
+// Move the circle to { x: 20, y: 20 }
+circle.position = new Point(20, 20);
+
+// Move the circle 100 points to the right and 50 points down
+circle.position += new Point(100, 50);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Changing the x coordinate of an item's position:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+// Create a circle at position { x: 20, y: 20 }
+var circle = new Path.Circle(new Point(20, 20), 10);
+circle.fillColor = 'red';
+
+// Move the circle 100 points to the right
+circle.position.x += 100;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="style-member" class="member">
+<div id="style-link" class="member-link">
+<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+<div id="style-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The path style of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.style = {
+	fillColor: 'blue',
+	strokeColor: 'red',
+	strokeWidth: 5
+};
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Copying the style of another item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+var path = new Path.Circle(new Point(50, 50), 30);
+path.fillColor = 'red';
+
+var path2 = new Path.Circle(new Point(180, 50), 20);
+// Copy the path style of path:
+path2.style = path.style;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Applying the same style object to multiple items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-5">
+var myStyle = {
+	fillColor: 'red',
+	strokeColor: 'blue',
+	strokeWidth: 4
+};
+
+var path = new Path.Circle(new Point(80, 50), 30);
+path.style = myStyle;
+
+var path2 = new Path.Circle(new Point(150, 50), 20);
+path2.style = myStyle;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="visible-member" class="member">
+<div id="visible-link" class="member-link">
+<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+<div id="visible-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
+item won't be drawn.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>true</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Hiding an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-6">
+var path = new Path.Circle(new Point(50, 50), 20);
+path.fillColor = 'red';
+
+// Hide the path:
+path.visible = false;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="blendmode-member" class="member">
+<div id="blendmode-link" class="member-link">
+<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+<div id="blendmode-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The blend mode of the item.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'normal'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
+'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
+'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
+'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's blend mode:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-7">
+// Create a white rectangle in the background
+// with the same dimensions as the view:
+var background = new Path.Rectangle(view.bounds);
+background.fillColor = 'white';
+
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.fillColor = 'blue';
+
+// Set the blend mode of circle2:
+circle2.blendMode = 'multiply';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="opacity-member" class="member">
+<div id="opacity-link" class="member-link">
+<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+<div id="opacity-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Making an item 50% transparent:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-8">
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.style = {
+	fillColor: 'blue',
+	strokeColor: 'green',
+	strokeWidth: 10
+};
+
+// Make circle2 50% transparent:
+circle2.opacity = 0.5;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="guide-member" class="member">
+<div id="guide-link" class="member-link">
+<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+<div id="guide-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item functions as a guide. When set to
+<tt>true</tt>, the item will be drawn at the end as a guide.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="selected-member" class="member">
+<div id="selected-link" class="member-link">
+<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+<div id="selected-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether an item is selected and will also return <tt>true</tt>
+if the item is partially selected (groups with some selected or partially
+selected paths).</p>
+<p>Paper.js draws the visual outlines of selected items on top of your
+project. This can be useful for debugging, as it allows you to see the
+construction of paths, position of path curves, individual segment points
+and bounding boxes of symbol and raster items.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Selecting an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-9">
+var path = new Path.Circle(new Size(80, 50), 35);
+path.selected = true; // Select the path
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="clipmask-member" class="member">
+<div id="clipmask-link" class="member-link">
+<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+<div id="clipmask-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item defines a clip mask. This can only be set on
+paths, compound paths, and text frame objects, and only if the item is
+already contained within a clipping group.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Project Hierarchy</h3>
+
+<div id="project-member" class="member">
+<div id="project-link" class="member-link">
+<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+<div id="project-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The project that this item belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Project.html"><tt>Project</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="layer-member" class="member">
+<div id="layer-link" class="member-link">
+<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+<div id="layer-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The layer that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Layer.html"><tt>Layer</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="parent-member" class="member">
+<div id="parent-link" class="member-link">
+<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+<div id="parent-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var path = new Path();
+
+// New items are placed in the active layer:
+console.log(path.parent == project.activeLayer); // true
+
+var group = new Group();
+group.addChild(path);
+
+// Now the parent of the path has become the group:
+console.log(path.parent == group); // true</pre>
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="children-member" class="member">
+<div id="children-link" class="member-link">
+<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+<div id="children-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The children items contained within this item. Items that define a
+<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
+<p><b>Please note:</b> The children array should not be modified directly
+using array functions. To remove single items from the children list, use
+<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
+<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
+<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Accessing items in the children array:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-10">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// Access the path through the group's children array:
+group.children[0].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Accessing children by name:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-11">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'orange';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Passing an array of items to item.children:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-12">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+var group = new Group();
+group.children = [path];
+
+// The path is the first child of the group:
+group.firstChild.fillColor = 'green';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="firstchild-member" class="member">
+<div id="firstchild-link" class="member-link">
+<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+<div id="firstchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The first item contained within this item. This is a shortcut for
+accessing <tt>item.children[0]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="lastchild-member" class="member">
+<div id="lastchild-link" class="member-link">
+<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+<div id="lastchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The last item contained within this item.This is a shortcut for
+accessing <tt>item.children[item.children.length - 1]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="nextsibling-member" class="member">
+<div id="nextsibling-link" class="member-link">
+<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+<div id="nextsibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The next item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="previoussibling-member" class="member">
+<div id="previoussibling-link" class="member-link">
+<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+<div id="previoussibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The previous item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="index-member" class="member">
+<div id="index-link" class="member-link">
+<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+<div id="index-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The index of this item within the list of its parent's children.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Bounding Rectangles</h3>
+
+<div id="bounds-member" class="member">
+<div id="bounds-link" class="member-link">
+<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+<div id="bounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item excluding stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokebounds-member" class="member">
+<div id="strokebounds-link" class="member-link">
+<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+<div id="strokebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="handlebounds-member" class="member">
+<div id="handlebounds-link" class="member-link">
+<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+<div id="handlebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including handles.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Stroke Style</h3>
+
+<div id="strokecolor-member" class="member">
+<div id="strokecolor-link" class="member-link">
+<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+<div id="strokecolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the stroke color of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-13">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to RGB red:
+circle.strokeColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokewidth-member" class="member">
+<div id="strokewidth-link" class="member-link">
+<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+<div id="strokewidth-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The width of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's stroke width:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-14">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to black:
+circle.strokeColor = 'black';
+
+// Set its stroke width to 10:
+circle.strokeWidth = 10;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokecap-member" class="member">
+<div id="strokecap-link" class="member-link">
+<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+<div id="strokecap-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
+have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'butt'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('round', 'square', 'butt')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke caps:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-15">
+var line = new Path(new Point(80, 50), new Point(420, 50));
+line.strokeColor = 'black';
+line.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+line.selected = true;
+
+// Set the stroke cap of the line to be round:
+line.strokeCap = 'round';
+
+// Copy the path and set its stroke cap to be square:
+var line2 = line.clone();
+line2.position.y += 50;
+line2.strokeCap = 'square';
+
+// Make another copy and set its stroke cap to be butt:
+var line2 = line.clone();
+line2.position.y += 100;
+line2.strokeCap = 'butt';
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-15"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokejoin-member" class="member">
+<div id="strokejoin-link" class="member-link">
+<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+<div id="strokejoin-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the corners of paths when they have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'miter'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt> ('miter', 'round', 'bevel')
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke joins:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-16">
+var path = new Path();
+path.add(new Point(80, 100));
+path.add(new Point(120, 40));
+path.add(new Point(160, 100));
+path.strokeColor = 'black';
+path.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+path.selected = true;
+
+var path2 = path.clone();
+path2.position.x += path2.bounds.width * 1.5;
+path2.strokeJoin = 'round';
+
+var path3 = path2.clone();
+path3.position.x += path3.bounds.width * 1.5;
+path3.strokeJoin = 'bevel';
+</script>
+<div class="canvas"><canvas width="516" height="120" id="canvas-16"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="dashoffset-member" class="member">
+<div id="dashoffset-link" class="member-link">
+<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+<div id="dashoffset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The dash offset of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>0</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="dasharray-member" class="member">
+<div id="dasharray-link" class="member-link">
+<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+<div id="dasharray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>[]</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Array</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-17">
+var path = new Path.Circle(new Point(80, 50), 40);
+path.strokeWidth = 2;
+path.strokeColor = 'black';
+
+// Set the dashed stroke to [10pt dash, 4pt gap]:
+path.dashArray = [10, 4];
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="miterlimit-member" class="member">
+<div id="miterlimit-link" class="member-link">
+<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+<div id="miterlimit-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The miter limit of the stroke.</p>
+<p>When two line segments meet at a sharp angle and miter joins have been
+specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
+extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
+miterLimit imposes a limit on the ratio of the miter length to the
+<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>10</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Fill Style</h3>
+
+<div id="fillcolor-member" class="member">
+<div id="fillcolor-link" class="member-link">
+<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+<div id="fillcolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The fill color of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the fill color of a path to red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-18">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set the fill color of the circle to RGB red:
+circle.fillColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+<!-- =========================== inherited methods ========================= -->
+<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Clones the item within the same project and places the copy above the
+item.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Cloning items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-19">
+var circle = new Path.Circle(new Point(50, 50), 10);
+circle.fillColor = 'red';
+
+// Make 20 copies of the circle:
+for (var i = 0; i < 20; i++) {
+	var copy = circle.clone();
+
+	// Distribute the copies horizontally, so we can see them:
+	copy.position.x += i * copy.bounds.width;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="copyto-item-member" class="member">
+<div id="copyto-item-link" class="member-link">
+<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+<div id="copyto-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>When passed a project, copies the item to the project,
+or duplicates it within the same project. When passed an item,
+copies the item into the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
+&mdash;&nbsp;the item or project to
+copy the item to
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rasterize-member" class="member">
+<div id="rasterize-link" class="member-link">
+<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+<div id="rasterize-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rasterizes the item into a newly created Raster object. The item itself
+is not removed after rasterization.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>resolution:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the resolution of the raster in dpi
+&mdash;&nbsp;optional, default: <tt>72</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Rasterizing an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-20">
+var circle = new Path.Circle(new Point(80, 50), 5);
+circle.fillColor = 'red';
+
+// Create a rasterized version of the path:
+var raster = circle.rasterize();
+
+// Move it 100pt to the right:
+raster.position.x += 100;
+
+// Scale the path and the raster by 300%, so we can compare them:
+circle.scale(5);
+raster.scale(5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="hittest-point-member" class="member">
+<div id="hittest-point-link" class="member-link">
+<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+<div id="hittest-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Perform a hit test on the item (and its children, if it is a
+<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
+<p>The optional options object allows you to control the specifics of the
+hit test and may contain a combination of the following values:</p>
+<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
+points.</p>
+<p><b>options.type:</b> Only hit test again a certain item
+type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
+<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
+<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
+items, taking into account stroke width.</p>
+<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
+<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
+<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
+(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
+<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
+last segment points of open path items.</p>
+<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
+side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
+(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
+<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
+<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The point where the hit test should be performed
+
+</li>
+
+<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+
+&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
+tolerance: 2 }</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
+information about what exactly was hit or <tt>null</tt> if nothing was
+hit.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Operations</h3>
+
+<div id="addchild-item-member" class="member">
+<div id="addchild-item-link" class="member-link">
+<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+<div id="addchild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified item as a child of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be added as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchild-index-item-member" class="member">
+<div id="insertchild-index-item-link" class="member-link">
+<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+<div id="insertchild-index-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="addchildren-items-member" class="member">
+<div id="addchildren-items-link" class="member-link">
+<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+<div id="addchildren-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified items as children of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>items:</tt> 
+<tt>item</tt>
+&mdash;&nbsp;The items to be added as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchildren-index-items-member" class="member">
+<div id="insertchildren-index-items-link" class="member-link">
+<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+<div id="insertchildren-index-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified items as children of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>items:</tt> 
+Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+&mdash;&nbsp;The items to be appended as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertabove-item-member" class="member">
+<div id="insertabove-item-link" class="member-link">
+<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+<div id="insertabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertbelow-item-member" class="member">
+<div id="insertbelow-item-link" class="member-link">
+<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+<div id="insertbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendtop-item-member" class="member">
+<div id="appendtop-item-link" class="member-link">
+<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+<div id="appendtop-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it above all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendbottom-item-member" class="member">
+<div id="appendbottom-item-link" class="member-link">
+<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+<div id="appendbottom-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it below all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="moveabove-item-member" class="member">
+<div id="moveabove-item-link" class="member-link">
+<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+<div id="moveabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="movebelow-item-member" class="member">
+<div id="movebelow-item-link" class="member-link">
+<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+<div id="movebelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves the item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item below which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="remove-member" class="member">
+<div id="remove-link" class="member-link">
+<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+<div id="remove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item from the project. If the item has children, they are also
+removed.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-member" class="member">
+<div id="removechildren-link" class="member-link">
+<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+<div id="removechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-from-member" class="member">
+<div id="removechildren-from-link" class="member-link">
+<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+<div id="removechildren-from-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the children from the specified <tt>from</tt> index to the
+<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>from:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the beginning index, inclusive
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the ending index, exclusive
+&mdash;&nbsp;optional, default: <tt>children.length</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="reversechildren-member" class="member">
+<div id="reversechildren-link" class="member-link">
+<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+<div id="reversechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Reverses the order of the item's children</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Tests</h3>
+
+<div id="haschildren-member" class="member">
+<div id="haschildren-link" class="member-link">
+<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+<div id="haschildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item contains any children items.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isabove-item-member" class="member">
+<div id="isabove-item-link" class="member-link">
+<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+<div id="isabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if this item is above the specified item in the stacking order
+of the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isbelow-item-member" class="member">
+<div id="isbelow-item-link" class="member-link">
+<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+<div id="isbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is below the specified item in the stacking order of
+the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isparent-item-member" class="member">
+<div id="isparent-item-link" class="member-link">
+<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+<div id="isparent-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is the parent of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="ischild-item-member" class="member">
+<div id="ischild-item-link" class="member-link">
+<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+<div id="ischild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is a child of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isdescendant-item-member" class="member">
+<div id="isdescendant-item-link" class="member-link">
+<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+<div id="isdescendant-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is contained within the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isancestor-item-member" class="member">
+<div id="isancestor-item-link" class="member-link">
+<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+<div id="isancestor-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is an ancestor of the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
+item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isgroupedwith-item-member" class="member">
+<div id="isgroupedwith-item-link" class="member-link">
+<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+<div id="isgroupedwith-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the item is grouped with the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Transform Functions</h3>
+
+<div id="scale-scale-member" class="member">
+<div id="scale-scale-link" class="member-link">
+<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+<div id="scale-scale-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given value from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>scale:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item from its center point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-21">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path by 150% from its center point
+circle.scale(1.5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Scaling an item from a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-22">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path 150% from its bottom left corner
+circle.scale(1.5, circle.bounds.bottomLeft);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="scale-hor-ver-member" class="member">
+<div id="scale-hor-ver-link" class="member-link">
+<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="scale-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given values from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal scale factor
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item horizontally by 300%:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-23">
+// Create a circle shaped path at { x: 100, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(100, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path horizontally by 300%
+circle.scale(3, 1);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="translate-delta-member" class="member">
+<div id="translate-delta-link" class="member-link">
+<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+<div id="translate-delta-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Translates (moves) the item by the given offset point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>delta:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the offset to translate the item by
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rotate-angle-member" class="member">
+<div id="rotate-angle-link" class="member-link">
+<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+<div id="rotate-angle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rotates the item by a given angle around the given point.</p>
+<p>Angles are oriented clockwise and measured in degrees.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>angle:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the rotation angle
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Rotating an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-24">
+// Create a rectangle shaped path with its top left
+// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
+var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
+path.fillColor = 'black';
+
+// Rotate the path by 30 degrees:
+path.rotate(30);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Rotating an item around a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-25">
+// Create a rectangle shaped path with its top left
+// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
+var topLeft = new Point(175, 50);
+var size = new Size(100, 100);
+var path = new Path.Rectangle(topLeft, size);
+path.fillColor = 'black';
+
+// Draw a circle shaped path in the center of the view,
+// to show the rotation point:
+var circle = new Path.Circle(view.center, 5);
+circle.fillColor = 'white';
+
+// Each frame rotate the path 3 degrees around the center point
+// of the view:
+function onFrame(event) {
+	path.rotate(3, view.center);
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-25"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="shear-point-member" class="member">
+<div id="shear-point-link" class="member-link">
+<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+<div id="shear-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given value from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="shear-hor-ver-member" class="member">
+<div id="shear-hor-ver-link" class="member-link">
+<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="shear-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given values from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal shear factor.
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical shear factor.
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="transform-matrix-flags-member" class="member">
+<div id="transform-matrix-flags-link" class="member-link">
+<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+<div id="transform-matrix-flags-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>matrix:</tt> 
+<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+
+
+</li>
+
+<li>
+<tt>flags:</tt> 
+
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="fitbounds-rectangle-member" class="member">
+<div id="fitbounds-rectangle-link" class="member-link">
+<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+<div id="fitbounds-rectangle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
+rectangle, without changing its aspect ratio.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rectangle:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+
+
+</li>
+
+<li>
+<tt>fill:</tt> 
+<tt>Boolean</tt>
+
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-26">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-27">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds, true);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-28">
+var path = new Path.Circle(new Point(80, 50), 30);
+path.fillColor = 'red';
+
+// Fit the path to the bounding rectangle of the view:
+path.fitBounds(view.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-28"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<h3>Remove On Event</h3>
+
+<div id="removeon-object-member" class="member">
+<div id="removeon-object-link" class="member-link">
+<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+<div id="removeon-object-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the events specified in the passed object literal
+occur.</p>
+<p>The object literal can contain the following values:</p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
+fired: <tt>object.move = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
+fired: <tt>object.drag = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
+fired: <tt>object.down = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
+fired: <tt>object.up = true</tt></p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>object:</tt> 
+<tt>Object</tt>
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-29">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path on the next onMouseDrag or onMouseDown event:
+	path.removeOn({
+		drag: true,
+		down: true
+	});
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-29"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonmove-member" class="member">
+<div id="removeonmove-link" class="member-link">
+<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+<div id="removeonmove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Move your mouse below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-30">
+function onMouseMove(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next move event, automatically remove the path:
+	path.removeOnMove();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-30"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondown-member" class="member">
+<div id="removeondown-link" class="member-link">
+<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+<div id="removeondown-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-31">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, next time the mouse is pressed:
+	path.removeOnDown();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-31"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondrag-member" class="member">
+<div id="removeondrag-link" class="member-link">
+<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+<div id="removeondrag-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-32">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next drag event, automatically remove the path:
+	path.removeOnDrag();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-32"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonup-member" class="member">
+<div id="removeonup-link" class="member-link">
+<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+<div id="removeonup-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-33">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, when the mouse is released:
+	path.removeOnUp();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-33"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+</div>
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/Group.html"><tt>Group</tt></a></h2>
+
+	
+<div id="clipped-member" class="member">
+<div id="clipped-link" class="member-link">
+<a name="clipped" href="#" onClick="return toggleMember('clipped', false);"><tt><b>clipped</b></tt></a>
+</div>
+<div id="clipped-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clipped', false);"><tt><b>clipped</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipped', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the group item is to be clipped.</p>
+<p>When setting to <tt>true</tt>, the first child in the group is
+automatically defined as the clipping mask.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Line.html b/dist/docs/classes/Line.html
new file mode 100644
index 00000000..fc195f83
--- /dev/null
+++ b/dist/docs/classes/Line.html
@@ -0,0 +1,329 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Line</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Line</h1>
+
+<p>The Line object represents..</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="line-point1-point2-member" class="member">
+<div id="line-point1-point2-link" class="member-link">
+<a name="line-point1-point2" href="#" onClick="return toggleMember('line-point1-point2', false);"><tt><b>Line</b>(point1, point2[, infinite])</tt></a>
+</div>
+<div id="line-point1-point2-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('line-point1-point2', false);"><tt><b>Line</b>(point1, point2[, infinite])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('line-point1-point2', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a Line object.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point1:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>point2:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>infinite:</tt> 
+<tt>Boolean</tt>
+
+&mdash;&nbsp;optional, default: <tt>true</tt>
+</li>
+
+</ul>
+
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="point-member" class="member">
+<div id="point-link" class="member-link">
+<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
+</div>
+<div id="point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The starting point of the line</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="vector-member" class="member">
+<div id="vector-link" class="member-link">
+<a name="vector" href="#" onClick="return toggleMember('vector', false);"><tt><b>vector</b></tt></a>
+</div>
+<div id="vector-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('vector', false);"><tt><b>vector</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('vector', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The vector of the line</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="infinite-member" class="member">
+<div id="infinite-link" class="member-link">
+<a name="infinite" href="#" onClick="return toggleMember('infinite', false);"><tt><b>infinite</b></tt></a>
+</div>
+<div id="infinite-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('infinite', false);"><tt><b>infinite</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('infinite', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the line extends infinitely</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="intersect-line-member" class="member">
+<div id="intersect-line-link" class="member-link">
+<a name="intersect-line" href="#" onClick="return toggleMember('intersect-line', false);"><tt><b>intersect</b>(line)</tt></a>
+</div>
+<div id="intersect-line-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('intersect-line', false);"><tt><b>intersect</b>(line)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('intersect-line', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>line:</tt> 
+<a href="../classes/Line.html"><tt>Line</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the intersection point of the lines
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="getside-point-member" class="member">
+<div id="getside-point-link" class="member-link">
+<a name="getside-point" href="#" onClick="return toggleMember('getside-point', false);"><tt><b>getSide</b>(point)</tt></a>
+</div>
+<div id="getside-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getside-point', false);"><tt><b>getSide</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getside-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Number</tt></tt>
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="getdistance-point-member" class="member">
+<div id="getdistance-point-link" class="member-link">
+<a name="getdistance-point" href="#" onClick="return toggleMember('getdistance-point', false);"><tt><b>getDistance</b>(point)</tt></a>
+</div>
+<div id="getdistance-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getdistance-point', false);"><tt><b>getDistance</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getdistance-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Number</tt></tt>
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Matrix.html b/dist/docs/classes/Matrix.html
new file mode 100644
index 00000000..844dc516
--- /dev/null
+++ b/dist/docs/classes/Matrix.html
@@ -0,0 +1,1824 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Matrix</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Matrix</h1>
+
+<p>An affine transform performs a linear mapping from 2D coordinates
+to other 2D coordinates that preserves the "straightness" and
+"parallelness" of lines.</p>
+<p>Such a coordinate transformation can be represented by a 3 row by 3
+column matrix with an implied last row of [ 0 0 1 ]. This matrix
+transforms source coordinates (x,y) into destination coordinates (x',y')
+by considering them to be a column vector and multiplying the coordinate
+vector by the matrix according to the following process:</p>
+<pre class="code">
+     [ x ]   [ a  b  tx ] [ x ]   [ a * x + b * y + tx ]
+     [ y ] = [ c  d  ty ] [ y ] = [ c * x + d * y + ty ]
+     [ 1 ]   [ 0  0  1  ] [ 1 ]   [         1          ]
+</pre>
+<p>This class is optimized for speed and minimizes calculations based on its
+knowledge of the underlying matrix (as opposed to say simply performing
+matrix multiplication).</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="matrix-a-c-b-d-tx-ty-member" class="member">
+<div id="matrix-a-c-b-d-tx-ty-link" class="member-link">
+<a name="matrix-a-c-b-d-tx-ty" href="#" onClick="return toggleMember('matrix-a-c-b-d-tx-ty', false);"><tt><b>Matrix</b>(a, c, b, d, tx, ty)</tt></a>
+</div>
+<div id="matrix-a-c-b-d-tx-ty-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('matrix-a-c-b-d-tx-ty', false);"><tt><b>Matrix</b>(a, c, b, d, tx, ty)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('matrix-a-c-b-d-tx-ty', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a 2D affine transform.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>a:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The scaleX coordinate of the transform
+
+</li>
+
+<li>
+<tt>c:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The shearY coordinate of the transform
+
+</li>
+
+<li>
+<tt>b:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The shearX coordinate of the transform
+
+</li>
+
+<li>
+<tt>d:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The scaleY coordinate of the transform
+
+</li>
+
+<li>
+<tt>tx:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The translateX coordinate of the transform
+
+</li>
+
+<li>
+<tt>ty:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The translateY coordinate of the transform
+
+</li>
+
+</ul>
+
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="scalex-member" class="member">
+<div id="scalex-link" class="member-link">
+<a name="scalex" href="#" onClick="return toggleMember('scalex', false);"><tt><b>scaleX</b></tt></a>
+</div>
+<div id="scalex-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scalex', false);"><tt><b>scaleX</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scalex', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The scaling factor in the x-direction (<tt>a</tt>).</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="scaley-member" class="member">
+<div id="scaley-link" class="member-link">
+<a name="scaley" href="#" onClick="return toggleMember('scaley', false);"><tt><b>scaleY</b></tt></a>
+</div>
+<div id="scaley-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scaley', false);"><tt><b>scaleY</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scaley', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The scaling factor in the y-direction (<tt>d</tt>).</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="shearx-member" class="member">
+<div id="shearx-link" class="member-link">
+<a name="shearx" href="#" onClick="return toggleMember('shearx', false);"><tt><b>shearX</b></tt></a>
+</div>
+<div id="shearx-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shearx', false);"><tt><b>shearX</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shearx', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="sheary-member" class="member">
+<div id="sheary-link" class="member-link">
+<a name="sheary" href="#" onClick="return toggleMember('sheary', false);"><tt><b>shearY</b></tt></a>
+</div>
+<div id="sheary-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('sheary', false);"><tt><b>shearY</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('sheary', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="translatex-member" class="member">
+<div id="translatex-link" class="member-link">
+<a name="translatex" href="#" onClick="return toggleMember('translatex', false);"><tt><b>translateX</b></tt></a>
+</div>
+<div id="translatex-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('translatex', false);"><tt><b>translateX</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translatex', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The translation in the x-direction (<tt>tx</tt>).</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="translatey-member" class="member">
+<div id="translatey-link" class="member-link">
+<a name="translatey" href="#" onClick="return toggleMember('translatey', false);"><tt><b>translateY</b></tt></a>
+</div>
+<div id="translatey-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('translatey', false);"><tt><b>translateY</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translatey', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The translation in the y-direction (<tt>ty</tt>).</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="values-member" class="member">
+<div id="values-link" class="member-link">
+<a name="values" href="#" onClick="return toggleMember('values', false);"><tt><b>values</b></tt></a>
+</div>
+<div id="values-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('values', false);"><tt><b>values</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('values', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The transform values as an array, in the same sequence as they are passed
+to {@link #initialize(a, c, b, d, tx, ty)}.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="rotation-member" class="member">
+<div id="rotation-link" class="member-link">
+<a name="rotation" href="#" onClick="return toggleMember('rotation', false);"><tt><b>rotation</b></tt></a>
+</div>
+<div id="rotation-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rotation', false);"><tt><b>rotation</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotation', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The rotation angle of the matrix. If a non-uniform rotation is applied as
+a result of a shear() or scale() command, undefined is returned, as the
+resulting transformation cannot be expressed in one rotation angle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;A copy of this transform.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="set-a-c-b-d-tx-ty-member" class="member">
+<div id="set-a-c-b-d-tx-ty-link" class="member-link">
+<a name="set-a-c-b-d-tx-ty" href="#" onClick="return toggleMember('set-a-c-b-d-tx-ty', false);"><tt><b>set</b>(a, c, b, d, tx, ty)</tt></a>
+</div>
+<div id="set-a-c-b-d-tx-ty-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('set-a-c-b-d-tx-ty', false);"><tt><b>set</b>(a, c, b, d, tx, ty)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('set-a-c-b-d-tx-ty', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Sets this transform to the matrix specified by the 6 values.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>a:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The scaleX coordinate of the transform
+
+</li>
+
+<li>
+<tt>c:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The shearY coordinate of the transform
+
+</li>
+
+<li>
+<tt>b:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The shearX coordinate of the transform
+
+</li>
+
+<li>
+<tt>d:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The scaleY coordinate of the transform
+
+</li>
+
+<li>
+<tt>tx:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The translateX coordinate of the transform
+
+</li>
+
+<li>
+<tt>ty:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The translateY coordinate of the transform
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="scale-scale-member" class="member">
+<div id="scale-scale-link" class="member-link">
+<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+<div id="scale-scale-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Concatentates this transform with a scaling transformation.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>scale:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The scaling factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The center for the scaling transformation
+&mdash;&nbsp;optional
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="scale-hor-ver-member" class="member">
+<div id="scale-hor-ver-link" class="member-link">
+<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="scale-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Concatentates this transform with a scaling transformation.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The horizontal scaling factor
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The vertical scaling factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The center for the scaling transformation
+&mdash;&nbsp;optional
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="translate-point-member" class="member">
+<div id="translate-point-link" class="member-link">
+<a name="translate-point" href="#" onClick="return toggleMember('translate-point', false);"><tt><b>translate</b>(point)</tt></a>
+</div>
+<div id="translate-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('translate-point', false);"><tt><b>translate</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Concatentates this transform with a translate transformation.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The vector to translate by
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="translate-dx-dy-member" class="member">
+<div id="translate-dx-dy-link" class="member-link">
+<a name="translate-dx-dy" href="#" onClick="return toggleMember('translate-dx-dy', false);"><tt><b>translate</b>(dx, dy)</tt></a>
+</div>
+<div id="translate-dx-dy-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('translate-dx-dy', false);"><tt><b>translate</b>(dx, dy)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-dx-dy', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Concatentates this transform with a translate transformation.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>dx:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The distance to translate in the x direction
+
+</li>
+
+<li>
+<tt>dy:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The distance to translate in the y direction
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="rotate-angle-center-member" class="member">
+<div id="rotate-angle-center-link" class="member-link">
+<a name="rotate-angle-center" href="#" onClick="return toggleMember('rotate-angle-center', false);"><tt><b>rotate</b>(angle, center)</tt></a>
+</div>
+<div id="rotate-angle-center-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rotate-angle-center', false);"><tt><b>rotate</b>(angle, center)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle-center', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Concatentates this transform with a rotation transformation around an
+anchor point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>angle:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The angle of rotation measured in degrees
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The anchor point to rotate around
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="rotate-angle-x-y-member" class="member">
+<div id="rotate-angle-x-y-link" class="member-link">
+<a name="rotate-angle-x-y" href="#" onClick="return toggleMember('rotate-angle-x-y', false);"><tt><b>rotate</b>(angle, x, y)</tt></a>
+</div>
+<div id="rotate-angle-x-y-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rotate-angle-x-y', false);"><tt><b>rotate</b>(angle, x, y)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle-x-y', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Concatentates this transform with a rotation transformation around an
+anchor point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>angle:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The angle of rotation measured in degrees
+
+</li>
+
+<li>
+<tt>x:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The x coordinate of the anchor point
+
+</li>
+
+<li>
+<tt>y:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The y coordinate of the anchor point
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="shear-point-member" class="member">
+<div id="shear-point-link" class="member-link">
+<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+<div id="shear-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Concatentates this transform with a shear transformation.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The shear factor in x and y direction
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The center for the shear transformation
+&mdash;&nbsp;optional
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="shear-hor-ver-member" class="member">
+<div id="shear-hor-ver-link" class="member-link">
+<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="shear-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Concatentates this transform with a shear transformation.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The horizontal shear factor
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The vertical shear factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The center for the shear transformation
+&mdash;&nbsp;optional
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="tostring-member" class="member">
+<div id="tostring-link" class="member-link">
+<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+<div id="tostring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of this transform.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="concatenate-mx-member" class="member">
+<div id="concatenate-mx-link" class="member-link">
+<a name="concatenate-mx" href="#" onClick="return toggleMember('concatenate-mx', false);"><tt><b>concatenate</b>(mx)</tt></a>
+</div>
+<div id="concatenate-mx-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('concatenate-mx', false);"><tt><b>concatenate</b>(mx)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('concatenate-mx', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Concatenates an affine transform to this transform.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>mx:</tt> 
+<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+&mdash;&nbsp;The transform to concatenate
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="preconcatenate-mx-member" class="member">
+<div id="preconcatenate-mx-link" class="member-link">
+<a name="preconcatenate-mx" href="#" onClick="return toggleMember('preconcatenate-mx', false);"><tt><b>preConcatenate</b>(mx)</tt></a>
+</div>
+<div id="preconcatenate-mx-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('preconcatenate-mx', false);"><tt><b>preConcatenate</b>(mx)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('preconcatenate-mx', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Pre-concatenates an affine transform to this transform.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>mx:</tt> 
+<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+&mdash;&nbsp;The transform to preconcatenate
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="transform-point-member" class="member">
+<div id="transform-point-link" class="member-link">
+<a name="transform-point" href="#" onClick="return toggleMember('transform-point', false);"><tt><b>transform</b>(point)</tt></a>
+</div>
+<div id="transform-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('transform-point', false);"><tt><b>transform</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transforms a point and returns the result.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The point to be transformed
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;The transformed point
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="transform-src-srcOff-dst-dstOff-numPts-member" class="member">
+<div id="transform-src-srcOff-dst-dstOff-numPts-link" class="member-link">
+<a name="transform-src-srcOff-dst-dstOff-numPts" href="#" onClick="return toggleMember('transform-src-srcOff-dst-dstOff-numPts', false);"><tt><b>transform</b>(src, srcOff, dst, dstOff, numPts)</tt></a>
+</div>
+<div id="transform-src-srcOff-dst-dstOff-numPts-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('transform-src-srcOff-dst-dstOff-numPts', false);"><tt><b>transform</b>(src, srcOff, dst, dstOff, numPts)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-src-srcOff-dst-dstOff-numPts', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transforms an array of coordinates by this matrix and stores the results
+into the destination array, which is also returned.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>src:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The array containing the source points
+       as x, y value pairs
+
+</li>
+
+<li>
+<tt>srcOff:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The offset to the first point to be transformed
+
+</li>
+
+<li>
+<tt>dst:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The array into which to store the transformed
+       point pairs
+
+</li>
+
+<li>
+<tt>dstOff:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The offset of the location of the first
+       transformed point in the destination array
+
+</li>
+
+<li>
+<tt>numPts:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The number of points to tranform
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;The dst array, containing the transformed coordinates.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="inversetransform-point-member" class="member">
+<div id="inversetransform-point-link" class="member-link">
+<a name="inversetransform-point" href="#" onClick="return toggleMember('inversetransform-point', false);"><tt><b>inverseTransform</b>(point)</tt></a>
+</div>
+<div id="inversetransform-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('inversetransform-point', false);"><tt><b>inverseTransform</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('inversetransform-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inverse transforms a point and returns the result.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The point to be transformed
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="isidentity-member" class="member">
+<div id="isidentity-link" class="member-link">
+<a name="isidentity" href="#" onClick="return toggleMember('isidentity', false);"><tt><b>isIdentity</b>()</tt></a>
+</div>
+<div id="isidentity-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isidentity', false);"><tt><b>isIdentity</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isidentity', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;Whether this transform is the identity transform
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="isinvertible-member" class="member">
+<div id="isinvertible-link" class="member-link">
+<a name="isinvertible" href="#" onClick="return toggleMember('isinvertible', false);"><tt><b>isInvertible</b>()</tt></a>
+</div>
+<div id="isinvertible-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isinvertible', false);"><tt><b>isInvertible</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isinvertible', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns whether the transform is invertible. A transform is not
+invertible if the determinant is 0 or any value is non-finite or NaN.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;Whether the transform is invertible
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="issingular-member" class="member">
+<div id="issingular-link" class="member-link">
+<a name="issingular" href="#" onClick="return toggleMember('issingular', false);"><tt><b>isSingular</b>()</tt></a>
+</div>
+<div id="issingular-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('issingular', false);"><tt><b>isSingular</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('issingular', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the matrix is singular or not. Singular matrices cannot be
+inverted.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;Whether the matrix is singular
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="createinverse-member" class="member">
+<div id="createinverse-link" class="member-link">
+<a name="createinverse" href="#" onClick="return toggleMember('createinverse', false);"><tt><b>createInverse</b>()</tt></a>
+</div>
+<div id="createinverse-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('createinverse', false);"><tt><b>createInverse</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('createinverse', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inverts the transformation of the matrix. If the matrix is not invertible
+(in which case <a href="../classes/Matrix.html#issingular" onclick="return toggleMember('issingular', true);"><tt>isSingular</tt></a>() returns true), <tt>null </tt> is
+returned.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;The inverted matrix, or <tt>null </tt>, if the matrix is
+        singular
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="settoscale-hor-ver-member" class="member">
+<div id="settoscale-hor-ver-link" class="member-link">
+<a name="settoscale-hor-ver" href="#" onClick="return toggleMember('settoscale-hor-ver', false);"><tt><b>setToScale</b>(hor, ver)</tt></a>
+</div>
+<div id="settoscale-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('settoscale-hor-ver', false);"><tt><b>setToScale</b>(hor, ver)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('settoscale-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Sets this transform to a scaling transformation.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The horizontal scaling factor
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The vertical scaling factor
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="settotranslation-dx-dy-member" class="member">
+<div id="settotranslation-dx-dy-link" class="member-link">
+<a name="settotranslation-dx-dy" href="#" onClick="return toggleMember('settotranslation-dx-dy', false);"><tt><b>setToTranslation</b>(dx, dy)</tt></a>
+</div>
+<div id="settotranslation-dx-dy-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('settotranslation-dx-dy', false);"><tt><b>setToTranslation</b>(dx, dy)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('settotranslation-dx-dy', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Sets this transform to a translation transformation.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>dx:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The distance to translate in the x direction
+
+</li>
+
+<li>
+<tt>dy:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The distance to translate in the y direction
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="settoshear-hor-ver-member" class="member">
+<div id="settoshear-hor-ver-link" class="member-link">
+<a name="settoshear-hor-ver" href="#" onClick="return toggleMember('settoshear-hor-ver', false);"><tt><b>setToShear</b>(hor, ver)</tt></a>
+</div>
+<div id="settoshear-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('settoshear-hor-ver', false);"><tt><b>setToShear</b>(hor, ver)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('settoshear-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Sets this transform to a shearing transformation.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The horizontal shear factor
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The vertical shear factor
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="settorotation-angle-x-y-member" class="member">
+<div id="settorotation-angle-x-y-link" class="member-link">
+<a name="settorotation-angle-x-y" href="#" onClick="return toggleMember('settorotation-angle-x-y', false);"><tt><b>setToRotation</b>(angle, x, y)</tt></a>
+</div>
+<div id="settorotation-angle-x-y-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('settorotation-angle-x-y', false);"><tt><b>setToRotation</b>(angle, x, y)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('settorotation-angle-x-y', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Sets this transform to a rotation transformation.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>angle:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The angle of rotation measured in degrees
+
+</li>
+
+<li>
+<tt>x:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The x coordinate of the anchor point
+
+</li>
+
+<li>
+<tt>y:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The y coordinate of the anchor point
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;This affine transform
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="applytocontext-ctx-member" class="member">
+<div id="applytocontext-ctx-link" class="member-link">
+<a name="applytocontext-ctx" href="#" onClick="return toggleMember('applytocontext-ctx', false);"><tt><b>applyToContext</b>(ctx[, reset])</tt></a>
+</div>
+<div id="applytocontext-ctx-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('applytocontext-ctx', false);"><tt><b>applyToContext</b>(ctx[, reset])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('applytocontext-ctx', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Applies this matrix to the specified Canvas Context.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>ctx:</tt> 
+<tt>CanvasRenderingContext2D</tt>
+
+
+</li>
+
+<li>
+<tt>reset:</tt> 
+<tt>Boolean</tt>
+
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+	<div class="reference-members"><h2>Static Methods</h2>
+		
+			
+<div id="getscaleinstance-hor-ver-member" class="member">
+<div id="getscaleinstance-hor-ver-link" class="member-link">
+<a name="getscaleinstance-hor-ver" href="#" onClick="return toggleMember('getscaleinstance-hor-ver', false);"><tt><b>Matrix.getScaleInstance</b>(hor, ver)</tt></a>
+</div>
+<div id="getscaleinstance-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getscaleinstance-hor-ver', false);"><tt><b>Matrix.getScaleInstance</b>(hor, ver)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getscaleinstance-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Creates a transform representing a scaling transformation.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The horizontal scaling factor
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The vertical scaling factor
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;A transform representing a scaling
+        transformation
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="gettranslateinstance-dx-dy-member" class="member">
+<div id="gettranslateinstance-dx-dy-link" class="member-link">
+<a name="gettranslateinstance-dx-dy" href="#" onClick="return toggleMember('gettranslateinstance-dx-dy', false);"><tt><b>Matrix.getTranslateInstance</b>(dx, dy)</tt></a>
+</div>
+<div id="gettranslateinstance-dx-dy-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('gettranslateinstance-dx-dy', false);"><tt><b>Matrix.getTranslateInstance</b>(dx, dy)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gettranslateinstance-dx-dy', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Creates a transform representing a translation transformation.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>dx:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The distance to translate in the x direction
+
+</li>
+
+<li>
+<tt>dy:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The distance to translate in the y direction
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;A transform representing a translation
+        transformation
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="getshearinstance-hor-ver-center-member" class="member">
+<div id="getshearinstance-hor-ver-center-link" class="member-link">
+<a name="getshearinstance-hor-ver-center" href="#" onClick="return toggleMember('getshearinstance-hor-ver-center', false);"><tt><b>Matrix.getShearInstance</b>(hor, ver, center)</tt></a>
+</div>
+<div id="getshearinstance-hor-ver-center-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getshearinstance-hor-ver-center', false);"><tt><b>Matrix.getShearInstance</b>(hor, ver, center)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getshearinstance-hor-ver-center', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Creates a transform representing a shearing transformation.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The horizontal shear factor
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The vertical shear factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;A transform representing a shearing transformation
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="getrotateinstance-angle-x-y-member" class="member">
+<div id="getrotateinstance-angle-x-y-link" class="member-link">
+<a name="getrotateinstance-angle-x-y" href="#" onClick="return toggleMember('getrotateinstance-angle-x-y', false);"><tt><b>Matrix.getRotateInstance</b>(angle, x, y)</tt></a>
+</div>
+<div id="getrotateinstance-angle-x-y-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getrotateinstance-angle-x-y', false);"><tt><b>Matrix.getRotateInstance</b>(angle, x, y)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getrotateinstance-angle-x-y', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Creates a transform representing a rotation transformation.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>angle:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The angle of rotation measured in degrees
+
+</li>
+
+<li>
+<tt>x:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The x coordinate of the anchor point
+
+</li>
+
+<li>
+<tt>y:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The y coordinate of the anchor point
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Matrix.html"><tt>Matrix</tt></a></tt>&nbsp;&mdash;&nbsp;A transform representing a rotation transformation
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/PaperScope.html b/dist/docs/classes/PaperScope.html
new file mode 100644
index 00000000..e32769d1
--- /dev/null
+++ b/dist/docs/classes/PaperScope.html
@@ -0,0 +1,475 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>PaperScope</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>PaperScope</h1>
+
+<p>The <tt>PaperScope</tt> class represents the scope associated with a
+Paper context. When working with PaperScript, these scopes are automatically
+created for us, and through clever scoping the properties and methods of the
+active scope seem to become part of the global scope.</p>
+<p>When working with normal JavaScript code, <tt>PaperScope</tt> objects need to
+be manually created and handled.</p>
+<p>Paper classes can only be accessed through <tt>PaperScope</tt> objects. Thus
+in PaperScript they are global, while in JavaScript, they are available on
+the global <a href="../classes/global.html#paper"><tt>paper</tt></a> object. For JavaScript you can use
+<a href="../classes/PaperScope.html#install-scope"><tt>paperScope.install(scope)</tt></a> to install the Paper classes and objects
+on the global scope. Note that when working with more than one scope, this
+still works for classes, but not for objects like <a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a>,
+since they are not updated in the injected scope if scopes are switched.</p>
+<p>The global <a href="../classes/global.html#paper"><tt>paper</tt></a> object is simply a reference to the currently active
+<tt>PaperScope</tt>.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="paperscope-member" class="member">
+<div id="paperscope-link" class="member-link">
+<a name="paperscope" href="#" onClick="return toggleMember('paperscope', false);"><tt><b>PaperScope</b>()</tt></a>
+</div>
+<div id="paperscope-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('paperscope', false);"><tt><b>PaperScope</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('paperscope', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a PaperScope object.</p>
+
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="version-member" class="member">
+<div id="version-link" class="member-link">
+<a name="version" href="#" onClick="return toggleMember('version', false);"><tt><b>version</b></tt></a>
+</div>
+<div id="version-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('version', false);"><tt><b>version</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('version', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The version of Paper.js, as a float number.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="project-member" class="member">
+<div id="project-link" class="member-link">
+<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+<div id="project-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The currently active project.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Project.html"><tt>Project</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="projects-member" class="member">
+<div id="projects-link" class="member-link">
+<a name="projects" href="#" onClick="return toggleMember('projects', false);"><tt><b>projects</b></tt></a>
+</div>
+<div id="projects-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('projects', false);"><tt><b>projects</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('projects', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The list of all open projects within the current Paper.js context.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Project.html"><tt>Project</tt></a> objects
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="view-member" class="member">
+<div id="view-link" class="member-link">
+<a name="view" href="#" onClick="return toggleMember('view', false);"><tt><b>view</b></tt></a>
+</div>
+<div id="view-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('view', false);"><tt><b>view</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('view', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The active view of the active project.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/View.html"><tt>View</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="views-member" class="member">
+<div id="views-link" class="member-link">
+<a name="views" href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
+</div>
+<div id="views-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('views', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The list of view of the active project.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/View.html"><tt>View</tt></a> objects
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="tool-member" class="member">
+<div id="tool-link" class="member-link">
+<a name="tool" href="#" onClick="return toggleMember('tool', false);"><tt><b>tool</b></tt></a>
+</div>
+<div id="tool-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tool', false);"><tt><b>tool</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tool', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The reference to the active tool.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Tool.html"><tt>Tool</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="tools-member" class="member">
+<div id="tools-link" class="member-link">
+<a name="tools" href="#" onClick="return toggleMember('tools', false);"><tt><b>tools</b></tt></a>
+</div>
+<div id="tools-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tools', false);"><tt><b>tools</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tools', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The list of available tools.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Tool.html"><tt>Tool</tt></a> objects
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="install-scope-member" class="member">
+<div id="install-scope-link" class="member-link">
+<a name="install-scope" href="#" onClick="return toggleMember('install-scope', false);"><tt><b>install</b>(scope)</tt></a>
+</div>
+<div id="install-scope-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('install-scope', false);"><tt><b>install</b>(scope)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('install-scope', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Injects the paper scope into any other given scope. Can be used for
+examle to inject the currently active PaperScope into the window's global
+scope, to emulate PaperScript-style globally accessible Paper classes and
+objects:</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>scope:</tt> 
+
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">paper.install(window);</pre>
+
+</div>
+</div>
+</div>
+		
+			
+<div id="setup-canvas-member" class="member">
+<div id="setup-canvas-link" class="member-link">
+<a name="setup-canvas" href="#" onClick="return toggleMember('setup-canvas', false);"><tt><b>setup</b>(canvas)</tt></a>
+</div>
+<div id="setup-canvas-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('setup-canvas', false);"><tt><b>setup</b>(canvas)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('setup-canvas', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Sets up an empty project for us. If a canvas is provided, it also creates
+a <a href="../classes/View.html"><tt>View</tt></a> for it, both linked to this scope.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>canvas:</tt> 
+<tt>HTMLCanvasElement</tt>
+&mdash;&nbsp;The canvas this scope should be
+associated with.
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+	<div class="reference-members"><h2>Static Methods</h2>
+		
+			
+<div id="get-id-member" class="member">
+<div id="get-id-link" class="member-link">
+<a name="get-id" href="#" onClick="return toggleMember('get-id', false);"><tt><b>PaperScope.get</b>(id)</tt></a>
+</div>
+<div id="get-id-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('get-id', false);"><tt><b>PaperScope.get</b>(id)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('get-id', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Retrieves a PaperScope object with the given id or associated with
+the passed canvas element.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>id:</tt> 
+
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="each-iter-member" class="member">
+<div id="each-iter-link" class="member-link">
+<a name="each-iter" href="#" onClick="return toggleMember('each-iter', false);"><tt><b>PaperScope.each</b>(iter)</tt></a>
+</div>
+<div id="each-iter-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('each-iter', false);"><tt><b>PaperScope.each</b>(iter)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('each-iter', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Iterates over all active scopes and calls the passed iterator
+function for each of them.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>iter:</tt> 
+
+&mdash;&nbsp;the iterator function.
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/PaperScript.html b/dist/docs/classes/PaperScript.html
new file mode 100644
index 00000000..9714c10d
--- /dev/null
+++ b/dist/docs/classes/PaperScript.html
@@ -0,0 +1,137 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>PaperScript</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>PaperScript</h1>
+
+
+
+</div>
+
+
+
+
+
+
+
+
+	<div class="reference-members"><h2>Static Methods</h2>
+		
+			
+<div id="compile-code-member" class="member">
+<div id="compile-code-link" class="member-link">
+<a name="compile-code" href="#" onClick="return toggleMember('compile-code', false);"><tt><b>PaperScript.compile</b>(code)</tt></a>
+</div>
+<div id="compile-code-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('compile-code', false);"><tt><b>PaperScript.compile</b>(code)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('compile-code', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Compiles PaperScript code into JavaScript code.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>code:</tt> 
+<tt>String</tt>
+&mdash;&nbsp;The PaperScript code.
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;The compiled PaperScript as JavaScript code.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="evaluate-code-scope-member" class="member">
+<div id="evaluate-code-scope-link" class="member-link">
+<a name="evaluate-code-scope" href="#" onClick="return toggleMember('evaluate-code-scope', false);"><tt><b>PaperScript.evaluate</b>(code, scope)</tt></a>
+</div>
+<div id="evaluate-code-scope-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('evaluate-code-scope', false);"><tt><b>PaperScript.evaluate</b>(code, scope)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('evaluate-code-scope', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Evaluates parsed PaperScript code in the passed <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
+object. It also installs handlers automatically for us.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>code:</tt> 
+<tt>String</tt>
+&mdash;&nbsp;The PaperScript code.
+
+</li>
+
+<li>
+<tt>scope:</tt> 
+<a href="../classes/PaperScript.html"><tt>PaperScript</tt></a>
+&mdash;&nbsp;The scope in which the code is executed.
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Object</tt></tt>&nbsp;&mdash;&nbsp;The result of the code evaluation.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/ParagraphStyle.html b/dist/docs/classes/ParagraphStyle.html
new file mode 100644
index 00000000..b0b4aa4d
--- /dev/null
+++ b/dist/docs/classes/ParagraphStyle.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>ParagraphStyle</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>ParagraphStyle</h1>
+
+<p>The ParagraphStyle object represents the paragraph style of a text
+item (<a href="../classes/TextItem.html#paragraphstyle"><tt>textItem.paragraphStyle</tt></a>).</p>
+<p>Currently, the ParagraphStyle object may seem a bit empty, with just the
+<a href="../classes/ParagraphStyle.html#justification" onclick="return toggleMember('justification', true);"><tt>justification</tt></a> property. Yet, we have lots in store for Paper.js
+when it comes to typography. Please stay tuned.</p>
+<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var text = new PointText(new Point(0,0));
+text.fillColor = 'black';
+text.content = 'Hello world.';
+text.paragraphStyle.justification = 'center';</pre>
+
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="justification-member" class="member">
+<div id="justification-link" class="member-link">
+<a name="justification" href="#" onClick="return toggleMember('justification', false);"><tt><b>justification</b></tt></a>
+</div>
+<div id="justification-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('justification', false);"><tt><b>justification</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('justification', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The justification of the paragraph.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'left'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('left', 'right', 'center')</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Path.html b/dist/docs/classes/Path.html
new file mode 100644
index 00000000..a55fc047
--- /dev/null
+++ b/dist/docs/classes/Path.html
@@ -0,0 +1,6698 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Path</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Path</h1>
+
+<p> Extends <b><a href="../classes/PathItem.html"><tt>PathItem</tt></a></b>, <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
+
+<p>The Path item represents a path in a Paper.js project.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="path-member" class="member">
+<div id="path-link" class="member-link">
+<a name="path" href="#" onClick="return toggleMember('path', false);"><tt><b>Path</b>([segments])</tt></a>
+</div>
+<div id="path-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('path', false);"><tt><b>Path</b>([segments])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a new Path item and places it at the top of the active layer.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>segments:</tt> 
+Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
+&mdash;&nbsp;An array of segments (or points to be
+converted to segments) that will be added to the path.
+&mdash;&nbsp;optional
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> &mdash; Create an empty path and add segments to it:
+</p>
+
+
+<pre class="code">var path = new Path();
+path.strokeColor = 'black';
+path.add(new Point(30, 30));
+path.add(new Point(100, 100));</pre>
+
+<p>
+<b>Example</b> &mdash; Create a path with two segments:
+</p>
+
+
+<pre class="code">var segments = [new Point(30, 30), new Point(100, 100)];
+var path = new Path(segments);
+path.strokeColor = 'black';</pre>
+
+
+</div>
+</div>
+</div>
+	
+		<h3>Shaped Paths</h3>
+<div id="path-line-pt1-pt2-member" class="member">
+<div id="path-line-pt1-pt2-link" class="member-link">
+<a name="path-line-pt1-pt2" href="#" onClick="return toggleMember('path-line-pt1-pt2', false);"><tt><b>Path.Line</b>(pt1, pt2)</tt></a>
+</div>
+<div id="path-line-pt1-pt2-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('path-line-pt1-pt2', false);"><tt><b>Path.Line</b>(pt1, pt2)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-line-pt1-pt2', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a Path Item with two anchor points forming a line.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>pt1:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the first anchor point of the path
+
+</li>
+
+<li>
+<tt>pt2:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the second anchor point of the path
+
+</li>
+
+</ul>
+
+
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
+</li>
+	
+	</ul>
+
+<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var from = new Point(20, 20);
+var to = new Point(100, 100);
+var path = new Path.Line(from, to);
+path.strokeColor = 'black';</pre>
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="path-rectangle-point-size-member" class="member">
+<div id="path-rectangle-point-size-link" class="member-link">
+<a name="path-rectangle-point-size" href="#" onClick="return toggleMember('path-rectangle-point-size', false);"><tt><b>Path.Rectangle</b>(point, size)</tt></a>
+</div>
+<div id="path-rectangle-point-size-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('path-rectangle-point-size', false);"><tt><b>Path.Rectangle</b>(point, size)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-rectangle-point-size', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a rectangle shaped Path Item from the passed point and size.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>size:</tt> 
+<a href="../classes/Size.html"><tt>Size</tt></a>
+
+
+</li>
+
+</ul>
+
+
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
+</li>
+	
+	</ul>
+
+<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point = new Point(100, 100);
+var size = new Size(100, 100);
+var rectangle = new Rectangle(point, size);
+var path = new Path.Rectangle(rectangle);
+path.strokeColor = 'black';</pre>
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="path-rectangle-point1-point2-member" class="member">
+<div id="path-rectangle-point1-point2-link" class="member-link">
+<a name="path-rectangle-point1-point2" href="#" onClick="return toggleMember('path-rectangle-point1-point2', false);"><tt><b>Path.Rectangle</b>(point1, point2)</tt></a>
+</div>
+<div id="path-rectangle-point1-point2-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('path-rectangle-point1-point2', false);"><tt><b>Path.Rectangle</b>(point1, point2)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-rectangle-point1-point2', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a rectangle shaped Path Item from the passed points. These do not
+necessarily need to be the top left and bottom right corners, the
+constructor figures out how to fit a rectangle between them.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point1:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The first point defining the rectangle
+
+</li>
+
+<li>
+<tt>point2:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The second point defining the rectangle
+
+</li>
+
+</ul>
+
+
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
+</li>
+	
+	</ul>
+
+<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point = new Point(100, 100);
+var point2 = new Point(200, 300);
+var path = new Path.Rectangle(point, point2);
+path.strokeColor = 'black';</pre>
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="path-rectangle-rect-member" class="member">
+<div id="path-rectangle-rect-link" class="member-link">
+<a name="path-rectangle-rect" href="#" onClick="return toggleMember('path-rectangle-rect', false);"><tt><b>Path.Rectangle</b>(rect)</tt></a>
+</div>
+<div id="path-rectangle-rect-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('path-rectangle-rect', false);"><tt><b>Path.Rectangle</b>(rect)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-rectangle-rect', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a rectangle shaped Path Item from the passed abstract
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rect:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+
+
+</li>
+
+</ul>
+
+
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
+</li>
+	
+	</ul>
+
+<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point = new Point(100, 100);
+var size = new Size(100, 100);
+var rectangle = new Rectangle(point, size);
+var path = new Path.Rectangle(rectangle);
+path.strokeColor = 'black';</pre>
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="path-roundrectangle-rect-size-member" class="member">
+<div id="path-roundrectangle-rect-size-link" class="member-link">
+<a name="path-roundrectangle-rect-size" href="#" onClick="return toggleMember('path-roundrectangle-rect-size', false);"><tt><b>Path.RoundRectangle</b>(rect, size)</tt></a>
+</div>
+<div id="path-roundrectangle-rect-size-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('path-roundrectangle-rect-size', false);"><tt><b>Path.RoundRectangle</b>(rect, size)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-roundrectangle-rect-size', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a rectangular Path Item with rounded corners.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rect:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+
+
+</li>
+
+<li>
+<tt>size:</tt> 
+<a href="../classes/Size.html"><tt>Size</tt></a>
+&mdash;&nbsp;the size of the rounded corners
+
+</li>
+
+</ul>
+
+
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
+</li>
+	
+	</ul>
+
+<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point = new Point(100, 100);
+var size = new Size(100, 100);
+var rectangle = new Rectangle(point, size);
+var cornerSize = new Size(30, 30);
+var path = new Path.RoundRectangle(rectangle, cornerSize);</pre>
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="path-oval-rect-member" class="member">
+<div id="path-oval-rect-link" class="member-link">
+<a name="path-oval-rect" href="#" onClick="return toggleMember('path-oval-rect', false);"><tt><b>Path.Oval</b>(rect[, circumscribed])</tt></a>
+</div>
+<div id="path-oval-rect-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('path-oval-rect', false);"><tt><b>Path.Oval</b>(rect[, circumscribed])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-oval-rect', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates an oval shaped Path Item.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rect:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+
+
+</li>
+
+<li>
+<tt>circumscribed:</tt> 
+<tt>Boolean</tt>
+&mdash;&nbsp;when set to <tt>true</tt> the
+       oval shaped path will be created so the rectangle fits into
+       it. When set to <tt>false</tt> the oval path will fit within
+       the rectangle.
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+
+</ul>
+
+
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
+</li>
+	
+	</ul>
+
+<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var topLeft = new Point(100, 100);
+var size = new Size(150, 100);
+var rectangle = new Rectangle(topLeft, size);
+var path = new Path.Oval(rectangle);
+path.fillColor = 'black';</pre>
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="path-circle-center-radius-member" class="member">
+<div id="path-circle-center-radius-link" class="member-link">
+<a name="path-circle-center-radius" href="#" onClick="return toggleMember('path-circle-center-radius', false);"><tt><b>Path.Circle</b>(center, radius)</tt></a>
+</div>
+<div id="path-circle-center-radius-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('path-circle-center-radius', false);"><tt><b>Path.Circle</b>(center, radius)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-circle-center-radius', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a circle shaped Path Item.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the center point of the circle
+
+</li>
+
+<li>
+<tt>radius:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the radius of the circle
+
+</li>
+
+</ul>
+
+
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
+</li>
+	
+	</ul>
+
+<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var path = new Path.Circle(new Point(100, 100), 50);</pre>
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="path-arc-from-through-to-member" class="member">
+<div id="path-arc-from-through-to-link" class="member-link">
+<a name="path-arc-from-through-to" href="#" onClick="return toggleMember('path-arc-from-through-to', false);"><tt><b>Path.Arc</b>(from, through, to)</tt></a>
+</div>
+<div id="path-arc-from-through-to-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('path-arc-from-through-to', false);"><tt><b>Path.Arc</b>(from, through, to)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-arc-from-through-to', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a circular arc shaped Path Item.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>from:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the starting point of the circular arc
+
+</li>
+
+<li>
+<tt>through:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point the arc passes through
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the end point of the arc
+
+</li>
+
+</ul>
+
+
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
+</li>
+	
+	</ul>
+
+<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var start = new Point(0, 0);
+var through = new Point(100, 100);
+var to = new Point(200, 150);
+var path = new Path.Arc(start, through, to);
+path.strokeColor = 'black';</pre>
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="path-regularpolygon-center-numSides-radius-member" class="member">
+<div id="path-regularpolygon-center-numSides-radius-link" class="member-link">
+<a name="path-regularpolygon-center-numSides-radius" href="#" onClick="return toggleMember('path-regularpolygon-center-numSides-radius', false);"><tt><b>Path.RegularPolygon</b>(center, numSides, radius)</tt></a>
+</div>
+<div id="path-regularpolygon-center-numSides-radius-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('path-regularpolygon-center-numSides-radius', false);"><tt><b>Path.RegularPolygon</b>(center, numSides, radius)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-regularpolygon-center-numSides-radius', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a regular polygon shaped Path Item.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the center point of the polygon
+
+</li>
+
+<li>
+<tt>numSides:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the number of sides of the polygon
+
+</li>
+
+<li>
+<tt>radius:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the radius of the polygon
+
+</li>
+
+</ul>
+
+
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
+</li>
+	
+	</ul>
+
+<p>
+<b>Example</b> &mdash; Create a triangle shaped path
+</p>
+
+
+<pre class="code">var center = new Point(100, 100);
+var sides = 3;
+var radius = 50;
+var triangle = new Path.RegularPolygon(center, sides, radius);
+triangle.fillColor = 'black';</pre>
+
+<p>
+<b>Example</b> &mdash; Create a decahedron shaped path
+</p>
+
+
+<pre class="code">var center = new Point(100, 100);
+var sides = 10;
+var radius = 50;
+var decahedron = new Path.RegularPolygon(center, sides, radius);
+decahedron.fillColor = 'black';</pre>
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="path-star-center-numPoints-radius1-radius2-member" class="member">
+<div id="path-star-center-numPoints-radius1-radius2-link" class="member-link">
+<a name="path-star-center-numPoints-radius1-radius2" href="#" onClick="return toggleMember('path-star-center-numPoints-radius1-radius2', false);"><tt><b>Path.Star</b>(center, numPoints, radius1, radius2)</tt></a>
+</div>
+<div id="path-star-center-numPoints-radius1-radius2-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('path-star-center-numPoints-radius1-radius2', false);"><tt><b>Path.Star</b>(center, numPoints, radius1, radius2)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path-star-center-numPoints-radius1-radius2', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a star shaped Path Item.</p>
+<p>The largest of <tt>radius1</tt> and <tt>radius2</tt> will be the outer
+radius of the star. The smallest of radius1 and radius2 will be the
+inner radius.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the center point of the star
+
+</li>
+
+<li>
+<tt>numPoints:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the number of points of the star
+
+</li>
+
+<li>
+<tt>radius1:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>radius2:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+</ul>
+
+
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Path.html"><tt>Path</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created path
+</li>
+	
+	</ul>
+
+<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var center = new Point(100, 100);
+var points = 6;
+var radius1 = 20;
+var radius2 = 50;
+var path = new Path.Star(center, points, radius1, radius2);
+path.fillColor = 'black';</pre>
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="segments-member" class="member">
+<div id="segments-link" class="member-link">
+<a name="segments" href="#" onClick="return toggleMember('segments', false);"><tt><b>segments</b></tt></a>
+</div>
+<div id="segments-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('segments', false);"><tt><b>segments</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segments', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The segments contained within the path.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="firstsegment-member" class="member">
+<div id="firstsegment-link" class="member-link">
+<a name="firstsegment" href="#" onClick="return toggleMember('firstsegment', false);"><tt><b>firstSegment</b></tt></a>
+</div>
+<div id="firstsegment-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('firstsegment', false);"><tt><b>firstSegment</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstsegment', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The first Segment contained within the path.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Segment.html"><tt>Segment</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="lastsegment-member" class="member">
+<div id="lastsegment-link" class="member-link">
+<a name="lastsegment" href="#" onClick="return toggleMember('lastsegment', false);"><tt><b>lastSegment</b></tt></a>
+</div>
+<div id="lastsegment-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lastsegment', false);"><tt><b>lastSegment</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastsegment', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The last Segment contained within the path.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Segment.html"><tt>Segment</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="curves-member" class="member">
+<div id="curves-link" class="member-link">
+<a name="curves" href="#" onClick="return toggleMember('curves', false);"><tt><b>curves</b></tt></a>
+</div>
+<div id="curves-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('curves', false);"><tt><b>curves</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curves', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The curves contained within the path.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Curve.html"><tt>Curve</tt></a> objects
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="firstcurve-member" class="member">
+<div id="firstcurve-link" class="member-link">
+<a name="firstcurve" href="#" onClick="return toggleMember('firstcurve', false);"><tt><b>firstCurve</b></tt></a>
+</div>
+<div id="firstcurve-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('firstcurve', false);"><tt><b>firstCurve</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstcurve', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The first Curve contained within the path.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Curve.html"><tt>Curve</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="lastcurve-member" class="member">
+<div id="lastcurve-link" class="member-link">
+<a name="lastcurve" href="#" onClick="return toggleMember('lastcurve', false);"><tt><b>lastCurve</b></tt></a>
+</div>
+<div id="lastcurve-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lastcurve', false);"><tt><b>lastCurve</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastcurve', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The last Curve contained within the path.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Curve.html"><tt>Curve</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="closed-member" class="member">
+<div id="closed-link" class="member-link">
+<a name="closed" href="#" onClick="return toggleMember('closed', false);"><tt><b>closed</b></tt></a>
+</div>
+<div id="closed-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('closed', false);"><tt><b>closed</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('closed', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the path is closed. If it is closed, Paper.js connects
+the first and last segments.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+var myPath = new Path();
+myPath.strokeColor = 'black';
+myPath.add(new Point(50, 75));
+myPath.add(new Point(100, 25));
+myPath.add(new Point(150, 75));
+
+// Close the path:
+myPath.closed = true;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="fullyselected-member" class="member">
+<div id="fullyselected-link" class="member-link">
+<a name="fullyselected" href="#" onClick="return toggleMember('fullyselected', false);"><tt><b>fullySelected</b></tt></a>
+</div>
+<div id="fullyselected-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fullyselected', false);"><tt><b>fullySelected</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fullyselected', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the path and all its segments are selected.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A path is fully selected, if all of its segments are selected:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+var path = new Path.Circle(new Size(80, 50), 35);
+path.fullySelected = true;
+
+var path2 = new Path.Circle(new Size(180, 50), 35);
+path2.fullySelected = true;
+
+// Deselect the second segment of the second path:
+path2.segments[1].selected = false;
+
+// If the path is fully selected (which it is),
+// set its fill color to red:
+if (path.fullySelected) {
+	path.fillColor = 'red';
+}
+
+// If the second path is fully selected (which it isn't, since we just
+// deselected its second segment),
+// set its fill color to red:
+if (path2.fullySelected) {
+	path2.fillColor = 'red';
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="clockwise-member" class="member">
+<div id="clockwise-link" class="member-link">
+<a name="clockwise" href="#" onClick="return toggleMember('clockwise', false);"><tt><b>clockwise</b></tt></a>
+</div>
+<div id="clockwise-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clockwise', false);"><tt><b>clockwise</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clockwise', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the path is oriented clock-wise.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="length-member" class="member">
+<div id="length-link" class="member-link">
+<a name="length" href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
+</div>
+<div id="length-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('length', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The length of the perimeter of the path.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="add-segment-member" class="member">
+<div id="add-segment-link" class="member-link">
+<a name="add-segment" href="#" onClick="return toggleMember('add-segment', false);"><tt><b>add</b>(segment)</tt></a>
+</div>
+<div id="add-segment-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('add-segment', false);"><tt><b>add</b>(segment)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('add-segment', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds one or more segments to the end of the <a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array of
+this path.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>segment:</tt> 
+<a href="../classes/Segment.html"><tt>Segment</tt></a> / <a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the segment or point to be added.
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>&nbsp;&mdash;&nbsp;the added segment. This is not necessarily the same
+object, e.g. if the segment to be added already belongs to another path.
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Adding segments to a path using point objects:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+var path = new Path();
+path.strokeColor = 'black';
+
+// Add a segment at {x: 30, y: 75}
+path.add(new Point(30, 75));
+
+// Add two segments in one go at {x: 100, y: 20}
+// and {x: 170, y: 75}:
+path.add(new Point(100, 20), new Point(170, 75));
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Adding segments to a path using arrays containing number pairs:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+var path = new Path();
+path.strokeColor = 'black';
+
+// Add a segment at {x: 30, y: 75}
+path.add([30, 75]);
+
+// Add two segments in one go at {x: 100, y: 20}
+// and {x: 170, y: 75}:
+path.add([100, 20], [170, 75]);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Adding segments to a path using objects:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+var path = new Path();
+path.strokeColor = 'black';
+
+// Add a segment at {x: 30, y: 75}
+path.add({x: 30, y: 75});
+
+// Add two segments in one go at {x: 100, y: 20}
+// and {x: 170, y: 75}:
+path.add({x: 100, y: 20}, {x: 170, y: 75});
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Adding a segment with handles to a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-5">
+var path = new Path();
+path.strokeColor = 'black';
+
+path.add(new Point(30, 75));
+
+// Add a segment with handles:
+var point = new Point(100, 20);
+var handleIn = new Point(-50, 0);
+var handleOut = new Point(50, 0);
+var added = path.add(new Segment(point, handleIn, handleOut));
+
+// Select the added segment, so we can see its handles:
+added.selected = true;
+
+path.add(new Point(170, 75));
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="insert-index-segment-member" class="member">
+<div id="insert-index-segment-link" class="member-link">
+<a name="insert-index-segment" href="#" onClick="return toggleMember('insert-index-segment', false);"><tt><b>insert</b>(index, segment)</tt></a>
+</div>
+<div id="insert-index-segment-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insert-index-segment', false);"><tt><b>insert</b>(index, segment)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insert-index-segment', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts one or more segments at a given index in the list of this path's
+segments.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the index at which to insert the segment.
+
+</li>
+
+<li>
+<tt>segment:</tt> 
+<a href="../classes/Segment.html"><tt>Segment</tt></a> / <a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the segment or point to be inserted.
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>&nbsp;&mdash;&nbsp;the added segment. This is not necessarily the same
+object, e.g. if the segment to be added already belongs to another path.
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Inserting a segment:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-6">
+var myPath = new Path();
+myPath.strokeColor = 'black';
+myPath.add(new Point(50, 75));
+myPath.add(new Point(150, 75));
+
+// Insert a new segment into myPath at index 1:
+myPath.insert(1, new Point(100, 25));
+
+// Select the segment which we just inserted:
+myPath.segments[1].selected = true;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Inserting multiple segments:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-7">
+var myPath = new Path();
+myPath.strokeColor = 'black';
+myPath.add(new Point(50, 75));
+myPath.add(new Point(150, 75));
+
+// Insert two segments into myPath at index 1:
+myPath.insert(1, [80, 25], [120, 25]);
+
+// Select the segments which we just inserted:
+myPath.segments[1].selected = true;
+myPath.segments[2].selected = true;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="addsegments-segments-member" class="member">
+<div id="addsegments-segments-link" class="member-link">
+<a name="addsegments-segments" href="#" onClick="return toggleMember('addsegments-segments', false);"><tt><b>addSegments</b>(segments)</tt></a>
+</div>
+<div id="addsegments-segments-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addsegments-segments', false);"><tt><b>addSegments</b>(segments)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addsegments-segments', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds an array of segments (or types that can be converted to segments)
+to the end of the <a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>segments:</tt> 
+Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array of the added segments. These segments are
+not necessarily the same objects, e.g. if the segment to be added already
+belongs to another path.
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Adding an array of Point objects:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-8">
+var path = new Path();
+path.strokeColor = 'black';
+var points = [new Point(30, 50), new Point(170, 50)];
+path.addSegments(points);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Adding an array of [x, y] arrays:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-9">
+var path = new Path();
+path.strokeColor = 'black';
+var array = [[30, 75], [100, 20], [170, 75]];
+path.addSegments(array);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Adding segments from one path to another:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-10">
+var path = new Path();
+path.strokeColor = 'black';
+path.addSegments([[30, 75], [100, 20], [170, 75]]);
+
+var path2 = new Path();
+path2.strokeColor = 'red';
+
+// Add the second and third segments of path to path2:
+path2.add(path.segments[1], path.segments[2]);
+
+// Move path2 30pt to the right:
+path2.position.x += 30;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="insertsegments-index-segments-member" class="member">
+<div id="insertsegments-index-segments-link" class="member-link">
+<a name="insertsegments-index-segments" href="#" onClick="return toggleMember('insertsegments-index-segments', false);"><tt><b>insertSegments</b>(index, segments)</tt></a>
+</div>
+<div id="insertsegments-index-segments-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertsegments-index-segments', false);"><tt><b>insertSegments</b>(index, segments)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertsegments-index-segments', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts an array of segments at a given index in the path's
+<a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the index at which to insert the segments.
+
+</li>
+
+<li>
+<tt>segments:</tt> 
+Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects
+&mdash;&nbsp;the segments to be inserted.
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array of the added segments. These segments are
+not necessarily the same objects, e.g. if the segment to be added already
+belongs to another path.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="removesegment-index-member" class="member">
+<div id="removesegment-index-link" class="member-link">
+<a name="removesegment-index" href="#" onClick="return toggleMember('removesegment-index', false);"><tt><b>removeSegment</b>(index)</tt></a>
+</div>
+<div id="removesegment-index-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removesegment-index', false);"><tt><b>removeSegment</b>(index)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removesegment-index', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the segment at the specified index of the path's
+<a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the index of the segment to be removed
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>&nbsp;&mdash;&nbsp;the removed segment
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Removing a segment from a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-11">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var path = new Path.Circle(new Point(80, 50), 35);
+path.strokeColor = 'black';
+
+// Remove its second segment:
+path.removeSegment(1);
+
+// Select the path, so we can see its segments:
+path.selected = true;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="removesegments-member" class="member">
+<div id="removesegments-link" class="member-link">
+<a name="removesegments" href="#" onClick="return toggleMember('removesegments', false);"><tt><b>removeSegments</b>()</tt></a>
+</div>
+<div id="removesegments-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removesegments', false);"><tt><b>removeSegments</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removesegments', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes all segments from the path's <a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed segments
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="removesegments-from-member" class="member">
+<div id="removesegments-from-link" class="member-link">
+<a name="removesegments-from" href="#" onClick="return toggleMember('removesegments-from', false);"><tt><b>removeSegments</b>(from[, to])</tt></a>
+</div>
+<div id="removesegments-from-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removesegments-from', false);"><tt><b>removeSegments</b>(from[, to])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removesegments-from', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the segments from the specified <tt>from</tt> index to the
+<tt>to</tt> index from the path's <a href="../classes/Path.html#segments" onclick="return toggleMember('segments', true);"><tt>segments</tt></a> array.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>from:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the beginning index, inclusive
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the ending index, exclusive
+&mdash;&nbsp;optional, default: <tt>segments.length</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Segment.html"><tt>Segment</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed segments
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Removing segments from a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-12">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var path = new Path.Circle(new Point(80, 50), 35);
+path.strokeColor = 'black';
+
+// Remove the segments from index 1 till index 2:
+path.removeSegments(1, 2);
+
+// Select the path, so we can see its segments:
+path.selected = true;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="flatten-maxDistance-member" class="member">
+<div id="flatten-maxDistance-link" class="member-link">
+<a name="flatten-maxDistance" href="#" onClick="return toggleMember('flatten-maxDistance', false);"><tt><b>flatten</b>(maxDistance)</tt></a>
+</div>
+<div id="flatten-maxDistance-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('flatten-maxDistance', false);"><tt><b>flatten</b>(maxDistance)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('flatten-maxDistance', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Converts the curves in a path to straight lines with an even distribution
+of points. The distance between the produced segments is as close as
+possible to the value specified by the <tt>maxDistance</tt> parameter.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>maxDistance:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the maximum distance between the points
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Flattening a circle shaped path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-13">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var path = new Path.Circle(new Size(80, 50), 35);
+
+// Select the path, so we can inspect its segments:
+path.selected = true;
+
+// Create a copy of the path and move it 150 points to the right:
+var copy = path.clone();
+copy.position.x += 150;
+
+// Convert its curves to points, with a max distance of 20:
+copy.flatten(20);
+
+// Select the copy, so we can inspect its segments:
+copy.selected = true;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="simplify-member" class="member">
+<div id="simplify-link" class="member-link">
+<a name="simplify" href="#" onClick="return toggleMember('simplify', false);"><tt><b>simplify</b>([tolerance])</tt></a>
+</div>
+<div id="simplify-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('simplify', false);"><tt><b>simplify</b>([tolerance])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('simplify', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Smooths a path by simplifying it. The <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array is
+analyzed and replaced by a more optimal set of segments, reducing memory
+usage and speeding up drawing.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>tolerance:</tt> 
+<tt>Number</tt>
+
+&mdash;&nbsp;optional, default: <tt>2.5</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below to draw to draw a line, when you release the mouse, the is made smooth using path.simplify():
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-14">
+var path;
+function onMouseDown(event) {
+	// If we already made a path before, deselect it:
+	if (path) {
+		path.selected = false;
+	}
+
+	// Create a new path and add the position of the mouse
+	// as its first segment. Select it, so we can see the
+	// segment points:
+	path = new Path();
+	path.strokeColor = 'black';
+	path.add(event.point);
+	path.selected = true;
+}
+
+function onMouseDrag(event) {
+	// On every drag event, add a segment to the path
+	// at the position of the mouse:
+	path.add(event.point);
+}
+
+function onMouseUp(event) {
+	// When the mouse is released, simplify the path:
+	path.simplify();
+	path.selected = true;
+}
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-14"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="reverse-member" class="member">
+<div id="reverse-link" class="member-link">
+<a name="reverse" href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
+</div>
+<div id="reverse-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reverse', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Reverses the segments of the path.</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="join-path-member" class="member">
+<div id="join-path-link" class="member-link">
+<a name="join-path" href="#" onClick="return toggleMember('join-path', false);"><tt><b>join</b>(path)</tt></a>
+</div>
+<div id="join-path-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('join-path', false);"><tt><b>join</b>(path)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('join-path', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Joins the path with the specified path, which will be removed in the
+process.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>path:</tt> 
+<a href="../classes/Path.html"><tt>Path</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Joining two paths:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-15">
+var path = new Path([30, 25], [30, 75]);
+path.strokeColor = 'black';
+
+var path2 = new Path([200, 25], [200, 75]);
+path2.strokeColor = 'black';
+
+// Join the paths:
+path.join(path2);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Joining two paths that share a point at the start or end of their segments array:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-16">
+var path = new Path([30, 25], [30, 75]);
+path.strokeColor = 'black';
+
+var path2 = new Path([30, 25], [80, 25]);
+path2.strokeColor = 'black';
+
+// Join the paths:
+path.join(path2);
+
+// After joining, path with have 3 segments, since it
+// shared its first segment point with the first
+// segment point of path2.
+
+// Select the path to show that they have joined:
+path.selected = true;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Joining two paths that connect at two points:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-17">
+var path = new Path([30, 25], [80, 25], [80, 75]);
+path.strokeColor = 'black';
+
+var path2 = new Path([30, 25], [30, 75], [80, 75]);
+path2.strokeColor = 'black';
+
+// Join the paths:
+path.join(path2);
+
+// Because the paths were joined at two points, the path is closed
+// and has 4 segments.
+
+// Select the path to show that they have joined:
+path.selected = true;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<h3>Positions on Paths and Curves</h3>
+
+<div id="getlocationat-offset-member" class="member">
+<div id="getlocationat-offset-link" class="member-link">
+<a name="getlocationat-offset" href="#" onClick="return toggleMember('getlocationat-offset', false);"><tt><b>getLocationAt</b>(offset[, isParameter])</tt></a>
+</div>
+<div id="getlocationat-offset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getlocationat-offset', false);"><tt><b>getLocationAt</b>(offset[, isParameter])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getlocationat-offset', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>offset:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>isParameter:</tt> 
+<tt>Boolean</tt>
+
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a></tt>
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="getpointat-offset-member" class="member">
+<div id="getpointat-offset-link" class="member-link">
+<a name="getpointat-offset" href="#" onClick="return toggleMember('getpointat-offset', false);"><tt><b>getPointAt</b>(offset[, isParameter])</tt></a>
+</div>
+<div id="getpointat-offset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getpointat-offset', false);"><tt><b>getPointAt</b>(offset[, isParameter])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getpointat-offset', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Get the point on the path at the given offset.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>offset:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>isParameter:</tt> 
+<tt>Boolean</tt>
+
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the point at the given offset
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Finding the point on a path at a given offset:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-18">
+// Create an arc shaped path:
+var path = new Path();
+path.strokeColor = 'black';
+path.add(new Point(40, 100));
+path.arcTo(new Point(150, 100));
+
+// We're going to be working with a third of the length
+// of the path as the offset:
+var offset = path.length / 3;
+
+// Find the point on the path:
+var point = path.getPointAt(offset);
+
+// Create a small circle shaped path at the point:
+var circle = new Path.Circle(point, 3);
+circle.fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="150" id="canvas-18"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Iterating over the length of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-19">
+// Create an arc shaped path:
+var path = new Path();
+path.strokeColor = 'black';
+path.add(new Point(40, 100));
+path.arcTo(new Point(150, 100));
+
+var amount = 5;
+var length = path.length;
+for (var i = 0; i < amount + 1; i++) {
+	var offset = i / amount * length;
+
+	// Find the point on the path at the given offset:
+	var point = path.getPointAt(offset);
+
+	// Create a small circle shaped path at the point:
+	var circle = new Path.Circle(point, 3);
+	circle.fillColor = 'red';
+}
+</script>
+<div class="canvas"><canvas width="516" height="150" id="canvas-19"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="gettangentat-offset-member" class="member">
+<div id="gettangentat-offset-link" class="member-link">
+<a name="gettangentat-offset" href="#" onClick="return toggleMember('gettangentat-offset', false);"><tt><b>getTangentAt</b>(offset[, isParameter])</tt></a>
+</div>
+<div id="gettangentat-offset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('gettangentat-offset', false);"><tt><b>getTangentAt</b>(offset[, isParameter])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gettangentat-offset', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Get the tangent to the path at the given offset as a vector
+point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>offset:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>isParameter:</tt> 
+<tt>Boolean</tt>
+
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the tangent vector at the given offset
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Working with the tangent vector at a given offset:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-20">
+// Create an arc shaped path:
+var path = new Path();
+path.strokeColor = 'black';
+path.add(new Point(40, 100));
+path.arcTo(new Point(150, 100));
+
+// We're going to be working with a third of the length
+// of the path as the offset:
+var offset = path.length / 3;
+
+// Find the point on the path:
+var point = path.getPointAt(offset);
+
+// Find the tangent vector at the given offset:
+var tangent = path.getTangentAt(offset);
+
+// Make the tangent vector 60pt long:
+tangent.length = 60;
+
+var path = new Path();
+path.strokeColor = 'red';
+path.add(point);
+path.add(point + tangent);
+</script>
+<div class="canvas"><canvas width="516" height="150" id="canvas-20"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Iterating over the length of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-21">
+// Create an arc shaped path:
+var path = new Path();
+path.strokeColor = 'black';
+path.add(new Point(40, 100));
+path.arcTo(new Point(150, 100));
+
+var amount = 6;
+var length = path.length;
+for (var i = 0; i < amount + 1; i++) {
+	var offset = i / amount * length;
+
+	// Find the point on the path at the given offset:
+	var point = path.getPointAt(offset);
+
+	// Find the normal vector on the path at the given offset:
+	var tangent = path.getTangentAt(offset);
+
+	// Make the tangent vector 60pt long:
+	tangent.length = 60;
+
+	var line = new Path();
+	line.strokeColor = 'red';
+	line.add(point);
+	line.add(point + tangent);
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-21"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="getnormalat-offset-member" class="member">
+<div id="getnormalat-offset-link" class="member-link">
+<a name="getnormalat-offset" href="#" onClick="return toggleMember('getnormalat-offset', false);"><tt><b>getNormalAt</b>(offset[, isParameter])</tt></a>
+</div>
+<div id="getnormalat-offset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getnormalat-offset', false);"><tt><b>getNormalAt</b>(offset[, isParameter])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getnormalat-offset', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Get the normal to the path at the given offset as a vector point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>offset:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>isParameter:</tt> 
+<tt>Boolean</tt>
+
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the normal vector at the given offset
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Working with the normal vector at a given offset:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-22">
+// Create an arc shaped path:
+var path = new Path();
+path.strokeColor = 'black';
+path.add(new Point(40, 100));
+path.arcTo(new Point(150, 100));
+
+// We're going to be working with a third of the length
+// of the path as the offset:
+var offset = path.length / 3;
+
+// Find the point on the path:
+var point = path.getPointAt(offset);
+
+// Find the normal vector at the given offset:
+var normal = path.getNormalAt(offset);
+
+// Make the normal vector 30pt long:
+normal.length = 30;
+
+var path = new Path();
+path.strokeColor = 'red';
+path.add(point);
+path.add(point + normal);
+</script>
+<div class="canvas"><canvas width="516" height="150" id="canvas-22"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Iterating over the length of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-23">
+// Create an arc shaped path:
+var path = new Path();
+path.strokeColor = 'black';
+path.add(new Point(40, 100));
+path.arcTo(new Point(150, 100));
+
+var amount = 10;
+var length = path.length;
+for (var i = 0; i < amount + 1; i++) {
+	var offset = i / amount * length;
+
+	// Find the point on the path at the given offset:
+	var point = path.getPointAt(offset);
+
+	// Find the normal vector on the path at the given offset:
+	var normal = path.getNormalAt(offset);
+
+	// Make the normal vector 30pt long:
+	normal.length = 30;
+
+	var line = new Path();
+	line.strokeColor = 'red';
+	line.add(point);
+	line.add(point + normal);
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-23"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="getnearestlocation-point-member" class="member">
+<div id="getnearestlocation-point-link" class="member-link">
+<a name="getnearestlocation-point" href="#" onClick="return toggleMember('getnearestlocation-point', false);"><tt><b>getNearestLocation</b>(point)</tt></a>
+</div>
+<div id="getnearestlocation-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getnearestlocation-point', false);"><tt><b>getNearestLocation</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getnearestlocation-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns the nearest location on the path to the specified point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+
+&mdash;&nbsp;{Point} The point for which we search the nearest location
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/CurveLocation.html"><tt>CurveLocation</tt></a></tt>&nbsp;&mdash;&nbsp;The location on the path that's the closest to
+the specified point
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="getnearestpoint-point-member" class="member">
+<div id="getnearestpoint-point-link" class="member-link">
+<a name="getnearestpoint-point" href="#" onClick="return toggleMember('getnearestpoint-point', false);"><tt><b>getNearestPoint</b>(point)</tt></a>
+</div>
+<div id="getnearestpoint-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getnearestpoint-point', false);"><tt><b>getNearestPoint</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getnearestpoint-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns the nearest point on the path to the specified point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+
+&mdash;&nbsp;{Point} The point for which we search the nearest point
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;The point on the path that's the closest to the specified
+point
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+
+<!-- =========================== inherited methods ========================= -->
+<div class="reference-members"><h2>Methods inherited from <a href="../classes/PathItem.html"><tt>PathItem</tt></a></h2>
+
+	
+<div id="smooth-member" class="member">
+<div id="smooth-link" class="member-link">
+<a name="smooth" href="#" onClick="return toggleMember('smooth', false);"><tt><b>smooth</b>()</tt></a>
+</div>
+<div id="smooth-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('smooth', false);"><tt><b>smooth</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('smooth', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Smooth bezier curves without changing the amount of segments or their
+points, by only smoothing and adjusting their handle points, for both
+open ended and closed paths.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Smoothing a closed shape:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-24">
+// Create a rectangular path with its top-left point at
+// {x: 30, y: 25} and a size of {width: 50, height: 50}:
+var path = new Path.Rectangle(new Point(30, 25), new Size(50, 50));
+path.strokeColor = 'black';
+
+// Select the path, so we can see its handles:
+path.selected = true;
+
+// Create a copy of the path and move it 100pt to the right:
+var copy = path.clone();
+copy.position.x += 100;
+
+// Smooth the segments of the copy:
+copy.smooth();
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-25">
+var path = new Path();
+path.strokeColor = 'black';
+
+path.add(new Point(30, 50));
+
+var y = 5;
+var x = 3;
+
+for (var i = 0; i < 28; i++) {
+    y *= -1.1;
+    x *= 1.1;
+    path.lineBy(x, y);
+}
+
+// Create a copy of the path and move it 100pt down:
+var copy = path.clone();
+copy.position.y += 120;
+
+// Set its stroke color to red:
+copy.strokeColor = 'red';
+
+// Smooth the segments of the copy:
+copy.smooth();
+</script>
+<div class="canvas"><canvas width="516" height="220" id="canvas-25"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<h3>Postscript Style Drawing Commands</h3>
+
+<div id="moveto-point-member" class="member">
+<div id="moveto-point-link" class="member-link">
+<a name="moveto-point" href="#" onClick="return toggleMember('moveto-point', false);"><tt><b>moveTo</b>(point)</tt></a>
+</div>
+<div id="moveto-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('moveto-point', false);"><tt><b>moveTo</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveto-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>If called on a <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, a new <a href="../classes/Path.html"><tt>Path</tt></a> is created as a
+child and the point is added as its first segment. On a normal empty
+<a href="../classes/Path.html"><tt>Path</tt></a>, the point is simply added as its first segment.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="lineto-point-member" class="member">
+<div id="lineto-point-link" class="member-link">
+<a name="lineto-point" href="#" onClick="return toggleMember('lineto-point', false);"><tt><b>lineTo</b>(point)</tt></a>
+</div>
+<div id="lineto-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lineto-point', false);"><tt><b>lineTo</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lineto-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="cubiccurveto-handle1-handle2-to-member" class="member">
+<div id="cubiccurveto-handle1-handle2-to-link" class="member-link">
+<a name="cubiccurveto-handle1-handle2-to" href="#" onClick="return toggleMember('cubiccurveto-handle1-handle2-to', false);"><tt><b>cubicCurveTo</b>(handle1, handle2, to)</tt></a>
+</div>
+<div id="cubiccurveto-handle1-handle2-to-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('cubiccurveto-handle1-handle2-to', false);"><tt><b>cubicCurveTo</b>(handle1, handle2, to)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('cubiccurveto-handle1-handle2-to', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds a cubic bezier curve to the path, defined by two handles and a to
+point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>handle1:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>handle2:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="quadraticcurveto-handle-to-member" class="member">
+<div id="quadraticcurveto-handle-to-link" class="member-link">
+<a name="quadraticcurveto-handle-to" href="#" onClick="return toggleMember('quadraticcurveto-handle-to', false);"><tt><b>quadraticCurveTo</b>(handle, to)</tt></a>
+</div>
+<div id="quadraticcurveto-handle-to-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('quadraticcurveto-handle-to', false);"><tt><b>quadraticCurveTo</b>(handle, to)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('quadraticcurveto-handle-to', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds a quadratic bezier curve to the path, defined by a handle and a to
+point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>handle:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="curveto-through-to-member" class="member">
+<div id="curveto-through-to-link" class="member-link">
+<a name="curveto-through-to" href="#" onClick="return toggleMember('curveto-through-to', false);"><tt><b>curveTo</b>(through, to[, parameter])</tt></a>
+</div>
+<div id="curveto-through-to-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('curveto-through-to', false);"><tt><b>curveTo</b>(through, to[, parameter])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveto-through-to', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Draws a curve from the position of the last segment point in the path
+that goes through the specified <tt>through</tt> point, to the specified
+<tt>to</tt> point by adding one segment to the path.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>through:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point through which the curve should go
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point where the curve should end
+
+</li>
+
+<li>
+<tt>parameter:</tt> 
+<tt>Number</tt>
+
+&mdash;&nbsp;optional, default: <tt>0.5</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-26">
+var myPath;
+function onMouseDrag(event) {
+	// If we created a path before, remove it:
+	if (myPath) {
+	    myPath.remove();
+	}
+
+	// Create a new path and add a segment point to it
+	// at {x: 150, y: 150):
+	myPath = new Path();
+	myPath.add(150, 150);
+
+	// Draw a curve through the position of the mouse to 'toPoint'
+	var toPoint = new Point(350, 150);
+	myPath.curveTo(event.point, toPoint);
+
+	// Select the path, so we can see its segments:
+	myPath.selected = true;
+}
+
+// When the mouse is released, deselect the path
+// and set its stroke-color to black:
+function onMouseUp(event) {
+	myPath.selected = false;
+	myPath.strokeColor = 'black';
+}
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-26"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="arcto-through-to-member" class="member">
+<div id="arcto-through-to-link" class="member-link">
+<a name="arcto-through-to" href="#" onClick="return toggleMember('arcto-through-to', false);"><tt><b>arcTo</b>(through, to)</tt></a>
+</div>
+<div id="arcto-through-to-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('arcto-through-to', false);"><tt><b>arcTo</b>(through, to)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcto-through-to', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Draws an arc from the position of the last segment point in the path that
+goes through the specified <tt>through</tt> point, to the specified
+<tt>to</tt> point by adding one or more segments to the path.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>through:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point where the arc should pass through
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point where the arc should end
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-27">
+var path = new Path();
+path.strokeColor = 'black';
+
+var firstPoint = new Point(30, 75);
+path.add(firstPoint);
+
+// The point through which we will create the arc:
+var throughPoint = new Point(40, 40);
+
+// The point at which the arc will end:
+var toPoint = new Point(130, 75);
+
+// Draw an arc through 'throughPoint' to 'toPoint'
+path.arcTo(throughPoint, toPoint);
+
+// Add a red circle shaped path at the position of 'throughPoint':
+var circle = new Path.Circle(throughPoint, 3);
+circle.fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-28">
+var myPath;
+function onMouseDrag(event) {
+	// If we created a path before, remove it:
+	if (myPath) {
+	    myPath.remove();
+	}
+
+	// Create a new path and add a segment point to it
+	// at {x: 150, y: 150):
+	myPath = new Path();
+	myPath.add(150, 150);
+
+	// Draw an arc through the position of the mouse to 'toPoint'
+	var toPoint = new Point(350, 150);
+	myPath.arcTo(event.point, toPoint);
+
+	// Select the path, so we can see its segments:
+	myPath.selected = true;
+}
+
+// When the mouse is released, deselect the path
+// and fill it with black.
+function onMouseUp(event) {
+	myPath.selected = false;
+	myPath.fillColor = 'black';
+}
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-28"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="arcto-to-member" class="member">
+<div id="arcto-to-link" class="member-link">
+<a name="arcto-to" href="#" onClick="return toggleMember('arcto-to', false);"><tt><b>arcTo</b>(to[, clockwise])</tt></a>
+</div>
+<div id="arcto-to-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('arcto-to', false);"><tt><b>arcTo</b>(to[, clockwise])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcto-to', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Draws an arc from the position of the last segment point in the path to
+the specified point by adding one or more segments to the path.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>to:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point where the arc should end
+
+</li>
+
+<li>
+<tt>clockwise:</tt> 
+<tt>Boolean</tt>
+&mdash;&nbsp;specifies whether the arc should be
+       drawn in clockwise direction.
+&mdash;&nbsp;optional, default: <tt>true</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-29">
+var path = new Path();
+path.strokeColor = 'black';
+
+path.add(new Point(30, 75));
+path.arcTo(new Point(130, 75));
+
+var path2 = new Path();
+path2.strokeColor = 'red';
+path2.add(new Point(180, 25));
+
+// To draw an arc in anticlockwise direction,
+// we pass 'false' as the second argument to arcTo:
+path2.arcTo(new Point(280, 25), false);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-30">
+var myPath;
+
+// The mouse has to move at least 20 points before
+// the next mouse drag event is fired:
+tool.minDistance = 20;
+
+// When the user clicks, create a new path and add
+// the current mouse position to it as its first segment:
+function onMouseDown(event) {
+	myPath = new Path();
+	myPath.strokeColor = 'black';
+	myPath.add(event.point);
+}
+
+// On each mouse drag event, draw an arc to the current
+// position of the mouse:
+function onMouseDrag(event) {
+	myPath.arcTo(event.point);
+}
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-30"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="closepath-member" class="member">
+<div id="closepath-link" class="member-link">
+<a name="closepath" href="#" onClick="return toggleMember('closepath', false);"><tt><b>closePath</b>()</tt></a>
+</div>
+<div id="closepath-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('closepath', false);"><tt><b>closePath</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('closepath', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Closes the path. When closed, Paper.js connects the first and last
+segments.</p>
+	
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Path.html#closed"><tt>path.closed</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Relative Drawing Commands</h3>
+
+<div id="moveby-point-member" class="member">
+<div id="moveby-point-link" class="member-link">
+<a name="moveby-point" href="#" onClick="return toggleMember('moveby-point', false);"><tt><b>moveBy</b>(point)</tt></a>
+</div>
+<div id="moveby-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('moveby-point', false);"><tt><b>moveBy</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveby-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>If called on a <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, a new <a href="../classes/Path.html"><tt>Path</tt></a> is created as a
+child and the point is added as its first segment relative to the
+position of the last segment of the current path.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="lineby-vector-member" class="member">
+<div id="lineby-vector-link" class="member-link">
+<a name="lineby-vector" href="#" onClick="return toggleMember('lineby-vector', false);"><tt><b>lineBy</b>(vector)</tt></a>
+</div>
+<div id="lineby-vector-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lineby-vector', false);"><tt><b>lineBy</b>(vector)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lineby-vector', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds a segment relative to the last segment point of the path.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>vector:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The vector which is added to the position of the
+       last segment of the path, to become the new segment.
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-31">
+var path = new Path();
+path.strokeColor = 'black';
+
+// Add a segment at {x: 50, y: 50}
+path.add(25, 25);
+
+// Add a segment relative to the last segment of the path.
+// 50 in x direction and 0 in y direction, becomes {x: 75, y: 25}
+path.lineBy(50, 0);
+
+// 0 in x direction and 50 in y direction, becomes {x: 75, y: 75}
+path.lineBy(0, 50);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-31"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Drawing a spiral using lineBy:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-32">
+var path = new Path();
+path.strokeColor = 'black';
+
+// Add the first segment at {x: 50, y: 50}
+path.add(view.center);
+
+// Loop 500 times:
+for (var i = 0; i < 500; i++) {
+	// Create a vector with an ever increasing length
+	// and an angle in increments of 45 degrees
+	var vector = new Point({
+	    angle: i * 45,
+	    length: i / 2
+	});
+	// Add the vector relatively to the last segment point:
+	path.lineBy(vector);
+}
+
+// Smooth the handles of the path:
+path.smooth();
+
+// Uncomment the following line and click on 'run' to see
+// the construction of the path:
+// path.selected = true;
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-32"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="curveby-throughVector-toVector-member" class="member">
+<div id="curveby-throughVector-toVector-link" class="member-link">
+<a name="curveby-throughVector-toVector" href="#" onClick="return toggleMember('curveby-throughVector-toVector', false);"><tt><b>curveBy</b>(throughVector, toVector[, parameter])</tt></a>
+</div>
+<div id="curveby-throughVector-toVector-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('curveby-throughVector-toVector', false);"><tt><b>curveBy</b>(throughVector, toVector[, parameter])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveby-throughVector-toVector', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>throughVector:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>toVector:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>parameter:</tt> 
+<tt>Number</tt>
+
+&mdash;&nbsp;optional, default: <tt>0.5</tt>
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="arcby-throughVector-toVector-member" class="member">
+<div id="arcby-throughVector-toVector-link" class="member-link">
+<a name="arcby-throughVector-toVector" href="#" onClick="return toggleMember('arcby-throughVector-toVector', false);"><tt><b>arcBy</b>(throughVector, toVector)</tt></a>
+</div>
+<div id="arcby-throughVector-toVector-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('arcby-throughVector-toVector', false);"><tt><b>arcBy</b>(throughVector, toVector)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcby-throughVector-toVector', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>throughVector:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>toVector:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+</div>
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="id-member" class="member">
+<div id="id-link" class="member-link">
+<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+<div id="id-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The unique id of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="name-member" class="member">
+<div id="name-link" class="member-link">
+<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+<div id="name-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The name of the item. If the item has a name, it can be accessed by name
+through its parent's children list.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-33">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and add path to it as a child:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="position-member" class="member">
+<div id="position-link" class="member-link">
+<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+<div id="position-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item's position within the project. This is the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the position of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-34">
+// Create a circle at position { x: 10, y: 10 }
+var circle = new Path.Circle(new Point(10, 10), 10);
+circle.fillColor = 'red';
+
+// Move the circle to { x: 20, y: 20 }
+circle.position = new Point(20, 20);
+
+// Move the circle 100 points to the right and 50 points down
+circle.position += new Point(100, 50);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-34"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Changing the x coordinate of an item's position:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-35">
+// Create a circle at position { x: 20, y: 20 }
+var circle = new Path.Circle(new Point(20, 20), 10);
+circle.fillColor = 'red';
+
+// Move the circle 100 points to the right
+circle.position.x += 100;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="style-member" class="member">
+<div id="style-link" class="member-link">
+<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+<div id="style-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The path style of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-36">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.style = {
+	fillColor: 'blue',
+	strokeColor: 'red',
+	strokeWidth: 5
+};
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Copying the style of another item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-37">
+var path = new Path.Circle(new Point(50, 50), 30);
+path.fillColor = 'red';
+
+var path2 = new Path.Circle(new Point(180, 50), 20);
+// Copy the path style of path:
+path2.style = path.style;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-37"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Applying the same style object to multiple items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-38">
+var myStyle = {
+	fillColor: 'red',
+	strokeColor: 'blue',
+	strokeWidth: 4
+};
+
+var path = new Path.Circle(new Point(80, 50), 30);
+path.style = myStyle;
+
+var path2 = new Path.Circle(new Point(150, 50), 20);
+path2.style = myStyle;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-38"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="visible-member" class="member">
+<div id="visible-link" class="member-link">
+<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+<div id="visible-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
+item won't be drawn.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>true</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Hiding an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-39">
+var path = new Path.Circle(new Point(50, 50), 20);
+path.fillColor = 'red';
+
+// Hide the path:
+path.visible = false;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-39"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="blendmode-member" class="member">
+<div id="blendmode-link" class="member-link">
+<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+<div id="blendmode-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The blend mode of the item.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'normal'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
+'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
+'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
+'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's blend mode:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-40">
+// Create a white rectangle in the background
+// with the same dimensions as the view:
+var background = new Path.Rectangle(view.bounds);
+background.fillColor = 'white';
+
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.fillColor = 'blue';
+
+// Set the blend mode of circle2:
+circle2.blendMode = 'multiply';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-40"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="opacity-member" class="member">
+<div id="opacity-link" class="member-link">
+<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+<div id="opacity-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Making an item 50% transparent:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-41">
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.style = {
+	fillColor: 'blue',
+	strokeColor: 'green',
+	strokeWidth: 10
+};
+
+// Make circle2 50% transparent:
+circle2.opacity = 0.5;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-41"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="guide-member" class="member">
+<div id="guide-link" class="member-link">
+<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+<div id="guide-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item functions as a guide. When set to
+<tt>true</tt>, the item will be drawn at the end as a guide.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="selected-member" class="member">
+<div id="selected-link" class="member-link">
+<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+<div id="selected-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether an item is selected and will also return <tt>true</tt>
+if the item is partially selected (groups with some selected or partially
+selected paths).</p>
+<p>Paper.js draws the visual outlines of selected items on top of your
+project. This can be useful for debugging, as it allows you to see the
+construction of paths, position of path curves, individual segment points
+and bounding boxes of symbol and raster items.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Selecting an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-42">
+var path = new Path.Circle(new Size(80, 50), 35);
+path.selected = true; // Select the path
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-42"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="clipmask-member" class="member">
+<div id="clipmask-link" class="member-link">
+<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+<div id="clipmask-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item defines a clip mask. This can only be set on
+paths, compound paths, and text frame objects, and only if the item is
+already contained within a clipping group.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Project Hierarchy</h3>
+
+<div id="project-member" class="member">
+<div id="project-link" class="member-link">
+<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+<div id="project-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The project that this item belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Project.html"><tt>Project</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="layer-member" class="member">
+<div id="layer-link" class="member-link">
+<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+<div id="layer-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The layer that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Layer.html"><tt>Layer</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="parent-member" class="member">
+<div id="parent-link" class="member-link">
+<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+<div id="parent-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var path = new Path();
+
+// New items are placed in the active layer:
+console.log(path.parent == project.activeLayer); // true
+
+var group = new Group();
+group.addChild(path);
+
+// Now the parent of the path has become the group:
+console.log(path.parent == group); // true</pre>
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="children-member" class="member">
+<div id="children-link" class="member-link">
+<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+<div id="children-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The children items contained within this item. Items that define a
+<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
+<p><b>Please note:</b> The children array should not be modified directly
+using array functions. To remove single items from the children list, use
+<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
+<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
+<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Accessing items in the children array:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-43">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// Access the path through the group's children array:
+group.children[0].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-43"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Accessing children by name:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-44">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'orange';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-44"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Passing an array of items to item.children:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-45">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+var group = new Group();
+group.children = [path];
+
+// The path is the first child of the group:
+group.firstChild.fillColor = 'green';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-45"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="firstchild-member" class="member">
+<div id="firstchild-link" class="member-link">
+<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+<div id="firstchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The first item contained within this item. This is a shortcut for
+accessing <tt>item.children[0]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="lastchild-member" class="member">
+<div id="lastchild-link" class="member-link">
+<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+<div id="lastchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The last item contained within this item.This is a shortcut for
+accessing <tt>item.children[item.children.length - 1]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="nextsibling-member" class="member">
+<div id="nextsibling-link" class="member-link">
+<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+<div id="nextsibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The next item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="previoussibling-member" class="member">
+<div id="previoussibling-link" class="member-link">
+<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+<div id="previoussibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The previous item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="index-member" class="member">
+<div id="index-link" class="member-link">
+<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+<div id="index-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The index of this item within the list of its parent's children.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Bounding Rectangles</h3>
+
+<div id="bounds-member" class="member">
+<div id="bounds-link" class="member-link">
+<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+<div id="bounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item excluding stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokebounds-member" class="member">
+<div id="strokebounds-link" class="member-link">
+<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+<div id="strokebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="handlebounds-member" class="member">
+<div id="handlebounds-link" class="member-link">
+<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+<div id="handlebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including handles.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Stroke Style</h3>
+
+<div id="strokecolor-member" class="member">
+<div id="strokecolor-link" class="member-link">
+<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+<div id="strokecolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the stroke color of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-46">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to RGB red:
+circle.strokeColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-46"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokewidth-member" class="member">
+<div id="strokewidth-link" class="member-link">
+<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+<div id="strokewidth-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The width of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's stroke width:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-47">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to black:
+circle.strokeColor = 'black';
+
+// Set its stroke width to 10:
+circle.strokeWidth = 10;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-47"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokecap-member" class="member">
+<div id="strokecap-link" class="member-link">
+<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+<div id="strokecap-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
+have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'butt'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('round', 'square', 'butt')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke caps:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-48">
+var line = new Path(new Point(80, 50), new Point(420, 50));
+line.strokeColor = 'black';
+line.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+line.selected = true;
+
+// Set the stroke cap of the line to be round:
+line.strokeCap = 'round';
+
+// Copy the path and set its stroke cap to be square:
+var line2 = line.clone();
+line2.position.y += 50;
+line2.strokeCap = 'square';
+
+// Make another copy and set its stroke cap to be butt:
+var line2 = line.clone();
+line2.position.y += 100;
+line2.strokeCap = 'butt';
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-48"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokejoin-member" class="member">
+<div id="strokejoin-link" class="member-link">
+<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+<div id="strokejoin-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the corners of paths when they have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'miter'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt> ('miter', 'round', 'bevel')
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke joins:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-49">
+var path = new Path();
+path.add(new Point(80, 100));
+path.add(new Point(120, 40));
+path.add(new Point(160, 100));
+path.strokeColor = 'black';
+path.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+path.selected = true;
+
+var path2 = path.clone();
+path2.position.x += path2.bounds.width * 1.5;
+path2.strokeJoin = 'round';
+
+var path3 = path2.clone();
+path3.position.x += path3.bounds.width * 1.5;
+path3.strokeJoin = 'bevel';
+</script>
+<div class="canvas"><canvas width="516" height="120" id="canvas-49"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="dashoffset-member" class="member">
+<div id="dashoffset-link" class="member-link">
+<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+<div id="dashoffset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The dash offset of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>0</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="dasharray-member" class="member">
+<div id="dasharray-link" class="member-link">
+<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+<div id="dasharray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>[]</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Array</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-50">
+var path = new Path.Circle(new Point(80, 50), 40);
+path.strokeWidth = 2;
+path.strokeColor = 'black';
+
+// Set the dashed stroke to [10pt dash, 4pt gap]:
+path.dashArray = [10, 4];
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-50"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="miterlimit-member" class="member">
+<div id="miterlimit-link" class="member-link">
+<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+<div id="miterlimit-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The miter limit of the stroke.</p>
+<p>When two line segments meet at a sharp angle and miter joins have been
+specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
+extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
+miterLimit imposes a limit on the ratio of the miter length to the
+<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>10</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Fill Style</h3>
+
+<div id="fillcolor-member" class="member">
+<div id="fillcolor-link" class="member-link">
+<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+<div id="fillcolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The fill color of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the fill color of a path to red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-51">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set the fill color of the circle to RGB red:
+circle.fillColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-51"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+<!-- =========================== inherited methods ========================= -->
+<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Clones the item within the same project and places the copy above the
+item.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Cloning items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-52">
+var circle = new Path.Circle(new Point(50, 50), 10);
+circle.fillColor = 'red';
+
+// Make 20 copies of the circle:
+for (var i = 0; i < 20; i++) {
+	var copy = circle.clone();
+
+	// Distribute the copies horizontally, so we can see them:
+	copy.position.x += i * copy.bounds.width;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-52"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="copyto-item-member" class="member">
+<div id="copyto-item-link" class="member-link">
+<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+<div id="copyto-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>When passed a project, copies the item to the project,
+or duplicates it within the same project. When passed an item,
+copies the item into the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
+&mdash;&nbsp;the item or project to
+copy the item to
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rasterize-member" class="member">
+<div id="rasterize-link" class="member-link">
+<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+<div id="rasterize-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rasterizes the item into a newly created Raster object. The item itself
+is not removed after rasterization.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>resolution:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the resolution of the raster in dpi
+&mdash;&nbsp;optional, default: <tt>72</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Rasterizing an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-53">
+var circle = new Path.Circle(new Point(80, 50), 5);
+circle.fillColor = 'red';
+
+// Create a rasterized version of the path:
+var raster = circle.rasterize();
+
+// Move it 100pt to the right:
+raster.position.x += 100;
+
+// Scale the path and the raster by 300%, so we can compare them:
+circle.scale(5);
+raster.scale(5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-53"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="hittest-point-member" class="member">
+<div id="hittest-point-link" class="member-link">
+<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+<div id="hittest-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Perform a hit test on the item (and its children, if it is a
+<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
+<p>The optional options object allows you to control the specifics of the
+hit test and may contain a combination of the following values:</p>
+<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
+points.</p>
+<p><b>options.type:</b> Only hit test again a certain item
+type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
+<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
+<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
+items, taking into account stroke width.</p>
+<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
+<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
+<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
+(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
+<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
+last segment points of open path items.</p>
+<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
+side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
+(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
+<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
+<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The point where the hit test should be performed
+
+</li>
+
+<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+
+&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
+tolerance: 2 }</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
+information about what exactly was hit or <tt>null</tt> if nothing was
+hit.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Operations</h3>
+
+<div id="addchild-item-member" class="member">
+<div id="addchild-item-link" class="member-link">
+<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+<div id="addchild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified item as a child of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be added as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchild-index-item-member" class="member">
+<div id="insertchild-index-item-link" class="member-link">
+<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+<div id="insertchild-index-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="addchildren-items-member" class="member">
+<div id="addchildren-items-link" class="member-link">
+<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+<div id="addchildren-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified items as children of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>items:</tt> 
+<tt>item</tt>
+&mdash;&nbsp;The items to be added as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchildren-index-items-member" class="member">
+<div id="insertchildren-index-items-link" class="member-link">
+<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+<div id="insertchildren-index-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified items as children of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>items:</tt> 
+Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+&mdash;&nbsp;The items to be appended as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertabove-item-member" class="member">
+<div id="insertabove-item-link" class="member-link">
+<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+<div id="insertabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertbelow-item-member" class="member">
+<div id="insertbelow-item-link" class="member-link">
+<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+<div id="insertbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendtop-item-member" class="member">
+<div id="appendtop-item-link" class="member-link">
+<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+<div id="appendtop-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it above all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendbottom-item-member" class="member">
+<div id="appendbottom-item-link" class="member-link">
+<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+<div id="appendbottom-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it below all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="moveabove-item-member" class="member">
+<div id="moveabove-item-link" class="member-link">
+<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+<div id="moveabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="movebelow-item-member" class="member">
+<div id="movebelow-item-link" class="member-link">
+<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+<div id="movebelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves the item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item below which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="remove-member" class="member">
+<div id="remove-link" class="member-link">
+<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+<div id="remove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item from the project. If the item has children, they are also
+removed.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-member" class="member">
+<div id="removechildren-link" class="member-link">
+<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+<div id="removechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-from-member" class="member">
+<div id="removechildren-from-link" class="member-link">
+<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+<div id="removechildren-from-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the children from the specified <tt>from</tt> index to the
+<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>from:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the beginning index, inclusive
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the ending index, exclusive
+&mdash;&nbsp;optional, default: <tt>children.length</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="reversechildren-member" class="member">
+<div id="reversechildren-link" class="member-link">
+<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+<div id="reversechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Reverses the order of the item's children</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Tests</h3>
+
+<div id="haschildren-member" class="member">
+<div id="haschildren-link" class="member-link">
+<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+<div id="haschildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item contains any children items.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isabove-item-member" class="member">
+<div id="isabove-item-link" class="member-link">
+<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+<div id="isabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if this item is above the specified item in the stacking order
+of the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isbelow-item-member" class="member">
+<div id="isbelow-item-link" class="member-link">
+<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+<div id="isbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is below the specified item in the stacking order of
+the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isparent-item-member" class="member">
+<div id="isparent-item-link" class="member-link">
+<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+<div id="isparent-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is the parent of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="ischild-item-member" class="member">
+<div id="ischild-item-link" class="member-link">
+<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+<div id="ischild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is a child of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isdescendant-item-member" class="member">
+<div id="isdescendant-item-link" class="member-link">
+<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+<div id="isdescendant-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is contained within the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isancestor-item-member" class="member">
+<div id="isancestor-item-link" class="member-link">
+<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+<div id="isancestor-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is an ancestor of the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
+item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isgroupedwith-item-member" class="member">
+<div id="isgroupedwith-item-link" class="member-link">
+<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+<div id="isgroupedwith-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the item is grouped with the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Transform Functions</h3>
+
+<div id="scale-scale-member" class="member">
+<div id="scale-scale-link" class="member-link">
+<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+<div id="scale-scale-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given value from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>scale:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item from its center point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-54">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path by 150% from its center point
+circle.scale(1.5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-54"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Scaling an item from a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-55">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path 150% from its bottom left corner
+circle.scale(1.5, circle.bounds.bottomLeft);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-55"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="scale-hor-ver-member" class="member">
+<div id="scale-hor-ver-link" class="member-link">
+<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="scale-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given values from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal scale factor
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item horizontally by 300%:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-56">
+// Create a circle shaped path at { x: 100, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(100, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path horizontally by 300%
+circle.scale(3, 1);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-56"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="translate-delta-member" class="member">
+<div id="translate-delta-link" class="member-link">
+<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+<div id="translate-delta-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Translates (moves) the item by the given offset point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>delta:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the offset to translate the item by
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rotate-angle-member" class="member">
+<div id="rotate-angle-link" class="member-link">
+<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+<div id="rotate-angle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rotates the item by a given angle around the given point.</p>
+<p>Angles are oriented clockwise and measured in degrees.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>angle:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the rotation angle
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Rotating an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-57">
+// Create a rectangle shaped path with its top left
+// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
+var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
+path.fillColor = 'black';
+
+// Rotate the path by 30 degrees:
+path.rotate(30);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-57"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Rotating an item around a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-58">
+// Create a rectangle shaped path with its top left
+// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
+var topLeft = new Point(175, 50);
+var size = new Size(100, 100);
+var path = new Path.Rectangle(topLeft, size);
+path.fillColor = 'black';
+
+// Draw a circle shaped path in the center of the view,
+// to show the rotation point:
+var circle = new Path.Circle(view.center, 5);
+circle.fillColor = 'white';
+
+// Each frame rotate the path 3 degrees around the center point
+// of the view:
+function onFrame(event) {
+	path.rotate(3, view.center);
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-58"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="shear-point-member" class="member">
+<div id="shear-point-link" class="member-link">
+<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+<div id="shear-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given value from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="shear-hor-ver-member" class="member">
+<div id="shear-hor-ver-link" class="member-link">
+<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="shear-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given values from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal shear factor.
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical shear factor.
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="transform-matrix-flags-member" class="member">
+<div id="transform-matrix-flags-link" class="member-link">
+<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+<div id="transform-matrix-flags-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>matrix:</tt> 
+<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+
+
+</li>
+
+<li>
+<tt>flags:</tt> 
+
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="fitbounds-rectangle-member" class="member">
+<div id="fitbounds-rectangle-link" class="member-link">
+<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+<div id="fitbounds-rectangle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
+rectangle, without changing its aspect ratio.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rectangle:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+
+
+</li>
+
+<li>
+<tt>fill:</tt> 
+<tt>Boolean</tt>
+
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-59">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-59"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-60">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds, true);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-60"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-61">
+var path = new Path.Circle(new Point(80, 50), 30);
+path.fillColor = 'red';
+
+// Fit the path to the bounding rectangle of the view:
+path.fitBounds(view.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-61"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<h3>Remove On Event</h3>
+
+<div id="removeon-object-member" class="member">
+<div id="removeon-object-link" class="member-link">
+<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+<div id="removeon-object-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the events specified in the passed object literal
+occur.</p>
+<p>The object literal can contain the following values:</p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
+fired: <tt>object.move = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
+fired: <tt>object.drag = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
+fired: <tt>object.down = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
+fired: <tt>object.up = true</tt></p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>object:</tt> 
+<tt>Object</tt>
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-62">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path on the next onMouseDrag or onMouseDown event:
+	path.removeOn({
+		drag: true,
+		down: true
+	});
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-62"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonmove-member" class="member">
+<div id="removeonmove-link" class="member-link">
+<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+<div id="removeonmove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Move your mouse below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-63">
+function onMouseMove(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next move event, automatically remove the path:
+	path.removeOnMove();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-63"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondown-member" class="member">
+<div id="removeondown-link" class="member-link">
+<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+<div id="removeondown-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-64">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, next time the mouse is pressed:
+	path.removeOnDown();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-64"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondrag-member" class="member">
+<div id="removeondrag-link" class="member-link">
+<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+<div id="removeondrag-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-65">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next drag event, automatically remove the path:
+	path.removeOnDrag();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-65"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonup-member" class="member">
+<div id="removeonup-link" class="member-link">
+<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+<div id="removeonup-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-66">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, when the mouse is released:
+	path.removeOnUp();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-66"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+</div>
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/PathItem.html b/dist/docs/classes/PathItem.html
new file mode 100644
index 00000000..105888d1
--- /dev/null
+++ b/dist/docs/classes/PathItem.html
@@ -0,0 +1,4279 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>PathItem</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>PathItem</h1>
+
+<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
+
+<p>The PathItem class is the base for any items that describe paths
+and offer standardised methods for drawing and path manipulation, such as
+<a href="../classes/Path.html"><tt>Path</tt></a> and <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>.</p>
+
+</div>
+
+
+
+
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="smooth-member" class="member">
+<div id="smooth-link" class="member-link">
+<a name="smooth" href="#" onClick="return toggleMember('smooth', false);"><tt><b>smooth</b>()</tt></a>
+</div>
+<div id="smooth-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('smooth', false);"><tt><b>smooth</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('smooth', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Smooth bezier curves without changing the amount of segments or their
+points, by only smoothing and adjusting their handle points, for both
+open ended and closed paths.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Smoothing a closed shape:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+// Create a rectangular path with its top-left point at
+// {x: 30, y: 25} and a size of {width: 50, height: 50}:
+var path = new Path.Rectangle(new Point(30, 25), new Size(50, 50));
+path.strokeColor = 'black';
+
+// Select the path, so we can see its handles:
+path.selected = true;
+
+// Create a copy of the path and move it 100pt to the right:
+var copy = path.clone();
+copy.position.x += 100;
+
+// Smooth the segments of the copy:
+copy.smooth();
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+var path = new Path();
+path.strokeColor = 'black';
+
+path.add(new Point(30, 50));
+
+var y = 5;
+var x = 3;
+
+for (var i = 0; i < 28; i++) {
+    y *= -1.1;
+    x *= 1.1;
+    path.lineBy(x, y);
+}
+
+// Create a copy of the path and move it 100pt down:
+var copy = path.clone();
+copy.position.y += 120;
+
+// Set its stroke color to red:
+copy.strokeColor = 'red';
+
+// Smooth the segments of the copy:
+copy.smooth();
+</script>
+<div class="canvas"><canvas width="516" height="220" id="canvas-1"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<h3>Postscript Style Drawing Commands</h3>
+
+<div id="moveto-point-member" class="member">
+<div id="moveto-point-link" class="member-link">
+<a name="moveto-point" href="#" onClick="return toggleMember('moveto-point', false);"><tt><b>moveTo</b>(point)</tt></a>
+</div>
+<div id="moveto-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('moveto-point', false);"><tt><b>moveTo</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveto-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>If called on a <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, a new <a href="../classes/Path.html"><tt>Path</tt></a> is created as a
+child and the point is added as its first segment. On a normal empty
+<a href="../classes/Path.html"><tt>Path</tt></a>, the point is simply added as its first segment.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="lineto-point-member" class="member">
+<div id="lineto-point-link" class="member-link">
+<a name="lineto-point" href="#" onClick="return toggleMember('lineto-point', false);"><tt><b>lineTo</b>(point)</tt></a>
+</div>
+<div id="lineto-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lineto-point', false);"><tt><b>lineTo</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lineto-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="cubiccurveto-handle1-handle2-to-member" class="member">
+<div id="cubiccurveto-handle1-handle2-to-link" class="member-link">
+<a name="cubiccurveto-handle1-handle2-to" href="#" onClick="return toggleMember('cubiccurveto-handle1-handle2-to', false);"><tt><b>cubicCurveTo</b>(handle1, handle2, to)</tt></a>
+</div>
+<div id="cubiccurveto-handle1-handle2-to-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('cubiccurveto-handle1-handle2-to', false);"><tt><b>cubicCurveTo</b>(handle1, handle2, to)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('cubiccurveto-handle1-handle2-to', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds a cubic bezier curve to the path, defined by two handles and a to
+point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>handle1:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>handle2:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="quadraticcurveto-handle-to-member" class="member">
+<div id="quadraticcurveto-handle-to-link" class="member-link">
+<a name="quadraticcurveto-handle-to" href="#" onClick="return toggleMember('quadraticcurveto-handle-to', false);"><tt><b>quadraticCurveTo</b>(handle, to)</tt></a>
+</div>
+<div id="quadraticcurveto-handle-to-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('quadraticcurveto-handle-to', false);"><tt><b>quadraticCurveTo</b>(handle, to)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('quadraticcurveto-handle-to', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds a quadratic bezier curve to the path, defined by a handle and a to
+point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>handle:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="curveto-through-to-member" class="member">
+<div id="curveto-through-to-link" class="member-link">
+<a name="curveto-through-to" href="#" onClick="return toggleMember('curveto-through-to', false);"><tt><b>curveTo</b>(through, to[, parameter])</tt></a>
+</div>
+<div id="curveto-through-to-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('curveto-through-to', false);"><tt><b>curveTo</b>(through, to[, parameter])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveto-through-to', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Draws a curve from the position of the last segment point in the path
+that goes through the specified <tt>through</tt> point, to the specified
+<tt>to</tt> point by adding one segment to the path.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>through:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point through which the curve should go
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point where the curve should end
+
+</li>
+
+<li>
+<tt>parameter:</tt> 
+<tt>Number</tt>
+
+&mdash;&nbsp;optional, default: <tt>0.5</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+var myPath;
+function onMouseDrag(event) {
+	// If we created a path before, remove it:
+	if (myPath) {
+	    myPath.remove();
+	}
+
+	// Create a new path and add a segment point to it
+	// at {x: 150, y: 150):
+	myPath = new Path();
+	myPath.add(150, 150);
+
+	// Draw a curve through the position of the mouse to 'toPoint'
+	var toPoint = new Point(350, 150);
+	myPath.curveTo(event.point, toPoint);
+
+	// Select the path, so we can see its segments:
+	myPath.selected = true;
+}
+
+// When the mouse is released, deselect the path
+// and set its stroke-color to black:
+function onMouseUp(event) {
+	myPath.selected = false;
+	myPath.strokeColor = 'black';
+}
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="arcto-through-to-member" class="member">
+<div id="arcto-through-to-link" class="member-link">
+<a name="arcto-through-to" href="#" onClick="return toggleMember('arcto-through-to', false);"><tt><b>arcTo</b>(through, to)</tt></a>
+</div>
+<div id="arcto-through-to-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('arcto-through-to', false);"><tt><b>arcTo</b>(through, to)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcto-through-to', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Draws an arc from the position of the last segment point in the path that
+goes through the specified <tt>through</tt> point, to the specified
+<tt>to</tt> point by adding one or more segments to the path.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>through:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point where the arc should pass through
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point where the arc should end
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+var path = new Path();
+path.strokeColor = 'black';
+
+var firstPoint = new Point(30, 75);
+path.add(firstPoint);
+
+// The point through which we will create the arc:
+var throughPoint = new Point(40, 40);
+
+// The point at which the arc will end:
+var toPoint = new Point(130, 75);
+
+// Draw an arc through 'throughPoint' to 'toPoint'
+path.arcTo(throughPoint, toPoint);
+
+// Add a red circle shaped path at the position of 'throughPoint':
+var circle = new Path.Circle(throughPoint, 3);
+circle.fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+var myPath;
+function onMouseDrag(event) {
+	// If we created a path before, remove it:
+	if (myPath) {
+	    myPath.remove();
+	}
+
+	// Create a new path and add a segment point to it
+	// at {x: 150, y: 150):
+	myPath = new Path();
+	myPath.add(150, 150);
+
+	// Draw an arc through the position of the mouse to 'toPoint'
+	var toPoint = new Point(350, 150);
+	myPath.arcTo(event.point, toPoint);
+
+	// Select the path, so we can see its segments:
+	myPath.selected = true;
+}
+
+// When the mouse is released, deselect the path
+// and fill it with black.
+function onMouseUp(event) {
+	myPath.selected = false;
+	myPath.fillColor = 'black';
+}
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-4"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="arcto-to-member" class="member">
+<div id="arcto-to-link" class="member-link">
+<a name="arcto-to" href="#" onClick="return toggleMember('arcto-to', false);"><tt><b>arcTo</b>(to[, clockwise])</tt></a>
+</div>
+<div id="arcto-to-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('arcto-to', false);"><tt><b>arcTo</b>(to[, clockwise])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcto-to', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Draws an arc from the position of the last segment point in the path to
+the specified point by adding one or more segments to the path.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>to:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point where the arc should end
+
+</li>
+
+<li>
+<tt>clockwise:</tt> 
+<tt>Boolean</tt>
+&mdash;&nbsp;specifies whether the arc should be
+       drawn in clockwise direction.
+&mdash;&nbsp;optional, default: <tt>true</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-5">
+var path = new Path();
+path.strokeColor = 'black';
+
+path.add(new Point(30, 75));
+path.arcTo(new Point(130, 75));
+
+var path2 = new Path();
+path2.strokeColor = 'red';
+path2.add(new Point(180, 25));
+
+// To draw an arc in anticlockwise direction,
+// we pass 'false' as the second argument to arcTo:
+path2.arcTo(new Point(280, 25), false);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Interactive example. Click and drag in the view below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-6">
+var myPath;
+
+// The mouse has to move at least 20 points before
+// the next mouse drag event is fired:
+tool.minDistance = 20;
+
+// When the user clicks, create a new path and add
+// the current mouse position to it as its first segment:
+function onMouseDown(event) {
+	myPath = new Path();
+	myPath.strokeColor = 'black';
+	myPath.add(event.point);
+}
+
+// On each mouse drag event, draw an arc to the current
+// position of the mouse:
+function onMouseDrag(event) {
+	myPath.arcTo(event.point);
+}
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-6"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="closepath-member" class="member">
+<div id="closepath-link" class="member-link">
+<a name="closepath" href="#" onClick="return toggleMember('closepath', false);"><tt><b>closePath</b>()</tt></a>
+</div>
+<div id="closepath-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('closepath', false);"><tt><b>closePath</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('closepath', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Closes the path. When closed, Paper.js connects the first and last
+segments.</p>
+	
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Path.html#closed"><tt>path.closed</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+		
+			
+<h3>Relative Drawing Commands</h3>
+
+<div id="moveby-point-member" class="member">
+<div id="moveby-point-link" class="member-link">
+<a name="moveby-point" href="#" onClick="return toggleMember('moveby-point', false);"><tt><b>moveBy</b>(point)</tt></a>
+</div>
+<div id="moveby-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('moveby-point', false);"><tt><b>moveBy</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveby-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>If called on a <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>, a new <a href="../classes/Path.html"><tt>Path</tt></a> is created as a
+child and the point is added as its first segment relative to the
+position of the last segment of the current path.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="lineby-vector-member" class="member">
+<div id="lineby-vector-link" class="member-link">
+<a name="lineby-vector" href="#" onClick="return toggleMember('lineby-vector', false);"><tt><b>lineBy</b>(vector)</tt></a>
+</div>
+<div id="lineby-vector-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lineby-vector', false);"><tt><b>lineBy</b>(vector)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lineby-vector', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds a segment relative to the last segment point of the path.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>vector:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The vector which is added to the position of the
+       last segment of the path, to become the new segment.
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-7">
+var path = new Path();
+path.strokeColor = 'black';
+
+// Add a segment at {x: 50, y: 50}
+path.add(25, 25);
+
+// Add a segment relative to the last segment of the path.
+// 50 in x direction and 0 in y direction, becomes {x: 75, y: 25}
+path.lineBy(50, 0);
+
+// 0 in x direction and 50 in y direction, becomes {x: 75, y: 75}
+path.lineBy(0, 50);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Drawing a spiral using lineBy:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-8">
+var path = new Path();
+path.strokeColor = 'black';
+
+// Add the first segment at {x: 50, y: 50}
+path.add(view.center);
+
+// Loop 500 times:
+for (var i = 0; i < 500; i++) {
+	// Create a vector with an ever increasing length
+	// and an angle in increments of 45 degrees
+	var vector = new Point({
+	    angle: i * 45,
+	    length: i / 2
+	});
+	// Add the vector relatively to the last segment point:
+	path.lineBy(vector);
+}
+
+// Smooth the handles of the path:
+path.smooth();
+
+// Uncomment the following line and click on 'run' to see
+// the construction of the path:
+// path.selected = true;
+</script>
+<div class="canvas"><canvas width="516" height="300" id="canvas-8"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="curveby-throughVector-toVector-member" class="member">
+<div id="curveby-throughVector-toVector-link" class="member-link">
+<a name="curveby-throughVector-toVector" href="#" onClick="return toggleMember('curveby-throughVector-toVector', false);"><tt><b>curveBy</b>(throughVector, toVector[, parameter])</tt></a>
+</div>
+<div id="curveby-throughVector-toVector-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('curveby-throughVector-toVector', false);"><tt><b>curveBy</b>(throughVector, toVector[, parameter])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curveby-throughVector-toVector', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>throughVector:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>toVector:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>parameter:</tt> 
+<tt>Number</tt>
+
+&mdash;&nbsp;optional, default: <tt>0.5</tt>
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="arcby-throughVector-toVector-member" class="member">
+<div id="arcby-throughVector-toVector-link" class="member-link">
+<a name="arcby-throughVector-toVector" href="#" onClick="return toggleMember('arcby-throughVector-toVector', false);"><tt><b>arcBy</b>(throughVector, toVector)</tt></a>
+</div>
+<div id="arcby-throughVector-toVector-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('arcby-throughVector-toVector', false);"><tt><b>arcBy</b>(throughVector, toVector)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('arcby-throughVector-toVector', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>throughVector:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>toVector:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="id-member" class="member">
+<div id="id-link" class="member-link">
+<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+<div id="id-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The unique id of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="name-member" class="member">
+<div id="name-link" class="member-link">
+<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+<div id="name-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The name of the item. If the item has a name, it can be accessed by name
+through its parent's children list.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-9">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and add path to it as a child:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="position-member" class="member">
+<div id="position-link" class="member-link">
+<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+<div id="position-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item's position within the project. This is the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the position of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-10">
+// Create a circle at position { x: 10, y: 10 }
+var circle = new Path.Circle(new Point(10, 10), 10);
+circle.fillColor = 'red';
+
+// Move the circle to { x: 20, y: 20 }
+circle.position = new Point(20, 20);
+
+// Move the circle 100 points to the right and 50 points down
+circle.position += new Point(100, 50);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Changing the x coordinate of an item's position:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-11">
+// Create a circle at position { x: 20, y: 20 }
+var circle = new Path.Circle(new Point(20, 20), 10);
+circle.fillColor = 'red';
+
+// Move the circle 100 points to the right
+circle.position.x += 100;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="style-member" class="member">
+<div id="style-link" class="member-link">
+<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+<div id="style-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The path style of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-12">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.style = {
+	fillColor: 'blue',
+	strokeColor: 'red',
+	strokeWidth: 5
+};
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Copying the style of another item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-13">
+var path = new Path.Circle(new Point(50, 50), 30);
+path.fillColor = 'red';
+
+var path2 = new Path.Circle(new Point(180, 50), 20);
+// Copy the path style of path:
+path2.style = path.style;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Applying the same style object to multiple items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-14">
+var myStyle = {
+	fillColor: 'red',
+	strokeColor: 'blue',
+	strokeWidth: 4
+};
+
+var path = new Path.Circle(new Point(80, 50), 30);
+path.style = myStyle;
+
+var path2 = new Path.Circle(new Point(150, 50), 20);
+path2.style = myStyle;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="visible-member" class="member">
+<div id="visible-link" class="member-link">
+<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+<div id="visible-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
+item won't be drawn.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>true</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Hiding an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-15">
+var path = new Path.Circle(new Point(50, 50), 20);
+path.fillColor = 'red';
+
+// Hide the path:
+path.visible = false;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="blendmode-member" class="member">
+<div id="blendmode-link" class="member-link">
+<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+<div id="blendmode-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The blend mode of the item.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'normal'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
+'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
+'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
+'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's blend mode:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-16">
+// Create a white rectangle in the background
+// with the same dimensions as the view:
+var background = new Path.Rectangle(view.bounds);
+background.fillColor = 'white';
+
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.fillColor = 'blue';
+
+// Set the blend mode of circle2:
+circle2.blendMode = 'multiply';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="opacity-member" class="member">
+<div id="opacity-link" class="member-link">
+<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+<div id="opacity-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Making an item 50% transparent:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-17">
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.style = {
+	fillColor: 'blue',
+	strokeColor: 'green',
+	strokeWidth: 10
+};
+
+// Make circle2 50% transparent:
+circle2.opacity = 0.5;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="guide-member" class="member">
+<div id="guide-link" class="member-link">
+<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+<div id="guide-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item functions as a guide. When set to
+<tt>true</tt>, the item will be drawn at the end as a guide.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="selected-member" class="member">
+<div id="selected-link" class="member-link">
+<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+<div id="selected-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether an item is selected and will also return <tt>true</tt>
+if the item is partially selected (groups with some selected or partially
+selected paths).</p>
+<p>Paper.js draws the visual outlines of selected items on top of your
+project. This can be useful for debugging, as it allows you to see the
+construction of paths, position of path curves, individual segment points
+and bounding boxes of symbol and raster items.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Selecting an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-18">
+var path = new Path.Circle(new Size(80, 50), 35);
+path.selected = true; // Select the path
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="clipmask-member" class="member">
+<div id="clipmask-link" class="member-link">
+<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+<div id="clipmask-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item defines a clip mask. This can only be set on
+paths, compound paths, and text frame objects, and only if the item is
+already contained within a clipping group.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Project Hierarchy</h3>
+
+<div id="project-member" class="member">
+<div id="project-link" class="member-link">
+<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+<div id="project-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The project that this item belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Project.html"><tt>Project</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="layer-member" class="member">
+<div id="layer-link" class="member-link">
+<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+<div id="layer-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The layer that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Layer.html"><tt>Layer</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="parent-member" class="member">
+<div id="parent-link" class="member-link">
+<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+<div id="parent-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var path = new Path();
+
+// New items are placed in the active layer:
+console.log(path.parent == project.activeLayer); // true
+
+var group = new Group();
+group.addChild(path);
+
+// Now the parent of the path has become the group:
+console.log(path.parent == group); // true</pre>
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="children-member" class="member">
+<div id="children-link" class="member-link">
+<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+<div id="children-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The children items contained within this item. Items that define a
+<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
+<p><b>Please note:</b> The children array should not be modified directly
+using array functions. To remove single items from the children list, use
+<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
+<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
+<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Accessing items in the children array:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-19">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// Access the path through the group's children array:
+group.children[0].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Accessing children by name:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-20">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'orange';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Passing an array of items to item.children:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-21">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+var group = new Group();
+group.children = [path];
+
+// The path is the first child of the group:
+group.firstChild.fillColor = 'green';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="firstchild-member" class="member">
+<div id="firstchild-link" class="member-link">
+<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+<div id="firstchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The first item contained within this item. This is a shortcut for
+accessing <tt>item.children[0]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="lastchild-member" class="member">
+<div id="lastchild-link" class="member-link">
+<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+<div id="lastchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The last item contained within this item.This is a shortcut for
+accessing <tt>item.children[item.children.length - 1]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="nextsibling-member" class="member">
+<div id="nextsibling-link" class="member-link">
+<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+<div id="nextsibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The next item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="previoussibling-member" class="member">
+<div id="previoussibling-link" class="member-link">
+<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+<div id="previoussibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The previous item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="index-member" class="member">
+<div id="index-link" class="member-link">
+<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+<div id="index-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The index of this item within the list of its parent's children.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Bounding Rectangles</h3>
+
+<div id="bounds-member" class="member">
+<div id="bounds-link" class="member-link">
+<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+<div id="bounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item excluding stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokebounds-member" class="member">
+<div id="strokebounds-link" class="member-link">
+<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+<div id="strokebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="handlebounds-member" class="member">
+<div id="handlebounds-link" class="member-link">
+<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+<div id="handlebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including handles.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Stroke Style</h3>
+
+<div id="strokecolor-member" class="member">
+<div id="strokecolor-link" class="member-link">
+<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+<div id="strokecolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the stroke color of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-22">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to RGB red:
+circle.strokeColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokewidth-member" class="member">
+<div id="strokewidth-link" class="member-link">
+<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+<div id="strokewidth-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The width of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's stroke width:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-23">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to black:
+circle.strokeColor = 'black';
+
+// Set its stroke width to 10:
+circle.strokeWidth = 10;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokecap-member" class="member">
+<div id="strokecap-link" class="member-link">
+<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+<div id="strokecap-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
+have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'butt'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('round', 'square', 'butt')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke caps:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-24">
+var line = new Path(new Point(80, 50), new Point(420, 50));
+line.strokeColor = 'black';
+line.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+line.selected = true;
+
+// Set the stroke cap of the line to be round:
+line.strokeCap = 'round';
+
+// Copy the path and set its stroke cap to be square:
+var line2 = line.clone();
+line2.position.y += 50;
+line2.strokeCap = 'square';
+
+// Make another copy and set its stroke cap to be butt:
+var line2 = line.clone();
+line2.position.y += 100;
+line2.strokeCap = 'butt';
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-24"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokejoin-member" class="member">
+<div id="strokejoin-link" class="member-link">
+<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+<div id="strokejoin-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the corners of paths when they have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'miter'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt> ('miter', 'round', 'bevel')
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke joins:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-25">
+var path = new Path();
+path.add(new Point(80, 100));
+path.add(new Point(120, 40));
+path.add(new Point(160, 100));
+path.strokeColor = 'black';
+path.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+path.selected = true;
+
+var path2 = path.clone();
+path2.position.x += path2.bounds.width * 1.5;
+path2.strokeJoin = 'round';
+
+var path3 = path2.clone();
+path3.position.x += path3.bounds.width * 1.5;
+path3.strokeJoin = 'bevel';
+</script>
+<div class="canvas"><canvas width="516" height="120" id="canvas-25"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="dashoffset-member" class="member">
+<div id="dashoffset-link" class="member-link">
+<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+<div id="dashoffset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The dash offset of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>0</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="dasharray-member" class="member">
+<div id="dasharray-link" class="member-link">
+<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+<div id="dasharray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>[]</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Array</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-26">
+var path = new Path.Circle(new Point(80, 50), 40);
+path.strokeWidth = 2;
+path.strokeColor = 'black';
+
+// Set the dashed stroke to [10pt dash, 4pt gap]:
+path.dashArray = [10, 4];
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="miterlimit-member" class="member">
+<div id="miterlimit-link" class="member-link">
+<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+<div id="miterlimit-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The miter limit of the stroke.</p>
+<p>When two line segments meet at a sharp angle and miter joins have been
+specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
+extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
+miterLimit imposes a limit on the ratio of the miter length to the
+<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>10</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Fill Style</h3>
+
+<div id="fillcolor-member" class="member">
+<div id="fillcolor-link" class="member-link">
+<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+<div id="fillcolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The fill color of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the fill color of a path to red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-27">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set the fill color of the circle to RGB red:
+circle.fillColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+<!-- =========================== inherited methods ========================= -->
+<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Clones the item within the same project and places the copy above the
+item.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Cloning items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-28">
+var circle = new Path.Circle(new Point(50, 50), 10);
+circle.fillColor = 'red';
+
+// Make 20 copies of the circle:
+for (var i = 0; i < 20; i++) {
+	var copy = circle.clone();
+
+	// Distribute the copies horizontally, so we can see them:
+	copy.position.x += i * copy.bounds.width;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="copyto-item-member" class="member">
+<div id="copyto-item-link" class="member-link">
+<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+<div id="copyto-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>When passed a project, copies the item to the project,
+or duplicates it within the same project. When passed an item,
+copies the item into the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
+&mdash;&nbsp;the item or project to
+copy the item to
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rasterize-member" class="member">
+<div id="rasterize-link" class="member-link">
+<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+<div id="rasterize-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rasterizes the item into a newly created Raster object. The item itself
+is not removed after rasterization.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>resolution:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the resolution of the raster in dpi
+&mdash;&nbsp;optional, default: <tt>72</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Rasterizing an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-29">
+var circle = new Path.Circle(new Point(80, 50), 5);
+circle.fillColor = 'red';
+
+// Create a rasterized version of the path:
+var raster = circle.rasterize();
+
+// Move it 100pt to the right:
+raster.position.x += 100;
+
+// Scale the path and the raster by 300%, so we can compare them:
+circle.scale(5);
+raster.scale(5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="hittest-point-member" class="member">
+<div id="hittest-point-link" class="member-link">
+<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+<div id="hittest-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Perform a hit test on the item (and its children, if it is a
+<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
+<p>The optional options object allows you to control the specifics of the
+hit test and may contain a combination of the following values:</p>
+<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
+points.</p>
+<p><b>options.type:</b> Only hit test again a certain item
+type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
+<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
+<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
+items, taking into account stroke width.</p>
+<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
+<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
+<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
+(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
+<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
+last segment points of open path items.</p>
+<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
+side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
+(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
+<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
+<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The point where the hit test should be performed
+
+</li>
+
+<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+
+&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
+tolerance: 2 }</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
+information about what exactly was hit or <tt>null</tt> if nothing was
+hit.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Operations</h3>
+
+<div id="addchild-item-member" class="member">
+<div id="addchild-item-link" class="member-link">
+<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+<div id="addchild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified item as a child of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be added as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchild-index-item-member" class="member">
+<div id="insertchild-index-item-link" class="member-link">
+<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+<div id="insertchild-index-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="addchildren-items-member" class="member">
+<div id="addchildren-items-link" class="member-link">
+<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+<div id="addchildren-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified items as children of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>items:</tt> 
+<tt>item</tt>
+&mdash;&nbsp;The items to be added as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchildren-index-items-member" class="member">
+<div id="insertchildren-index-items-link" class="member-link">
+<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+<div id="insertchildren-index-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified items as children of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>items:</tt> 
+Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+&mdash;&nbsp;The items to be appended as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertabove-item-member" class="member">
+<div id="insertabove-item-link" class="member-link">
+<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+<div id="insertabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertbelow-item-member" class="member">
+<div id="insertbelow-item-link" class="member-link">
+<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+<div id="insertbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendtop-item-member" class="member">
+<div id="appendtop-item-link" class="member-link">
+<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+<div id="appendtop-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it above all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendbottom-item-member" class="member">
+<div id="appendbottom-item-link" class="member-link">
+<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+<div id="appendbottom-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it below all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="moveabove-item-member" class="member">
+<div id="moveabove-item-link" class="member-link">
+<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+<div id="moveabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="movebelow-item-member" class="member">
+<div id="movebelow-item-link" class="member-link">
+<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+<div id="movebelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves the item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item below which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="remove-member" class="member">
+<div id="remove-link" class="member-link">
+<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+<div id="remove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item from the project. If the item has children, they are also
+removed.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-member" class="member">
+<div id="removechildren-link" class="member-link">
+<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+<div id="removechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-from-member" class="member">
+<div id="removechildren-from-link" class="member-link">
+<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+<div id="removechildren-from-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the children from the specified <tt>from</tt> index to the
+<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>from:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the beginning index, inclusive
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the ending index, exclusive
+&mdash;&nbsp;optional, default: <tt>children.length</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="reversechildren-member" class="member">
+<div id="reversechildren-link" class="member-link">
+<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+<div id="reversechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Reverses the order of the item's children</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Tests</h3>
+
+<div id="haschildren-member" class="member">
+<div id="haschildren-link" class="member-link">
+<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+<div id="haschildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item contains any children items.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isabove-item-member" class="member">
+<div id="isabove-item-link" class="member-link">
+<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+<div id="isabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if this item is above the specified item in the stacking order
+of the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isbelow-item-member" class="member">
+<div id="isbelow-item-link" class="member-link">
+<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+<div id="isbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is below the specified item in the stacking order of
+the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isparent-item-member" class="member">
+<div id="isparent-item-link" class="member-link">
+<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+<div id="isparent-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is the parent of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="ischild-item-member" class="member">
+<div id="ischild-item-link" class="member-link">
+<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+<div id="ischild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is a child of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isdescendant-item-member" class="member">
+<div id="isdescendant-item-link" class="member-link">
+<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+<div id="isdescendant-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is contained within the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isancestor-item-member" class="member">
+<div id="isancestor-item-link" class="member-link">
+<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+<div id="isancestor-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is an ancestor of the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
+item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isgroupedwith-item-member" class="member">
+<div id="isgroupedwith-item-link" class="member-link">
+<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+<div id="isgroupedwith-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the item is grouped with the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Transform Functions</h3>
+
+<div id="scale-scale-member" class="member">
+<div id="scale-scale-link" class="member-link">
+<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+<div id="scale-scale-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given value from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>scale:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item from its center point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-30">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path by 150% from its center point
+circle.scale(1.5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-30"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Scaling an item from a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-31">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path 150% from its bottom left corner
+circle.scale(1.5, circle.bounds.bottomLeft);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-31"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="scale-hor-ver-member" class="member">
+<div id="scale-hor-ver-link" class="member-link">
+<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="scale-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given values from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal scale factor
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item horizontally by 300%:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-32">
+// Create a circle shaped path at { x: 100, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(100, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path horizontally by 300%
+circle.scale(3, 1);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-32"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="translate-delta-member" class="member">
+<div id="translate-delta-link" class="member-link">
+<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+<div id="translate-delta-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Translates (moves) the item by the given offset point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>delta:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the offset to translate the item by
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rotate-angle-member" class="member">
+<div id="rotate-angle-link" class="member-link">
+<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+<div id="rotate-angle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rotates the item by a given angle around the given point.</p>
+<p>Angles are oriented clockwise and measured in degrees.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>angle:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the rotation angle
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Rotating an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-33">
+// Create a rectangle shaped path with its top left
+// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
+var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
+path.fillColor = 'black';
+
+// Rotate the path by 30 degrees:
+path.rotate(30);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-33"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Rotating an item around a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-34">
+// Create a rectangle shaped path with its top left
+// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
+var topLeft = new Point(175, 50);
+var size = new Size(100, 100);
+var path = new Path.Rectangle(topLeft, size);
+path.fillColor = 'black';
+
+// Draw a circle shaped path in the center of the view,
+// to show the rotation point:
+var circle = new Path.Circle(view.center, 5);
+circle.fillColor = 'white';
+
+// Each frame rotate the path 3 degrees around the center point
+// of the view:
+function onFrame(event) {
+	path.rotate(3, view.center);
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-34"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="shear-point-member" class="member">
+<div id="shear-point-link" class="member-link">
+<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+<div id="shear-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given value from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="shear-hor-ver-member" class="member">
+<div id="shear-hor-ver-link" class="member-link">
+<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="shear-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given values from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal shear factor.
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical shear factor.
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="transform-matrix-flags-member" class="member">
+<div id="transform-matrix-flags-link" class="member-link">
+<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+<div id="transform-matrix-flags-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>matrix:</tt> 
+<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+
+
+</li>
+
+<li>
+<tt>flags:</tt> 
+
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="fitbounds-rectangle-member" class="member">
+<div id="fitbounds-rectangle-link" class="member-link">
+<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+<div id="fitbounds-rectangle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
+rectangle, without changing its aspect ratio.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rectangle:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+
+
+</li>
+
+<li>
+<tt>fill:</tt> 
+<tt>Boolean</tt>
+
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-35">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-36">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds, true);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-36"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-37">
+var path = new Path.Circle(new Point(80, 50), 30);
+path.fillColor = 'red';
+
+// Fit the path to the bounding rectangle of the view:
+path.fitBounds(view.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-37"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<h3>Remove On Event</h3>
+
+<div id="removeon-object-member" class="member">
+<div id="removeon-object-link" class="member-link">
+<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+<div id="removeon-object-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the events specified in the passed object literal
+occur.</p>
+<p>The object literal can contain the following values:</p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
+fired: <tt>object.move = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
+fired: <tt>object.drag = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
+fired: <tt>object.down = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
+fired: <tt>object.up = true</tt></p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>object:</tt> 
+<tt>Object</tt>
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-38">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path on the next onMouseDrag or onMouseDown event:
+	path.removeOn({
+		drag: true,
+		down: true
+	});
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-38"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonmove-member" class="member">
+<div id="removeonmove-link" class="member-link">
+<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+<div id="removeonmove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Move your mouse below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-39">
+function onMouseMove(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next move event, automatically remove the path:
+	path.removeOnMove();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-39"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondown-member" class="member">
+<div id="removeondown-link" class="member-link">
+<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+<div id="removeondown-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-40">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, next time the mouse is pressed:
+	path.removeOnDown();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-40"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondrag-member" class="member">
+<div id="removeondrag-link" class="member-link">
+<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+<div id="removeondrag-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-41">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next drag event, automatically remove the path:
+	path.removeOnDrag();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-41"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonup-member" class="member">
+<div id="removeonup-link" class="member-link">
+<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+<div id="removeonup-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-42">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, when the mouse is released:
+	path.removeOnUp();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-42"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+</div>
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/PathStyle.html b/dist/docs/classes/PathStyle.html
new file mode 100644
index 00000000..2b1ecdf4
--- /dev/null
+++ b/dist/docs/classes/PathStyle.html
@@ -0,0 +1,497 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>PathStyle</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>PathStyle</h1>
+
+<p>PathStyle is used for changing the visual styles of items
+contained within a Paper.js project and is returned by
+<a href="../classes/Item.html#style"><tt>item.style</tt></a> and <a href="../classes/Project.html#currentstyle"><tt>project.currentStyle</tt></a>.</p>
+<p>All properties of PathStyle are also reflected directly in <a href="../classes/Item.html"><tt>Item</tt></a>,
+i.e.: <a href="../classes/Item.html#fillcolor"><tt>item.fillColor</tt></a>.</p>
+<p>To set multiple style properties in one go, you can pass an object to
+<a href="../classes/Item.html#style"><tt>item.style</tt></a>. This is a convenient way to define a style once and
+apply it to a series of items:</p>
+<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+var circleStyle = {
+	fillColor: new RgbColor(1, 0, 0),
+	strokeColor: 'black',
+	strokeWidth: 5
+};
+
+var path = new Path.Circle(new Point(80, 50), 30);
+path.style = circleStyle;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+	<h3>Stroke Style</h3>
+
+<div id="strokecolor-member" class="member">
+<div id="strokecolor-link" class="member-link">
+<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+<div id="strokecolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the stroke color of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to RGB red:
+circle.strokeColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="strokewidth-member" class="member">
+<div id="strokewidth-link" class="member-link">
+<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+<div id="strokewidth-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The width of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's stroke width:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to black:
+circle.strokeColor = 'black';
+
+// Set its stroke width to 10:
+circle.strokeWidth = 10;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="strokecap-member" class="member">
+<div id="strokecap-link" class="member-link">
+<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+<div id="strokecap-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
+have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'butt'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('round', 'square', 'butt')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke caps:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+var line = new Path(new Point(80, 50), new Point(420, 50));
+line.strokeColor = 'black';
+line.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+line.selected = true;
+
+// Set the stroke cap of the line to be round:
+line.strokeCap = 'round';
+
+// Copy the path and set its stroke cap to be square:
+var line2 = line.clone();
+line2.position.y += 50;
+line2.strokeCap = 'square';
+
+// Make another copy and set its stroke cap to be butt:
+var line2 = line.clone();
+line2.position.y += 100;
+line2.strokeCap = 'butt';
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-3"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="strokejoin-member" class="member">
+<div id="strokejoin-link" class="member-link">
+<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+<div id="strokejoin-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the corners of paths when they have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'miter'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt> ('miter', 'round', 'bevel')
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke joins:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+var path = new Path();
+path.add(new Point(80, 100));
+path.add(new Point(120, 40));
+path.add(new Point(160, 100));
+path.strokeColor = 'black';
+path.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+path.selected = true;
+
+var path2 = path.clone();
+path2.position.x += path2.bounds.width * 1.5;
+path2.strokeJoin = 'round';
+
+var path3 = path2.clone();
+path3.position.x += path3.bounds.width * 1.5;
+path3.strokeJoin = 'bevel';
+</script>
+<div class="canvas"><canvas width="516" height="120" id="canvas-4"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="dashoffset-member" class="member">
+<div id="dashoffset-link" class="member-link">
+<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+<div id="dashoffset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The dash offset of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>0</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="dasharray-member" class="member">
+<div id="dasharray-link" class="member-link">
+<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+<div id="dasharray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>[]</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Array</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-5">
+var path = new Path.Circle(new Point(80, 50), 40);
+path.strokeWidth = 2;
+path.strokeColor = 'black';
+
+// Set the dashed stroke to [10pt dash, 4pt gap]:
+path.dashArray = [10, 4];
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="miterlimit-member" class="member">
+<div id="miterlimit-link" class="member-link">
+<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+<div id="miterlimit-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The miter limit of the stroke.</p>
+<p>When two line segments meet at a sharp angle and miter joins have been
+specified for <a href="../classes/PathStyle.html#strokejoin" onclick="return toggleMember('strokejoin', true);"><tt>strokeJoin</tt></a>, it is possible for the miter to extend
+far beyond the <a href="../classes/PathStyle.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a> of the path. The miterLimit imposes a
+limit on the ratio of the miter length to the <a href="../classes/PathStyle.html#strokewidth" onclick="return toggleMember('strokewidth', true);"><tt>strokeWidth</tt></a>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>10</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Fill Style</h3>
+
+<div id="fillcolor-member" class="member">
+<div id="fillcolor-link" class="member-link">
+<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+<div id="fillcolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The fill color.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the fill color of a path to red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-6">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set the fill color of the circle to RGB red:
+circle.fillColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/PlacedItem.html b/dist/docs/classes/PlacedItem.html
new file mode 100644
index 00000000..959080f6
--- /dev/null
+++ b/dist/docs/classes/PlacedItem.html
@@ -0,0 +1,3493 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>PlacedItem</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>PlacedItem</h1>
+
+<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
+
+<p>The PlacedItem class is the base for any items that have a matrix
+associated with them, describing their placement in the project, such as
+<a href="../classes/Raster.html"><tt>Raster</tt></a> and <a href="../classes/PlacedSymbol.html"><tt>PlacedSymbol</tt></a>.</p>
+
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="matrix-member" class="member">
+<div id="matrix-link" class="member-link">
+<a name="matrix" href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
+</div>
+<div id="matrix-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('matrix', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item's transformation matrix, defining position and dimensions in the
+document.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="id-member" class="member">
+<div id="id-link" class="member-link">
+<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+<div id="id-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The unique id of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="name-member" class="member">
+<div id="name-link" class="member-link">
+<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+<div id="name-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The name of the item. If the item has a name, it can be accessed by name
+through its parent's children list.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and add path to it as a child:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="position-member" class="member">
+<div id="position-link" class="member-link">
+<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+<div id="position-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item's position within the project. This is the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the position of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+// Create a circle at position { x: 10, y: 10 }
+var circle = new Path.Circle(new Point(10, 10), 10);
+circle.fillColor = 'red';
+
+// Move the circle to { x: 20, y: 20 }
+circle.position = new Point(20, 20);
+
+// Move the circle 100 points to the right and 50 points down
+circle.position += new Point(100, 50);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Changing the x coordinate of an item's position:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+// Create a circle at position { x: 20, y: 20 }
+var circle = new Path.Circle(new Point(20, 20), 10);
+circle.fillColor = 'red';
+
+// Move the circle 100 points to the right
+circle.position.x += 100;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="style-member" class="member">
+<div id="style-link" class="member-link">
+<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+<div id="style-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The path style of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.style = {
+	fillColor: 'blue',
+	strokeColor: 'red',
+	strokeWidth: 5
+};
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Copying the style of another item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+var path = new Path.Circle(new Point(50, 50), 30);
+path.fillColor = 'red';
+
+var path2 = new Path.Circle(new Point(180, 50), 20);
+// Copy the path style of path:
+path2.style = path.style;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Applying the same style object to multiple items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-5">
+var myStyle = {
+	fillColor: 'red',
+	strokeColor: 'blue',
+	strokeWidth: 4
+};
+
+var path = new Path.Circle(new Point(80, 50), 30);
+path.style = myStyle;
+
+var path2 = new Path.Circle(new Point(150, 50), 20);
+path2.style = myStyle;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="visible-member" class="member">
+<div id="visible-link" class="member-link">
+<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+<div id="visible-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
+item won't be drawn.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>true</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Hiding an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-6">
+var path = new Path.Circle(new Point(50, 50), 20);
+path.fillColor = 'red';
+
+// Hide the path:
+path.visible = false;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="blendmode-member" class="member">
+<div id="blendmode-link" class="member-link">
+<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+<div id="blendmode-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The blend mode of the item.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'normal'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
+'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
+'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
+'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's blend mode:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-7">
+// Create a white rectangle in the background
+// with the same dimensions as the view:
+var background = new Path.Rectangle(view.bounds);
+background.fillColor = 'white';
+
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.fillColor = 'blue';
+
+// Set the blend mode of circle2:
+circle2.blendMode = 'multiply';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="opacity-member" class="member">
+<div id="opacity-link" class="member-link">
+<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+<div id="opacity-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Making an item 50% transparent:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-8">
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.style = {
+	fillColor: 'blue',
+	strokeColor: 'green',
+	strokeWidth: 10
+};
+
+// Make circle2 50% transparent:
+circle2.opacity = 0.5;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="guide-member" class="member">
+<div id="guide-link" class="member-link">
+<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+<div id="guide-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item functions as a guide. When set to
+<tt>true</tt>, the item will be drawn at the end as a guide.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="selected-member" class="member">
+<div id="selected-link" class="member-link">
+<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+<div id="selected-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether an item is selected and will also return <tt>true</tt>
+if the item is partially selected (groups with some selected or partially
+selected paths).</p>
+<p>Paper.js draws the visual outlines of selected items on top of your
+project. This can be useful for debugging, as it allows you to see the
+construction of paths, position of path curves, individual segment points
+and bounding boxes of symbol and raster items.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Selecting an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-9">
+var path = new Path.Circle(new Size(80, 50), 35);
+path.selected = true; // Select the path
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="clipmask-member" class="member">
+<div id="clipmask-link" class="member-link">
+<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+<div id="clipmask-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item defines a clip mask. This can only be set on
+paths, compound paths, and text frame objects, and only if the item is
+already contained within a clipping group.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Project Hierarchy</h3>
+
+<div id="project-member" class="member">
+<div id="project-link" class="member-link">
+<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+<div id="project-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The project that this item belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Project.html"><tt>Project</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="layer-member" class="member">
+<div id="layer-link" class="member-link">
+<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+<div id="layer-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The layer that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Layer.html"><tt>Layer</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="parent-member" class="member">
+<div id="parent-link" class="member-link">
+<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+<div id="parent-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var path = new Path();
+
+// New items are placed in the active layer:
+console.log(path.parent == project.activeLayer); // true
+
+var group = new Group();
+group.addChild(path);
+
+// Now the parent of the path has become the group:
+console.log(path.parent == group); // true</pre>
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="children-member" class="member">
+<div id="children-link" class="member-link">
+<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+<div id="children-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The children items contained within this item. Items that define a
+<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
+<p><b>Please note:</b> The children array should not be modified directly
+using array functions. To remove single items from the children list, use
+<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
+<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
+<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Accessing items in the children array:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-10">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// Access the path through the group's children array:
+group.children[0].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Accessing children by name:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-11">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'orange';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Passing an array of items to item.children:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-12">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+var group = new Group();
+group.children = [path];
+
+// The path is the first child of the group:
+group.firstChild.fillColor = 'green';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="firstchild-member" class="member">
+<div id="firstchild-link" class="member-link">
+<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+<div id="firstchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The first item contained within this item. This is a shortcut for
+accessing <tt>item.children[0]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="lastchild-member" class="member">
+<div id="lastchild-link" class="member-link">
+<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+<div id="lastchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The last item contained within this item.This is a shortcut for
+accessing <tt>item.children[item.children.length - 1]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="nextsibling-member" class="member">
+<div id="nextsibling-link" class="member-link">
+<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+<div id="nextsibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The next item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="previoussibling-member" class="member">
+<div id="previoussibling-link" class="member-link">
+<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+<div id="previoussibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The previous item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="index-member" class="member">
+<div id="index-link" class="member-link">
+<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+<div id="index-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The index of this item within the list of its parent's children.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Bounding Rectangles</h3>
+
+<div id="bounds-member" class="member">
+<div id="bounds-link" class="member-link">
+<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+<div id="bounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item excluding stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokebounds-member" class="member">
+<div id="strokebounds-link" class="member-link">
+<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+<div id="strokebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="handlebounds-member" class="member">
+<div id="handlebounds-link" class="member-link">
+<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+<div id="handlebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including handles.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Stroke Style</h3>
+
+<div id="strokecolor-member" class="member">
+<div id="strokecolor-link" class="member-link">
+<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+<div id="strokecolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the stroke color of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-13">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to RGB red:
+circle.strokeColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokewidth-member" class="member">
+<div id="strokewidth-link" class="member-link">
+<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+<div id="strokewidth-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The width of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's stroke width:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-14">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to black:
+circle.strokeColor = 'black';
+
+// Set its stroke width to 10:
+circle.strokeWidth = 10;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokecap-member" class="member">
+<div id="strokecap-link" class="member-link">
+<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+<div id="strokecap-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
+have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'butt'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('round', 'square', 'butt')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke caps:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-15">
+var line = new Path(new Point(80, 50), new Point(420, 50));
+line.strokeColor = 'black';
+line.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+line.selected = true;
+
+// Set the stroke cap of the line to be round:
+line.strokeCap = 'round';
+
+// Copy the path and set its stroke cap to be square:
+var line2 = line.clone();
+line2.position.y += 50;
+line2.strokeCap = 'square';
+
+// Make another copy and set its stroke cap to be butt:
+var line2 = line.clone();
+line2.position.y += 100;
+line2.strokeCap = 'butt';
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-15"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokejoin-member" class="member">
+<div id="strokejoin-link" class="member-link">
+<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+<div id="strokejoin-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the corners of paths when they have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'miter'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt> ('miter', 'round', 'bevel')
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke joins:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-16">
+var path = new Path();
+path.add(new Point(80, 100));
+path.add(new Point(120, 40));
+path.add(new Point(160, 100));
+path.strokeColor = 'black';
+path.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+path.selected = true;
+
+var path2 = path.clone();
+path2.position.x += path2.bounds.width * 1.5;
+path2.strokeJoin = 'round';
+
+var path3 = path2.clone();
+path3.position.x += path3.bounds.width * 1.5;
+path3.strokeJoin = 'bevel';
+</script>
+<div class="canvas"><canvas width="516" height="120" id="canvas-16"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="dashoffset-member" class="member">
+<div id="dashoffset-link" class="member-link">
+<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+<div id="dashoffset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The dash offset of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>0</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="dasharray-member" class="member">
+<div id="dasharray-link" class="member-link">
+<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+<div id="dasharray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>[]</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Array</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-17">
+var path = new Path.Circle(new Point(80, 50), 40);
+path.strokeWidth = 2;
+path.strokeColor = 'black';
+
+// Set the dashed stroke to [10pt dash, 4pt gap]:
+path.dashArray = [10, 4];
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="miterlimit-member" class="member">
+<div id="miterlimit-link" class="member-link">
+<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+<div id="miterlimit-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The miter limit of the stroke.</p>
+<p>When two line segments meet at a sharp angle and miter joins have been
+specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
+extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
+miterLimit imposes a limit on the ratio of the miter length to the
+<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>10</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Fill Style</h3>
+
+<div id="fillcolor-member" class="member">
+<div id="fillcolor-link" class="member-link">
+<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+<div id="fillcolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The fill color of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the fill color of a path to red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-18">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set the fill color of the circle to RGB red:
+circle.fillColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+<!-- =========================== inherited methods ========================= -->
+<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Clones the item within the same project and places the copy above the
+item.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Cloning items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-19">
+var circle = new Path.Circle(new Point(50, 50), 10);
+circle.fillColor = 'red';
+
+// Make 20 copies of the circle:
+for (var i = 0; i < 20; i++) {
+	var copy = circle.clone();
+
+	// Distribute the copies horizontally, so we can see them:
+	copy.position.x += i * copy.bounds.width;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="copyto-item-member" class="member">
+<div id="copyto-item-link" class="member-link">
+<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+<div id="copyto-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>When passed a project, copies the item to the project,
+or duplicates it within the same project. When passed an item,
+copies the item into the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
+&mdash;&nbsp;the item or project to
+copy the item to
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rasterize-member" class="member">
+<div id="rasterize-link" class="member-link">
+<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+<div id="rasterize-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rasterizes the item into a newly created Raster object. The item itself
+is not removed after rasterization.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>resolution:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the resolution of the raster in dpi
+&mdash;&nbsp;optional, default: <tt>72</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Rasterizing an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-20">
+var circle = new Path.Circle(new Point(80, 50), 5);
+circle.fillColor = 'red';
+
+// Create a rasterized version of the path:
+var raster = circle.rasterize();
+
+// Move it 100pt to the right:
+raster.position.x += 100;
+
+// Scale the path and the raster by 300%, so we can compare them:
+circle.scale(5);
+raster.scale(5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="hittest-point-member" class="member">
+<div id="hittest-point-link" class="member-link">
+<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+<div id="hittest-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Perform a hit test on the item (and its children, if it is a
+<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
+<p>The optional options object allows you to control the specifics of the
+hit test and may contain a combination of the following values:</p>
+<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
+points.</p>
+<p><b>options.type:</b> Only hit test again a certain item
+type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
+<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
+<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
+items, taking into account stroke width.</p>
+<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
+<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
+<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
+(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
+<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
+last segment points of open path items.</p>
+<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
+side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
+(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
+<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
+<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The point where the hit test should be performed
+
+</li>
+
+<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+
+&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
+tolerance: 2 }</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
+information about what exactly was hit or <tt>null</tt> if nothing was
+hit.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Operations</h3>
+
+<div id="addchild-item-member" class="member">
+<div id="addchild-item-link" class="member-link">
+<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+<div id="addchild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified item as a child of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be added as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchild-index-item-member" class="member">
+<div id="insertchild-index-item-link" class="member-link">
+<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+<div id="insertchild-index-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="addchildren-items-member" class="member">
+<div id="addchildren-items-link" class="member-link">
+<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+<div id="addchildren-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified items as children of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>items:</tt> 
+<tt>item</tt>
+&mdash;&nbsp;The items to be added as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchildren-index-items-member" class="member">
+<div id="insertchildren-index-items-link" class="member-link">
+<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+<div id="insertchildren-index-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified items as children of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>items:</tt> 
+Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+&mdash;&nbsp;The items to be appended as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertabove-item-member" class="member">
+<div id="insertabove-item-link" class="member-link">
+<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+<div id="insertabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertbelow-item-member" class="member">
+<div id="insertbelow-item-link" class="member-link">
+<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+<div id="insertbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendtop-item-member" class="member">
+<div id="appendtop-item-link" class="member-link">
+<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+<div id="appendtop-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it above all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendbottom-item-member" class="member">
+<div id="appendbottom-item-link" class="member-link">
+<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+<div id="appendbottom-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it below all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="moveabove-item-member" class="member">
+<div id="moveabove-item-link" class="member-link">
+<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+<div id="moveabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="movebelow-item-member" class="member">
+<div id="movebelow-item-link" class="member-link">
+<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+<div id="movebelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves the item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item below which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="remove-member" class="member">
+<div id="remove-link" class="member-link">
+<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+<div id="remove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item from the project. If the item has children, they are also
+removed.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-member" class="member">
+<div id="removechildren-link" class="member-link">
+<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+<div id="removechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-from-member" class="member">
+<div id="removechildren-from-link" class="member-link">
+<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+<div id="removechildren-from-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the children from the specified <tt>from</tt> index to the
+<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>from:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the beginning index, inclusive
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the ending index, exclusive
+&mdash;&nbsp;optional, default: <tt>children.length</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="reversechildren-member" class="member">
+<div id="reversechildren-link" class="member-link">
+<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+<div id="reversechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Reverses the order of the item's children</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Tests</h3>
+
+<div id="haschildren-member" class="member">
+<div id="haschildren-link" class="member-link">
+<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+<div id="haschildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item contains any children items.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isabove-item-member" class="member">
+<div id="isabove-item-link" class="member-link">
+<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+<div id="isabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if this item is above the specified item in the stacking order
+of the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isbelow-item-member" class="member">
+<div id="isbelow-item-link" class="member-link">
+<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+<div id="isbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is below the specified item in the stacking order of
+the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isparent-item-member" class="member">
+<div id="isparent-item-link" class="member-link">
+<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+<div id="isparent-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is the parent of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="ischild-item-member" class="member">
+<div id="ischild-item-link" class="member-link">
+<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+<div id="ischild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is a child of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isdescendant-item-member" class="member">
+<div id="isdescendant-item-link" class="member-link">
+<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+<div id="isdescendant-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is contained within the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isancestor-item-member" class="member">
+<div id="isancestor-item-link" class="member-link">
+<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+<div id="isancestor-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is an ancestor of the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
+item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isgroupedwith-item-member" class="member">
+<div id="isgroupedwith-item-link" class="member-link">
+<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+<div id="isgroupedwith-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the item is grouped with the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Transform Functions</h3>
+
+<div id="scale-scale-member" class="member">
+<div id="scale-scale-link" class="member-link">
+<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+<div id="scale-scale-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given value from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>scale:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item from its center point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-21">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path by 150% from its center point
+circle.scale(1.5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Scaling an item from a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-22">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path 150% from its bottom left corner
+circle.scale(1.5, circle.bounds.bottomLeft);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="scale-hor-ver-member" class="member">
+<div id="scale-hor-ver-link" class="member-link">
+<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="scale-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given values from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal scale factor
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item horizontally by 300%:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-23">
+// Create a circle shaped path at { x: 100, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(100, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path horizontally by 300%
+circle.scale(3, 1);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="translate-delta-member" class="member">
+<div id="translate-delta-link" class="member-link">
+<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+<div id="translate-delta-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Translates (moves) the item by the given offset point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>delta:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the offset to translate the item by
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rotate-angle-member" class="member">
+<div id="rotate-angle-link" class="member-link">
+<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+<div id="rotate-angle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rotates the item by a given angle around the given point.</p>
+<p>Angles are oriented clockwise and measured in degrees.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>angle:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the rotation angle
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Rotating an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-24">
+// Create a rectangle shaped path with its top left
+// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
+var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
+path.fillColor = 'black';
+
+// Rotate the path by 30 degrees:
+path.rotate(30);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Rotating an item around a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-25">
+// Create a rectangle shaped path with its top left
+// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
+var topLeft = new Point(175, 50);
+var size = new Size(100, 100);
+var path = new Path.Rectangle(topLeft, size);
+path.fillColor = 'black';
+
+// Draw a circle shaped path in the center of the view,
+// to show the rotation point:
+var circle = new Path.Circle(view.center, 5);
+circle.fillColor = 'white';
+
+// Each frame rotate the path 3 degrees around the center point
+// of the view:
+function onFrame(event) {
+	path.rotate(3, view.center);
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-25"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="shear-point-member" class="member">
+<div id="shear-point-link" class="member-link">
+<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+<div id="shear-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given value from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="shear-hor-ver-member" class="member">
+<div id="shear-hor-ver-link" class="member-link">
+<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="shear-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given values from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal shear factor.
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical shear factor.
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="transform-matrix-flags-member" class="member">
+<div id="transform-matrix-flags-link" class="member-link">
+<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+<div id="transform-matrix-flags-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>matrix:</tt> 
+<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+
+
+</li>
+
+<li>
+<tt>flags:</tt> 
+
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="fitbounds-rectangle-member" class="member">
+<div id="fitbounds-rectangle-link" class="member-link">
+<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+<div id="fitbounds-rectangle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
+rectangle, without changing its aspect ratio.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rectangle:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+
+
+</li>
+
+<li>
+<tt>fill:</tt> 
+<tt>Boolean</tt>
+
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-26">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-27">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds, true);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-28">
+var path = new Path.Circle(new Point(80, 50), 30);
+path.fillColor = 'red';
+
+// Fit the path to the bounding rectangle of the view:
+path.fitBounds(view.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-28"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<h3>Remove On Event</h3>
+
+<div id="removeon-object-member" class="member">
+<div id="removeon-object-link" class="member-link">
+<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+<div id="removeon-object-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the events specified in the passed object literal
+occur.</p>
+<p>The object literal can contain the following values:</p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
+fired: <tt>object.move = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
+fired: <tt>object.drag = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
+fired: <tt>object.down = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
+fired: <tt>object.up = true</tt></p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>object:</tt> 
+<tt>Object</tt>
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-29">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path on the next onMouseDrag or onMouseDown event:
+	path.removeOn({
+		drag: true,
+		down: true
+	});
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-29"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonmove-member" class="member">
+<div id="removeonmove-link" class="member-link">
+<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+<div id="removeonmove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Move your mouse below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-30">
+function onMouseMove(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next move event, automatically remove the path:
+	path.removeOnMove();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-30"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondown-member" class="member">
+<div id="removeondown-link" class="member-link">
+<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+<div id="removeondown-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-31">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, next time the mouse is pressed:
+	path.removeOnDown();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-31"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondrag-member" class="member">
+<div id="removeondrag-link" class="member-link">
+<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+<div id="removeondrag-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-32">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next drag event, automatically remove the path:
+	path.removeOnDrag();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-32"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonup-member" class="member">
+<div id="removeonup-link" class="member-link">
+<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+<div id="removeonup-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-33">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, when the mouse is released:
+	path.removeOnUp();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-33"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+</div>
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/PlacedSymbol.html b/dist/docs/classes/PlacedSymbol.html
new file mode 100644
index 00000000..8780cc5c
--- /dev/null
+++ b/dist/docs/classes/PlacedSymbol.html
@@ -0,0 +1,3620 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>PlacedSymbol</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>PlacedSymbol</h1>
+
+<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b>, <b><a href="../classes/PlacedItem.html"><tt>PlacedItem</tt></a></b></p>
+
+<p>A PlacedSymbol represents an instance of a symbol which has been
+placed in a Paper.js project.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="placedsymbol-symbol-member" class="member">
+<div id="placedsymbol-symbol-link" class="member-link">
+<a name="placedsymbol-symbol" href="#" onClick="return toggleMember('placedsymbol-symbol', false);"><tt><b>PlacedSymbol</b>(symbol[, matrixOrOffset])</tt></a>
+</div>
+<div id="placedsymbol-symbol-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('placedsymbol-symbol', false);"><tt><b>PlacedSymbol</b>(symbol[, matrixOrOffset])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('placedsymbol-symbol', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a new PlacedSymbol Item.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>symbol:</tt> 
+<a href="../classes/Symbol.html"><tt>Symbol</tt></a>
+&mdash;&nbsp;the symbol to place
+
+</li>
+
+<li>
+<tt>matrixOrOffset:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a> / <a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+&mdash;&nbsp;the center point of the placed
+symbol or a <a href="../classes/Matrix.html"><tt>Matrix</tt></a> transformation to transform the placed symbol
+with.
+&mdash;&nbsp;optional
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> &mdash; Placing 100 instances of a symbol:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+var path = new Path.Star(new Point(0, 0), 6, 5, 13);
+path.style = {
+    fillColor: 'white',
+    strokeColor: 'black'
+};
+
+// Create a symbol from the path:
+var symbol = new Symbol(path);
+
+// Remove the path:
+path.remove();
+
+// Place 100 instances of the symbol:
+for (var i = 0; i < 100; i++) {
+    // Place an instance of the symbol in the project:
+    var instance = new PlacedSymbol(symbol);
+
+    // Move the instance to a random position within the view:
+    instance.position = Point.random() * view.size;
+
+    // Rotate the instance by a random amount between
+    // 0 and 360 degrees:
+    instance.rotate(Math.random() * 360);
+
+    // Scale the instance between 0.25 and 1:
+    instance.scale(0.25 + Math.random() * 0.75);
+}
+</script>
+<div class="canvas"><canvas width="516" height="240" id="canvas-0"></canvas></div>
+</div>
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="symbol-member" class="member">
+<div id="symbol-link" class="member-link">
+<a name="symbol" href="#" onClick="return toggleMember('symbol', false);"><tt><b>symbol</b></tt></a>
+</div>
+<div id="symbol-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('symbol', false);"><tt><b>symbol</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('symbol', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The symbol that the placed symbol refers to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Symbol.html"><tt>Symbol</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="id-member" class="member">
+<div id="id-link" class="member-link">
+<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+<div id="id-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The unique id of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="name-member" class="member">
+<div id="name-link" class="member-link">
+<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+<div id="name-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The name of the item. If the item has a name, it can be accessed by name
+through its parent's children list.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and add path to it as a child:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="position-member" class="member">
+<div id="position-link" class="member-link">
+<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+<div id="position-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item's position within the project. This is the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the position of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+// Create a circle at position { x: 10, y: 10 }
+var circle = new Path.Circle(new Point(10, 10), 10);
+circle.fillColor = 'red';
+
+// Move the circle to { x: 20, y: 20 }
+circle.position = new Point(20, 20);
+
+// Move the circle 100 points to the right and 50 points down
+circle.position += new Point(100, 50);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Changing the x coordinate of an item's position:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+// Create a circle at position { x: 20, y: 20 }
+var circle = new Path.Circle(new Point(20, 20), 10);
+circle.fillColor = 'red';
+
+// Move the circle 100 points to the right
+circle.position.x += 100;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="style-member" class="member">
+<div id="style-link" class="member-link">
+<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+<div id="style-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The path style of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.style = {
+	fillColor: 'blue',
+	strokeColor: 'red',
+	strokeWidth: 5
+};
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Copying the style of another item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-5">
+var path = new Path.Circle(new Point(50, 50), 30);
+path.fillColor = 'red';
+
+var path2 = new Path.Circle(new Point(180, 50), 20);
+// Copy the path style of path:
+path2.style = path.style;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Applying the same style object to multiple items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-6">
+var myStyle = {
+	fillColor: 'red',
+	strokeColor: 'blue',
+	strokeWidth: 4
+};
+
+var path = new Path.Circle(new Point(80, 50), 30);
+path.style = myStyle;
+
+var path2 = new Path.Circle(new Point(150, 50), 20);
+path2.style = myStyle;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="visible-member" class="member">
+<div id="visible-link" class="member-link">
+<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+<div id="visible-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
+item won't be drawn.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>true</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Hiding an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-7">
+var path = new Path.Circle(new Point(50, 50), 20);
+path.fillColor = 'red';
+
+// Hide the path:
+path.visible = false;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="blendmode-member" class="member">
+<div id="blendmode-link" class="member-link">
+<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+<div id="blendmode-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The blend mode of the item.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'normal'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
+'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
+'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
+'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's blend mode:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-8">
+// Create a white rectangle in the background
+// with the same dimensions as the view:
+var background = new Path.Rectangle(view.bounds);
+background.fillColor = 'white';
+
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.fillColor = 'blue';
+
+// Set the blend mode of circle2:
+circle2.blendMode = 'multiply';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="opacity-member" class="member">
+<div id="opacity-link" class="member-link">
+<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+<div id="opacity-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Making an item 50% transparent:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-9">
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.style = {
+	fillColor: 'blue',
+	strokeColor: 'green',
+	strokeWidth: 10
+};
+
+// Make circle2 50% transparent:
+circle2.opacity = 0.5;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="guide-member" class="member">
+<div id="guide-link" class="member-link">
+<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+<div id="guide-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item functions as a guide. When set to
+<tt>true</tt>, the item will be drawn at the end as a guide.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="selected-member" class="member">
+<div id="selected-link" class="member-link">
+<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+<div id="selected-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether an item is selected and will also return <tt>true</tt>
+if the item is partially selected (groups with some selected or partially
+selected paths).</p>
+<p>Paper.js draws the visual outlines of selected items on top of your
+project. This can be useful for debugging, as it allows you to see the
+construction of paths, position of path curves, individual segment points
+and bounding boxes of symbol and raster items.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Selecting an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-10">
+var path = new Path.Circle(new Size(80, 50), 35);
+path.selected = true; // Select the path
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="clipmask-member" class="member">
+<div id="clipmask-link" class="member-link">
+<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+<div id="clipmask-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item defines a clip mask. This can only be set on
+paths, compound paths, and text frame objects, and only if the item is
+already contained within a clipping group.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Project Hierarchy</h3>
+
+<div id="project-member" class="member">
+<div id="project-link" class="member-link">
+<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+<div id="project-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The project that this item belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Project.html"><tt>Project</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="layer-member" class="member">
+<div id="layer-link" class="member-link">
+<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+<div id="layer-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The layer that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Layer.html"><tt>Layer</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="parent-member" class="member">
+<div id="parent-link" class="member-link">
+<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+<div id="parent-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var path = new Path();
+
+// New items are placed in the active layer:
+console.log(path.parent == project.activeLayer); // true
+
+var group = new Group();
+group.addChild(path);
+
+// Now the parent of the path has become the group:
+console.log(path.parent == group); // true</pre>
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="children-member" class="member">
+<div id="children-link" class="member-link">
+<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+<div id="children-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The children items contained within this item. Items that define a
+<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
+<p><b>Please note:</b> The children array should not be modified directly
+using array functions. To remove single items from the children list, use
+<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
+<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
+<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Accessing items in the children array:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-11">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// Access the path through the group's children array:
+group.children[0].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Accessing children by name:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-12">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'orange';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Passing an array of items to item.children:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-13">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+var group = new Group();
+group.children = [path];
+
+// The path is the first child of the group:
+group.firstChild.fillColor = 'green';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="firstchild-member" class="member">
+<div id="firstchild-link" class="member-link">
+<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+<div id="firstchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The first item contained within this item. This is a shortcut for
+accessing <tt>item.children[0]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="lastchild-member" class="member">
+<div id="lastchild-link" class="member-link">
+<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+<div id="lastchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The last item contained within this item.This is a shortcut for
+accessing <tt>item.children[item.children.length - 1]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="nextsibling-member" class="member">
+<div id="nextsibling-link" class="member-link">
+<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+<div id="nextsibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The next item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="previoussibling-member" class="member">
+<div id="previoussibling-link" class="member-link">
+<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+<div id="previoussibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The previous item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="index-member" class="member">
+<div id="index-link" class="member-link">
+<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+<div id="index-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The index of this item within the list of its parent's children.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Bounding Rectangles</h3>
+
+<div id="bounds-member" class="member">
+<div id="bounds-link" class="member-link">
+<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+<div id="bounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item excluding stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokebounds-member" class="member">
+<div id="strokebounds-link" class="member-link">
+<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+<div id="strokebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="handlebounds-member" class="member">
+<div id="handlebounds-link" class="member-link">
+<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+<div id="handlebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including handles.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Stroke Style</h3>
+
+<div id="strokecolor-member" class="member">
+<div id="strokecolor-link" class="member-link">
+<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+<div id="strokecolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the stroke color of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-14">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to RGB red:
+circle.strokeColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokewidth-member" class="member">
+<div id="strokewidth-link" class="member-link">
+<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+<div id="strokewidth-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The width of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's stroke width:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-15">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to black:
+circle.strokeColor = 'black';
+
+// Set its stroke width to 10:
+circle.strokeWidth = 10;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokecap-member" class="member">
+<div id="strokecap-link" class="member-link">
+<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+<div id="strokecap-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
+have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'butt'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('round', 'square', 'butt')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke caps:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-16">
+var line = new Path(new Point(80, 50), new Point(420, 50));
+line.strokeColor = 'black';
+line.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+line.selected = true;
+
+// Set the stroke cap of the line to be round:
+line.strokeCap = 'round';
+
+// Copy the path and set its stroke cap to be square:
+var line2 = line.clone();
+line2.position.y += 50;
+line2.strokeCap = 'square';
+
+// Make another copy and set its stroke cap to be butt:
+var line2 = line.clone();
+line2.position.y += 100;
+line2.strokeCap = 'butt';
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-16"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokejoin-member" class="member">
+<div id="strokejoin-link" class="member-link">
+<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+<div id="strokejoin-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the corners of paths when they have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'miter'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt> ('miter', 'round', 'bevel')
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke joins:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-17">
+var path = new Path();
+path.add(new Point(80, 100));
+path.add(new Point(120, 40));
+path.add(new Point(160, 100));
+path.strokeColor = 'black';
+path.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+path.selected = true;
+
+var path2 = path.clone();
+path2.position.x += path2.bounds.width * 1.5;
+path2.strokeJoin = 'round';
+
+var path3 = path2.clone();
+path3.position.x += path3.bounds.width * 1.5;
+path3.strokeJoin = 'bevel';
+</script>
+<div class="canvas"><canvas width="516" height="120" id="canvas-17"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="dashoffset-member" class="member">
+<div id="dashoffset-link" class="member-link">
+<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+<div id="dashoffset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The dash offset of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>0</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="dasharray-member" class="member">
+<div id="dasharray-link" class="member-link">
+<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+<div id="dasharray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>[]</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Array</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-18">
+var path = new Path.Circle(new Point(80, 50), 40);
+path.strokeWidth = 2;
+path.strokeColor = 'black';
+
+// Set the dashed stroke to [10pt dash, 4pt gap]:
+path.dashArray = [10, 4];
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="miterlimit-member" class="member">
+<div id="miterlimit-link" class="member-link">
+<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+<div id="miterlimit-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The miter limit of the stroke.</p>
+<p>When two line segments meet at a sharp angle and miter joins have been
+specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
+extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
+miterLimit imposes a limit on the ratio of the miter length to the
+<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>10</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Fill Style</h3>
+
+<div id="fillcolor-member" class="member">
+<div id="fillcolor-link" class="member-link">
+<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+<div id="fillcolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The fill color of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the fill color of a path to red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-19">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set the fill color of the circle to RGB red:
+circle.fillColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+<!-- =========================== inherited methods ========================= -->
+<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Clones the item within the same project and places the copy above the
+item.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Cloning items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-20">
+var circle = new Path.Circle(new Point(50, 50), 10);
+circle.fillColor = 'red';
+
+// Make 20 copies of the circle:
+for (var i = 0; i < 20; i++) {
+	var copy = circle.clone();
+
+	// Distribute the copies horizontally, so we can see them:
+	copy.position.x += i * copy.bounds.width;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="copyto-item-member" class="member">
+<div id="copyto-item-link" class="member-link">
+<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+<div id="copyto-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>When passed a project, copies the item to the project,
+or duplicates it within the same project. When passed an item,
+copies the item into the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
+&mdash;&nbsp;the item or project to
+copy the item to
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rasterize-member" class="member">
+<div id="rasterize-link" class="member-link">
+<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+<div id="rasterize-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rasterizes the item into a newly created Raster object. The item itself
+is not removed after rasterization.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>resolution:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the resolution of the raster in dpi
+&mdash;&nbsp;optional, default: <tt>72</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Rasterizing an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-21">
+var circle = new Path.Circle(new Point(80, 50), 5);
+circle.fillColor = 'red';
+
+// Create a rasterized version of the path:
+var raster = circle.rasterize();
+
+// Move it 100pt to the right:
+raster.position.x += 100;
+
+// Scale the path and the raster by 300%, so we can compare them:
+circle.scale(5);
+raster.scale(5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="hittest-point-member" class="member">
+<div id="hittest-point-link" class="member-link">
+<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+<div id="hittest-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Perform a hit test on the item (and its children, if it is a
+<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
+<p>The optional options object allows you to control the specifics of the
+hit test and may contain a combination of the following values:</p>
+<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
+points.</p>
+<p><b>options.type:</b> Only hit test again a certain item
+type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
+<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
+<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
+items, taking into account stroke width.</p>
+<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
+<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
+<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
+(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
+<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
+last segment points of open path items.</p>
+<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
+side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
+(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
+<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
+<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The point where the hit test should be performed
+
+</li>
+
+<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+
+&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
+tolerance: 2 }</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
+information about what exactly was hit or <tt>null</tt> if nothing was
+hit.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Operations</h3>
+
+<div id="addchild-item-member" class="member">
+<div id="addchild-item-link" class="member-link">
+<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+<div id="addchild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified item as a child of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be added as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchild-index-item-member" class="member">
+<div id="insertchild-index-item-link" class="member-link">
+<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+<div id="insertchild-index-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="addchildren-items-member" class="member">
+<div id="addchildren-items-link" class="member-link">
+<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+<div id="addchildren-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified items as children of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>items:</tt> 
+<tt>item</tt>
+&mdash;&nbsp;The items to be added as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchildren-index-items-member" class="member">
+<div id="insertchildren-index-items-link" class="member-link">
+<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+<div id="insertchildren-index-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified items as children of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>items:</tt> 
+Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+&mdash;&nbsp;The items to be appended as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertabove-item-member" class="member">
+<div id="insertabove-item-link" class="member-link">
+<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+<div id="insertabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertbelow-item-member" class="member">
+<div id="insertbelow-item-link" class="member-link">
+<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+<div id="insertbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendtop-item-member" class="member">
+<div id="appendtop-item-link" class="member-link">
+<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+<div id="appendtop-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it above all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendbottom-item-member" class="member">
+<div id="appendbottom-item-link" class="member-link">
+<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+<div id="appendbottom-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it below all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="moveabove-item-member" class="member">
+<div id="moveabove-item-link" class="member-link">
+<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+<div id="moveabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="movebelow-item-member" class="member">
+<div id="movebelow-item-link" class="member-link">
+<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+<div id="movebelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves the item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item below which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="remove-member" class="member">
+<div id="remove-link" class="member-link">
+<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+<div id="remove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item from the project. If the item has children, they are also
+removed.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-member" class="member">
+<div id="removechildren-link" class="member-link">
+<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+<div id="removechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-from-member" class="member">
+<div id="removechildren-from-link" class="member-link">
+<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+<div id="removechildren-from-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the children from the specified <tt>from</tt> index to the
+<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>from:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the beginning index, inclusive
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the ending index, exclusive
+&mdash;&nbsp;optional, default: <tt>children.length</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="reversechildren-member" class="member">
+<div id="reversechildren-link" class="member-link">
+<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+<div id="reversechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Reverses the order of the item's children</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Tests</h3>
+
+<div id="haschildren-member" class="member">
+<div id="haschildren-link" class="member-link">
+<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+<div id="haschildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item contains any children items.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isabove-item-member" class="member">
+<div id="isabove-item-link" class="member-link">
+<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+<div id="isabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if this item is above the specified item in the stacking order
+of the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isbelow-item-member" class="member">
+<div id="isbelow-item-link" class="member-link">
+<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+<div id="isbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is below the specified item in the stacking order of
+the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isparent-item-member" class="member">
+<div id="isparent-item-link" class="member-link">
+<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+<div id="isparent-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is the parent of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="ischild-item-member" class="member">
+<div id="ischild-item-link" class="member-link">
+<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+<div id="ischild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is a child of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isdescendant-item-member" class="member">
+<div id="isdescendant-item-link" class="member-link">
+<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+<div id="isdescendant-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is contained within the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isancestor-item-member" class="member">
+<div id="isancestor-item-link" class="member-link">
+<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+<div id="isancestor-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is an ancestor of the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
+item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isgroupedwith-item-member" class="member">
+<div id="isgroupedwith-item-link" class="member-link">
+<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+<div id="isgroupedwith-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the item is grouped with the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Transform Functions</h3>
+
+<div id="scale-scale-member" class="member">
+<div id="scale-scale-link" class="member-link">
+<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+<div id="scale-scale-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given value from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>scale:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item from its center point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-22">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path by 150% from its center point
+circle.scale(1.5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Scaling an item from a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-23">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path 150% from its bottom left corner
+circle.scale(1.5, circle.bounds.bottomLeft);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="scale-hor-ver-member" class="member">
+<div id="scale-hor-ver-link" class="member-link">
+<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="scale-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given values from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal scale factor
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item horizontally by 300%:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-24">
+// Create a circle shaped path at { x: 100, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(100, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path horizontally by 300%
+circle.scale(3, 1);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="translate-delta-member" class="member">
+<div id="translate-delta-link" class="member-link">
+<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+<div id="translate-delta-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Translates (moves) the item by the given offset point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>delta:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the offset to translate the item by
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rotate-angle-member" class="member">
+<div id="rotate-angle-link" class="member-link">
+<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+<div id="rotate-angle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rotates the item by a given angle around the given point.</p>
+<p>Angles are oriented clockwise and measured in degrees.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>angle:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the rotation angle
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Rotating an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-25">
+// Create a rectangle shaped path with its top left
+// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
+var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
+path.fillColor = 'black';
+
+// Rotate the path by 30 degrees:
+path.rotate(30);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Rotating an item around a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-26">
+// Create a rectangle shaped path with its top left
+// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
+var topLeft = new Point(175, 50);
+var size = new Size(100, 100);
+var path = new Path.Rectangle(topLeft, size);
+path.fillColor = 'black';
+
+// Draw a circle shaped path in the center of the view,
+// to show the rotation point:
+var circle = new Path.Circle(view.center, 5);
+circle.fillColor = 'white';
+
+// Each frame rotate the path 3 degrees around the center point
+// of the view:
+function onFrame(event) {
+	path.rotate(3, view.center);
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-26"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="shear-point-member" class="member">
+<div id="shear-point-link" class="member-link">
+<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+<div id="shear-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given value from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="shear-hor-ver-member" class="member">
+<div id="shear-hor-ver-link" class="member-link">
+<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="shear-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given values from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal shear factor.
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical shear factor.
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="transform-matrix-flags-member" class="member">
+<div id="transform-matrix-flags-link" class="member-link">
+<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+<div id="transform-matrix-flags-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>matrix:</tt> 
+<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+
+
+</li>
+
+<li>
+<tt>flags:</tt> 
+
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="fitbounds-rectangle-member" class="member">
+<div id="fitbounds-rectangle-link" class="member-link">
+<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+<div id="fitbounds-rectangle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
+rectangle, without changing its aspect ratio.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rectangle:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+
+
+</li>
+
+<li>
+<tt>fill:</tt> 
+<tt>Boolean</tt>
+
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-27">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-28">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds, true);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-29">
+var path = new Path.Circle(new Point(80, 50), 30);
+path.fillColor = 'red';
+
+// Fit the path to the bounding rectangle of the view:
+path.fitBounds(view.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-29"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<h3>Remove On Event</h3>
+
+<div id="removeon-object-member" class="member">
+<div id="removeon-object-link" class="member-link">
+<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+<div id="removeon-object-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the events specified in the passed object literal
+occur.</p>
+<p>The object literal can contain the following values:</p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
+fired: <tt>object.move = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
+fired: <tt>object.drag = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
+fired: <tt>object.down = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
+fired: <tt>object.up = true</tt></p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>object:</tt> 
+<tt>Object</tt>
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-30">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path on the next onMouseDrag or onMouseDown event:
+	path.removeOn({
+		drag: true,
+		down: true
+	});
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-30"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonmove-member" class="member">
+<div id="removeonmove-link" class="member-link">
+<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+<div id="removeonmove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Move your mouse below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-31">
+function onMouseMove(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next move event, automatically remove the path:
+	path.removeOnMove();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-31"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondown-member" class="member">
+<div id="removeondown-link" class="member-link">
+<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+<div id="removeondown-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-32">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, next time the mouse is pressed:
+	path.removeOnDown();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-32"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondrag-member" class="member">
+<div id="removeondrag-link" class="member-link">
+<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+<div id="removeondrag-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-33">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next drag event, automatically remove the path:
+	path.removeOnDrag();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-33"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonup-member" class="member">
+<div id="removeonup-link" class="member-link">
+<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+<div id="removeonup-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-34">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, when the mouse is released:
+	path.removeOnUp();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-34"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+</div>
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/PlacedItem.html"><tt>PlacedItem</tt></a></h2>
+
+	
+<div id="matrix-member" class="member">
+<div id="matrix-link" class="member-link">
+<a name="matrix" href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
+</div>
+<div id="matrix-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('matrix', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item's transformation matrix, defining position and dimensions in the
+document.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Point.html b/dist/docs/classes/Point.html
new file mode 100644
index 00000000..16e29e6a
--- /dev/null
+++ b/dist/docs/classes/Point.html
@@ -0,0 +1,2196 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Point</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Point</h1>
+
+<p>The Point object represents a point in the two dimensional space
+of the Paper.js project. It is also used to represent two dimensional
+vector objects.</p>
+<p>
+<b>Example</b> &mdash; Create a point at x: 10, y: 5
+</p>
+
+
+<pre class="code">var point = new Point(10, 5);
+console.log(point.x); // 10
+console.log(point.y); // 5</pre>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="point-x-y-member" class="member">
+<div id="point-x-y-link" class="member-link">
+<a name="point-x-y" href="#" onClick="return toggleMember('point-x-y', false);"><tt><b>Point</b>(x, y)</tt></a>
+</div>
+<div id="point-x-y-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('point-x-y', false);"><tt><b>Point</b>(x, y)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point-x-y', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a Point object with the given x and y coordinates.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>x:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the x coordinate
+
+</li>
+
+<li>
+<tt>y:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the y coordinate
+
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> &mdash; Create a point at x: 10, y: 5
+</p>
+
+
+<pre class="code">var point = new Point(10, 5);
+console.log(point.x); // 10
+console.log(point.y); // 5</pre>
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="point-array-member" class="member">
+<div id="point-array-link" class="member-link">
+<a name="point-array" href="#" onClick="return toggleMember('point-array', false);"><tt><b>Point</b>(array)</tt></a>
+</div>
+<div id="point-array-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('point-array', false);"><tt><b>Point</b>(array)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point-array', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a Point object using the numbers in the given array as
+coordinates.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>array:</tt> 
+<tt>array</tt>
+
+
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> &mdash; Creating a point at x: 10, y: 5 using an array of numbers:
+</p>
+
+
+<pre class="code">var array = [10, 5];
+var point = new Point(array);
+console.log(point.x); // 10
+console.log(point.y); // 5</pre>
+
+<p>
+<b>Example</b> &mdash; Passing an array to a functionality that expects a point:
+</p>
+
+
+<pre class="code">// Create a circle shaped path at x: 50, y: 50
+// with a radius of 30:
+var path = new Path.Circle([50, 50], 30);
+path.fillColor = 'red';
+
+// Which is the same as doing:
+var path = new Path.Circle(new Point(50, 50), 30);
+path.fillColor = 'red';</pre>
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="point-object-member" class="member">
+<div id="point-object-link" class="member-link">
+<a name="point-object" href="#" onClick="return toggleMember('point-object', false);"><tt><b>Point</b>(object)</tt></a>
+</div>
+<div id="point-object-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('point-object', false);"><tt><b>Point</b>(object)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point-object', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a Point object using the properties in the given object.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>object:</tt> 
+<tt>object</tt>
+
+
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> &mdash; Creating a point using an object literal with length and angle properties:
+</p>
+
+
+<pre class="code">var point = new Point({
+	length: 10,
+	angle: 90
+});
+console.log(point.length); // 10
+console.log(point.angle); // 90</pre>
+
+<p>
+<b>Example</b> &mdash; Creating a point at x: 10, y: 20 using an object literal:
+</p>
+
+
+<pre class="code">var point = new Point({
+	x: 10,
+	y: 20
+});
+console.log(point.x); // 10
+console.log(point.y); // 20</pre>
+
+<p>
+<b>Example</b> &mdash; Passing an object to a functionality that expects a point:
+</p>
+
+
+<pre class="code">var center = {
+	x: 50,
+	y: 50
+};
+
+// Creates a circle shaped path at x: 50, y: 50
+// with a radius of 30:
+var path = new Path.Circle(center, 30);
+path.fillColor = 'red';</pre>
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="point-size-member" class="member">
+<div id="point-size-link" class="member-link">
+<a name="point-size" href="#" onClick="return toggleMember('point-size', false);"><tt><b>Point</b>(size)</tt></a>
+</div>
+<div id="point-size-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('point-size', false);"><tt><b>Point</b>(size)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point-size', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a Point object using the width and height values of the given
+Size object.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>size:</tt> 
+<a href="../classes/Size.html"><tt>Size</tt></a>
+
+
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> &mdash; Creating a point using a size object.
+</p>
+
+
+<pre class="code">// Create a Size with a width of 100pt and a height of 50pt
+var size = new Size(100, 50);
+console.log(size); // { width: 100, height: 50 }
+var point = new Point(size);
+console.log(point); // { x: 100, y: 50 }</pre>
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="point-point-member" class="member">
+<div id="point-point-link" class="member-link">
+<a name="point-point" href="#" onClick="return toggleMember('point-point', false);"><tt><b>Point</b>(point)</tt></a>
+</div>
+<div id="point-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('point-point', false);"><tt><b>Point</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a Point object using the coordinates of the given Point object.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+<!-- ============================== properties ========================= -->
+	<div class="reference-members"><h2>Operators</h2>
+		
+			<div id="add-member" class="member">
+<div id="add-link" class="member-link">
+<a name="add" href="#" onClick="return toggleMember('add', false);"><tt><tt><b>+</b> Number</tt>, <tt><b>+</b> Point</tt></tt></a>
+</div>
+<div id="add-description" class="member-description hidden">
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('add', false);"><tt><b>+</b> Number</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('add', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Returns the addition of the supplied value to both coordinates of
+the point as a new point.</p>
+<p>The object itself is not modified!</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the addition of the point and the value as a new point
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point = new Point(5, 10);
+var result = point + 20;
+console.log(result); // {x: 25, y: 30}</pre>
+
+	</div>
+
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('add', false);"><tt><b>+</b> Point</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('add', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Returns the addition of the supplied point to the point as a new
+point.</p>
+<p>The object itself is not modified!</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the addition of the two points as a new point
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point1 = new Point(5, 10);
+var point2 = new Point(10, 20);
+var result = point1 + point2;
+console.log(result); // {x: 15, y: 30}</pre>
+
+	</div>
+
+
+</div>
+</div>
+
+		
+			<div id="subtract-member" class="member">
+<div id="subtract-link" class="member-link">
+<a name="subtract" href="#" onClick="return toggleMember('subtract', false);"><tt><tt><b>-</b> Number</tt>, <tt><b>-</b> Point</tt></tt></a>
+</div>
+<div id="subtract-description" class="member-description hidden">
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('subtract', false);"><tt><b>-</b> Number</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('subtract', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Returns the subtraction of the supplied value to both coordinates of
+the point as a new point.</p>
+<p>The object itself is not modified!</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the subtraction of the point and the value as a new point
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point = new Point(10, 20);
+var result = point - 5;
+console.log(result); // {x: 5, y: 15}</pre>
+
+	</div>
+
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('subtract', false);"><tt><b>-</b> Point</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('subtract', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Returns the subtraction of the supplied point to the point as a new
+point.</p>
+<p>The object itself is not modified!</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the subtraction of the two points as a new point
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var firstPoint = new Point(10, 20);
+var secondPoint = new Point(5, 5);
+var result = firstPoint - secondPoint;
+console.log(result); // {x: 5, y: 15}</pre>
+
+	</div>
+
+
+</div>
+</div>
+
+		
+			<div id="multiply-member" class="member">
+<div id="multiply-link" class="member-link">
+<a name="multiply" href="#" onClick="return toggleMember('multiply', false);"><tt><tt><b>*</b> Number</tt>, <tt><b>*</b> Point</tt></tt></a>
+</div>
+<div id="multiply-description" class="member-description hidden">
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('multiply', false);"><tt><b>*</b> Number</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('multiply', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Returns the multiplication of the supplied value to both coordinates of
+the point as a new point.</p>
+<p>The object itself is not modified!</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the multiplication of the point and the value as a new point
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point = new Point(10, 20);
+var result = point * 2;
+console.log(result); // {x: 20, y: 40}</pre>
+
+	</div>
+
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('multiply', false);"><tt><b>*</b> Point</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('multiply', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Returns the multiplication of the supplied point to the point as a new
+point.</p>
+<p>The object itself is not modified!</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the multiplication of the two points as a new point
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var firstPoint = new Point(5, 10);
+var secondPoint = new Point(4, 2);
+var result = firstPoint * secondPoint;
+console.log(result); // {x: 20, y: 20}</pre>
+
+	</div>
+
+
+</div>
+</div>
+
+		
+			<div id="divide-member" class="member">
+<div id="divide-link" class="member-link">
+<a name="divide" href="#" onClick="return toggleMember('divide', false);"><tt><tt><b>/</b> Number</tt>, <tt><b>/</b> Point</tt></tt></a>
+</div>
+<div id="divide-description" class="member-description hidden">
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('divide', false);"><tt><b>/</b> Number</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('divide', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Returns the division of the supplied value to both coordinates of
+the point as a new point.</p>
+<p>The object itself is not modified!</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the division of the point and the value as a new point
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point = new Point(10, 20);
+var result = point / 2;
+console.log(result); // {x: 5, y: 10}</pre>
+
+	</div>
+
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('divide', false);"><tt><b>/</b> Point</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('divide', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Returns the division of the supplied point to the point as a new
+point.</p>
+<p>The object itself is not modified!</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the division of the two points as a new point
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var firstPoint = new Point(8, 10);
+var secondPoint = new Point(2, 5);
+var result = firstPoint / secondPoint;
+console.log(result); // {x: 4, y: 2}</pre>
+
+	</div>
+
+
+</div>
+</div>
+
+		
+			<div id="modulo-member" class="member">
+<div id="modulo-link" class="member-link">
+<a name="modulo" href="#" onClick="return toggleMember('modulo', false);"><tt><tt><b>%</b> Number</tt>, <tt><b>%</b> Point</tt></tt></a>
+</div>
+<div id="modulo-description" class="member-description hidden">
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('modulo', false);"><tt><b>%</b> Number</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modulo', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>The modulo operator returns the integer remainders of dividing the point
+by the supplied value as a new point.</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the integer remainders of dividing the point by the value
+                as a new point
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point = new Point(12, 6);
+console.log(point % 5); // {x: 2, y: 1}</pre>
+
+	</div>
+
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('modulo', false);"><tt><b>%</b> Point</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modulo', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>The modulo operator returns the integer remainders of dividing the point
+by the supplied value as a new point.</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the integer remainders of dividing the points by each
+                other as a new point
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point = new Point(12, 6);
+console.log(point % new Point(5, 2)); // {x: 2, y: 0}</pre>
+
+	</div>
+
+
+</div>
+</div>
+
+		
+			<div id="equals-member" class="member">
+<div id="equals-link" class="member-link">
+<a name="equals" href="#" onClick="return toggleMember('equals', false);"><tt><tt><b>==</b> Point</tt></tt></a>
+</div>
+<div id="equals-description" class="member-description hidden">
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('equals', false);"><tt><b>==</b> Point</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Checks whether the coordinates of the point are equal to that of the
+supplied point.</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the points are equal, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point = new Point(5, 10);
+console.log(point == new Point(5, 10)); // true
+console.log(point == new Point(1, 1)); // false
+console.log(point != new Point(1, 1)); // true</pre>
+
+	</div>
+
+
+</div>
+</div>
+
+		
+	</div>
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="x-member" class="member">
+<div id="x-link" class="member-link">
+<a name="x" href="#" onClick="return toggleMember('x', false);"><tt><b>x</b></tt></a>
+</div>
+<div id="x-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('x', false);"><tt><b>x</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('x', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The x coordinate of the point</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="y-member" class="member">
+<div id="y-link" class="member-link">
+<a name="y" href="#" onClick="return toggleMember('y', false);"><tt><b>y</b></tt></a>
+</div>
+<div id="y-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('y', false);"><tt><b>y</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('y', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The y coordinate of the point</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="length-member" class="member">
+<div id="length-link" class="member-link">
+<a name="length" href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
+</div>
+<div id="length-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('length', false);"><tt><b>length</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('length', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The length of the vector that is represented by this point's coordinates.</p>
+<p>Each point can be interpreted as a vector that points from the origin
+(<tt>x = 0</tt>, <tt>y = 0</tt>) to the point's location.</p>
+<p>Setting the length changes the location but keeps the vector's angle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="angle-member" class="member">
+<div id="angle-link" class="member-link">
+<a name="angle" href="#" onClick="return toggleMember('angle', false);"><tt><b>angle</b></tt></a>
+</div>
+<div id="angle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('angle', false);"><tt><b>angle</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('angle', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The vector's angle in degrees, measured from the x-axis to the vector.</p>
+<p>The angle is unsigned, no information about rotational direction is
+given.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="angleinradians-member" class="member">
+<div id="angleinradians-link" class="member-link">
+<a name="angleinradians" href="#" onClick="return toggleMember('angleinradians', false);"><tt><b>angleInRadians</b></tt></a>
+</div>
+<div id="angleinradians-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('angleinradians', false);"><tt><b>angleInRadians</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('angleinradians', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The vector's angle in radians, measured from the x-axis to the vector.</p>
+<p>The angle is unsigned, no information about rotational direction is
+given.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="quadrant-member" class="member">
+<div id="quadrant-link" class="member-link">
+<a name="quadrant" href="#" onClick="return toggleMember('quadrant', false);"><tt><b>quadrant</b></tt></a>
+</div>
+<div id="quadrant-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('quadrant', false);"><tt><b>quadrant</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('quadrant', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The quadrant of the <a href="../classes/Point.html#angle" onclick="return toggleMember('angle', true);"><tt>angle</tt></a> of the point.</p>
+<p>Angles between 0 and 90 degrees are in quadrant <tt>1</tt>. Angles between
+90 and 180 degrees are in quadrant <tt>2</tt>, angles between 180 and 270
+degrees are in quadrant <tt>3</tt> and angles between 270 and 360 degrees
+are in quadrant <tt>4</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point = new Point({
+	angle: 10,
+	length: 20
+});
+console.log(point.quadrant); // 1
+
+point.angle = 100;
+console.log(point.quadrant); // 2
+
+point.angle = 190;
+console.log(point.quadrant); // 3
+
+point.angle = 280;
+console.log(point.quadrant); // 4</pre>
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="selected-member" class="member">
+<div id="selected-link" class="member-link">
+<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+<div id="selected-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>This property is only present if the point is an anchor or control point
+of a <a href="../classes/Segment.html"><tt>Segment</tt></a> or a <a href="../classes/Curve.html"><tt>Curve</tt></a>. In this case, it returns
+<tt>true</tt> it is selected, <tt>false</tt> otherwise</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a copy of the point.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the cloned point
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point1 = new Point();
+var point2 = point1;
+point2.x = 1; // also changes point1.x
+
+var point2 = point1.clone();
+point2.x = 1; // doesn't change point1.x</pre>
+
+</div>
+</div>
+</div>
+		
+			
+<div id="tostring-member" class="member">
+<div id="tostring-link" class="member-link">
+<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+<div id="tostring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the point.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="transform-matrix-member" class="member">
+<div id="transform-matrix-link" class="member-link">
+<a name="transform-matrix" href="#" onClick="return toggleMember('transform-matrix', false);"><tt><b>transform</b>(matrix)</tt></a>
+</div>
+<div id="transform-matrix-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('transform-matrix', false);"><tt><b>transform</b>(matrix)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transforms the point by the matrix as a new point. The object itself
+is not modified!</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>matrix:</tt> 
+<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;The transformed point
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<h3>Distance & Length</h3>
+
+<div id="getdistance-point-squared-member" class="member">
+<div id="getdistance-point-squared-link" class="member-link">
+<a name="getdistance-point-squared" href="#" onClick="return toggleMember('getdistance-point-squared', false);"><tt><b>getDistance</b>(point, squared)</tt></a>
+</div>
+<div id="getdistance-point-squared-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getdistance-point-squared', false);"><tt><b>getDistance</b>(point, squared)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getdistance-point-squared', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns the distance between the point and another point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>squared:</tt> 
+<tt>Boolean</tt>
+&mdash;&nbsp;Controls whether the distance should remain
+       squared, or its square root should be calculated.
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Number</tt></tt>
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="normalize-member" class="member">
+<div id="normalize-link" class="member-link">
+<a name="normalize" href="#" onClick="return toggleMember('normalize', false);"><tt><b>normalize</b>([length])</tt></a>
+</div>
+<div id="normalize-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('normalize', false);"><tt><b>normalize</b>([length])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('normalize', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Normalize modifies the <a href="../classes/Point.html#length" onclick="return toggleMember('length', true);"><tt>length</tt></a> of the vector to <tt>1</tt> without
+changing its angle and returns it as a new point. The optional
+<tt>length</tt> parameter defines the length to normalize to.</p>
+<p>The object itself is not modified!</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>length:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;The length of the normalized vector
+&mdash;&nbsp;optional, default: <tt>1</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;The normalized vector of the vector that is represented
+                by this point's coordinates.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<h3>Angle & Rotation</h3>
+
+<div id="getangle-point-member" class="member">
+<div id="getangle-point-link" class="member-link">
+<a name="getangle-point" href="#" onClick="return toggleMember('getangle-point', false);"><tt><b>getAngle</b>(point)</tt></a>
+</div>
+<div id="getangle-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getangle-point', false);"><tt><b>getAngle</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getangle-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns the smaller angle between two vectors. The angle is unsigned, no
+information about rotational direction is given.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;the angle in degrees
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="getangleinradians-point-member" class="member">
+<div id="getangleinradians-point-link" class="member-link">
+<a name="getangleinradians-point" href="#" onClick="return toggleMember('getangleinradians-point', false);"><tt><b>getAngleInRadians</b>(point)</tt></a>
+</div>
+<div id="getangleinradians-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getangleinradians-point', false);"><tt><b>getAngleInRadians</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getangleinradians-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns the smaller angle between two vectors in radians. The angle is
+unsigned, no information about rotational direction is given.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;the angle in radians
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="getdirectedangle-point-member" class="member">
+<div id="getdirectedangle-point-link" class="member-link">
+<a name="getdirectedangle-point" href="#" onClick="return toggleMember('getdirectedangle-point', false);"><tt><b>getDirectedAngle</b>(point)</tt></a>
+</div>
+<div id="getdirectedangle-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getdirectedangle-point', false);"><tt><b>getDirectedAngle</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getdirectedangle-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns the angle between two vectors. The angle is directional and
+signed, giving information about the rotational direction.</p>
+<p>Read more about angle units and orientation in the description of the
+<a href="../classes/Point.html#angle" onclick="return toggleMember('angle', true);"><tt>angle</tt></a> property.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;the angle between the two vectors
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="rotate-angle-center-member" class="member">
+<div id="rotate-angle-center-link" class="member-link">
+<a name="rotate-angle-center" href="#" onClick="return toggleMember('rotate-angle-center', false);"><tt><b>rotate</b>(angle, center)</tt></a>
+</div>
+<div id="rotate-angle-center-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rotate-angle-center', false);"><tt><b>rotate</b>(angle, center)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle-center', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rotates the point by the given angle around an optional center point.</p>
+<p>The object itself is not modified.</p>
+<p>Read more about angle units and orientation in the description of the
+<a href="../classes/Point.html#angle" onclick="return toggleMember('angle', true);"><tt>angle</tt></a> property.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>angle:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the rotation angle
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the center point of the rotation
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the rotated point
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<h3>Tests</h3>
+
+<div id="isinside-rect-member" class="member">
+<div id="isinside-rect-link" class="member-link">
+<a name="isinside-rect" href="#" onClick="return toggleMember('isinside-rect', false);"><tt><b>isInside</b>(rect)</tt></a>
+</div>
+<div id="isinside-rect-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isinside-rect', false);"><tt><b>isInside</b>(rect)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isinside-rect', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the point is inside the boundaries of the rectangle.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rect:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+&mdash;&nbsp;the rectangle to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the point is inside the rectangle, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="isclose-point-tolerance-member" class="member">
+<div id="isclose-point-tolerance-link" class="member-link">
+<a name="isclose-point-tolerance" href="#" onClick="return toggleMember('isclose-point-tolerance', false);"><tt><b>isClose</b>(point, tolerance)</tt></a>
+</div>
+<div id="isclose-point-tolerance-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isclose-point-tolerance', false);"><tt><b>isClose</b>(point, tolerance)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isclose-point-tolerance', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the point is within a given distance of another point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the point to check against
+
+</li>
+
+<li>
+<tt>tolerance:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the maximum distance allowed
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is within the given distance, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="iscolinear-point-member" class="member">
+<div id="iscolinear-point-link" class="member-link">
+<a name="iscolinear-point" href="#" onClick="return toggleMember('iscolinear-point', false);"><tt><b>isColinear</b>(point)</tt></a>
+</div>
+<div id="iscolinear-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('iscolinear-point', false);"><tt><b>isColinear</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('iscolinear-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the vector represented by this point is colinear (parallel) to
+another vector.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the vector to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is parallel, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="isorthogonal-point-member" class="member">
+<div id="isorthogonal-point-link" class="member-link">
+<a name="isorthogonal-point" href="#" onClick="return toggleMember('isorthogonal-point', false);"><tt><b>isOrthogonal</b>(point)</tt></a>
+</div>
+<div id="isorthogonal-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isorthogonal-point', false);"><tt><b>isOrthogonal</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isorthogonal-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the vector represented by this point is orthogonal
+(perpendicular) to another vector.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the vector to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is orthogonal, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="iszero-member" class="member">
+<div id="iszero-link" class="member-link">
+<a name="iszero" href="#" onClick="return toggleMember('iszero', false);"><tt><b>isZero</b>()</tt></a>
+</div>
+<div id="iszero-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('iszero', false);"><tt><b>isZero</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('iszero', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if this point has both the x and y coordinate set to 0.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> both x and y are 0, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="isnan-member" class="member">
+<div id="isnan-link" class="member-link">
+<a name="isnan" href="#" onClick="return toggleMember('isnan', false);"><tt><b>isNaN</b>()</tt></a>
+</div>
+<div id="isnan-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isnan', false);"><tt><b>isNaN</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isnan', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if this point has an undefined value for at least one of its
+coordinates.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if either x or y are not a number, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<h3>Vector Math Functions</h3>
+
+<div id="dot-point-member" class="member">
+<div id="dot-point-link" class="member-link">
+<a name="dot-point" href="#" onClick="return toggleMember('dot-point', false);"><tt><b>dot</b>(point)</tt></a>
+</div>
+<div id="dot-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dot-point', false);"><tt><b>dot</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dot-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns the dot product of the point and another point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;the dot product of the two points
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="cross-point-member" class="member">
+<div id="cross-point-link" class="member-link">
+<a name="cross-point" href="#" onClick="return toggleMember('cross-point', false);"><tt><b>cross</b>(point)</tt></a>
+</div>
+<div id="cross-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('cross-point', false);"><tt><b>cross</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('cross-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns the cross product of the point and another point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Number</tt></tt>&nbsp;&mdash;&nbsp;the cross product of the two points
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="project-point-member" class="member">
+<div id="project-point-link" class="member-link">
+<a name="project-point" href="#" onClick="return toggleMember('project-point', false);"><tt><b>project</b>(point)</tt></a>
+</div>
+<div id="project-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('project-point', false);"><tt><b>project</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns the projection of the point on another point.</p>
+<p>Both points are interpreted as vectors.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;the projection of the point on another point
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<h3>Math Functions</h3>
+
+<div id="round-member" class="member">
+<div id="round-link" class="member-link">
+<a name="round" href="#" onClick="return toggleMember('round', false);"><tt><b>round</b>()</tt></a>
+</div>
+<div id="round-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('round', false);"><tt><b>round</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('round', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a new point with rounded <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values. The
+object itself is not modified!</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point = new Point(10.2, 10.9);
+var roundPoint = point.round();
+console.log(roundPoint); // {x: 10, y: 11}</pre>
+
+</div>
+</div>
+</div>
+		
+			
+<div id="ceil-member" class="member">
+<div id="ceil-link" class="member-link">
+<a name="ceil" href="#" onClick="return toggleMember('ceil', false);"><tt><b>ceil</b>()</tt></a>
+</div>
+<div id="ceil-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('ceil', false);"><tt><b>ceil</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ceil', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a new point with the nearest greater non-fractional values to the
+specified <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values. The object itself is not
+modified!</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point = new Point(10.2, 10.9);
+var ceilPoint = point.ceil();
+console.log(ceilPoint); // {x: 11, y: 11}</pre>
+
+</div>
+</div>
+</div>
+		
+			
+<div id="floor-member" class="member">
+<div id="floor-link" class="member-link">
+<a name="floor" href="#" onClick="return toggleMember('floor', false);"><tt><b>floor</b>()</tt></a>
+</div>
+<div id="floor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('floor', false);"><tt><b>floor</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('floor', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a new point with the nearest smaller non-fractional values to the
+specified <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values. The object itself is not
+modified!</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point = new Point(10.2, 10.9);
+var floorPoint = point.floor();
+console.log(floorPoint); // {x: 10, y: 10}</pre>
+
+</div>
+</div>
+</div>
+		
+			
+<div id="abs-member" class="member">
+<div id="abs-link" class="member-link">
+<a name="abs" href="#" onClick="return toggleMember('abs', false);"><tt><b>abs</b>()</tt></a>
+</div>
+<div id="abs-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('abs', false);"><tt><b>abs</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('abs', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a new point with the absolute values of the specified <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a>
+and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values. The object itself is not modified!</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point = new Point(-5, 10);
+var absPoint = point.abs();
+console.log(absPoint); // {x: 5, y: 10}</pre>
+
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+	<div class="reference-members"><h2>Static Methods</h2>
+		
+			
+<div id="min-point1-point2-member" class="member">
+<div id="min-point1-point2-link" class="member-link">
+<a name="min-point1-point2" href="#" onClick="return toggleMember('min-point1-point2', false);"><tt><b>Point.min</b>(point1, point2)</tt></a>
+</div>
+<div id="min-point1-point2-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('min-point1-point2', false);"><tt><b>Point.min</b>(point1, point2)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('min-point1-point2', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a new point object with the smallest <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and
+<a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> of the supplied points.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point1:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>point2:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;The newly created point object
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point1 = new Point(10, 100);
+var point2 = new Point(200, 5);
+var minPoint = Point.min(point1, point2);
+console.log(minPoint); // {x: 10, y: 5}</pre>
+
+</div>
+</div>
+</div>
+		
+			
+<div id="max-point1-point2-member" class="member">
+<div id="max-point1-point2-link" class="member-link">
+<a name="max-point1-point2" href="#" onClick="return toggleMember('max-point1-point2', false);"><tt><b>Point.max</b>(point1, point2)</tt></a>
+</div>
+<div id="max-point1-point2-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('max-point1-point2', false);"><tt><b>Point.max</b>(point1, point2)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('max-point1-point2', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a new point object with the largest <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and
+<a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> of the supplied points.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point1:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>point2:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;The newly created point object
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point1 = new Point(10, 100);
+var point2 = new Point(200, 5);
+var maxPoint = Point.max(point1, point2);
+console.log(maxPoint); // {x: 200, y: 100}</pre>
+
+</div>
+</div>
+</div>
+		
+			
+<div id="random-member" class="member">
+<div id="random-link" class="member-link">
+<a name="random" href="#" onClick="return toggleMember('random', false);"><tt><b>Point.random</b>()</tt></a>
+</div>
+<div id="random-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('random', false);"><tt><b>Point.random</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('random', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a point object with random <a href="../classes/Point.html#x" onclick="return toggleMember('x', true);"><tt>x</tt></a> and <a href="../classes/Point.html#y" onclick="return toggleMember('y', true);"><tt>y</tt></a> values
+between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Point.html"><tt>Point</tt></a></tt>&nbsp;&mdash;&nbsp;The newly created point object
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var maxPoint = new Point(100, 100);
+var randomPoint = Point.random();
+
+// A point between {x:0, y:0} and {x:100, y:100}:
+var point = maxPoint * randomPoint;</pre>
+
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/PointText.html b/dist/docs/classes/PointText.html
new file mode 100644
index 00000000..a25c35a9
--- /dev/null
+++ b/dist/docs/classes/PointText.html
@@ -0,0 +1,3688 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>PointText</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>PointText</h1>
+
+<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b>, <b><a href="../classes/TextItem.html"><tt>TextItem</tt></a></b></p>
+
+<p>A PointText item represents a piece of typography in your Paper.js
+project which starts from a certain point and extends by the amount of
+characters contained in it.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="pointtext-point-member" class="member">
+<div id="pointtext-point-link" class="member-link">
+<a name="pointtext-point" href="#" onClick="return toggleMember('pointtext-point', false);"><tt><b>PointText</b>(point)</tt></a>
+</div>
+<div id="pointtext-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('pointtext-point', false);"><tt><b>PointText</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('pointtext-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a point text item</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the position where the text will start
+
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var text = new PointText(new Point(50, 100));
+text.justification = 'center';
+text.fillColor = 'black';
+text.content = 'The contents of the point text';</pre>
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="point-member" class="member">
+<div id="point-link" class="member-link">
+<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
+</div>
+<div id="point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The PointText's anchor point</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="id-member" class="member">
+<div id="id-link" class="member-link">
+<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+<div id="id-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The unique id of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="name-member" class="member">
+<div id="name-link" class="member-link">
+<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+<div id="name-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The name of the item. If the item has a name, it can be accessed by name
+through its parent's children list.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and add path to it as a child:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="position-member" class="member">
+<div id="position-link" class="member-link">
+<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+<div id="position-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item's position within the project. This is the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the position of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+// Create a circle at position { x: 10, y: 10 }
+var circle = new Path.Circle(new Point(10, 10), 10);
+circle.fillColor = 'red';
+
+// Move the circle to { x: 20, y: 20 }
+circle.position = new Point(20, 20);
+
+// Move the circle 100 points to the right and 50 points down
+circle.position += new Point(100, 50);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Changing the x coordinate of an item's position:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+// Create a circle at position { x: 20, y: 20 }
+var circle = new Path.Circle(new Point(20, 20), 10);
+circle.fillColor = 'red';
+
+// Move the circle 100 points to the right
+circle.position.x += 100;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="style-member" class="member">
+<div id="style-link" class="member-link">
+<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+<div id="style-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The path style of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.style = {
+	fillColor: 'blue',
+	strokeColor: 'red',
+	strokeWidth: 5
+};
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Copying the style of another item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+var path = new Path.Circle(new Point(50, 50), 30);
+path.fillColor = 'red';
+
+var path2 = new Path.Circle(new Point(180, 50), 20);
+// Copy the path style of path:
+path2.style = path.style;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Applying the same style object to multiple items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-5">
+var myStyle = {
+	fillColor: 'red',
+	strokeColor: 'blue',
+	strokeWidth: 4
+};
+
+var path = new Path.Circle(new Point(80, 50), 30);
+path.style = myStyle;
+
+var path2 = new Path.Circle(new Point(150, 50), 20);
+path2.style = myStyle;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="visible-member" class="member">
+<div id="visible-link" class="member-link">
+<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+<div id="visible-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
+item won't be drawn.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>true</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Hiding an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-6">
+var path = new Path.Circle(new Point(50, 50), 20);
+path.fillColor = 'red';
+
+// Hide the path:
+path.visible = false;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="blendmode-member" class="member">
+<div id="blendmode-link" class="member-link">
+<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+<div id="blendmode-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The blend mode of the item.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'normal'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
+'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
+'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
+'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's blend mode:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-7">
+// Create a white rectangle in the background
+// with the same dimensions as the view:
+var background = new Path.Rectangle(view.bounds);
+background.fillColor = 'white';
+
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.fillColor = 'blue';
+
+// Set the blend mode of circle2:
+circle2.blendMode = 'multiply';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="opacity-member" class="member">
+<div id="opacity-link" class="member-link">
+<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+<div id="opacity-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Making an item 50% transparent:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-8">
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.style = {
+	fillColor: 'blue',
+	strokeColor: 'green',
+	strokeWidth: 10
+};
+
+// Make circle2 50% transparent:
+circle2.opacity = 0.5;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="guide-member" class="member">
+<div id="guide-link" class="member-link">
+<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+<div id="guide-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item functions as a guide. When set to
+<tt>true</tt>, the item will be drawn at the end as a guide.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="selected-member" class="member">
+<div id="selected-link" class="member-link">
+<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+<div id="selected-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether an item is selected and will also return <tt>true</tt>
+if the item is partially selected (groups with some selected or partially
+selected paths).</p>
+<p>Paper.js draws the visual outlines of selected items on top of your
+project. This can be useful for debugging, as it allows you to see the
+construction of paths, position of path curves, individual segment points
+and bounding boxes of symbol and raster items.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Selecting an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-9">
+var path = new Path.Circle(new Size(80, 50), 35);
+path.selected = true; // Select the path
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="clipmask-member" class="member">
+<div id="clipmask-link" class="member-link">
+<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+<div id="clipmask-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item defines a clip mask. This can only be set on
+paths, compound paths, and text frame objects, and only if the item is
+already contained within a clipping group.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Project Hierarchy</h3>
+
+<div id="project-member" class="member">
+<div id="project-link" class="member-link">
+<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+<div id="project-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The project that this item belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Project.html"><tt>Project</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="layer-member" class="member">
+<div id="layer-link" class="member-link">
+<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+<div id="layer-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The layer that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Layer.html"><tt>Layer</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="parent-member" class="member">
+<div id="parent-link" class="member-link">
+<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+<div id="parent-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var path = new Path();
+
+// New items are placed in the active layer:
+console.log(path.parent == project.activeLayer); // true
+
+var group = new Group();
+group.addChild(path);
+
+// Now the parent of the path has become the group:
+console.log(path.parent == group); // true</pre>
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="children-member" class="member">
+<div id="children-link" class="member-link">
+<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+<div id="children-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The children items contained within this item. Items that define a
+<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
+<p><b>Please note:</b> The children array should not be modified directly
+using array functions. To remove single items from the children list, use
+<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
+<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
+<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Accessing items in the children array:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-10">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// Access the path through the group's children array:
+group.children[0].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Accessing children by name:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-11">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'orange';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Passing an array of items to item.children:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-12">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+var group = new Group();
+group.children = [path];
+
+// The path is the first child of the group:
+group.firstChild.fillColor = 'green';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="firstchild-member" class="member">
+<div id="firstchild-link" class="member-link">
+<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+<div id="firstchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The first item contained within this item. This is a shortcut for
+accessing <tt>item.children[0]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="lastchild-member" class="member">
+<div id="lastchild-link" class="member-link">
+<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+<div id="lastchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The last item contained within this item.This is a shortcut for
+accessing <tt>item.children[item.children.length - 1]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="nextsibling-member" class="member">
+<div id="nextsibling-link" class="member-link">
+<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+<div id="nextsibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The next item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="previoussibling-member" class="member">
+<div id="previoussibling-link" class="member-link">
+<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+<div id="previoussibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The previous item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="index-member" class="member">
+<div id="index-link" class="member-link">
+<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+<div id="index-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The index of this item within the list of its parent's children.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Bounding Rectangles</h3>
+
+<div id="bounds-member" class="member">
+<div id="bounds-link" class="member-link">
+<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+<div id="bounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item excluding stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokebounds-member" class="member">
+<div id="strokebounds-link" class="member-link">
+<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+<div id="strokebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="handlebounds-member" class="member">
+<div id="handlebounds-link" class="member-link">
+<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+<div id="handlebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including handles.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Stroke Style</h3>
+
+<div id="strokecolor-member" class="member">
+<div id="strokecolor-link" class="member-link">
+<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+<div id="strokecolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the stroke color of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-13">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to RGB red:
+circle.strokeColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokewidth-member" class="member">
+<div id="strokewidth-link" class="member-link">
+<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+<div id="strokewidth-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The width of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's stroke width:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-14">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to black:
+circle.strokeColor = 'black';
+
+// Set its stroke width to 10:
+circle.strokeWidth = 10;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokecap-member" class="member">
+<div id="strokecap-link" class="member-link">
+<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+<div id="strokecap-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
+have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'butt'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('round', 'square', 'butt')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke caps:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-15">
+var line = new Path(new Point(80, 50), new Point(420, 50));
+line.strokeColor = 'black';
+line.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+line.selected = true;
+
+// Set the stroke cap of the line to be round:
+line.strokeCap = 'round';
+
+// Copy the path and set its stroke cap to be square:
+var line2 = line.clone();
+line2.position.y += 50;
+line2.strokeCap = 'square';
+
+// Make another copy and set its stroke cap to be butt:
+var line2 = line.clone();
+line2.position.y += 100;
+line2.strokeCap = 'butt';
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-15"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokejoin-member" class="member">
+<div id="strokejoin-link" class="member-link">
+<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+<div id="strokejoin-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the corners of paths when they have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'miter'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt> ('miter', 'round', 'bevel')
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke joins:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-16">
+var path = new Path();
+path.add(new Point(80, 100));
+path.add(new Point(120, 40));
+path.add(new Point(160, 100));
+path.strokeColor = 'black';
+path.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+path.selected = true;
+
+var path2 = path.clone();
+path2.position.x += path2.bounds.width * 1.5;
+path2.strokeJoin = 'round';
+
+var path3 = path2.clone();
+path3.position.x += path3.bounds.width * 1.5;
+path3.strokeJoin = 'bevel';
+</script>
+<div class="canvas"><canvas width="516" height="120" id="canvas-16"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="dashoffset-member" class="member">
+<div id="dashoffset-link" class="member-link">
+<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+<div id="dashoffset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The dash offset of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>0</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="dasharray-member" class="member">
+<div id="dasharray-link" class="member-link">
+<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+<div id="dasharray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>[]</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Array</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-17">
+var path = new Path.Circle(new Point(80, 50), 40);
+path.strokeWidth = 2;
+path.strokeColor = 'black';
+
+// Set the dashed stroke to [10pt dash, 4pt gap]:
+path.dashArray = [10, 4];
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="miterlimit-member" class="member">
+<div id="miterlimit-link" class="member-link">
+<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+<div id="miterlimit-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The miter limit of the stroke.</p>
+<p>When two line segments meet at a sharp angle and miter joins have been
+specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
+extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
+miterLimit imposes a limit on the ratio of the miter length to the
+<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>10</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Fill Style</h3>
+
+<div id="fillcolor-member" class="member">
+<div id="fillcolor-link" class="member-link">
+<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+<div id="fillcolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The fill color of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the fill color of a path to red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-18">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set the fill color of the circle to RGB red:
+circle.fillColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+<!-- =========================== inherited methods ========================= -->
+<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Clones the item within the same project and places the copy above the
+item.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Cloning items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-19">
+var circle = new Path.Circle(new Point(50, 50), 10);
+circle.fillColor = 'red';
+
+// Make 20 copies of the circle:
+for (var i = 0; i < 20; i++) {
+	var copy = circle.clone();
+
+	// Distribute the copies horizontally, so we can see them:
+	copy.position.x += i * copy.bounds.width;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="copyto-item-member" class="member">
+<div id="copyto-item-link" class="member-link">
+<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+<div id="copyto-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>When passed a project, copies the item to the project,
+or duplicates it within the same project. When passed an item,
+copies the item into the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
+&mdash;&nbsp;the item or project to
+copy the item to
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rasterize-member" class="member">
+<div id="rasterize-link" class="member-link">
+<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+<div id="rasterize-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rasterizes the item into a newly created Raster object. The item itself
+is not removed after rasterization.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>resolution:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the resolution of the raster in dpi
+&mdash;&nbsp;optional, default: <tt>72</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Rasterizing an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-20">
+var circle = new Path.Circle(new Point(80, 50), 5);
+circle.fillColor = 'red';
+
+// Create a rasterized version of the path:
+var raster = circle.rasterize();
+
+// Move it 100pt to the right:
+raster.position.x += 100;
+
+// Scale the path and the raster by 300%, so we can compare them:
+circle.scale(5);
+raster.scale(5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="hittest-point-member" class="member">
+<div id="hittest-point-link" class="member-link">
+<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+<div id="hittest-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Perform a hit test on the item (and its children, if it is a
+<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
+<p>The optional options object allows you to control the specifics of the
+hit test and may contain a combination of the following values:</p>
+<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
+points.</p>
+<p><b>options.type:</b> Only hit test again a certain item
+type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
+<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
+<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
+items, taking into account stroke width.</p>
+<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
+<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
+<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
+(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
+<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
+last segment points of open path items.</p>
+<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
+side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
+(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
+<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
+<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The point where the hit test should be performed
+
+</li>
+
+<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+
+&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
+tolerance: 2 }</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
+information about what exactly was hit or <tt>null</tt> if nothing was
+hit.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Operations</h3>
+
+<div id="addchild-item-member" class="member">
+<div id="addchild-item-link" class="member-link">
+<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+<div id="addchild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified item as a child of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be added as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchild-index-item-member" class="member">
+<div id="insertchild-index-item-link" class="member-link">
+<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+<div id="insertchild-index-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="addchildren-items-member" class="member">
+<div id="addchildren-items-link" class="member-link">
+<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+<div id="addchildren-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified items as children of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>items:</tt> 
+<tt>item</tt>
+&mdash;&nbsp;The items to be added as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchildren-index-items-member" class="member">
+<div id="insertchildren-index-items-link" class="member-link">
+<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+<div id="insertchildren-index-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified items as children of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>items:</tt> 
+Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+&mdash;&nbsp;The items to be appended as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertabove-item-member" class="member">
+<div id="insertabove-item-link" class="member-link">
+<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+<div id="insertabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertbelow-item-member" class="member">
+<div id="insertbelow-item-link" class="member-link">
+<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+<div id="insertbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendtop-item-member" class="member">
+<div id="appendtop-item-link" class="member-link">
+<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+<div id="appendtop-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it above all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendbottom-item-member" class="member">
+<div id="appendbottom-item-link" class="member-link">
+<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+<div id="appendbottom-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it below all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="moveabove-item-member" class="member">
+<div id="moveabove-item-link" class="member-link">
+<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+<div id="moveabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="movebelow-item-member" class="member">
+<div id="movebelow-item-link" class="member-link">
+<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+<div id="movebelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves the item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item below which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="remove-member" class="member">
+<div id="remove-link" class="member-link">
+<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+<div id="remove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item from the project. If the item has children, they are also
+removed.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-member" class="member">
+<div id="removechildren-link" class="member-link">
+<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+<div id="removechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-from-member" class="member">
+<div id="removechildren-from-link" class="member-link">
+<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+<div id="removechildren-from-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the children from the specified <tt>from</tt> index to the
+<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>from:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the beginning index, inclusive
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the ending index, exclusive
+&mdash;&nbsp;optional, default: <tt>children.length</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="reversechildren-member" class="member">
+<div id="reversechildren-link" class="member-link">
+<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+<div id="reversechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Reverses the order of the item's children</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Tests</h3>
+
+<div id="haschildren-member" class="member">
+<div id="haschildren-link" class="member-link">
+<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+<div id="haschildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item contains any children items.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isabove-item-member" class="member">
+<div id="isabove-item-link" class="member-link">
+<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+<div id="isabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if this item is above the specified item in the stacking order
+of the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isbelow-item-member" class="member">
+<div id="isbelow-item-link" class="member-link">
+<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+<div id="isbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is below the specified item in the stacking order of
+the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isparent-item-member" class="member">
+<div id="isparent-item-link" class="member-link">
+<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+<div id="isparent-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is the parent of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="ischild-item-member" class="member">
+<div id="ischild-item-link" class="member-link">
+<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+<div id="ischild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is a child of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isdescendant-item-member" class="member">
+<div id="isdescendant-item-link" class="member-link">
+<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+<div id="isdescendant-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is contained within the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isancestor-item-member" class="member">
+<div id="isancestor-item-link" class="member-link">
+<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+<div id="isancestor-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is an ancestor of the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
+item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isgroupedwith-item-member" class="member">
+<div id="isgroupedwith-item-link" class="member-link">
+<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+<div id="isgroupedwith-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the item is grouped with the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Transform Functions</h3>
+
+<div id="scale-scale-member" class="member">
+<div id="scale-scale-link" class="member-link">
+<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+<div id="scale-scale-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given value from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>scale:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item from its center point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-21">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path by 150% from its center point
+circle.scale(1.5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Scaling an item from a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-22">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path 150% from its bottom left corner
+circle.scale(1.5, circle.bounds.bottomLeft);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="scale-hor-ver-member" class="member">
+<div id="scale-hor-ver-link" class="member-link">
+<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="scale-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given values from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal scale factor
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item horizontally by 300%:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-23">
+// Create a circle shaped path at { x: 100, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(100, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path horizontally by 300%
+circle.scale(3, 1);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="translate-delta-member" class="member">
+<div id="translate-delta-link" class="member-link">
+<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+<div id="translate-delta-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Translates (moves) the item by the given offset point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>delta:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the offset to translate the item by
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rotate-angle-member" class="member">
+<div id="rotate-angle-link" class="member-link">
+<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+<div id="rotate-angle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rotates the item by a given angle around the given point.</p>
+<p>Angles are oriented clockwise and measured in degrees.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>angle:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the rotation angle
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Rotating an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-24">
+// Create a rectangle shaped path with its top left
+// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
+var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
+path.fillColor = 'black';
+
+// Rotate the path by 30 degrees:
+path.rotate(30);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Rotating an item around a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-25">
+// Create a rectangle shaped path with its top left
+// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
+var topLeft = new Point(175, 50);
+var size = new Size(100, 100);
+var path = new Path.Rectangle(topLeft, size);
+path.fillColor = 'black';
+
+// Draw a circle shaped path in the center of the view,
+// to show the rotation point:
+var circle = new Path.Circle(view.center, 5);
+circle.fillColor = 'white';
+
+// Each frame rotate the path 3 degrees around the center point
+// of the view:
+function onFrame(event) {
+	path.rotate(3, view.center);
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-25"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="shear-point-member" class="member">
+<div id="shear-point-link" class="member-link">
+<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+<div id="shear-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given value from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="shear-hor-ver-member" class="member">
+<div id="shear-hor-ver-link" class="member-link">
+<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="shear-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given values from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal shear factor.
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical shear factor.
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="transform-matrix-flags-member" class="member">
+<div id="transform-matrix-flags-link" class="member-link">
+<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+<div id="transform-matrix-flags-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>matrix:</tt> 
+<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+
+
+</li>
+
+<li>
+<tt>flags:</tt> 
+
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="fitbounds-rectangle-member" class="member">
+<div id="fitbounds-rectangle-link" class="member-link">
+<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+<div id="fitbounds-rectangle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
+rectangle, without changing its aspect ratio.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rectangle:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+
+
+</li>
+
+<li>
+<tt>fill:</tt> 
+<tt>Boolean</tt>
+
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-26">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-27">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds, true);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-28">
+var path = new Path.Circle(new Point(80, 50), 30);
+path.fillColor = 'red';
+
+// Fit the path to the bounding rectangle of the view:
+path.fitBounds(view.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-28"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<h3>Remove On Event</h3>
+
+<div id="removeon-object-member" class="member">
+<div id="removeon-object-link" class="member-link">
+<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+<div id="removeon-object-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the events specified in the passed object literal
+occur.</p>
+<p>The object literal can contain the following values:</p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
+fired: <tt>object.move = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
+fired: <tt>object.drag = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
+fired: <tt>object.down = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
+fired: <tt>object.up = true</tt></p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>object:</tt> 
+<tt>Object</tt>
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-29">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path on the next onMouseDrag or onMouseDown event:
+	path.removeOn({
+		drag: true,
+		down: true
+	});
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-29"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonmove-member" class="member">
+<div id="removeonmove-link" class="member-link">
+<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+<div id="removeonmove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Move your mouse below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-30">
+function onMouseMove(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next move event, automatically remove the path:
+	path.removeOnMove();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-30"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondown-member" class="member">
+<div id="removeondown-link" class="member-link">
+<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+<div id="removeondown-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-31">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, next time the mouse is pressed:
+	path.removeOnDown();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-31"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondrag-member" class="member">
+<div id="removeondrag-link" class="member-link">
+<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+<div id="removeondrag-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-32">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next drag event, automatically remove the path:
+	path.removeOnDrag();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-32"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonup-member" class="member">
+<div id="removeonup-link" class="member-link">
+<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+<div id="removeonup-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-33">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, when the mouse is released:
+	path.removeOnUp();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-33"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+</div>
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/TextItem.html"><tt>TextItem</tt></a></h2>
+
+	
+<div id="content-member" class="member">
+<div id="content-link" class="member-link">
+<a name="content" href="#" onClick="return toggleMember('content', false);"><tt><b>content</b></tt></a>
+</div>
+<div id="content-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('content', false);"><tt><b>content</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('content', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The text contents of the text item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the content of a PointText item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-34">
+// Create a point-text item at {x: 30, y: 30}:
+var text = new PointText(new Point(30, 30));
+text.fillColor = 'black';
+
+// Set the content of the text item:
+text.content = 'Hello world';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-34"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Interactive example, move your mouse over the view below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-35">
+// Create a point-text item at {x: 30, y: 30}:
+var text = new PointText(new Point(30, 30));
+text.fillColor = 'black';
+
+text.content = 'Move your mouse over the view, to see its position';
+
+function onMouseMove(event) {
+	// Each time the mouse is moved, set the content of
+	// the point text to describe the position of the mouse:
+	text.content = 'Your position is: ' + event.point.toString();
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-35"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Style Properties</h3>
+
+<div id="characterstyle-member" class="member">
+<div id="characterstyle-link" class="member-link">
+<a name="characterstyle" href="#" onClick="return toggleMember('characterstyle', false);"><tt><b>characterStyle</b></tt></a>
+</div>
+<div id="characterstyle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('characterstyle', false);"><tt><b>characterStyle</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('characterstyle', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The character style of the text item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/CharacterStyle.html"><tt>CharacterStyle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="paragraphstyle-member" class="member">
+<div id="paragraphstyle-link" class="member-link">
+<a name="paragraphstyle" href="#" onClick="return toggleMember('paragraphstyle', false);"><tt><b>paragraphStyle</b></tt></a>
+</div>
+<div id="paragraphstyle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('paragraphstyle', false);"><tt><b>paragraphStyle</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('paragraphstyle', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The paragraph style of the text item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/ParagraphStyle.html"><tt>ParagraphStyle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Project.html b/dist/docs/classes/Project.html
new file mode 100644
index 00000000..d1948071
--- /dev/null
+++ b/dist/docs/classes/Project.html
@@ -0,0 +1,567 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Project</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Project</h1>
+
+<p>A Project object in Paper.js is what usually is referred to as the
+document: The top level object that holds all the items contained in the
+scene graph. As the term document is already taken in the browser context,
+it is called Project.</p>
+<p>Projects allow the manipluation of the styles that are applied to all newly
+created items, give access to the selected items, and will in future versions
+offer ways to query for items in the scene graph defining specific
+requirements, and means to persist and load from different formats, such as
+SVG and PDF.</p>
+<p>The currently active project can be accessed through the
+<a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> variable.</p>
+<p>An array of all open projects is accessible through the
+<a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> variable.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="project-member" class="member">
+<div id="project-link" class="member-link">
+<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>Project</b>()</tt></a>
+</div>
+<div id="project-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('project', false);"><tt><b>Project</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a Paper.js project.</p>
+<p>When working with PaperScript, a project is automatically created for us
+and the <a href="../classes/PaperScope.html#project"><tt>paperScope.project</tt></a> variable points to it.</p>
+
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="currentstyle-member" class="member">
+<div id="currentstyle-link" class="member-link">
+<a name="currentstyle" href="#" onClick="return toggleMember('currentstyle', false);"><tt><b>currentStyle</b></tt></a>
+</div>
+<div id="currentstyle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('currentstyle', false);"><tt><b>currentStyle</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('currentstyle', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The currently active path style. All selected items and newly
+created items will be styled with this style.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+project.currentStyle = {
+	fillColor: 'red',
+	strokeColor: 'black',
+	strokeWidth: 5
+}
+
+// The following paths will take over all style properties of
+// the current style:
+var path = new Path.Circle(new Point(75, 50), 30);
+var path2 = new Path.Circle(new Point(175, 50), 20);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+project.currentStyle.fillColor = 'red';
+
+// The following path will take over the fill color we just set:
+var path = new Path.Circle(new Point(75, 50), 30);
+var path2 = new Path.Circle(new Point(175, 50), 20);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="index-member" class="member">
+<div id="index-link" class="member-link">
+<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+<div id="index-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The index of the project in the <a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> list.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="selecteditems-member" class="member">
+<div id="selecteditems-link" class="member-link">
+<a name="selecteditems" href="#" onClick="return toggleMember('selecteditems', false);"><tt><b>selectedItems</b></tt></a>
+</div>
+<div id="selecteditems-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('selecteditems', false);"><tt><b>selectedItems</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selecteditems', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The selected items contained within the project.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Project Hierarchy</h3>
+
+<div id="layers-member" class="member">
+<div id="layers-link" class="member-link">
+<a name="layers" href="#" onClick="return toggleMember('layers', false);"><tt><b>layers</b></tt></a>
+</div>
+<div id="layers-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('layers', false);"><tt><b>layers</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layers', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The layers contained within the project.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Layer.html"><tt>Layer</tt></a> objects
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="activelayer-member" class="member">
+<div id="activelayer-link" class="member-link">
+<a name="activelayer" href="#" onClick="return toggleMember('activelayer', false);"><tt><b>activeLayer</b></tt></a>
+</div>
+<div id="activelayer-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('activelayer', false);"><tt><b>activeLayer</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activelayer', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The layer which is currently active. New items will be created on this
+layer by default.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Layer.html"><tt>Layer</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="symbols-member" class="member">
+<div id="symbols-link" class="member-link">
+<a name="symbols" href="#" onClick="return toggleMember('symbols', false);"><tt><b>symbols</b></tt></a>
+</div>
+<div id="symbols-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('symbols', false);"><tt><b>symbols</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('symbols', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The symbols contained within the project.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Symbol.html"><tt>Symbol</tt></a> objects
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="views-member" class="member">
+<div id="views-link" class="member-link">
+<a name="views" href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
+</div>
+<div id="views-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('views', false);"><tt><b>views</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('views', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The views contained within the project.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/View.html"><tt>View</tt></a> objects
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="activeview-member" class="member">
+<div id="activeview-link" class="member-link">
+<a name="activeview" href="#" onClick="return toggleMember('activeview', false);"><tt><b>activeView</b></tt></a>
+</div>
+<div id="activeview-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('activeview', false);"><tt><b>activeView</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activeview', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The view which is currently active.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/View.html"><tt>View</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="activate-member" class="member">
+<div id="activate-link" class="member-link">
+<a name="activate" href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
+</div>
+<div id="activate-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activate', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Activates this project, so all newly created items will be placed
+in it.</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="remove-member" class="member">
+<div id="remove-link" class="member-link">
+<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+<div id="remove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes this project from the <a href="../classes/PaperScope.html#projects"><tt>paperScope.projects</tt></a> list.</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="selectall-member" class="member">
+<div id="selectall-link" class="member-link">
+<a name="selectall" href="#" onClick="return toggleMember('selectall', false);"><tt><b>selectAll</b>()</tt></a>
+</div>
+<div id="selectall-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('selectall', false);"><tt><b>selectAll</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selectall', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Selects all items in the project.</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="deselectall-member" class="member">
+<div id="deselectall-link" class="member-link">
+<a name="deselectall" href="#" onClick="return toggleMember('deselectall', false);"><tt><b>deselectAll</b>()</tt></a>
+</div>
+<div id="deselectall-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('deselectall', false);"><tt><b>deselectAll</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('deselectall', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Deselects all selected items in the project.</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="hittest-point-member" class="member">
+<div id="hittest-point-link" class="member-link">
+<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+<div id="hittest-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Perform a hit test on the items contained within the project at the
+location of the specified point.</p>
+<p>The optional options object allows you to control the specifics of the
+hit test and may contain a combination of the following values:</p>
+<p><b>options.tolerance:</b> <tt>Number</tt> - The tolerance of the hit test
+in points.</p>
+<p><b>options.type:</b> Only hit test again a certain item
+type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
+<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
+<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
+items, taking into account stroke width.</p>
+<p><b>options.segments:</b> <tt>Boolean</tt> - Hit test for
+<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
+<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
+(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
+<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
+last segment points of open path items.</p>
+<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
+side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
+(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
+<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
+<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The point where the hit test should be performed
+
+</li>
+
+<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+
+&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
+tolerance: true }</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
+information about what exactly was hit or <tt>null</tt> if nothing was
+hit.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Raster.html b/dist/docs/classes/Raster.html
new file mode 100644
index 00000000..f54df035
--- /dev/null
+++ b/dist/docs/classes/Raster.html
@@ -0,0 +1,4204 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Raster</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Raster</h1>
+
+<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b>, <b><a href="../classes/PlacedItem.html"><tt>PlacedItem</tt></a></b></p>
+
+<p>The Raster item represents an image in a Paper.js project.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="raster-member" class="member">
+<div id="raster-link" class="member-link">
+<a name="raster" href="#" onClick="return toggleMember('raster', false);"><tt><b>Raster</b>([object])</tt></a>
+</div>
+<div id="raster-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('raster', false);"><tt><b>Raster</b>([object])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('raster', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a new raster item and places it in the active layer.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>object:</tt> 
+<tt>HTMLImageElement</tt> / <tt>Canvas</tt> / <tt>string</tt>
+
+&mdash;&nbsp;optional
+</li>
+
+</ul>
+
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="size-member" class="member">
+<div id="size-link" class="member-link">
+<a name="size" href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
+</div>
+<div id="size-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('size', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The size of the raster in pixels.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Size.html"><tt>Size</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="width-member" class="member">
+<div id="width-link" class="member-link">
+<a name="width" href="#" onClick="return toggleMember('width', false);"><tt><b>width</b></tt></a>
+</div>
+<div id="width-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('width', false);"><tt><b>width</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('width', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The width of the raster in pixels.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="height-member" class="member">
+<div id="height-link" class="member-link">
+<a name="height" href="#" onClick="return toggleMember('height', false);"><tt><b>height</b></tt></a>
+</div>
+<div id="height-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('height', false);"><tt><b>height</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('height', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The height of the raster in pixels.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="ppi-member" class="member">
+<div id="ppi-link" class="member-link">
+<a name="ppi" href="#" onClick="return toggleMember('ppi', false);"><tt><b>ppi</b></tt></a>
+</div>
+<div id="ppi-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('ppi', false);"><tt><b>ppi</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ppi', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Pixels per inch of the raster at its current size.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Size.html"><tt>Size</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="context-member" class="member">
+<div id="context-link" class="member-link">
+<a name="context" href="#" onClick="return toggleMember('context', false);"><tt><b>context</b></tt></a>
+</div>
+<div id="context-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('context', false);"><tt><b>context</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('context', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The Canvas 2d drawing context of the raster.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Context</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="image-member" class="member">
+<div id="image-link" class="member-link">
+<a name="image" href="#" onClick="return toggleMember('image', false);"><tt><b>image</b></tt></a>
+</div>
+<div id="image-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('image', false);"><tt><b>image</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('image', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The HTMLImageElement or Canvas of the raster.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>HTMLImageElement</tt> / <tt>Canvas</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="getsubimage-rect-member" class="member">
+<div id="getsubimage-rect-link" class="member-link">
+<a name="getsubimage-rect" href="#" onClick="return toggleMember('getsubimage-rect', false);"><tt><b>getSubImage</b>(rect)</tt></a>
+</div>
+<div id="getsubimage-rect-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getsubimage-rect', false);"><tt><b>getSubImage</b>(rect)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getsubimage-rect', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rect:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+&mdash;&nbsp;the boundaries of the sub image in pixel
+coordinates
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Canvas</tt></tt>
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="drawimage-image-point-member" class="member">
+<div id="drawimage-image-point-link" class="member-link">
+<a name="drawimage-image-point" href="#" onClick="return toggleMember('drawimage-image-point', false);"><tt><b>drawImage</b>(image, point)</tt></a>
+</div>
+<div id="drawimage-image-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('drawimage-image-point', false);"><tt><b>drawImage</b>(image, point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('drawimage-image-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Draws an image on the raster.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>image:</tt> 
+<tt>HTMLImageELement</tt> / <tt>Canvas</tt>
+
+
+</li>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the offset of the image as a point in pixel
+coordinates
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="getaveragecolor-object-member" class="member">
+<div id="getaveragecolor-object-link" class="member-link">
+<a name="getaveragecolor-object" href="#" onClick="return toggleMember('getaveragecolor-object', false);"><tt><b>getAverageColor</b>(object)</tt></a>
+</div>
+<div id="getaveragecolor-object-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getaveragecolor-object', false);"><tt><b>getAverageColor</b>(object)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getaveragecolor-object', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Calculates the average color of the image within the given path,
+rectangle or point. This can be used for creating raster image
+effects.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>object:</tt> 
+<a href="../classes/Path.html"><tt>Path</tt></a> / <a href="../classes/Rectangle.html"><tt>Rectangle</tt></a> / <a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a></tt>&nbsp;&mdash;&nbsp;the average color contained in the area covered by the
+specified path, rectangle or point.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<h3>Pixels</h3>
+
+<div id="getpixel-x-y-member" class="member">
+<div id="getpixel-x-y-link" class="member-link">
+<a name="getpixel-x-y" href="#" onClick="return toggleMember('getpixel-x-y', false);"><tt><b>getPixel</b>(x, y)</tt></a>
+</div>
+<div id="getpixel-x-y-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getpixel-x-y', false);"><tt><b>getPixel</b>(x, y)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getpixel-x-y', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Gets the color of a pixel in the raster.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>x:</tt> 
+
+&mdash;&nbsp;the x offset of the pixel in pixel coordinates
+
+</li>
+
+<li>
+<tt>y:</tt> 
+
+&mdash;&nbsp;the y offset of the pixel in pixel coordinates
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a></tt>&nbsp;&mdash;&nbsp;the color of the pixel
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="getpixel-point-member" class="member">
+<div id="getpixel-point-link" class="member-link">
+<a name="getpixel-point" href="#" onClick="return toggleMember('getpixel-point', false);"><tt><b>getPixel</b>(point)</tt></a>
+</div>
+<div id="getpixel-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getpixel-point', false);"><tt><b>getPixel</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getpixel-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Gets the color of a pixel in the raster.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+
+&mdash;&nbsp;the offset of the pixel as a point in pixel coordinates
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a></tt>&nbsp;&mdash;&nbsp;the color of the pixel
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="setpixel-x-y-color-member" class="member">
+<div id="setpixel-x-y-color-link" class="member-link">
+<a name="setpixel-x-y-color" href="#" onClick="return toggleMember('setpixel-x-y-color', false);"><tt><b>setPixel</b>(x, y, color)</tt></a>
+</div>
+<div id="setpixel-x-y-color-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('setpixel-x-y-color', false);"><tt><b>setPixel</b>(x, y, color)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('setpixel-x-y-color', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Sets the color of the specified pixel to the specified color.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>x:</tt> 
+
+&mdash;&nbsp;the x offset of the pixel in pixel coordinates
+
+</li>
+
+<li>
+<tt>y:</tt> 
+
+&mdash;&nbsp;the y offset of the pixel in pixel coordinates
+
+</li>
+
+<li>
+<tt>color:</tt> 
+
+&mdash;&nbsp;the color that the pixel will be set to
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="setpixel-point-color-member" class="member">
+<div id="setpixel-point-color-link" class="member-link">
+<a name="setpixel-point-color" href="#" onClick="return toggleMember('setpixel-point-color', false);"><tt><b>setPixel</b>(point, color)</tt></a>
+</div>
+<div id="setpixel-point-color-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('setpixel-point-color', false);"><tt><b>setPixel</b>(point, color)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('setpixel-point-color', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Sets the color of the specified pixel to the specified color.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+
+&mdash;&nbsp;the offset of the pixel as a point in pixel coordinates
+
+</li>
+
+<li>
+<tt>color:</tt> 
+
+&mdash;&nbsp;the color that the pixel will be set to
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<h3>Image Data</h3>
+
+<div id="createdata-size-member" class="member">
+<div id="createdata-size-link" class="member-link">
+<a name="createdata-size" href="#" onClick="return toggleMember('createdata-size', false);"><tt><b>createData</b>(size)</tt></a>
+</div>
+<div id="createdata-size-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('createdata-size', false);"><tt><b>createData</b>(size)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('createdata-size', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>size:</tt> 
+<a href="../classes/Size.html"><tt>Size</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>ImageData</tt></tt>
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="getdata-rect-member" class="member">
+<div id="getdata-rect-link" class="member-link">
+<a name="getdata-rect" href="#" onClick="return toggleMember('getdata-rect', false);"><tt><b>getData</b>(rect)</tt></a>
+</div>
+<div id="getdata-rect-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('getdata-rect', false);"><tt><b>getData</b>(rect)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('getdata-rect', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rect:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>ImageData</tt></tt>
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="setdata-data-point-member" class="member">
+<div id="setdata-data-point-link" class="member-link">
+<a name="setdata-data-point" href="#" onClick="return toggleMember('setdata-data-point', false);"><tt><b>setData</b>(data, point)</tt></a>
+</div>
+<div id="setdata-data-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('setdata-data-point', false);"><tt><b>setData</b>(data, point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('setdata-data-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>data:</tt> 
+<tt>ImageData</tt>
+
+
+</li>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>ImageData</tt></tt>
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="id-member" class="member">
+<div id="id-link" class="member-link">
+<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+<div id="id-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The unique id of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="name-member" class="member">
+<div id="name-link" class="member-link">
+<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+<div id="name-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The name of the item. If the item has a name, it can be accessed by name
+through its parent's children list.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and add path to it as a child:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="position-member" class="member">
+<div id="position-link" class="member-link">
+<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+<div id="position-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item's position within the project. This is the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the position of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+// Create a circle at position { x: 10, y: 10 }
+var circle = new Path.Circle(new Point(10, 10), 10);
+circle.fillColor = 'red';
+
+// Move the circle to { x: 20, y: 20 }
+circle.position = new Point(20, 20);
+
+// Move the circle 100 points to the right and 50 points down
+circle.position += new Point(100, 50);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Changing the x coordinate of an item's position:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+// Create a circle at position { x: 20, y: 20 }
+var circle = new Path.Circle(new Point(20, 20), 10);
+circle.fillColor = 'red';
+
+// Move the circle 100 points to the right
+circle.position.x += 100;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="style-member" class="member">
+<div id="style-link" class="member-link">
+<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+<div id="style-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The path style of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.style = {
+	fillColor: 'blue',
+	strokeColor: 'red',
+	strokeWidth: 5
+};
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Copying the style of another item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+var path = new Path.Circle(new Point(50, 50), 30);
+path.fillColor = 'red';
+
+var path2 = new Path.Circle(new Point(180, 50), 20);
+// Copy the path style of path:
+path2.style = path.style;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Applying the same style object to multiple items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-5">
+var myStyle = {
+	fillColor: 'red',
+	strokeColor: 'blue',
+	strokeWidth: 4
+};
+
+var path = new Path.Circle(new Point(80, 50), 30);
+path.style = myStyle;
+
+var path2 = new Path.Circle(new Point(150, 50), 20);
+path2.style = myStyle;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="visible-member" class="member">
+<div id="visible-link" class="member-link">
+<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+<div id="visible-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
+item won't be drawn.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>true</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Hiding an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-6">
+var path = new Path.Circle(new Point(50, 50), 20);
+path.fillColor = 'red';
+
+// Hide the path:
+path.visible = false;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="blendmode-member" class="member">
+<div id="blendmode-link" class="member-link">
+<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+<div id="blendmode-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The blend mode of the item.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'normal'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
+'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
+'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
+'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's blend mode:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-7">
+// Create a white rectangle in the background
+// with the same dimensions as the view:
+var background = new Path.Rectangle(view.bounds);
+background.fillColor = 'white';
+
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.fillColor = 'blue';
+
+// Set the blend mode of circle2:
+circle2.blendMode = 'multiply';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="opacity-member" class="member">
+<div id="opacity-link" class="member-link">
+<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+<div id="opacity-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Making an item 50% transparent:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-8">
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.style = {
+	fillColor: 'blue',
+	strokeColor: 'green',
+	strokeWidth: 10
+};
+
+// Make circle2 50% transparent:
+circle2.opacity = 0.5;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="guide-member" class="member">
+<div id="guide-link" class="member-link">
+<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+<div id="guide-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item functions as a guide. When set to
+<tt>true</tt>, the item will be drawn at the end as a guide.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="selected-member" class="member">
+<div id="selected-link" class="member-link">
+<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+<div id="selected-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether an item is selected and will also return <tt>true</tt>
+if the item is partially selected (groups with some selected or partially
+selected paths).</p>
+<p>Paper.js draws the visual outlines of selected items on top of your
+project. This can be useful for debugging, as it allows you to see the
+construction of paths, position of path curves, individual segment points
+and bounding boxes of symbol and raster items.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Selecting an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-9">
+var path = new Path.Circle(new Size(80, 50), 35);
+path.selected = true; // Select the path
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="clipmask-member" class="member">
+<div id="clipmask-link" class="member-link">
+<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+<div id="clipmask-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item defines a clip mask. This can only be set on
+paths, compound paths, and text frame objects, and only if the item is
+already contained within a clipping group.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Project Hierarchy</h3>
+
+<div id="project-member" class="member">
+<div id="project-link" class="member-link">
+<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+<div id="project-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The project that this item belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Project.html"><tt>Project</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="layer-member" class="member">
+<div id="layer-link" class="member-link">
+<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+<div id="layer-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The layer that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Layer.html"><tt>Layer</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="parent-member" class="member">
+<div id="parent-link" class="member-link">
+<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+<div id="parent-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var path = new Path();
+
+// New items are placed in the active layer:
+console.log(path.parent == project.activeLayer); // true
+
+var group = new Group();
+group.addChild(path);
+
+// Now the parent of the path has become the group:
+console.log(path.parent == group); // true</pre>
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="children-member" class="member">
+<div id="children-link" class="member-link">
+<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+<div id="children-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The children items contained within this item. Items that define a
+<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
+<p><b>Please note:</b> The children array should not be modified directly
+using array functions. To remove single items from the children list, use
+<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
+<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
+<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Accessing items in the children array:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-10">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// Access the path through the group's children array:
+group.children[0].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Accessing children by name:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-11">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'orange';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Passing an array of items to item.children:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-12">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+var group = new Group();
+group.children = [path];
+
+// The path is the first child of the group:
+group.firstChild.fillColor = 'green';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="firstchild-member" class="member">
+<div id="firstchild-link" class="member-link">
+<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+<div id="firstchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The first item contained within this item. This is a shortcut for
+accessing <tt>item.children[0]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="lastchild-member" class="member">
+<div id="lastchild-link" class="member-link">
+<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+<div id="lastchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The last item contained within this item.This is a shortcut for
+accessing <tt>item.children[item.children.length - 1]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="nextsibling-member" class="member">
+<div id="nextsibling-link" class="member-link">
+<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+<div id="nextsibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The next item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="previoussibling-member" class="member">
+<div id="previoussibling-link" class="member-link">
+<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+<div id="previoussibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The previous item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="index-member" class="member">
+<div id="index-link" class="member-link">
+<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+<div id="index-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The index of this item within the list of its parent's children.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Bounding Rectangles</h3>
+
+<div id="bounds-member" class="member">
+<div id="bounds-link" class="member-link">
+<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+<div id="bounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item excluding stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokebounds-member" class="member">
+<div id="strokebounds-link" class="member-link">
+<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+<div id="strokebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="handlebounds-member" class="member">
+<div id="handlebounds-link" class="member-link">
+<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+<div id="handlebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including handles.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Stroke Style</h3>
+
+<div id="strokecolor-member" class="member">
+<div id="strokecolor-link" class="member-link">
+<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+<div id="strokecolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the stroke color of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-13">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to RGB red:
+circle.strokeColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokewidth-member" class="member">
+<div id="strokewidth-link" class="member-link">
+<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+<div id="strokewidth-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The width of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's stroke width:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-14">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to black:
+circle.strokeColor = 'black';
+
+// Set its stroke width to 10:
+circle.strokeWidth = 10;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokecap-member" class="member">
+<div id="strokecap-link" class="member-link">
+<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+<div id="strokecap-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
+have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'butt'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('round', 'square', 'butt')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke caps:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-15">
+var line = new Path(new Point(80, 50), new Point(420, 50));
+line.strokeColor = 'black';
+line.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+line.selected = true;
+
+// Set the stroke cap of the line to be round:
+line.strokeCap = 'round';
+
+// Copy the path and set its stroke cap to be square:
+var line2 = line.clone();
+line2.position.y += 50;
+line2.strokeCap = 'square';
+
+// Make another copy and set its stroke cap to be butt:
+var line2 = line.clone();
+line2.position.y += 100;
+line2.strokeCap = 'butt';
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-15"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokejoin-member" class="member">
+<div id="strokejoin-link" class="member-link">
+<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+<div id="strokejoin-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the corners of paths when they have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'miter'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt> ('miter', 'round', 'bevel')
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke joins:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-16">
+var path = new Path();
+path.add(new Point(80, 100));
+path.add(new Point(120, 40));
+path.add(new Point(160, 100));
+path.strokeColor = 'black';
+path.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+path.selected = true;
+
+var path2 = path.clone();
+path2.position.x += path2.bounds.width * 1.5;
+path2.strokeJoin = 'round';
+
+var path3 = path2.clone();
+path3.position.x += path3.bounds.width * 1.5;
+path3.strokeJoin = 'bevel';
+</script>
+<div class="canvas"><canvas width="516" height="120" id="canvas-16"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="dashoffset-member" class="member">
+<div id="dashoffset-link" class="member-link">
+<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+<div id="dashoffset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The dash offset of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>0</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="dasharray-member" class="member">
+<div id="dasharray-link" class="member-link">
+<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+<div id="dasharray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>[]</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Array</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-17">
+var path = new Path.Circle(new Point(80, 50), 40);
+path.strokeWidth = 2;
+path.strokeColor = 'black';
+
+// Set the dashed stroke to [10pt dash, 4pt gap]:
+path.dashArray = [10, 4];
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-17"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="miterlimit-member" class="member">
+<div id="miterlimit-link" class="member-link">
+<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+<div id="miterlimit-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The miter limit of the stroke.</p>
+<p>When two line segments meet at a sharp angle and miter joins have been
+specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
+extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
+miterLimit imposes a limit on the ratio of the miter length to the
+<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>10</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Fill Style</h3>
+
+<div id="fillcolor-member" class="member">
+<div id="fillcolor-link" class="member-link">
+<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+<div id="fillcolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The fill color of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the fill color of a path to red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-18">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set the fill color of the circle to RGB red:
+circle.fillColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-18"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+<!-- =========================== inherited methods ========================= -->
+<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Clones the item within the same project and places the copy above the
+item.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Cloning items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-19">
+var circle = new Path.Circle(new Point(50, 50), 10);
+circle.fillColor = 'red';
+
+// Make 20 copies of the circle:
+for (var i = 0; i < 20; i++) {
+	var copy = circle.clone();
+
+	// Distribute the copies horizontally, so we can see them:
+	copy.position.x += i * copy.bounds.width;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="copyto-item-member" class="member">
+<div id="copyto-item-link" class="member-link">
+<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+<div id="copyto-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>When passed a project, copies the item to the project,
+or duplicates it within the same project. When passed an item,
+copies the item into the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
+&mdash;&nbsp;the item or project to
+copy the item to
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rasterize-member" class="member">
+<div id="rasterize-link" class="member-link">
+<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+<div id="rasterize-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rasterizes the item into a newly created Raster object. The item itself
+is not removed after rasterization.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>resolution:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the resolution of the raster in dpi
+&mdash;&nbsp;optional, default: <tt>72</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Rasterizing an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-20">
+var circle = new Path.Circle(new Point(80, 50), 5);
+circle.fillColor = 'red';
+
+// Create a rasterized version of the path:
+var raster = circle.rasterize();
+
+// Move it 100pt to the right:
+raster.position.x += 100;
+
+// Scale the path and the raster by 300%, so we can compare them:
+circle.scale(5);
+raster.scale(5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="hittest-point-member" class="member">
+<div id="hittest-point-link" class="member-link">
+<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+<div id="hittest-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Perform a hit test on the item (and its children, if it is a
+<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
+<p>The optional options object allows you to control the specifics of the
+hit test and may contain a combination of the following values:</p>
+<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
+points.</p>
+<p><b>options.type:</b> Only hit test again a certain item
+type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
+<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
+<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
+items, taking into account stroke width.</p>
+<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
+<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
+<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
+(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
+<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
+last segment points of open path items.</p>
+<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
+side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
+(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
+<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
+<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The point where the hit test should be performed
+
+</li>
+
+<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+
+&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
+tolerance: 2 }</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
+information about what exactly was hit or <tt>null</tt> if nothing was
+hit.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Operations</h3>
+
+<div id="addchild-item-member" class="member">
+<div id="addchild-item-link" class="member-link">
+<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+<div id="addchild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified item as a child of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be added as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchild-index-item-member" class="member">
+<div id="insertchild-index-item-link" class="member-link">
+<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+<div id="insertchild-index-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="addchildren-items-member" class="member">
+<div id="addchildren-items-link" class="member-link">
+<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+<div id="addchildren-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified items as children of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>items:</tt> 
+<tt>item</tt>
+&mdash;&nbsp;The items to be added as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchildren-index-items-member" class="member">
+<div id="insertchildren-index-items-link" class="member-link">
+<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+<div id="insertchildren-index-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified items as children of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>items:</tt> 
+Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+&mdash;&nbsp;The items to be appended as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertabove-item-member" class="member">
+<div id="insertabove-item-link" class="member-link">
+<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+<div id="insertabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertbelow-item-member" class="member">
+<div id="insertbelow-item-link" class="member-link">
+<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+<div id="insertbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendtop-item-member" class="member">
+<div id="appendtop-item-link" class="member-link">
+<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+<div id="appendtop-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it above all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendbottom-item-member" class="member">
+<div id="appendbottom-item-link" class="member-link">
+<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+<div id="appendbottom-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it below all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="moveabove-item-member" class="member">
+<div id="moveabove-item-link" class="member-link">
+<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+<div id="moveabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="movebelow-item-member" class="member">
+<div id="movebelow-item-link" class="member-link">
+<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+<div id="movebelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves the item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item below which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="remove-member" class="member">
+<div id="remove-link" class="member-link">
+<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+<div id="remove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item from the project. If the item has children, they are also
+removed.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-member" class="member">
+<div id="removechildren-link" class="member-link">
+<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+<div id="removechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-from-member" class="member">
+<div id="removechildren-from-link" class="member-link">
+<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+<div id="removechildren-from-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the children from the specified <tt>from</tt> index to the
+<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>from:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the beginning index, inclusive
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the ending index, exclusive
+&mdash;&nbsp;optional, default: <tt>children.length</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="reversechildren-member" class="member">
+<div id="reversechildren-link" class="member-link">
+<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+<div id="reversechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Reverses the order of the item's children</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Tests</h3>
+
+<div id="haschildren-member" class="member">
+<div id="haschildren-link" class="member-link">
+<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+<div id="haschildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item contains any children items.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isabove-item-member" class="member">
+<div id="isabove-item-link" class="member-link">
+<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+<div id="isabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if this item is above the specified item in the stacking order
+of the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isbelow-item-member" class="member">
+<div id="isbelow-item-link" class="member-link">
+<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+<div id="isbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is below the specified item in the stacking order of
+the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isparent-item-member" class="member">
+<div id="isparent-item-link" class="member-link">
+<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+<div id="isparent-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is the parent of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="ischild-item-member" class="member">
+<div id="ischild-item-link" class="member-link">
+<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+<div id="ischild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is a child of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isdescendant-item-member" class="member">
+<div id="isdescendant-item-link" class="member-link">
+<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+<div id="isdescendant-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is contained within the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isancestor-item-member" class="member">
+<div id="isancestor-item-link" class="member-link">
+<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+<div id="isancestor-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is an ancestor of the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
+item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isgroupedwith-item-member" class="member">
+<div id="isgroupedwith-item-link" class="member-link">
+<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+<div id="isgroupedwith-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the item is grouped with the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Transform Functions</h3>
+
+<div id="scale-scale-member" class="member">
+<div id="scale-scale-link" class="member-link">
+<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+<div id="scale-scale-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given value from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>scale:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item from its center point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-21">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path by 150% from its center point
+circle.scale(1.5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Scaling an item from a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-22">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path 150% from its bottom left corner
+circle.scale(1.5, circle.bounds.bottomLeft);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="scale-hor-ver-member" class="member">
+<div id="scale-hor-ver-link" class="member-link">
+<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="scale-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given values from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal scale factor
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item horizontally by 300%:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-23">
+// Create a circle shaped path at { x: 100, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(100, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path horizontally by 300%
+circle.scale(3, 1);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="translate-delta-member" class="member">
+<div id="translate-delta-link" class="member-link">
+<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+<div id="translate-delta-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Translates (moves) the item by the given offset point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>delta:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the offset to translate the item by
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rotate-angle-member" class="member">
+<div id="rotate-angle-link" class="member-link">
+<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+<div id="rotate-angle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rotates the item by a given angle around the given point.</p>
+<p>Angles are oriented clockwise and measured in degrees.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>angle:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the rotation angle
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Rotating an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-24">
+// Create a rectangle shaped path with its top left
+// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
+var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
+path.fillColor = 'black';
+
+// Rotate the path by 30 degrees:
+path.rotate(30);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Rotating an item around a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-25">
+// Create a rectangle shaped path with its top left
+// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
+var topLeft = new Point(175, 50);
+var size = new Size(100, 100);
+var path = new Path.Rectangle(topLeft, size);
+path.fillColor = 'black';
+
+// Draw a circle shaped path in the center of the view,
+// to show the rotation point:
+var circle = new Path.Circle(view.center, 5);
+circle.fillColor = 'white';
+
+// Each frame rotate the path 3 degrees around the center point
+// of the view:
+function onFrame(event) {
+	path.rotate(3, view.center);
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-25"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="shear-point-member" class="member">
+<div id="shear-point-link" class="member-link">
+<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+<div id="shear-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given value from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="shear-hor-ver-member" class="member">
+<div id="shear-hor-ver-link" class="member-link">
+<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="shear-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given values from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal shear factor.
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical shear factor.
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="transform-matrix-flags-member" class="member">
+<div id="transform-matrix-flags-link" class="member-link">
+<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+<div id="transform-matrix-flags-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>matrix:</tt> 
+<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+
+
+</li>
+
+<li>
+<tt>flags:</tt> 
+
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="fitbounds-rectangle-member" class="member">
+<div id="fitbounds-rectangle-link" class="member-link">
+<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+<div id="fitbounds-rectangle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
+rectangle, without changing its aspect ratio.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rectangle:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+
+
+</li>
+
+<li>
+<tt>fill:</tt> 
+<tt>Boolean</tt>
+
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-26">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-27">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds, true);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-27"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-28">
+var path = new Path.Circle(new Point(80, 50), 30);
+path.fillColor = 'red';
+
+// Fit the path to the bounding rectangle of the view:
+path.fitBounds(view.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-28"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<h3>Remove On Event</h3>
+
+<div id="removeon-object-member" class="member">
+<div id="removeon-object-link" class="member-link">
+<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+<div id="removeon-object-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the events specified in the passed object literal
+occur.</p>
+<p>The object literal can contain the following values:</p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
+fired: <tt>object.move = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
+fired: <tt>object.drag = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
+fired: <tt>object.down = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
+fired: <tt>object.up = true</tt></p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>object:</tt> 
+<tt>Object</tt>
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-29">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path on the next onMouseDrag or onMouseDown event:
+	path.removeOn({
+		drag: true,
+		down: true
+	});
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-29"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonmove-member" class="member">
+<div id="removeonmove-link" class="member-link">
+<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+<div id="removeonmove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Move your mouse below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-30">
+function onMouseMove(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next move event, automatically remove the path:
+	path.removeOnMove();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-30"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondown-member" class="member">
+<div id="removeondown-link" class="member-link">
+<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+<div id="removeondown-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-31">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, next time the mouse is pressed:
+	path.removeOnDown();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-31"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondrag-member" class="member">
+<div id="removeondrag-link" class="member-link">
+<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+<div id="removeondrag-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-32">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next drag event, automatically remove the path:
+	path.removeOnDrag();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-32"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonup-member" class="member">
+<div id="removeonup-link" class="member-link">
+<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+<div id="removeonup-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-33">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, when the mouse is released:
+	path.removeOnUp();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-33"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+</div>
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/PlacedItem.html"><tt>PlacedItem</tt></a></h2>
+
+	
+<div id="matrix-member" class="member">
+<div id="matrix-link" class="member-link">
+<a name="matrix" href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
+</div>
+<div id="matrix-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('matrix', false);"><tt><b>matrix</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('matrix', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item's transformation matrix, defining position and dimensions in the
+document.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Rectangle.html b/dist/docs/classes/Rectangle.html
new file mode 100644
index 00000000..34eb81b2
--- /dev/null
+++ b/dist/docs/classes/Rectangle.html
@@ -0,0 +1,1380 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Rectangle</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Rectangle</h1>
+
+<p>A Rectangle specifies an area that is enclosed by it's top-left
+point (x, y), its width, and its height. It should not be confused with a
+rectangular path, it is not an item.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="rectangle-point-size-member" class="member">
+<div id="rectangle-point-size-link" class="member-link">
+<a name="rectangle-point-size" href="#" onClick="return toggleMember('rectangle-point-size', false);"><tt><b>Rectangle</b>(point, size)</tt></a>
+</div>
+<div id="rectangle-point-size-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rectangle-point-size', false);"><tt><b>Rectangle</b>(point, size)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rectangle-point-size', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a Rectangle object.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the top-left point of the rectangle
+
+</li>
+
+<li>
+<tt>size:</tt> 
+<a href="../classes/Size.html"><tt>Size</tt></a>
+&mdash;&nbsp;the size of the rectangle
+
+</li>
+
+</ul>
+
+
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="rectangle-x-y-width-height-member" class="member">
+<div id="rectangle-x-y-width-height-link" class="member-link">
+<a name="rectangle-x-y-width-height" href="#" onClick="return toggleMember('rectangle-x-y-width-height', false);"><tt><b>Rectangle</b>(x, y, width, height)</tt></a>
+</div>
+<div id="rectangle-x-y-width-height-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rectangle-x-y-width-height', false);"><tt><b>Rectangle</b>(x, y, width, height)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rectangle-x-y-width-height', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a rectangle object.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>x:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the left coordinate
+
+</li>
+
+<li>
+<tt>y:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the top coordinate
+
+</li>
+
+<li>
+<tt>width:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>height:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+</ul>
+
+
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="rectangle-point1-point2-member" class="member">
+<div id="rectangle-point1-point2-link" class="member-link">
+<a name="rectangle-point1-point2" href="#" onClick="return toggleMember('rectangle-point1-point2', false);"><tt><b>Rectangle</b>(point1, point2)</tt></a>
+</div>
+<div id="rectangle-point1-point2-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rectangle-point1-point2', false);"><tt><b>Rectangle</b>(point1, point2)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rectangle-point1-point2', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a rectangle object from the passed points. These do not
+necessarily need to be the top left and bottom right corners, the
+constructor figures out how to fit a rectangle between them.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point1:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The first point defining the rectangle
+
+</li>
+
+<li>
+<tt>point2:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The second point defining the rectangle
+
+</li>
+
+</ul>
+
+
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="rectangle-rt-member" class="member">
+<div id="rectangle-rt-link" class="member-link">
+<a name="rectangle-rt" href="#" onClick="return toggleMember('rectangle-rt', false);"><tt><b>Rectangle</b>(rt)</tt></a>
+</div>
+<div id="rectangle-rt-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rectangle-rt', false);"><tt><b>Rectangle</b>(rt)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rectangle-rt', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a new rectangle object from the passed rectangle object.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rt:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+
+
+</li>
+
+</ul>
+
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+<!-- ============================== properties ========================= -->
+	<div class="reference-members"><h2>Operators</h2>
+		
+			<div id="equals-member" class="member">
+<div id="equals-link" class="member-link">
+<a name="equals" href="#" onClick="return toggleMember('equals', false);"><tt><tt><b>==</b> Rectangle</tt></tt></a>
+</div>
+<div id="equals-description" class="member-description hidden">
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('equals', false);"><tt><b>==</b> Rectangle</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Checks whether the coordinates and size of the rectangle are equal to
+that of the supplied rectangle.</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the rectangles are equal, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+		
+		
+	</div>
+
+
+</div>
+</div>
+
+		
+	</div>
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="x-member" class="member">
+<div id="x-link" class="member-link">
+<a name="x" href="#" onClick="return toggleMember('x', false);"><tt><b>x</b></tt></a>
+</div>
+<div id="x-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('x', false);"><tt><b>x</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('x', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The x position of the rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="y-member" class="member">
+<div id="y-link" class="member-link">
+<a name="y" href="#" onClick="return toggleMember('y', false);"><tt><b>y</b></tt></a>
+</div>
+<div id="y-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('y', false);"><tt><b>y</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('y', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The y position of the rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="width-member" class="member">
+<div id="width-link" class="member-link">
+<a name="width" href="#" onClick="return toggleMember('width', false);"><tt><b>width</b></tt></a>
+</div>
+<div id="width-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('width', false);"><tt><b>width</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('width', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The width of the rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="height-member" class="member">
+<div id="height-link" class="member-link">
+<a name="height" href="#" onClick="return toggleMember('height', false);"><tt><b>height</b></tt></a>
+</div>
+<div id="height-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('height', false);"><tt><b>height</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('height', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The height of the rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="point-member" class="member">
+<div id="point-link" class="member-link">
+<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
+</div>
+<div id="point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The top-left point of the rectangle</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="size-member" class="member">
+<div id="size-link" class="member-link">
+<a name="size" href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
+</div>
+<div id="size-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('size', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The size of the rectangle</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Size.html"><tt>Size</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Side Positions</h3>
+
+<div id="left-member" class="member">
+<div id="left-link" class="member-link">
+<a name="left" href="#" onClick="return toggleMember('left', false);"><tt><b>left</b></tt></a>
+</div>
+<div id="left-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('left', false);"><tt><b>left</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('left', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The position of the left hand side of the rectangle. Note that this
+doesn't move the whole rectangle; the right hand side stays where it was.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="top-member" class="member">
+<div id="top-link" class="member-link">
+<a name="top" href="#" onClick="return toggleMember('top', false);"><tt><b>top</b></tt></a>
+</div>
+<div id="top-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('top', false);"><tt><b>top</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('top', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The top coordinate of the rectangle. Note that this doesn't move the
+whole rectangle: the bottom won't move.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="right-member" class="member">
+<div id="right-link" class="member-link">
+<a name="right" href="#" onClick="return toggleMember('right', false);"><tt><b>right</b></tt></a>
+</div>
+<div id="right-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('right', false);"><tt><b>right</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('right', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The position of the right hand side of the rectangle. Note that this
+doesn't move the whole rectangle; the left hand side stays where it was.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="bottom-member" class="member">
+<div id="bottom-link" class="member-link">
+<a name="bottom" href="#" onClick="return toggleMember('bottom', false);"><tt><b>bottom</b></tt></a>
+</div>
+<div id="bottom-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('bottom', false);"><tt><b>bottom</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bottom', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bottom coordinate of the rectangle. Note that this doesn't move the
+whole rectangle: the top won't move.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Corner and Center Point Positions</h3>
+
+<div id="center-member" class="member">
+<div id="center-link" class="member-link">
+<a name="center" href="#" onClick="return toggleMember('center', false);"><tt><b>center</b></tt></a>
+</div>
+<div id="center-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('center', false);"><tt><b>center</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('center', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The center point of the rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="topleft-member" class="member">
+<div id="topleft-link" class="member-link">
+<a name="topleft" href="#" onClick="return toggleMember('topleft', false);"><tt><b>topLeft</b></tt></a>
+</div>
+<div id="topleft-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('topleft', false);"><tt><b>topLeft</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('topleft', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The top-left point of the rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="topright-member" class="member">
+<div id="topright-link" class="member-link">
+<a name="topright" href="#" onClick="return toggleMember('topright', false);"><tt><b>topRight</b></tt></a>
+</div>
+<div id="topright-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('topright', false);"><tt><b>topRight</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('topright', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The top-right point of the rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="bottomleft-member" class="member">
+<div id="bottomleft-link" class="member-link">
+<a name="bottomleft" href="#" onClick="return toggleMember('bottomleft', false);"><tt><b>bottomLeft</b></tt></a>
+</div>
+<div id="bottomleft-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('bottomleft', false);"><tt><b>bottomLeft</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bottomleft', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bottom-left point of the rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="bottomright-member" class="member">
+<div id="bottomright-link" class="member-link">
+<a name="bottomright" href="#" onClick="return toggleMember('bottomright', false);"><tt><b>bottomRight</b></tt></a>
+</div>
+<div id="bottomright-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('bottomright', false);"><tt><b>bottomRight</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bottomright', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bottom-right point of the rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="leftcenter-member" class="member">
+<div id="leftcenter-link" class="member-link">
+<a name="leftcenter" href="#" onClick="return toggleMember('leftcenter', false);"><tt><b>leftCenter</b></tt></a>
+</div>
+<div id="leftcenter-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('leftcenter', false);"><tt><b>leftCenter</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('leftcenter', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The left-center point of the rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="topcenter-member" class="member">
+<div id="topcenter-link" class="member-link">
+<a name="topcenter" href="#" onClick="return toggleMember('topcenter', false);"><tt><b>topCenter</b></tt></a>
+</div>
+<div id="topcenter-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('topcenter', false);"><tt><b>topCenter</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('topcenter', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The top-center point of the rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="rightcenter-member" class="member">
+<div id="rightcenter-link" class="member-link">
+<a name="rightcenter" href="#" onClick="return toggleMember('rightcenter', false);"><tt><b>rightCenter</b></tt></a>
+</div>
+<div id="rightcenter-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rightcenter', false);"><tt><b>rightCenter</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rightcenter', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The right-center point of the rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="bottomcenter-member" class="member">
+<div id="bottomcenter-link" class="member-link">
+<a name="bottomcenter" href="#" onClick="return toggleMember('bottomcenter', false);"><tt><b>bottomCenter</b></tt></a>
+</div>
+<div id="bottomcenter-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('bottomcenter', false);"><tt><b>bottomCenter</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bottomcenter', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bottom-center point of the rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="isempty-member" class="member">
+<div id="isempty-link" class="member-link">
+<a name="isempty" href="#" onClick="return toggleMember('isempty', false);"><tt><b>isEmpty</b>()</tt></a>
+</div>
+<div id="isempty-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isempty', false);"><tt><b>isEmpty</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isempty', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the rectangle is empty, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="tostring-member" class="member">
+<div id="tostring-link" class="member-link">
+<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+<div id="tostring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of this rectangle.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<h3>Geometric Tests</h3>
+
+<div id="contains-point-member" class="member">
+<div id="contains-point-link" class="member-link">
+<a name="contains-point" href="#" onClick="return toggleMember('contains-point', false);"><tt><b>contains</b>(point)</tt></a>
+</div>
+<div id="contains-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('contains-point', false);"><tt><b>contains</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('contains-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Tests if the specified point is inside the boundary of the rectangle.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the specified point
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the point is inside the rectangle's boundary, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Checking whether the mouse position falls within the bounding rectangle of an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+// Create a circle shaped path at {x: 80, y: 50}
+// with a radius of 30.
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.fillColor = 'red';
+
+function onMouseMove(event) {
+	// Check whether the mouse position intersects with the
+	// bounding box of the item:
+	if (circle.bounds.contains(event.point)) {
+		// If it intersects, fill it with green:
+		circle.fillColor = 'green';
+	} else {
+		// If it doesn't intersect, fill it with red:
+		circle.fillColor = 'red';
+	}
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="contains-rect-member" class="member">
+<div id="contains-rect-link" class="member-link">
+<a name="contains-rect" href="#" onClick="return toggleMember('contains-rect', false);"><tt><b>contains</b>(rect)</tt></a>
+</div>
+<div id="contains-rect-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('contains-rect', false);"><tt><b>contains</b>(rect)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('contains-rect', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Tests if the interior of the rectangle entirely contains the specified
+rectangle.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rect:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+&mdash;&nbsp;The specified rectangle
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the rectangle entirely contains the specified
+                  rectangle, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Checking whether the bounding box of one item is contained within that of another item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+// All newly created paths will inherit these styles:
+project.currentStyle = {
+	fillColor: 'green',
+	strokeColor: 'black'
+};
+
+// Create a circle shaped path at {x: 80, y: 50}
+// with a radius of 45.
+var largeCircle = new Path.Circle(new Point(80, 50), 45);
+
+// Create a smaller circle shaped path in the same position
+// with a radius of 30.
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+function onMouseMove(event) {
+	// Move the circle to the position of the mouse:
+	circle.position = event.point;
+
+	// Check whether the bounding box of the smaller circle
+	// is contained within the bounding box of the larger item:
+	if (largeCircle.bounds.contains(circle.bounds)) {
+		// If it does, fill it with green:
+		circle.fillColor = 'green';
+		largeCircle.fillColor = 'green';
+	} else {
+		// If doesn't, fill it with red:
+		circle.fillColor = 'red';
+		largeCircle.fillColor = 'red';
+	}
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="intersects-rect-member" class="member">
+<div id="intersects-rect-link" class="member-link">
+<a name="intersects-rect" href="#" onClick="return toggleMember('intersects-rect', false);"><tt><b>intersects</b>(rect)</tt></a>
+</div>
+<div id="intersects-rect-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('intersects-rect', false);"><tt><b>intersects</b>(rect)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('intersects-rect', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Tests if the interior of this rectangle intersects the interior of
+another rectangle.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rect:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+&mdash;&nbsp;the specified rectangle
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the rectangle and the specified rectangle
+                  intersect each other, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Checking whether the bounding box of one item intersects with that of another item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+// All newly created paths will inherit these styles:
+project.currentStyle = {
+	fillColor: 'green',
+	strokeColor: 'black'
+};
+
+// Create a circle shaped path at {x: 80, y: 50}
+// with a radius of 45.
+var largeCircle = new Path.Circle(new Point(80, 50), 45);
+
+// Create a smaller circle shaped path in the same position
+// with a radius of 30.
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+function onMouseMove(event) {
+	// Move the circle to the position of the mouse:
+	circle.position = event.point;
+
+	// Check whether the bounding box of the two circle
+	// shaped paths intersect:
+	if (largeCircle.bounds.intersects(circle.bounds)) {
+		// If it does, fill it with green:
+		circle.fillColor = 'green';
+		largeCircle.fillColor = 'green';
+	} else {
+		// If doesn't, fill it with red:
+		circle.fillColor = 'red';
+		largeCircle.fillColor = 'red';
+	}
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<h3>Boolean Operations</h3>
+
+<div id="intersect-rect-member" class="member">
+<div id="intersect-rect-link" class="member-link">
+<a name="intersect-rect" href="#" onClick="return toggleMember('intersect-rect', false);"><tt><b>intersect</b>(rect)</tt></a>
+</div>
+<div id="intersect-rect-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('intersect-rect', false);"><tt><b>intersect</b>(rect)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('intersect-rect', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a new rectangle representing the intersection of this rectangle
+with the specified rectangle.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rect:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+&mdash;&nbsp;The rectangle to be intersected with this
+                        rectangle
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>&nbsp;&mdash;&nbsp;The largest rectangle contained in both the specified
+                    rectangle and in this rectangle.
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Intersecting two rectangles and visualizing the result using rectangle shaped paths:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+// Create two rectangles that overlap each other
+var size = new Size(50, 50);
+var rectangle1 = new Rectangle(new Point(25, 15), size);
+var rectangle2 = new Rectangle(new Point(50, 40), size);
+
+// The rectangle that represents the intersection of the
+// two rectangles:
+var intersected = rectangle1.intersect(rectangle2);
+
+// To visualize the intersecting of the rectangles, we will
+// create rectangle shaped paths using the Path.Rectangle
+// constructor.
+
+// Have all newly created paths inherit a black stroke:
+project.currentStyle.strokeColor = 'black';
+
+// Create two rectangle shaped paths using the abstract rectangles
+// we created before:
+new Path.Rectangle(rectangle1);
+new Path.Rectangle(rectangle2);
+
+// Create a path that represents the intersected rectangle,
+// and fill it with red:
+var intersectionPath = new Path.Rectangle(intersected);
+intersectionPath.fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+		
+			
+<div id="unite-rect-member" class="member">
+<div id="unite-rect-link" class="member-link">
+<a name="unite-rect" href="#" onClick="return toggleMember('unite-rect', false);"><tt><b>unite</b>(rect)</tt></a>
+</div>
+<div id="unite-rect-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('unite-rect', false);"><tt><b>unite</b>(rect)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('unite-rect', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a new rectangle representing the union of this rectangle with the
+specified rectangle.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rect:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+&mdash;&nbsp;the rectangle to be combined with this rectangle
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Rectangle.html"><tt>Rectangle</tt></a></tt>&nbsp;&mdash;&nbsp;the smallest rectangle containing both the specified
+                    rectangle and this rectangle.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="include-point-member" class="member">
+<div id="include-point-link" class="member-link">
+<a name="include-point" href="#" onClick="return toggleMember('include-point', false);"><tt><b>include</b>(point)</tt></a>
+</div>
+<div id="include-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('include-point', false);"><tt><b>include</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('include-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds a point to this rectangle. The resulting rectangle is the
+smallest rectangle that contains both the original rectangle and the
+specified point.</p>
+<p>After adding a point, a call to <a href="../classes/Rectangle.html#contains-point" onclick="return toggleMember('contains-point', true);"><tt>contains(point)</tt></a> with the added
+point as an argument does not necessarily return <tt>true</tt>.</p>
+<p>The <a href="../classes/Rectangle.html#contains-point"><tt>rectangle.contains(point)</tt></a> method does not return <tt>true</tt>
+for points on the right or bottom edges of a rectangle. Therefore, if the
+added point falls on the left or bottom edge of the enlarged rectangle,
+<a href="../classes/Rectangle.html#contains-point"><tt>rectangle.contains(point)</tt></a> returns <tt>false</tt> for that point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/RgbColor.html b/dist/docs/classes/RgbColor.html
new file mode 100644
index 00000000..a2fcd2cd
--- /dev/null
+++ b/dist/docs/classes/RgbColor.html
@@ -0,0 +1,765 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>RgbColor</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>RgbColor</h1>
+
+<p> Extends <b><a href="../classes/Color.html"><tt>Color</tt></a></b></p>
+
+<p>An RgbColor object is used to represent any RGB color value.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="rgbcolor-red-green-blue-member" class="member">
+<div id="rgbcolor-red-green-blue-link" class="member-link">
+<a name="rgbcolor-red-green-blue" href="#" onClick="return toggleMember('rgbcolor-red-green-blue', false);"><tt><b>RgbColor</b>(red, green, blue[, alpha])</tt></a>
+</div>
+<div id="rgbcolor-red-green-blue-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rgbcolor-red-green-blue', false);"><tt><b>RgbColor</b>(red, green, blue[, alpha])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rgbcolor-red-green-blue', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates an RgbColor object</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>red:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the amount of red in the color as a value
+between <tt>0</tt> and <tt>1</tt>
+
+</li>
+
+<li>
+<tt>green:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the amount of green in the color as a value
+between <tt>0</tt> and <tt>1</tt>
+
+</li>
+
+<li>
+<tt>blue:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the amount of blue in the color as a value
+between <tt>0</tt> and <tt>1</tt>
+
+</li>
+
+<li>
+<tt>alpha:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the alpha of the color as a value between
+<tt>0</tt> and <tt>1</tt>
+&mdash;&nbsp;optional
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> &mdash; Creating an RgbColor:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+// Create a circle shaped path at {x: 80, y: 50}
+// with a radius of 30:
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// 100% red, 0% blue, 50% blue:
+circle.fillColor = new RgbColor(1, 0, 0.5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="red-member" class="member">
+<div id="red-link" class="member-link">
+<a name="red" href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
+</div>
+<div id="red-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('red', false);"><tt><b>red</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('red', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of red in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the amount of red in a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.fillColor = 'blue';
+
+// Blue + red = purple:
+circle.fillColor.red = 1;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="green-member" class="member">
+<div id="green-link" class="member-link">
+<a name="green" href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
+</div>
+<div id="green-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('green', false);"><tt><b>green</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('green', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of green in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the amount of green in a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// First we set the fill color to red:
+circle.fillColor = 'red';
+
+// Red + green = yellow:
+circle.fillColor.green = 1;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="blue-member" class="member">
+<div id="blue-link" class="member-link">
+<a name="blue" href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
+</div>
+<div id="blue-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('blue', false);"><tt><b>blue</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blue', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of blue in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the amount of blue in a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// First we set the fill color to red:
+circle.fillColor = 'red';
+
+// Red + blue = purple:
+circle.fillColor.blue = 1;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
+
+	
+<div id="type-member" class="member">
+<div id="type-link" class="member-link">
+<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
+</div>
+<div id="type-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Returns the type of the color as a string.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('rgb', 'hsb', 'gray')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var color = new RgbColor(1, 0, 0);
+console.log(color.type); // 'rgb'</pre>
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="alpha-member" class="member">
+<div id="alpha-link" class="member-link">
+<a name="alpha" href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
+</div>
+<div id="alpha-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('alpha', false);"><tt><b>alpha</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('alpha', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color's alpha value as a number between <tt>0</tt> and <tt>1</tt>. All
+colors of the different subclasses support alpha values.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A filled path with a half transparent stroke:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+var circle = new Path.Circle(new Point(80, 50), 30);
+
+// Fill the circle with red and give it a 20pt green stroke:
+circle.style = {
+	fillColor: 'red',
+	strokeColor: 'green',
+	strokeWidth: 20
+};
+
+// Make the stroke half transparent:
+circle.strokeColor.alpha = 0.5;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Gray Components</h3>
+
+<div id="gray-member" class="member">
+<div id="gray-link" class="member-link">
+<a name="gray" href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
+</div>
+<div id="gray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('gray', false);"><tt><b>gray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('gray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The amount of gray in the color as a value between <tt>0</tt> and
+<tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>HSB Components</h3>
+
+<div id="hue-member" class="member">
+<div id="hue-link" class="member-link">
+<a name="hue" href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
+</div>
+<div id="hue-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hue', false);"><tt><b>hue</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hue', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The hue of the color as a value in degrees between <tt>0</tt> and
+<tt>360</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the hue of a color:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-5">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.fillColor = 'red';
+circle.fillColor.hue += 30;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Hue cycling:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-6">
+// Create a rectangle shaped path, using the dimensions
+// of the view:
+var path = new Path.Rectangle(view.bounds);
+path.fillColor = 'red';
+
+function onFrame(event) {
+	path.fillColor.hue += 0.5;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="saturation-member" class="member">
+<div id="saturation-link" class="member-link">
+<a name="saturation" href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
+</div>
+<div id="saturation-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('saturation', false);"><tt><b>saturation</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('saturation', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The saturation of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="brightness-member" class="member">
+<div id="brightness-link" class="member-link">
+<a name="brightness" href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
+</div>
+<div id="brightness-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('brightness', false);"><tt><b>brightness</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('brightness', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The brightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>HSL Components</h3>
+
+<div id="lightness-member" class="member">
+<div id="lightness-link" class="member-link">
+<a name="lightness" href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
+</div>
+<div id="lightness-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lightness', false);"><tt><b>lightness</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lightness', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The lightness of the color as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+<!-- =========================== inherited methods ========================= -->
+<div class="reference-members"><h2>Methods inherited from <a href="../classes/Color.html"><tt>Color</tt></a></h2>
+
+	
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a></tt>&nbsp;&mdash;&nbsp;a copy of the color object
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="hasalpha-member" class="member">
+<div id="hasalpha-link" class="member-link">
+<a name="hasalpha" href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
+</div>
+<div id="hasalpha-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hasalpha', false);"><tt><b>hasAlpha</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hasalpha', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the color has an alpha value.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the color has an alpha value, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="equals-color-member" class="member">
+<div id="equals-color-link" class="member-link">
+<a name="equals-color" href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
+</div>
+<div id="equals-color-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('equals-color', false);"><tt><b>equals</b>(color)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals-color', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the component color values of the color are the
+same as those of the supplied one.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>color:</tt> 
+<a href="../classes/Color.html"><tt>Color</tt></a>
+&mdash;&nbsp;the color to compare with
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the colors are the same, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>String Representations</h3>
+
+<div id="tostring-member" class="member">
+<div id="tostring-link" class="member-link">
+<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+<div id="tostring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the color.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="tocssstring-member" class="member">
+<div id="tocssstring-link" class="member-link">
+<a name="tocssstring" href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
+</div>
+<div id="tocssstring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tocssstring', false);"><tt><b>toCssString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tocssstring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A css string representation of the color.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+</div>
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Segment.html b/dist/docs/classes/Segment.html
new file mode 100644
index 00000000..6075d937
--- /dev/null
+++ b/dist/docs/classes/Segment.html
@@ -0,0 +1,544 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Segment</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Segment</h1>
+
+<p>The Segment object represents the points of a path through which its
+<a href="../classes/Curve.html"><tt>Curve</tt></a> objects pass. The segments of a path can be accessed through
+its <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array.</p>
+<p>Each segment consists of an anchor point (<a href="../classes/Segment.html#point"><tt>segment.point</tt></a>) and
+optionaly an incoming and an outgoing handle (<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> and
+<a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>), describing the tangents of the two <a href="../classes/Curve.html"><tt>Curve</tt></a>
+objects that are connected by this segment.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="segment-arg3-arg4-arg5-member" class="member">
+<div id="segment-arg3-arg4-arg5-link" class="member-link">
+<a name="segment-arg3-arg4-arg5" href="#" onClick="return toggleMember('segment-arg3-arg4-arg5', false);"><tt><b>Segment</b>([point[, handleIn[, handleOut, arg3, arg4, arg5]]])</tt></a>
+</div>
+<div id="segment-arg3-arg4-arg5-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('segment-arg3-arg4-arg5', false);"><tt><b>Segment</b>([point[, handleIn[, handleOut, arg3, arg4, arg5]]])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('segment-arg3-arg4-arg5', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a new Segment object.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the anchor point of the segment
+&mdash;&nbsp;optional, default: <tt>{x: 0, y: 0}</tt>
+</li>
+
+<li>
+<tt>handleIn:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the handle point relative to the
+       anchor point of the segment that describes the in tangent of the
+       segment.
+&mdash;&nbsp;optional, default: <tt>{x: 0, y: 0}</tt>
+</li>
+
+<li>
+<tt>handleOut:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the handle point relative to the
+       anchor point of the segment that describes the out tangent of the
+       segment.
+&mdash;&nbsp;optional, default: <tt>{x: 0, y: 0}</tt>
+</li>
+
+<li>
+<tt>arg3:</tt> 
+
+
+
+</li>
+
+<li>
+<tt>arg4:</tt> 
+
+
+
+</li>
+
+<li>
+<tt>arg5:</tt> 
+
+
+
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+var handleIn = new Point(-80, -100);
+var handleOut = new Point(80, 100);
+
+var firstPoint = new Point(100, 50);
+var firstSegment = new Segment(firstPoint, null, handleOut);
+
+var secondPoint = new Point(300, 50);
+var secondSegment = new Segment(secondPoint, handleIn, null);
+
+var path = new Path(firstSegment, secondSegment);
+path.strokeColor = 'black';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="point-member" class="member">
+<div id="point-link" class="member-link">
+<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
+</div>
+<div id="point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The anchor point of the segment.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="handlein-member" class="member">
+<div id="handlein-link" class="member-link">
+<a name="handlein" href="#" onClick="return toggleMember('handlein', false);"><tt><b>handleIn</b></tt></a>
+</div>
+<div id="handlein-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('handlein', false);"><tt><b>handleIn</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlein', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The handle point relative to the anchor point of the segment that
+describes the in tangent of the segment.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="handleout-member" class="member">
+<div id="handleout-link" class="member-link">
+<a name="handleout" href="#" onClick="return toggleMember('handleout', false);"><tt><b>handleOut</b></tt></a>
+</div>
+<div id="handleout-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('handleout', false);"><tt><b>handleOut</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handleout', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The handle point relative to the anchor point of the segment that
+describes the out tangent of the segment.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="selected-member" class="member">
+<div id="selected-link" class="member-link">
+<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+<div id="selected-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the <a href="../classes/Segment.html#point" onclick="return toggleMember('point', true);"><tt>point</tt></a> of the segment is selected.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Hierarchy</h3>
+
+<div id="index-member" class="member">
+<div id="index-link" class="member-link">
+<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+<div id="index-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The index of the segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the
+segment belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="path-member" class="member">
+<div id="path-link" class="member-link">
+<a name="path" href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
+</div>
+<div id="path-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('path', false);"><tt><b>path</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('path', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The path that the segment belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Path.html"><tt>Path</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="curve-member" class="member">
+<div id="curve-link" class="member-link">
+<a name="curve" href="#" onClick="return toggleMember('curve', false);"><tt><b>curve</b></tt></a>
+</div>
+<div id="curve-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('curve', false);"><tt><b>curve</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('curve', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The curve that the segment belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Curve.html"><tt>Curve</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Sibling Segments</h3>
+
+<div id="next-member" class="member">
+<div id="next-link" class="member-link">
+<a name="next" href="#" onClick="return toggleMember('next', false);"><tt><b>next</b></tt></a>
+</div>
+<div id="next-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('next', false);"><tt><b>next</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('next', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The next segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the segment
+belongs to. If the segments belongs to a closed path, the first segment
+is returned for the last segment of the path.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Segment.html"><tt>Segment</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="previous-member" class="member">
+<div id="previous-link" class="member-link">
+<a name="previous" href="#" onClick="return toggleMember('previous', false);"><tt><b>previous</b></tt></a>
+</div>
+<div id="previous-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('previous', false);"><tt><b>previous</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previous', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The previous segment in the <a href="../classes/Path.html#segments"><tt>path.segments</tt></a> array that the
+segment belongs to. If the segments belongs to a closed path, the last
+segment is returned for the first segment of the path.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Segment.html"><tt>Segment</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="reverse-member" class="member">
+<div id="reverse-link" class="member-link">
+<a name="reverse" href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
+</div>
+<div id="reverse-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('reverse', false);"><tt><b>reverse</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reverse', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns the reversed the segment, without modifying the segment itself.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Segment.html"><tt>Segment</tt></a></tt>&nbsp;&mdash;&nbsp;the reversed segment
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="remove-member" class="member">
+<div id="remove-link" class="member-link">
+<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+<div id="remove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the segment from the path that it belongs to.</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="tostring-member" class="member">
+<div id="tostring-link" class="member-link">
+<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+<div id="tostring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the segment.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Size.html b/dist/docs/classes/Size.html
new file mode 100644
index 00000000..30c692d1
--- /dev/null
+++ b/dist/docs/classes/Size.html
@@ -0,0 +1,1247 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Size</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Size</h1>
+
+<p>The Size object is used to describe the size of something, through
+its <a href="../classes/Size.html#width" onclick="return toggleMember('width', true);"><tt>width</tt></a> and <a href="../classes/Size.html#height" onclick="return toggleMember('height', true);"><tt>height</tt></a> properties.</p>
+<p>
+<b>Example</b> &mdash; Create a size that is 10pt wide and 5pt high
+</p>
+
+
+<pre class="code">var size = new Size(10, 5);
+console.log(size.width); // 10
+console.log(size.height); // 5</pre>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="size-width-height-array-member" class="member">
+<div id="size-width-height-array-link" class="member-link">
+<a name="size-width-height-array" href="#" onClick="return toggleMember('size-width-height-array', false);"><tt><b>Size</b>(width, height, array)</tt></a>
+</div>
+<div id="size-width-height-array-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('size-width-height-array', false);"><tt><b>Size</b>(width, height, array)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('size-width-height-array', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a Size object with the given width and height values.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>width:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the width
+
+</li>
+
+<li>
+<tt>height:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the height
+
+</li>
+
+<li>
+<tt>array:</tt> 
+<tt>array</tt>
+
+
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> &mdash; Create a size that is 10pt wide and 5pt high
+</p>
+
+
+<pre class="code">var size = new Size(10, 5);
+console.log(size.width); // 10
+console.log(size.height); // 5
+
+	/**
+Creates a Size object using the numbers in the given array as
+dimensions.</pre>
+
+<p>
+<b>Example</b> &mdash; Creating a size of width: 320, height: 240 using an array of numbers:
+</p>
+
+
+<pre class="code">var array = [320, 240];
+var size = new Size(array);
+console.log(size.width); // 320
+console.log(size.height); // 240</pre>
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="size-object-member" class="member">
+<div id="size-object-link" class="member-link">
+<a name="size-object" href="#" onClick="return toggleMember('size-object', false);"><tt><b>Size</b>(object)</tt></a>
+</div>
+<div id="size-object-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('size-object', false);"><tt><b>Size</b>(object)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('size-object', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a Size object using the properties in the given object.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>object:</tt> 
+<tt>object</tt>
+
+
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> &mdash; Creating a size of width: 10, height: 20 using an object literal:
+</p>
+
+
+<pre class="code">var size = new Size({
+	width: 10,
+	height: 20
+});
+console.log(size.width); // 10
+console.log(size.height); // 20</pre>
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="size-size-member" class="member">
+<div id="size-size-link" class="member-link">
+<a name="size-size" href="#" onClick="return toggleMember('size-size', false);"><tt><b>Size</b>(size)</tt></a>
+</div>
+<div id="size-size-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('size-size', false);"><tt><b>Size</b>(size)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('size-size', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a Size object using the coordinates of the given Size object.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>size:</tt> 
+<a href="../classes/Size.html"><tt>Size</tt></a>
+
+
+</li>
+
+</ul>
+
+
+
+
+</div>
+</div>
+</div>
+	
+		
+<div id="size-point-member" class="member">
+<div id="size-point-link" class="member-link">
+<a name="size-point" href="#" onClick="return toggleMember('size-point', false);"><tt><b>Size</b>(point)</tt></a>
+</div>
+<div id="size-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('size-point', false);"><tt><b>Size</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('size-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a Size object using the <a href="../classes/Point.html#x"><tt>point.x</tt></a> and <a href="../classes/Point.html#y"><tt>point.y</tt></a>
+values of the given Point object.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var point = new Point(50, 50);
+var size = new Size(point);
+console.log(size.width); // 50
+console.log(size.height); // 50</pre>
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+<!-- ============================== properties ========================= -->
+	<div class="reference-members"><h2>Operators</h2>
+		
+			<div id="add-member" class="member">
+<div id="add-link" class="member-link">
+<a name="add" href="#" onClick="return toggleMember('add', false);"><tt><tt><b>+</b> Number</tt>, <tt><b>+</b> Size</tt></tt></a>
+</div>
+<div id="add-description" class="member-description hidden">
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('add', false);"><tt><b>+</b> Number</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('add', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Returns the addition of the supplied value to the width and height of the
+size as a new size. The object itself is not modified!</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the addition of the size and the value as a new size
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var size = new Size(5, 10);
+var result = size + 20;
+console.log(result); // {width: 25, height: 30}</pre>
+
+	</div>
+
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('add', false);"><tt><b>+</b> Size</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('add', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Returns the addition of the width and height of the supplied size to the
+size as a new size. The object itself is not modified!</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the addition of the two sizes as a new size
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var size1 = new Size(5, 10);
+var size2 = new Size(10, 20);
+var result = size1 + size2;
+console.log(result); // {width: 15, height: 30}</pre>
+
+	</div>
+
+
+</div>
+</div>
+
+		
+			<div id="subtract-member" class="member">
+<div id="subtract-link" class="member-link">
+<a name="subtract" href="#" onClick="return toggleMember('subtract', false);"><tt><tt><b>-</b> Number</tt>, <tt><b>-</b> Size</tt></tt></a>
+</div>
+<div id="subtract-description" class="member-description hidden">
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('subtract', false);"><tt><b>-</b> Number</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('subtract', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Returns the subtraction of the supplied value from the width and height
+of the size as a new size. The object itself is not modified!</p>
+<p>The object itself is not modified!</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the subtraction of the size and the value as a new size
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var size = new Size(10, 20);
+var result = size - 5;
+console.log(result); // {width: 5, height: 15}</pre>
+
+	</div>
+
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('subtract', false);"><tt><b>-</b> Size</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('subtract', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Returns the subtraction of the width and height of the supplied size from
+the size as a new size. The object itself is not modified!</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the subtraction of the two sizes as a new size
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var firstSize = new Size(10, 20);
+var secondSize = new Size(5, 5);
+var result = firstSize - secondSize;
+console.log(result); // {width: 5, height: 15}</pre>
+
+	</div>
+
+
+</div>
+</div>
+
+		
+			<div id="multiply-member" class="member">
+<div id="multiply-link" class="member-link">
+<a name="multiply" href="#" onClick="return toggleMember('multiply', false);"><tt><tt><b>*</b> Number</tt>, <tt><b>*</b> Size</tt></tt></a>
+</div>
+<div id="multiply-description" class="member-description hidden">
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('multiply', false);"><tt><b>*</b> Number</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('multiply', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Returns the multiplication of the supplied value with the width and
+height of the size as a new size. The object itself is not modified!</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the multiplication of the size and the value as a new size
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var size = new Size(10, 20);
+var result = size * 2;
+console.log(result); // {width: 20, height: 40}</pre>
+
+	</div>
+
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('multiply', false);"><tt><b>*</b> Size</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('multiply', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Returns the multiplication of the width and height of the supplied size
+with the size as a new size. The object itself is not modified!</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the multiplication of the two sizes as a new size
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var firstSize = new Size(5, 10);
+var secondSize = new Size(4, 2);
+var result = firstSize * secondSize;
+console.log(result); // {width: 20, height: 20}</pre>
+
+	</div>
+
+
+</div>
+</div>
+
+		
+			<div id="divide-member" class="member">
+<div id="divide-link" class="member-link">
+<a name="divide" href="#" onClick="return toggleMember('divide', false);"><tt><tt><b>/</b> Number</tt>, <tt><b>/</b> Size</tt></tt></a>
+</div>
+<div id="divide-description" class="member-description hidden">
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('divide', false);"><tt><b>/</b> Number</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('divide', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Returns the division of the supplied value by the width and height of the
+size as a new size. The object itself is not modified!</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the division of the size and the value as a new size
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var size = new Size(10, 20);
+var result = size / 2;
+console.log(result); // {width: 5, height: 10}</pre>
+
+	</div>
+
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('divide', false);"><tt><b>/</b> Size</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('divide', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Returns the division of the width and height of the supplied size by the
+size as a new size. The object itself is not modified!</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the division of the two sizes as a new size
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var firstSize = new Size(8, 10);
+var secondSize = new Size(2, 5);
+var result = firstSize / secondSize;
+console.log(result); // {width: 4, height: 2}</pre>
+
+	</div>
+
+
+</div>
+</div>
+
+		
+			<div id="modulo-member" class="member">
+<div id="modulo-link" class="member-link">
+<a name="modulo" href="#" onClick="return toggleMember('modulo', false);"><tt><tt><b>%</b> Number</tt>, <tt><b>%</b> Size</tt></tt></a>
+</div>
+<div id="modulo-description" class="member-description hidden">
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('modulo', false);"><tt><b>%</b> Number</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modulo', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>The modulo operator returns the integer remainders of dividing the size
+by the supplied value as a new size.</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the integer remainders of dividing the size by the value
+                as a new size
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var size = new Size(12, 6);
+console.log(size % 5); // {width: 2, height: 1}</pre>
+
+	</div>
+
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('modulo', false);"><tt><b>%</b> Size</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modulo', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>The modulo operator returns the integer remainders of dividing the size
+by the supplied size as a new size.</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;the integer remainders of dividing the sizes by each
+                other as a new size
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var size = new Size(12, 6);
+console.log(size % new Size(5, 2)); // {width: 2, height: 0}</pre>
+
+	</div>
+
+
+</div>
+</div>
+
+		
+			<div id="equals-member" class="member">
+<div id="equals-link" class="member-link">
+<a name="equals" href="#" onClick="return toggleMember('equals', false);"><tt><tt><b>==</b> Size</tt></tt></a>
+</div>
+<div id="equals-description" class="member-description hidden">
+
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('equals', false);"><tt><b>==</b> Size</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('equals', false);"></div>
+<div class="clear"></div>
+</div>
+
+	<div class="member-text">
+		<p>Checks whether the width and height of the size are equal to those of the
+supplied size.</p>
+		
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>
+</li>
+	
+	</ul>
+
+		
+		<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var size = new Size(5, 10);
+console.log(size == new Size(5, 10)); // true
+console.log(size == new Size(1, 1)); // false
+console.log(size != new Size(1, 1)); // true</pre>
+
+	</div>
+
+
+</div>
+</div>
+
+		
+	</div>
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="width-member" class="member">
+<div id="width-link" class="member-link">
+<a name="width" href="#" onClick="return toggleMember('width', false);"><tt><b>width</b></tt></a>
+</div>
+<div id="width-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('width', false);"><tt><b>width</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('width', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The width of the size</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="height-member" class="member">
+<div id="height-link" class="member-link">
+<a name="height" href="#" onClick="return toggleMember('height', false);"><tt><b>height</b></tt></a>
+</div>
+<div id="height-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('height', false);"><tt><b>height</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('height', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The height of the size</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="tostring-member" class="member">
+<div id="tostring-link" class="member-link">
+<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+<div id="tostring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the size.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a copy of the size.</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<h3>Tests</h3>
+
+<div id="iszero-member" class="member">
+<div id="iszero-link" class="member-link">
+<a name="iszero" href="#" onClick="return toggleMember('iszero', false);"><tt><b>isZero</b>()</tt></a>
+</div>
+<div id="iszero-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('iszero', false);"><tt><b>isZero</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('iszero', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if this size has both the width and height set to 0.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> both width and height are 0, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="isnan-member" class="member">
+<div id="isnan-link" class="member-link">
+<a name="isnan" href="#" onClick="return toggleMember('isnan', false);"><tt><b>isNaN</b>()</tt></a>
+</div>
+<div id="isnan-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isnan', false);"><tt><b>isNaN</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isnan', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the width or the height of the size are NaN.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the width or height of the size are NaN, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<h3>Math Functions</h3>
+
+<div id="round-member" class="member">
+<div id="round-link" class="member-link">
+<a name="round" href="#" onClick="return toggleMember('round', false);"><tt><b>round</b>()</tt></a>
+</div>
+<div id="round-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('round', false);"><tt><b>round</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('round', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a new size with rounded <a href="../classes/Size.html#width" onclick="return toggleMember('width', true);"><tt>width</tt></a> and <a href="../classes/Size.html#height" onclick="return toggleMember('height', true);"><tt>height</tt></a> values.</p>
+<p>The object itself is not modified!</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var size = new Size(10.2, 10.9);
+var roundSize = size.round();
+console.log(roundSize); // {x: 10, y: 11}</pre>
+
+</div>
+</div>
+</div>
+		
+			
+<div id="ceil-member" class="member">
+<div id="ceil-link" class="member-link">
+<a name="ceil" href="#" onClick="return toggleMember('ceil', false);"><tt><b>ceil</b>()</tt></a>
+</div>
+<div id="ceil-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('ceil', false);"><tt><b>ceil</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ceil', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a new size with the nearest greater non-fractional values to the
+specified <a href="../classes/Size.html#width" onclick="return toggleMember('width', true);"><tt>width</tt></a> and <a href="../classes/Size.html#height" onclick="return toggleMember('height', true);"><tt>height</tt></a> values. The object itself is not
+modified!</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var size = new Size(10.2, 10.9);
+var ceilSize = size.ceil();
+console.log(ceilSize); // {x: 11, y: 11}</pre>
+
+</div>
+</div>
+</div>
+		
+			
+<div id="floor-member" class="member">
+<div id="floor-link" class="member-link">
+<a name="floor" href="#" onClick="return toggleMember('floor', false);"><tt><b>floor</b>()</tt></a>
+</div>
+<div id="floor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('floor', false);"><tt><b>floor</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('floor', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a new size with the nearest smaller non-fractional values to the
+specified <a href="../classes/Size.html#width" onclick="return toggleMember('width', true);"><tt>width</tt></a> and <a href="../classes/Size.html#height" onclick="return toggleMember('height', true);"><tt>height</tt></a> values. The object itself is not
+modified!</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var size = new Size(10.2, 10.9);
+var floorSize = size.floor();
+console.log(floorSize); // {x: 10, y: 10}</pre>
+
+</div>
+</div>
+</div>
+		
+			
+<div id="abs-member" class="member">
+<div id="abs-link" class="member-link">
+<a name="abs" href="#" onClick="return toggleMember('abs', false);"><tt><b>abs</b>()</tt></a>
+</div>
+<div id="abs-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('abs', false);"><tt><b>abs</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('abs', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a new size with the absolute values of the specified <a href="../classes/Size.html#width" onclick="return toggleMember('width', true);"><tt>width</tt></a>
+and <a href="../classes/Size.html#height" onclick="return toggleMember('height', true);"><tt>height</tt></a> values. The object itself is not modified!</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var size = new Size(-5, 10);
+var absSize = size.abs();
+console.log(absSize); // {x: 5, y: 10}</pre>
+
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+	<div class="reference-members"><h2>Static Methods</h2>
+		
+			
+<div id="min-size1-size2-member" class="member">
+<div id="min-size1-size2-link" class="member-link">
+<a name="min-size1-size2" href="#" onClick="return toggleMember('min-size1-size2', false);"><tt><b>Size.min</b>(size1, size2)</tt></a>
+</div>
+<div id="min-size1-size2-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('min-size1-size2', false);"><tt><b>Size.min</b>(size1, size2)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('min-size1-size2', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a new size object with the smallest <a href="../classes/Size.html#width" onclick="return toggleMember('width', true);"><tt>width</tt></a> and
+<a href="../classes/Size.html#height" onclick="return toggleMember('height', true);"><tt>height</tt></a> of the supplied sizes.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>size1:</tt> 
+<a href="../classes/Size.html"><tt>Size</tt></a>
+
+
+</li>
+
+<li>
+<tt>size2:</tt> 
+<a href="../classes/Size.html"><tt>Size</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;The newly created size object
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var size1 = new Size(10, 100);
+var size2 = new Size(200, 5);
+var minSize = Size.min(size1, size2);
+console.log(minSize); // {width: 10, height: 5}</pre>
+
+</div>
+</div>
+</div>
+		
+			
+<div id="max-size1-size2-member" class="member">
+<div id="max-size1-size2-link" class="member-link">
+<a name="max-size1-size2" href="#" onClick="return toggleMember('max-size1-size2', false);"><tt><b>Size.max</b>(size1, size2)</tt></a>
+</div>
+<div id="max-size1-size2-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('max-size1-size2', false);"><tt><b>Size.max</b>(size1, size2)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('max-size1-size2', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a new size object with the largest <a href="../classes/Size.html#width" onclick="return toggleMember('width', true);"><tt>width</tt></a> and
+<a href="../classes/Size.html#height" onclick="return toggleMember('height', true);"><tt>height</tt></a> of the supplied sizes.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>size1:</tt> 
+<a href="../classes/Size.html"><tt>Size</tt></a>
+
+
+</li>
+
+<li>
+<tt>size2:</tt> 
+<a href="../classes/Size.html"><tt>Size</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;The newly created size object
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var size1 = new Size(10, 100);
+var size2 = new Size(200, 5);
+var maxSize = Size.max(size1, size2);
+console.log(maxSize); // {width: 200, height: 100}</pre>
+
+</div>
+</div>
+</div>
+		
+			
+<div id="random-member" class="member">
+<div id="random-link" class="member-link">
+<a name="random" href="#" onClick="return toggleMember('random', false);"><tt><b>Size.random</b>()</tt></a>
+</div>
+<div id="random-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('random', false);"><tt><b>Size.random</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('random', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a size object with random <a href="../classes/Size.html#width" onclick="return toggleMember('width', true);"><tt>width</tt></a> and <a href="../classes/Size.html#height" onclick="return toggleMember('height', true);"><tt>height</tt></a>
+values between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Size.html"><tt>Size</tt></a></tt>&nbsp;&mdash;&nbsp;The newly created size object
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var maxSize = new Size(100, 100);
+var randomSize = Size.random();
+var size = maxSize * randomSize;</pre>
+
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Symbol.html b/dist/docs/classes/Symbol.html
new file mode 100644
index 00000000..1da24cec
--- /dev/null
+++ b/dist/docs/classes/Symbol.html
@@ -0,0 +1,271 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Symbol</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Symbol</h1>
+
+<p>Symbols allow you to place multiple instances of an item in your
+project. This can save memory, since all instances of a symbol simply refer
+to the original item and it can speed up moving around complex objects, since
+internal properties such as segment lists and gradient positions don't need
+to be updated with every transformation.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="symbol-item-member" class="member">
+<div id="symbol-item-link" class="member-link">
+<a name="symbol-item" href="#" onClick="return toggleMember('symbol-item', false);"><tt><b>Symbol</b>(item)</tt></a>
+</div>
+<div id="symbol-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('symbol-item', false);"><tt><b>Symbol</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('symbol-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a Symbol item.</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the source item which is copied as the definition of
+              the symbol
+
+</li>
+
+</ul>
+
+
+<p>
+<b>Example</b> &mdash; Placing 100 instances of a symbol:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+var path = new Path.Star(new Point(0, 0), 6, 5, 13);
+path.style = {
+    fillColor: 'white',
+    strokeColor: 'black'
+};
+
+// Create a symbol from the path:
+var symbol = new Symbol(path);
+
+// Remove the path:
+path.remove();
+
+// Place 100 instances of the symbol:
+for (var i = 0; i < 100; i++) {
+    // Place an instance of the symbol in the project:
+    var instance = symbol.place();
+
+    // Move the instance to a random position within the view:
+    instance.position = Point.random() * view.size;
+
+    // Rotate the instance by a random amount between
+    // 0 and 360 degrees:
+    instance.rotate(Math.random() * 360);
+
+    // Scale the instance between 0.25 and 1:
+    instance.scale(0.25 + Math.random() * 0.75);
+}
+</script>
+<div class="canvas"><canvas width="516" height="240" id="canvas-0"></canvas></div>
+</div>
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="project-member" class="member">
+<div id="project-link" class="member-link">
+<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+<div id="project-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The project that this symbol belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Project.html"><tt>Project</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="definition-member" class="member">
+<div id="definition-link" class="member-link">
+<a name="definition" href="#" onClick="return toggleMember('definition', false);"><tt><b>definition</b></tt></a>
+</div>
+<div id="definition-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('definition', false);"><tt><b>definition</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('definition', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The symbol definition.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="place-member" class="member">
+<div id="place-link" class="member-link">
+<a name="place" href="#" onClick="return toggleMember('place', false);"><tt><b>place</b>([position])</tt></a>
+</div>
+<div id="place-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('place', false);"><tt><b>place</b>([position])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('place', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Places in instance of the symbol in the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>position:</tt> 
+
+&mdash;&nbsp;The position of the placed symbol.
+&mdash;&nbsp;optional
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/PlacedSymbol.html"><tt>PlacedSymbol</tt></a></tt>
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Returns a copy of the symbol.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Symbol.html"><tt>Symbol</tt></a></tt>
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/TextItem.html b/dist/docs/classes/TextItem.html
new file mode 100644
index 00000000..9654093b
--- /dev/null
+++ b/dist/docs/classes/TextItem.html
@@ -0,0 +1,3600 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>TextItem</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>TextItem</h1>
+
+<p> Extends <b><a href="../classes/Item.html"><tt>Item</tt></a></b></p>
+
+<p>The TextItem type allows you to create typography. Its
+functionality is inherited by different text item types such as
+<a href="../classes/PointText.html"><tt>PointText</tt></a>, and <tt>AreaText</tt> (coming soon). They each add a
+layer of functionality that is unique to their type, but share the
+underlying properties and functions that they inherit from TextItem.</p>
+
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="content-member" class="member">
+<div id="content-link" class="member-link">
+<a name="content" href="#" onClick="return toggleMember('content', false);"><tt><b>content</b></tt></a>
+</div>
+<div id="content-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('content', false);"><tt><b>content</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('content', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The text contents of the text item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the content of a PointText item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+// Create a point-text item at {x: 30, y: 30}:
+var text = new PointText(new Point(30, 30));
+text.fillColor = 'black';
+
+// Set the content of the text item:
+text.content = 'Hello world';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Interactive example, move your mouse over the view below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+// Create a point-text item at {x: 30, y: 30}:
+var text = new PointText(new Point(30, 30));
+text.fillColor = 'black';
+
+text.content = 'Move your mouse over the view, to see its position';
+
+function onMouseMove(event) {
+	// Each time the mouse is moved, set the content of
+	// the point text to describe the position of the mouse:
+	text.content = 'Your position is: ' + event.point.toString();
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Style Properties</h3>
+
+<div id="characterstyle-member" class="member">
+<div id="characterstyle-link" class="member-link">
+<a name="characterstyle" href="#" onClick="return toggleMember('characterstyle', false);"><tt><b>characterStyle</b></tt></a>
+</div>
+<div id="characterstyle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('characterstyle', false);"><tt><b>characterStyle</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('characterstyle', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The character style of the text item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/CharacterStyle.html"><tt>CharacterStyle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="paragraphstyle-member" class="member">
+<div id="paragraphstyle-link" class="member-link">
+<a name="paragraphstyle" href="#" onClick="return toggleMember('paragraphstyle', false);"><tt><b>paragraphStyle</b></tt></a>
+</div>
+<div id="paragraphstyle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('paragraphstyle', false);"><tt><b>paragraphStyle</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('paragraphstyle', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The paragraph style of the text item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/ParagraphStyle.html"><tt>ParagraphStyle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="id-member" class="member">
+<div id="id-link" class="member-link">
+<a name="id" href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+<div id="id-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('id', false);"><tt><b>id</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('id', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The unique id of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="name-member" class="member">
+<div id="name-link" class="member-link">
+<a name="name" href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+<div id="name-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('name', false);"><tt><b>name</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('name', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The name of the item. If the item has a name, it can be accessed by name
+through its parent's children list.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and add path to it as a child:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="position-member" class="member">
+<div id="position-link" class="member-link">
+<a name="position" href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+<div id="position-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('position', false);"><tt><b>position</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('position', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item's position within the project. This is the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the item's <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> rectangle.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Changing the position of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+// Create a circle at position { x: 10, y: 10 }
+var circle = new Path.Circle(new Point(10, 10), 10);
+circle.fillColor = 'red';
+
+// Move the circle to { x: 20, y: 20 }
+circle.position = new Point(20, 20);
+
+// Move the circle 100 points to the right and 50 points down
+circle.position += new Point(100, 50);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Changing the x coordinate of an item's position:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+// Create a circle at position { x: 20, y: 20 }
+var circle = new Path.Circle(new Point(20, 20), 10);
+circle.fillColor = 'red';
+
+// Move the circle 100 points to the right
+circle.position.x += 100;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="style-member" class="member">
+<div id="style-link" class="member-link">
+<a name="style" href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+<div id="style-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('style', false);"><tt><b>style</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('style', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The path style of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/PathStyle.html"><tt>PathStyle</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Applying several styles to an item in one go, by passing an object to its style property:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-5">
+var circle = new Path.Circle(new Point(80, 50), 30);
+circle.style = {
+	fillColor: 'blue',
+	strokeColor: 'red',
+	strokeWidth: 5
+};
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-5"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Copying the style of another item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-6">
+var path = new Path.Circle(new Point(50, 50), 30);
+path.fillColor = 'red';
+
+var path2 = new Path.Circle(new Point(180, 50), 20);
+// Copy the path style of path:
+path2.style = path.style;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-6"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Applying the same style object to multiple items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-7">
+var myStyle = {
+	fillColor: 'red',
+	strokeColor: 'blue',
+	strokeWidth: 4
+};
+
+var path = new Path.Circle(new Point(80, 50), 30);
+path.style = myStyle;
+
+var path2 = new Path.Circle(new Point(150, 50), 20);
+path2.style = myStyle;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-7"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="visible-member" class="member">
+<div id="visible-link" class="member-link">
+<a name="visible" href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+<div id="visible-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('visible', false);"><tt><b>visible</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('visible', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item is visible. When set to <tt>false</tt>, the
+item won't be drawn.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>true</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Hiding an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-8">
+var path = new Path.Circle(new Point(50, 50), 20);
+path.fillColor = 'red';
+
+// Hide the path:
+path.visible = false;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-8"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="blendmode-member" class="member">
+<div id="blendmode-link" class="member-link">
+<a name="blendmode" href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+<div id="blendmode-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('blendmode', false);"><tt><b>blendMode</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('blendmode', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The blend mode of the item.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'normal'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('normal', 'multiply', 'screen', 'overlay', 'soft-light',
+'hard-light', 'color-dodge', 'color-burn', 'darken', 'lighten',
+'difference', 'exclusion', 'hue', 'saturation', 'luminosity', 'color',
+'add', 'subtract', 'average', 'pin-light', 'negation')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's blend mode:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-9">
+// Create a white rectangle in the background
+// with the same dimensions as the view:
+var background = new Path.Rectangle(view.bounds);
+background.fillColor = 'white';
+
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.fillColor = 'blue';
+
+// Set the blend mode of circle2:
+circle2.blendMode = 'multiply';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-9"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="opacity-member" class="member">
+<div id="opacity-link" class="member-link">
+<a name="opacity" href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+<div id="opacity-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('opacity', false);"><tt><b>opacity</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('opacity', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The opacity of the item as a value between <tt>0</tt> and <tt>1</tt>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Making an item 50% transparent:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-10">
+var circle = new Path.Circle(new Point(80, 50), 35);
+circle.fillColor = 'red';
+
+var circle2 = new Path.Circle(new Point(120, 50), 35);
+circle2.style = {
+	fillColor: 'blue',
+	strokeColor: 'green',
+	strokeWidth: 10
+};
+
+// Make circle2 50% transparent:
+circle2.opacity = 0.5;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-10"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="guide-member" class="member">
+<div id="guide-link" class="member-link">
+<a name="guide" href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+<div id="guide-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('guide', false);"><tt><b>guide</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('guide', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item functions as a guide. When set to
+<tt>true</tt>, the item will be drawn at the end as a guide.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>1</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="selected-member" class="member">
+<div id="selected-link" class="member-link">
+<a name="selected" href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+<div id="selected-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('selected', false);"><tt><b>selected</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('selected', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether an item is selected and will also return <tt>true</tt>
+if the item is partially selected (groups with some selected or partially
+selected paths).</p>
+<p>Paper.js draws the visual outlines of selected items on top of your
+project. This can be useful for debugging, as it allows you to see the
+construction of paths, position of path curves, individual segment points
+and bounding boxes of symbol and raster items.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Project.html#selecteditems"><tt>project.selectedItems</tt></a></tt>, <tt><a href="../classes/Segment.html#selected"><tt>segment.selected</tt></a></tt>, <tt><a href="../classes/Point.html#selected"><tt>point.selected</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Selecting an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-11">
+var path = new Path.Circle(new Size(80, 50), 35);
+path.selected = true; // Select the path
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-11"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="clipmask-member" class="member">
+<div id="clipmask-link" class="member-link">
+<a name="clipmask" href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+<div id="clipmask-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clipmask', false);"><tt><b>clipMask</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clipmask', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies whether the item defines a clip mask. This can only be set on
+paths, compound paths, and text frame objects, and only if the item is
+already contained within a clipping group.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Boolean</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Project Hierarchy</h3>
+
+<div id="project-member" class="member">
+<div id="project-link" class="member-link">
+<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+<div id="project-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The project that this item belongs to.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Project.html"><tt>Project</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="layer-member" class="member">
+<div id="layer-link" class="member-link">
+<a name="layer" href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+<div id="layer-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('layer', false);"><tt><b>layer</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('layer', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The layer that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Layer.html"><tt>Layer</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="parent-member" class="member">
+<div id="parent-link" class="member-link">
+<a name="parent" href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+<div id="parent-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('parent', false);"><tt><b>parent</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('parent', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item that this item is contained within.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var path = new Path();
+
+// New items are placed in the active layer:
+console.log(path.parent == project.activeLayer); // true
+
+var group = new Group();
+group.addChild(path);
+
+// Now the parent of the path has become the group:
+console.log(path.parent == group); // true</pre>
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="children-member" class="member">
+<div id="children-link" class="member-link">
+<a name="children" href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+<div id="children-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('children', false);"><tt><b>children</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('children', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The children items contained within this item. Items that define a
+<a href="../classes/Item.html#name" onclick="return toggleMember('name', true);"><tt>name</tt></a> can also be accessed by name.</p>
+<p><b>Please note:</b> The children array should not be modified directly
+using array functions. To remove single items from the children list, use
+<a href="../classes/Item.html#remove"><tt>item.remove</tt></a>(), to remove all items from the children list, use
+<a href="../classes/Item.html#removechildren"><tt>item.removeChildren</tt></a>(). To add items to the children list, use
+<a href="../classes/Item.html#addchild-item"><tt>item.addChild(item)</tt></a> or <a href="../classes/Item.html#insertchild-index-item"><tt>item.insertChild(index, item)</tt></a>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Accessing items in the children array:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-12">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// Access the path through the group's children array:
+group.children[0].fillColor = 'red';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-12"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Accessing children by name:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-13">
+var path = new Path.Circle(new Point(80, 50), 35);
+// Set the name of the path:
+path.name = 'example';
+
+// Create a group and move the path into it:
+var group = new Group();
+group.addChild(path);
+
+// The path can be accessed by name:
+group.children['example'].fillColor = 'orange';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-13"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Passing an array of items to item.children:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-14">
+var path = new Path.Circle(new Point(80, 50), 35);
+
+var group = new Group();
+group.children = [path];
+
+// The path is the first child of the group:
+group.firstChild.fillColor = 'green';
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-14"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="firstchild-member" class="member">
+<div id="firstchild-link" class="member-link">
+<a name="firstchild" href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+<div id="firstchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('firstchild', false);"><tt><b>firstChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('firstchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The first item contained within this item. This is a shortcut for
+accessing <tt>item.children[0]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="lastchild-member" class="member">
+<div id="lastchild-link" class="member-link">
+<a name="lastchild" href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+<div id="lastchild-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lastchild', false);"><tt><b>lastChild</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastchild', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The last item contained within this item.This is a shortcut for
+accessing <tt>item.children[item.children.length - 1]</tt>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="nextsibling-member" class="member">
+<div id="nextsibling-link" class="member-link">
+<a name="nextsibling" href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+<div id="nextsibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('nextsibling', false);"><tt><b>nextSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('nextsibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The next item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="previoussibling-member" class="member">
+<div id="previoussibling-link" class="member-link">
+<a name="previoussibling" href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+<div id="previoussibling-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('previoussibling', false);"><tt><b>previousSibling</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('previoussibling', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The previous item on the same level as this item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="index-member" class="member">
+<div id="index-link" class="member-link">
+<a name="index" href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+<div id="index-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('index', false);"><tt><b>index</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('index', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The index of this item within the list of its parent's children.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Bounding Rectangles</h3>
+
+<div id="bounds-member" class="member">
+<div id="bounds-link" class="member-link">
+<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+<div id="bounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item excluding stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokebounds-member" class="member">
+<div id="strokebounds-link" class="member-link">
+<a name="strokebounds" href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+<div id="strokebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokebounds', false);"><tt><b>strokeBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including stroke width.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="handlebounds-member" class="member">
+<div id="handlebounds-link" class="member-link">
+<a name="handlebounds" href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+<div id="handlebounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('handlebounds', false);"><tt><b>handleBounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('handlebounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounding rectangle of the item including handles.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Stroke Style</h3>
+
+<div id="strokecolor-member" class="member">
+<div id="strokecolor-link" class="member-link">
+<a name="strokecolor" href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+<div id="strokecolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecolor', false);"><tt><b>strokeColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The color of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the stroke color of a path:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-15">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to RGB red:
+circle.strokeColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-15"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokewidth-member" class="member">
+<div id="strokewidth-link" class="member-link">
+<a name="strokewidth" href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+<div id="strokewidth-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokewidth', false);"><tt><b>strokeWidth</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokewidth', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The width of the stroke.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting an item's stroke width:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-16">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set its stroke color to black:
+circle.strokeColor = 'black';
+
+// Set its stroke width to 10:
+circle.strokeWidth = 10;
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-16"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokecap-member" class="member">
+<div id="strokecap-link" class="member-link">
+<a name="strokecap" href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+<div id="strokecap-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokecap', false);"><tt><b>strokeCap</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokecap', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the end of open <a href="../classes/Path.html"><tt>Path</tt></a> items, when they
+have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'butt'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('round', 'square', 'butt')</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke caps:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-17">
+var line = new Path(new Point(80, 50), new Point(420, 50));
+line.strokeColor = 'black';
+line.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+line.selected = true;
+
+// Set the stroke cap of the line to be round:
+line.strokeCap = 'round';
+
+// Copy the path and set its stroke cap to be square:
+var line2 = line.clone();
+line2.position.y += 50;
+line2.strokeCap = 'square';
+
+// Make another copy and set its stroke cap to be butt:
+var line2 = line.clone();
+line2.position.y += 100;
+line2.strokeCap = 'butt';
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-17"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="strokejoin-member" class="member">
+<div id="strokejoin-link" class="member-link">
+<a name="strokejoin" href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+<div id="strokejoin-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('strokejoin', false);"><tt><b>strokeJoin</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('strokejoin', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The shape to be used at the corners of paths when they have a stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>'miter'</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String</tt> ('miter', 'round', 'bevel')
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; A look at the different stroke joins:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-18">
+var path = new Path();
+path.add(new Point(80, 100));
+path.add(new Point(120, 40));
+path.add(new Point(160, 100));
+path.strokeColor = 'black';
+path.strokeWidth = 20;
+
+// Select the path, so we can see where the stroke is formed:
+path.selected = true;
+
+var path2 = path.clone();
+path2.position.x += path2.bounds.width * 1.5;
+path2.strokeJoin = 'round';
+
+var path3 = path2.clone();
+path3.position.x += path3.bounds.width * 1.5;
+path3.strokeJoin = 'bevel';
+</script>
+<div class="canvas"><canvas width="516" height="120" id="canvas-18"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="dashoffset-member" class="member">
+<div id="dashoffset-link" class="member-link">
+<a name="dashoffset" href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+<div id="dashoffset-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dashoffset', false);"><tt><b>dashOffset</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dashoffset', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The dash offset of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>0</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+<div id="dasharray-member" class="member">
+<div id="dasharray-link" class="member-link">
+<a name="dasharray" href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+<div id="dasharray-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('dasharray', false);"><tt><b>dashArray</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('dasharray', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Specifies an array containing the dash and gap lengths of the stroke.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>[]</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Array</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-19">
+var path = new Path.Circle(new Point(80, 50), 40);
+path.strokeWidth = 2;
+path.strokeColor = 'black';
+
+// Set the dashed stroke to [10pt dash, 4pt gap]:
+path.dashArray = [10, 4];
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-19"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+	
+<div id="miterlimit-member" class="member">
+<div id="miterlimit-link" class="member-link">
+<a name="miterlimit" href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+<div id="miterlimit-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('miterlimit', false);"><tt><b>miterLimit</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('miterlimit', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The miter limit of the stroke.</p>
+<p>When two line segments meet at a sharp angle and miter joins have been
+specified for <a href="../classes/Item.html#strokejoin"><tt>item.strokeJoin</tt></a>, it is possible for the miter to
+extend far beyond the <a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a> of the path. The
+miterLimit imposes a limit on the ratio of the miter length to the
+<a href="../classes/Item.html#strokewidth"><tt>item.strokeWidth</tt></a>.</p>
+	
+	
+		<ul><b>Default:</b>
+		<li>
+		<tt>10</tt>
+		</li>
+		</ul>
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+	
+	<h3>Fill Style</h3>
+
+<div id="fillcolor-member" class="member">
+<div id="fillcolor-link" class="member-link">
+<a name="fillcolor" href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+<div id="fillcolor-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fillcolor', false);"><tt><b>fillColor</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fillcolor', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The fill color of the item.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/RgbColor.html"><tt>RgbColor</tt></a> / <a href="../classes/HsbColor.html"><tt>HsbColor</tt></a> / <a href="../classes/HslColor.html"><tt>HslColor</tt></a> / <a href="../classes/GrayColor.html"><tt>GrayColor</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Setting the fill color of a path to red:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-20">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 35:
+var circle = new Path.Circle(new Point(80, 50), 35);
+
+// Set the fill color of the circle to RGB red:
+circle.fillColor = new RgbColor(1, 0, 0);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-20"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+<!-- =========================== inherited methods ========================= -->
+<div class="reference-members"><h2>Methods inherited from <a href="../classes/Item.html"><tt>Item</tt></a></h2>
+
+	
+<div id="clone-member" class="member">
+<div id="clone-link" class="member-link">
+<a name="clone" href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+<div id="clone-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('clone', false);"><tt><b>clone</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('clone', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Clones the item within the same project and places the copy above the
+item.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the newly cloned item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Cloning items:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-21">
+var circle = new Path.Circle(new Point(50, 50), 10);
+circle.fillColor = 'red';
+
+// Make 20 copies of the circle:
+for (var i = 0; i < 20; i++) {
+	var copy = circle.clone();
+
+	// Distribute the copies horizontally, so we can see them:
+	copy.position.x += i * copy.bounds.width;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-21"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="copyto-item-member" class="member">
+<div id="copyto-item-link" class="member-link">
+<a name="copyto-item" href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+<div id="copyto-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('copyto-item', false);"><tt><b>copyTo</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('copyto-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>When passed a project, copies the item to the project,
+or duplicates it within the same project. When passed an item,
+copies the item into the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Project.html"><tt>Project</tt></a> / <a href="../classes/Layer.html"><tt>Layer</tt></a> / <a href="../classes/Group.html"><tt>Group</tt></a> / <a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a>
+&mdash;&nbsp;the item or project to
+copy the item to
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Item.html"><tt>Item</tt></a></tt>&nbsp;&mdash;&nbsp;the new copy of the item
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rasterize-member" class="member">
+<div id="rasterize-link" class="member-link">
+<a name="rasterize" href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+<div id="rasterize-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rasterize', false);"><tt><b>rasterize</b>([resolution])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rasterize', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rasterizes the item into a newly created Raster object. The item itself
+is not removed after rasterization.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>resolution:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the resolution of the raster in dpi
+&mdash;&nbsp;optional, default: <tt>72</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/Raster.html"><tt>Raster</tt></a></tt>&nbsp;&mdash;&nbsp;the newly created raster item
+</li>
+	
+	</ul>
+
+	
+	<p>
+<b>Example</b> &mdash; Rasterizing an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-22">
+var circle = new Path.Circle(new Point(80, 50), 5);
+circle.fillColor = 'red';
+
+// Create a rasterized version of the path:
+var raster = circle.rasterize();
+
+// Move it 100pt to the right:
+raster.position.x += 100;
+
+// Scale the path and the raster by 300%, so we can compare them:
+circle.scale(5);
+raster.scale(5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-22"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="hittest-point-member" class="member">
+<div id="hittest-point-link" class="member-link">
+<a name="hittest-point" href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+<div id="hittest-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('hittest-point', false);"><tt><b>hitTest</b>(point[, options])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('hittest-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Perform a hit test on the item (and its children, if it is a
+<a href="../classes/Group.html"><tt>Group</tt></a> or <a href="../classes/Layer.html"><tt>Layer</tt></a>) at the location of the specified point.</p>
+<p>The optional options object allows you to control the specifics of the
+hit test and may contain a combination of the following values:</p>
+<p><b>tolerance:</b> <tt>Number</tt> - The tolerance of the hit test in
+points.</p>
+<p><b>options.type:</b> Only hit test again a certain item
+type: <a href="../classes/PathItem.html"><tt>PathItem</tt></a>, <a href="../classes/Raster.html"><tt>Raster</tt></a>, <a href="../classes/TextItem.html"><tt>TextItem</tt></a>, etc.</p>
+<p><b>options.fill:</b> <tt>Boolean</tt> - Hit test the fill of items.</p>
+<p><b>options.stroke:</b> <tt>Boolean</tt> - Hit test the curves of path
+items, taking into account stroke width.</p>
+<p><b>options.segment:</b> <tt>Boolean</tt> - Hit test for
+<a href="../classes/Segment.html#point"><tt>segment.point</tt></a> of <a href="../classes/Path.html"><tt>Path</tt></a> items.</p>
+<p><b>options.handles:</b> <tt>Boolean</tt> - Hit test for the handles
+(<a href="../classes/Segment.html#handlein"><tt>segment.handleIn</tt></a> / <a href="../classes/Segment.html#handleout"><tt>segment.handleOut</tt></a>) of path segments.</p>
+<p><b>options.ends:</b> <tt>Boolean</tt> - Only hit test for the first or
+last segment points of open path items.</p>
+<p><b>options.bounds:</b> <tt>Boolean</tt> - Hit test the corners and
+side-centers of the bounding rectangle of items (<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.center:</b> <tt>Boolean</tt> - Hit test the
+<a href="../classes/Rectangle.html#center"><tt>rectangle.center</tt></a> of the bounding rectangle of items
+(<a href="../classes/Item.html#bounds"><tt>item.bounds</tt></a>).</p>
+<p><b>options.guide:</b> <tt>Boolean</tt> - Hit test items that have
+<a href="../classes/Item.html#guide"><tt>item.guide</tt></a> set to <tt>true</tt>.</p>
+<p><b>options.selected:</b> <tt>Boolean</tt> - Only hit selected items.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;The point where the hit test should be performed
+
+</li>
+
+<li>
+<tt>options:</tt> 
+<tt>Object</tt>
+
+&mdash;&nbsp;optional, default: <tt>{ fill: true, stroke: true, segments: true,
+tolerance: 2 }</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><a href="../classes/HitResult.html"><tt>HitResult</tt></a></tt>&nbsp;&mdash;&nbsp;A hit result object that contains more
+information about what exactly was hit or <tt>null</tt> if nothing was
+hit.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Operations</h3>
+
+<div id="addchild-item-member" class="member">
+<div id="addchild-item-link" class="member-link">
+<a name="addchild-item" href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+<div id="addchild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchild-item', false);"><tt><b>addChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified item as a child of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be added as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchild-index-item-member" class="member">
+<div id="insertchild-index-item-link" class="member-link">
+<a name="insertchild-index-item" href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+<div id="insertchild-index-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchild-index-item', false);"><tt><b>insertChild</b>(index, item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchild-index-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="addchildren-items-member" class="member">
+<div id="addchildren-items-link" class="member-link">
+<a name="addchildren-items" href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+<div id="addchildren-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('addchildren-items', false);"><tt><b>addChildren</b>(items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('addchildren-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Adds the specified items as children of this item at the end of the
+its children list. You can use this function for groups, compound
+paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>items:</tt> 
+<tt>item</tt>
+&mdash;&nbsp;The items to be added as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertchildren-index-items-member" class="member">
+<div id="insertchildren-index-items-link" class="member-link">
+<a name="insertchildren-index-items" href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+<div id="insertchildren-index-items-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertchildren-index-items', false);"><tt><b>insertChildren</b>(index, items)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertchildren-index-items', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified items as children of this item at the specified
+index in its <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> list. You can use this function for
+groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>index:</tt> 
+<tt>Number</tt>
+
+
+</li>
+
+<li>
+<tt>items:</tt> 
+Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects
+&mdash;&nbsp;The items to be appended as children
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertabove-item-member" class="member">
+<div id="insertabove-item-link" class="member-link">
+<a name="insertabove-item" href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+<div id="insertabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertabove-item', false);"><tt><b>insertAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="insertbelow-item-member" class="member">
+<div id="insertbelow-item-link" class="member-link">
+<a name="insertbelow-item" href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+<div id="insertbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('insertbelow-item', false);"><tt><b>insertBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('insertbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts this item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was inserted, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendtop-item-member" class="member">
+<div id="appendtop-item-link" class="member-link">
+<a name="appendtop-item" href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+<div id="appendtop-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendtop-item', false);"><tt><b>appendTop</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendtop-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it above all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="appendbottom-item-member" class="member">
+<div id="appendbottom-item-link" class="member-link">
+<a name="appendbottom-item" href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+<div id="appendbottom-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('appendbottom-item', false);"><tt><b>appendBottom</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('appendbottom-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Inserts the specified item as a child of this item by appending it to
+the list of children and moving it below all other children. You can
+use this function for groups, compound paths and layers.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to be appended as a child
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="moveabove-item-member" class="member">
+<div id="moveabove-item-link" class="member-link">
+<a name="moveabove-item" href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+<div id="moveabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('moveabove-item', false);"><tt><b>moveAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('moveabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves this item above the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item above which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="movebelow-item-member" class="member">
+<div id="movebelow-item-link" class="member-link">
+<a name="movebelow-item" href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+<div id="movebelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('movebelow-item', false);"><tt><b>moveBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('movebelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Moves the item below the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item below which it should be moved
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it was moved, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="remove-member" class="member">
+<div id="remove-link" class="member-link">
+<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+<div id="remove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item from the project. If the item has children, they are also
+removed.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> the item was removed, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-member" class="member">
+<div id="removechildren-link" class="member-link">
+<a name="removechildren" href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+<div id="removechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren', false);"><tt><b>removeChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes all of the item's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> (if any).</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="removechildren-from-member" class="member">
+<div id="removechildren-from-link" class="member-link">
+<a name="removechildren-from" href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+<div id="removechildren-from-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removechildren-from', false);"><tt><b>removeChildren</b>(from[, to])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removechildren-from', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the children from the specified <tt>from</tt> index to the
+<tt>to</tt> index from the parent's <a href="../classes/Item.html#children" onclick="return toggleMember('children', true);"><tt>children</tt></a> array.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>from:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the beginning index, inclusive
+
+</li>
+
+<li>
+<tt>to:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the ending index, exclusive
+&mdash;&nbsp;optional, default: <tt>children.length</tt>
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt>Array of <a href="../classes/Item.html"><tt>Item</tt></a> objects</tt>&nbsp;&mdash;&nbsp;an array containing the removed items
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="reversechildren-member" class="member">
+<div id="reversechildren-link" class="member-link">
+<a name="reversechildren" href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+<div id="reversechildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('reversechildren', false);"><tt><b>reverseChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('reversechildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Reverses the order of the item's children</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Hierarchy Tests</h3>
+
+<div id="haschildren-member" class="member">
+<div id="haschildren-link" class="member-link">
+<a name="haschildren" href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+<div id="haschildren-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('haschildren', false);"><tt><b>hasChildren</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('haschildren', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item contains any children items.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it has one or more children, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isabove-item-member" class="member">
+<div id="isabove-item-link" class="member-link">
+<a name="isabove-item" href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+<div id="isabove-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isabove-item', false);"><tt><b>isAbove</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isabove-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if this item is above the specified item in the stacking order
+of the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is above the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isbelow-item-member" class="member">
+<div id="isbelow-item-link" class="member-link">
+<a name="isbelow-item" href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+<div id="isbelow-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isbelow-item', false);"><tt><b>isBelow</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isbelow-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is below the specified item in the stacking order of
+the project.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is below the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isparent-item-member" class="member">
+<div id="isparent-item-link" class="member-link">
+<a name="isparent-item" href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+<div id="isparent-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isparent-item', false);"><tt><b>isParent</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isparent-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is the parent of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is the parent of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="ischild-item-member" class="member">
+<div id="ischild-item-link" class="member-link">
+<a name="ischild-item" href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+<div id="ischild-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('ischild-item', false);"><tt><b>isChild</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('ischild-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the specified item is a child of the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> it is a child of the item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isdescendant-item-member" class="member">
+<div id="isdescendant-item-link" class="member-link">
+<a name="isdescendant-item" href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+<div id="isdescendant-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isdescendant-item', false);"><tt><b>isDescendant</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isdescendant-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is contained within the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;The item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if it is inside the specified item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isancestor-item-member" class="member">
+<div id="isancestor-item-link" class="member-link">
+<a name="isancestor-item" href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+<div id="isancestor-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isancestor-item', false);"><tt><b>isAncestor</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isancestor-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks if the item is an ancestor of the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+&mdash;&nbsp;the item to check against
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the item is an ancestor of the specified
+item, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="isgroupedwith-item-member" class="member">
+<div id="isgroupedwith-item-link" class="member-link">
+<a name="isgroupedwith-item" href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+<div id="isgroupedwith-item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isgroupedwith-item', false);"><tt><b>isGroupedWith</b>(item)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isgroupedwith-item', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the item is grouped with the specified item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>item:</tt> 
+<a href="../classes/Item.html"><tt>Item</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;<tt>true</tt> if the items are grouped together, <tt>false</tt> otherwise
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+
+	
+<h3>Transform Functions</h3>
+
+<div id="scale-scale-member" class="member">
+<div id="scale-scale-link" class="member-link">
+<a name="scale-scale" href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+<div id="scale-scale-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-scale', false);"><tt><b>scale</b>(scale[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-scale', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given value from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>scale:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item from its center point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-23">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path by 150% from its center point
+circle.scale(1.5);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-23"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Scaling an item from a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-24">
+// Create a circle shaped path at { x: 80, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(80, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path 150% from its bottom left corner
+circle.scale(1.5, circle.bounds.bottomLeft);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-24"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="scale-hor-ver-member" class="member">
+<div id="scale-hor-ver-link" class="member-link">
+<a name="scale-hor-ver" href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="scale-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scale-hor-ver', false);"><tt><b>scale</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scale-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scales the item by the given values from its center point, or optionally
+from a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal scale factor
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical scale factor
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Scaling an item horizontally by 300%:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-25">
+// Create a circle shaped path at { x: 100, y: 50 }
+// with a radius of 20:
+var circle = new Path.Circle(new Point(100, 50), 20);
+circle.fillColor = 'red';
+
+// Scale the path horizontally by 300%
+circle.scale(3, 1);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-25"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="translate-delta-member" class="member">
+<div id="translate-delta-link" class="member-link">
+<a name="translate-delta" href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+<div id="translate-delta-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('translate-delta', false);"><tt><b>translate</b>(delta)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('translate-delta', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Translates (moves) the item by the given offset point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>delta:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+&mdash;&nbsp;the offset to translate the item by
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="rotate-angle-member" class="member">
+<div id="rotate-angle-link" class="member-link">
+<a name="rotate-angle" href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+<div id="rotate-angle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('rotate-angle', false);"><tt><b>rotate</b>(angle[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('rotate-angle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Rotates the item by a given angle around the given point.</p>
+<p>Angles are oriented clockwise and measured in degrees.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>angle:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the rotation angle
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#rotate"><tt>matrix.rotate</tt></a></tt>
+	</p>
+
+	<p>
+<b>Example</b> &mdash; Rotating an item:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-26">
+// Create a rectangle shaped path with its top left
+// point at {x: 80, y: 25} and a size of {width: 50, height: 50}:
+var path = new Path.Rectangle(new Point(80, 25), new Size(50, 50));
+path.fillColor = 'black';
+
+// Rotate the path by 30 degrees:
+path.rotate(30);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-26"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Rotating an item around a specific point:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-27">
+// Create a rectangle shaped path with its top left
+// point at {x: 175, y: 50} and a size of {width: 100, height: 100}:
+var topLeft = new Point(175, 50);
+var size = new Size(100, 100);
+var path = new Path.Rectangle(topLeft, size);
+path.fillColor = 'black';
+
+// Draw a circle shaped path in the center of the view,
+// to show the rotation point:
+var circle = new Path.Circle(view.center, 5);
+circle.fillColor = 'white';
+
+// Each frame rotate the path 3 degrees around the center point
+// of the view:
+function onFrame(event) {
+	path.rotate(3, view.center);
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-27"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="shear-point-member" class="member">
+<div id="shear-point-link" class="member-link">
+<a name="shear-point" href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+<div id="shear-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-point', false);"><tt><b>shear</b>(point[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given value from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="shear-hor-ver-member" class="member">
+<div id="shear-hor-ver-link" class="member-link">
+<a name="shear-hor-ver" href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+<div id="shear-hor-ver-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('shear-hor-ver', false);"><tt><b>shear</b>(hor, ver[, center])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('shear-hor-ver', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Shears the item by the given values from its center point, or optionally
+by a supplied point.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>hor:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the horizontal shear factor.
+
+</li>
+
+<li>
+<tt>ver:</tt> 
+<tt>Number</tt>
+&mdash;&nbsp;the vertical shear factor.
+
+</li>
+
+<li>
+<tt>center:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+&mdash;&nbsp;optional, default: <tt><a href="../classes/Item.html#position"><tt>item.position</tt></a></tt>
+</li>
+
+</ul>
+
+	
+	
+	<p><b>See also:</b>
+	<tt><a href="../classes/Matrix.html#shear"><tt>matrix.shear</tt></a></tt>
+	</p>
+
+	
+</div>
+</div>
+</div>
+
+	
+<div id="transform-matrix-flags-member" class="member">
+<div id="transform-matrix-flags-link" class="member-link">
+<a name="transform-matrix-flags" href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+<div id="transform-matrix-flags-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('transform-matrix-flags', false);"><tt><b>transform</b>(matrix, flags)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('transform-matrix-flags', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>matrix:</tt> 
+<a href="../classes/Matrix.html"><tt>Matrix</tt></a>
+
+
+</li>
+
+<li>
+<tt>flags:</tt> 
+
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+
+	
+<div id="fitbounds-rectangle-member" class="member">
+<div id="fitbounds-rectangle-link" class="member-link">
+<a name="fitbounds-rectangle" href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+<div id="fitbounds-rectangle-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fitbounds-rectangle', false);"><tt><b>fitBounds</b>(rectangle[, fill])</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fitbounds-rectangle', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Transform the item so that its <a href="../classes/Item.html#bounds" onclick="return toggleMember('bounds', true);"><tt>bounds</tt></a> fit within the specified
+rectangle, without changing its aspect ratio.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>rectangle:</tt> 
+<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+
+
+</li>
+
+<li>
+<tt>fill:</tt> 
+<tt>Boolean</tt>
+
+&mdash;&nbsp;optional, default: <tt>false</tt>
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-28">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-28"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of another item's bounding rectangle with the fill parameter set to true:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-29">
+// Create a rectangle shaped path with its top left corner
+// at {x: 80, y: 25} and a size of {width: 75, height: 50}:
+var size = new Size(75, 50);
+var path = new Path.Rectangle(new Point(80, 25), size);
+path.fillColor = 'black';
+
+// Create a circle shaped path with its center at {x: 80, y: 50}
+// and a radius of 30.
+var circlePath = new Path.Circle(new Point(80, 50), 30);
+circlePath.fillColor = 'red';
+
+// Fit the circlePath to the bounding rectangle of
+// the rectangular path:
+circlePath.fitBounds(path.bounds, true);
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-29"></canvas></div>
+</div>
+
+
+<p>
+<b>Example</b> &mdash; Fitting an item to the bounding rectangle of the view
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-30">
+var path = new Path.Circle(new Point(80, 50), 30);
+path.fillColor = 'red';
+
+// Fit the path to the bounding rectangle of the view:
+path.fitBounds(view.bounds);
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-30"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<h3>Remove On Event</h3>
+
+<div id="removeon-object-member" class="member">
+<div id="removeon-object-link" class="member-link">
+<a name="removeon-object" href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+<div id="removeon-object-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeon-object', false);"><tt><b>removeOn</b>(object)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeon-object', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the events specified in the passed object literal
+occur.</p>
+<p>The object literal can contain the following values:</p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is
+fired: <tt>object.move = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is
+fired: <tt>object.drag = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is
+fired: <tt>object.down = true</tt></p>
+<p>Remove the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is
+fired: <tt>object.up = true</tt></p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>object:</tt> 
+<tt>Object</tt>
+
+
+</li>
+
+</ul>
+
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-31">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path on the next onMouseDrag or onMouseDown event:
+	path.removeOn({
+		drag: true,
+		down: true
+	});
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-31"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonmove-member" class="member">
+<div id="removeonmove-link" class="member-link">
+<a name="removeonmove" href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+<div id="removeonmove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonmove', false);"><tt><b>removeOnMove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonmove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Move your mouse below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-32">
+function onMouseMove(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next move event, automatically remove the path:
+	path.removeOnMove();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-32"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondown-member" class="member">
+<div id="removeondown-link" class="member-link">
+<a name="removeondown" href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+<div id="removeondown-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondown', false);"><tt><b>removeOnDown</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondown', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-33">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, next time the mouse is pressed:
+	path.removeOnDown();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-33"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeondrag-member" class="member">
+<div id="removeondrag-link" class="member-link">
+<a name="removeondrag" href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+<div id="removeondrag-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeondrag', false);"><tt><b>removeOnDrag</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeondrag', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click and drag below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-34">
+function onMouseDrag(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// On the next drag event, automatically remove the path:
+	path.removeOnDrag();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-34"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+	
+<div id="removeonup-member" class="member">
+<div id="removeonup-link" class="member-link">
+<a name="removeonup" href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+<div id="removeonup-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('removeonup', false);"><tt><b>removeOnUp</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('removeonup', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes the item when the next <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> event is fired.</p>
+	
+	
+	
+	<p>
+<b>Example</b> &mdash; Click a few times below:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-35">
+function onMouseDown(event) {
+	// Create a circle shaped path at the mouse position,
+	// with a radius of 10:
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+
+	// Remove the path, when the mouse is released:
+	path.removeOnUp();
+}
+</script>
+<div class="canvas"><canvas width="516" height="200" id="canvas-35"></canvas></div>
+</div>
+
+
+</div>
+</div>
+</div>
+
+</div>
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/Tool.html b/dist/docs/classes/Tool.html
new file mode 100644
index 00000000..8c5f0347
--- /dev/null
+++ b/dist/docs/classes/Tool.html
@@ -0,0 +1,584 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Tool</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Tool</h1>
+
+<p>The Tool object refers to a script that the user can interact with
+by using the mouse and keyboard and can be accessed through the global
+<tt>tool</tt> variable. All its properties are also available in the paper
+scope.</p>
+<p>The global <tt>tool</tt> variable only exists in scripts that contain mouse
+handler functions (<a href="../classes/Tool.html#onmousemove" onclick="return toggleMember('onmousemove', true);"><tt>onMouseMove</tt></a>, <a href="../classes/Tool.html#onmousedown" onclick="return toggleMember('onmousedown', true);"><tt>onMouseDown</tt></a>,
+<a href="../classes/Tool.html#onmousedrag" onclick="return toggleMember('onmousedrag', true);"><tt>onMouseDrag</tt></a>, <a href="../classes/Tool.html#onmouseup" onclick="return toggleMember('onmouseup', true);"><tt>onMouseUp</tt></a>) or a keyboard handler
+function (<a href="../classes/Tool.html#onkeydown" onclick="return toggleMember('onkeydown', true);"><tt>onKeyDown</tt></a>, <a href="../classes/Tool.html#onkeyup" onclick="return toggleMember('onkeyup', true);"><tt>onKeyUp</tt></a>).</p>
+<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">var path;
+
+// Only execute onMouseDrag when the mouse
+// has moved at least 10 points:
+tool.distanceThreshold = 10;
+
+function onMouseDown(event) {
+	// Create a new path every time the mouse is clicked
+	path = new Path();
+	path.add(event.point);
+	path.strokeColor = 'black';
+}
+
+function onMouseDrag(event) {
+	// Add a point to the path every time the mouse is dragged
+	path.add(event.point);
+}</pre>
+
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="eventinterval-member" class="member">
+<div id="eventinterval-link" class="member-link">
+<a name="eventinterval" href="#" onClick="return toggleMember('eventinterval', false);"><tt><b>eventInterval</b></tt></a>
+</div>
+<div id="eventinterval-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('eventinterval', false);"><tt><b>eventInterval</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('eventinterval', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The fixed time delay in milliseconds between each call to the
+<a href="../classes/Tool.html#onmousedrag" onclick="return toggleMember('onmousedrag', true);"><tt>onMouseDrag</tt></a> event. Setting this to an interval means the
+<a href="../classes/Tool.html#onmousedrag" onclick="return toggleMember('onmousedrag', true);"><tt>onMouseDrag</tt></a> event is called repeatedly after the initial
+<a href="../classes/Tool.html#onmousedown" onclick="return toggleMember('onmousedown', true);"><tt>onMouseDown</tt></a> until the user releases the mouse.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="mindistance-member" class="member">
+<div id="mindistance-link" class="member-link">
+<a name="mindistance" href="#" onClick="return toggleMember('mindistance', false);"><tt><b>minDistance</b></tt></a>
+</div>
+<div id="mindistance-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('mindistance', false);"><tt><b>minDistance</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('mindistance', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The minimum distance the mouse has to drag before firing the onMouseDrag
+event, since the last onMouseDrag event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="maxdistance-member" class="member">
+<div id="maxdistance-link" class="member-link">
+<a name="maxdistance" href="#" onClick="return toggleMember('maxdistance', false);"><tt><b>maxDistance</b></tt></a>
+</div>
+<div id="maxdistance-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('maxdistance', false);"><tt><b>maxDistance</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('maxdistance', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The maximum distance the mouse has to drag before firing the onMouseDrag
+event, since the last onMouseDrag event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="fixeddistance-member" class="member">
+<div id="fixeddistance-link" class="member-link">
+<a name="fixeddistance" href="#" onClick="return toggleMember('fixeddistance', false);"><tt><b>fixedDistance</b></tt></a>
+</div>
+<div id="fixeddistance-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('fixeddistance', false);"><tt><b>fixedDistance</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('fixeddistance', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Mouse Event Handlers</h3>
+
+<div id="onmousedown-member" class="member">
+<div id="onmousedown-link" class="member-link">
+<a name="onmousedown" href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
+</div>
+<div id="onmousedown-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousedown', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The function to be called when the mouse button is pushed down. The
+function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information
+about the mouse event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Creating circle shaped paths where the user presses the mouse button:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+function onMouseDown(event) {
+	// Create a new circle shaped path with a radius of 10
+	// at the position of the mouse (event.point):
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="onmousedrag-member" class="member">
+<div id="onmousedrag-link" class="member-link">
+<a name="onmousedrag" href="#" onClick="return toggleMember('onmousedrag', false);"><tt><b>onMouseDrag</b></tt></a>
+</div>
+<div id="onmousedrag-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onmousedrag', false);"><tt><b>onMouseDrag</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousedrag', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The function to be called when the mouse position changes while the mouse
+is being dragged. The function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which
+contains information about the mouse event.</p>
+<p>This function can also be called periodically while the mouse doesn't
+move by setting the <a href="../classes/Tool.html#eventinterval" onclick="return toggleMember('eventinterval', true);"><tt>eventInterval</tt></a></p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Draw a line by adding a segment to a path on every mouse drag event:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-1">
+// Create an empty path:
+var path = new Path();
+path.strokeColor = 'black';
+
+function onMouseDrag(event) {
+	// Add a segment to the path at the position of the mouse:
+	path.add(event.point);
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-1"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="onmousemove-member" class="member">
+<div id="onmousemove-link" class="member-link">
+<a name="onmousemove" href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
+</div>
+<div id="onmousemove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousemove', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The function to be called the mouse moves within the project view. The
+function receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information
+about the mouse event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Moving a path to the position of the mouse:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-2">
+// Create a circle shaped path with a radius of 10 at {x: 0, y: 0}:
+var path = new Path.Circle([0, 0], 10);
+path.fillColor = 'black';
+
+function onMouseMove(event) {
+	// Whenever the user moves the mouse, move the path
+	// to that position:
+	path.position = event.point;
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-2"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="onmouseup-member" class="member">
+<div id="onmouseup-link" class="member-link">
+<a name="onmouseup" href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
+</div>
+<div id="onmouseup-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmouseup', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The function to be called when the mouse button is released. The function
+receives a <a href="../classes/ToolEvent.html"><tt>ToolEvent</tt></a> object which contains information about the
+mouse event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Creating circle shaped paths where the user releases the mouse:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-3">
+function onMouseUp(event) {
+	// Create a new circle shaped path with a radius of 10
+	// at the position of the mouse (event.point):
+	var path = new Path.Circle(event.point, 10);
+	path.fillColor = 'black';
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-3"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Keyboard Event Handlers</h3>
+
+<div id="onkeydown-member" class="member">
+<div id="onkeydown-link" class="member-link">
+<a name="onkeydown" href="#" onClick="return toggleMember('onkeydown', false);"><tt><b>onKeyDown</b></tt></a>
+</div>
+<div id="onkeydown-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onkeydown', false);"><tt><b>onKeyDown</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onkeydown', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The function to be called when the user presses a key on the keyboard.</p>
+<p>The function receives a <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a> object which contains
+information about the keyboard event.</p>
+<p>If the function returns <tt>false</tt>, the keyboard event will be
+prevented from bubbling up. This can be used for example to stop the
+window from scrolling, when you need the user to interact with arrow
+keys.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Scaling a path whenever the user presses the space bar:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-4">
+// Create a circle shaped path:
+var path = new Path.Circle(new Point(50, 50), 30);
+path.fillColor = 'red';
+
+function onKeyDown(event) {
+	if(event.key == 'space') {
+		// Scale the path by 110%:
+		path.scale(1.1);
+
+		// Prevent the key event from bubbling
+		return false;
+	}
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-4"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="onkeyup-member" class="member">
+<div id="onkeyup-link" class="member-link">
+<a name="onkeyup" href="#" onClick="return toggleMember('onkeyup', false);"><tt><b>onKeyUp</b></tt></a>
+</div>
+<div id="onkeyup-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onkeyup', false);"><tt><b>onKeyUp</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onkeyup', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The function to be called when the user releases a key on the keyboard.</p>
+<p>The function receives a <a href="../classes/KeyEvent.html"><tt>KeyEvent</tt></a> object which contains
+information about the keyboard event.</p>
+<p>If the function returns <tt>false</tt>, the keyboard event will be
+prevented from bubbling up. This can be used for example to stop the
+window from scrolling, when you need the user to interact with arrow
+keys.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">function onKeyUp(event) {
+	if(event.key == 'space') {
+		console.log('The spacebar was released!');
+	}
+}</pre>
+
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="activate-member" class="member">
+<div id="activate-link" class="member-link">
+<a name="activate" href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
+</div>
+<div id="activate-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activate', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Activates this tool, meaning <a href="../classes/PaperScope.html#tool"><tt>paperScope.tool</tt></a> will
+point to it and it will be the one that recieves mouse events.</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="remove-member" class="member">
+<div id="remove-link" class="member-link">
+<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+<div id="remove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes this tool from the <a href="../classes/PaperScope.html#tools"><tt>paperScope.tools</tt></a> list.</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/ToolEvent.html b/dist/docs/classes/ToolEvent.html
new file mode 100644
index 00000000..cc13b2dd
--- /dev/null
+++ b/dist/docs/classes/ToolEvent.html
@@ -0,0 +1,406 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>ToolEvent</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>ToolEvent</h1>
+
+<p> Extends <b><a href="../classes/Event.html"><tt>Event</tt></a></b></p>
+
+<p>ToolEvent The ToolEvent object is received by the <a href="../classes/Tool.html"><tt>Tool</tt></a>'s mouse
+event handlers <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a>, <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a>,
+<a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> and <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a>. The ToolEvent
+object is the only parameter passed to these functions and contains
+information about the mouse event.</p>
+
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="type-member" class="member">
+<div id="type-link" class="member-link">
+<a name="type" href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
+</div>
+<div id="type-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('type', false);"><tt><b>type</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('type', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The type of tool event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>String('mousedown', 'mouseup', 'mousemove', 'mousedrag')</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="point-member" class="member">
+<div id="point-link" class="member-link">
+<a name="point" href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
+</div>
+<div id="point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('point', false);"><tt><b>point</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('point', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The position of the mouse in project coordinates when the event was
+fired.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> 
+</p>
+
+
+<pre class="code">function onMouseDrag(event) {
+	// the position of the mouse when it is dragged
+	console.log(event.point);
+}
+
+function onMouseUp(event) {
+	// the position of the mouse when it is released
+	console.log(event.point);
+}</pre>
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="lastpoint-member" class="member">
+<div id="lastpoint-link" class="member-link">
+<a name="lastpoint" href="#" onClick="return toggleMember('lastpoint', false);"><tt><b>lastPoint</b></tt></a>
+</div>
+<div id="lastpoint-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('lastpoint', false);"><tt><b>lastPoint</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('lastpoint', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The position of the mouse in project coordinates when the previous
+event was fired.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="downpoint-member" class="member">
+<div id="downpoint-link" class="member-link">
+<a name="downpoint" href="#" onClick="return toggleMember('downpoint', false);"><tt><b>downPoint</b></tt></a>
+</div>
+<div id="downpoint-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('downpoint', false);"><tt><b>downPoint</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('downpoint', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The position of the mouse in project coordinates when the mouse button
+was last clicked.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="middlepoint-member" class="member">
+<div id="middlepoint-link" class="member-link">
+<a name="middlepoint" href="#" onClick="return toggleMember('middlepoint', false);"><tt><b>middlePoint</b></tt></a>
+</div>
+<div id="middlepoint-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('middlepoint', false);"><tt><b>middlePoint</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('middlepoint', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The point in the middle between <a href="../classes/ToolEvent.html#lastpoint" onclick="return toggleMember('lastpoint', true);"><tt>lastPoint</tt></a> and
+<a href="../classes/ToolEvent.html#point" onclick="return toggleMember('point', true);"><tt>point</tt></a>. This is a useful position to use when creating
+artwork based on the moving direction of the mouse, as returned by
+<a href="../classes/ToolEvent.html#delta" onclick="return toggleMember('delta', true);"><tt>delta</tt></a>.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="delta-member" class="member">
+<div id="delta-link" class="member-link">
+<a name="delta" href="#" onClick="return toggleMember('delta', false);"><tt><b>delta</b></tt></a>
+</div>
+<div id="delta-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('delta', false);"><tt><b>delta</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('delta', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The difference between the current position and the last position of the
+mouse when the event was fired. In case of the mouseup event, the
+difference to the mousedown position is returned.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="count-member" class="member">
+<div id="count-link" class="member-link">
+<a name="count" href="#" onClick="return toggleMember('count', false);"><tt><b>count</b></tt></a>
+</div>
+<div id="count-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('count', false);"><tt><b>count</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('count', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The number of times the mouse event was fired.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="item-member" class="member">
+<div id="item-link" class="member-link">
+<a name="item" href="#" onClick="return toggleMember('item', false);"><tt><b>item</b></tt></a>
+</div>
+<div id="item-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('item', false);"><tt><b>item</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('item', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The item at the position of the mouse (if any).</p>
+<p>If the item is contained within one or more <a href="../classes/Group.html"><tt>Group</tt></a> or
+<a href="../classes/CompoundPath.html"><tt>CompoundPath</tt></a> items, the most top level group or compound path
+that it is contained within is returned.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Item.html"><tt>Item</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="tostring-member" class="member">
+<div id="tostring-link" class="member-link">
+<a name="tostring" href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+<div id="tostring-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tostring', false);"><tt><b>toString</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tostring', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>String</tt></tt>&nbsp;&mdash;&nbsp;A string representation of the tool event.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== inherited properties ====================== -->
+<div class="reference-members"><h2>Properties inherited from <a href="../classes/Event.html"><tt>Event</tt></a></h2>
+
+	
+<div id="modifiers-member" class="member">
+<div id="modifiers-link" class="member-link">
+<a name="modifiers" href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
+</div>
+<div id="modifiers-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('modifiers', false);"><tt><b>modifiers</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('modifiers', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>object</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+
+</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/View.html b/dist/docs/classes/View.html
new file mode 100644
index 00000000..bfcb8e9e
--- /dev/null
+++ b/dist/docs/classes/View.html
@@ -0,0 +1,538 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>View</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>View</h1>
+
+<p>The View object wraps a canvas element and handles drawing and user
+interaction through mouse and keyboard for it. It offer means to scroll the
+view, find the currently visible bounds in project coordinates, or the
+center, both useful for constructing artwork that should appear centered on
+screen.</p>
+
+</div>
+
+<!-- ============================== constructors ========================= -->
+<div class="reference-members"><h2>Constructors</h2>
+	
+		
+<div id="view-canvas-member" class="member">
+<div id="view-canvas-link" class="member-link">
+<a name="view-canvas" href="#" onClick="return toggleMember('view-canvas', false);"><tt><b>View</b>(canvas)</tt></a>
+</div>
+<div id="view-canvas-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('view-canvas', false);"><tt><b>View</b>(canvas)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('view-canvas', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+<p>Creates a view object</p>
+
+<ul><b>Parameters:</b>
+
+<li>
+<tt>canvas:</tt> 
+<tt>HTMLCanvasElement</tt> / <tt>String</tt>
+&mdash;&nbsp;The canvas object that this
+view should wrap, or the String id that represents it
+
+</li>
+
+</ul>
+
+
+
+
+</div>
+</div>
+</div>
+	
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="canvas-member" class="member">
+<div id="canvas-link" class="member-link">
+<a name="canvas" href="#" onClick="return toggleMember('canvas', false);"><tt><b>canvas</b></tt></a>
+</div>
+<div id="canvas-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('canvas', false);"><tt><b>canvas</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('canvas', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The underlying native canvas element.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>HTMLCanvasElement</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="viewsize-member" class="member">
+<div id="viewsize-link" class="member-link">
+<a name="viewsize" href="#" onClick="return toggleMember('viewsize', false);"><tt><b>viewSize</b></tt></a>
+</div>
+<div id="viewsize-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('viewsize', false);"><tt><b>viewSize</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('viewsize', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The size of the view canvas. Changing the view's size will resize it's
+underlying canvas.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Size.html"><tt>Size</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="bounds-member" class="member">
+<div id="bounds-link" class="member-link">
+<a name="bounds" href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+<div id="bounds-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('bounds', false);"><tt><b>bounds</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('bounds', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The bounds of the currently visible area in project coordinates.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Rectangle.html"><tt>Rectangle</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="size-member" class="member">
+<div id="size-link" class="member-link">
+<a name="size" href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
+</div>
+<div id="size-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('size', false);"><tt><b>size</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('size', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The size of the visible area in project coordinates.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Size.html"><tt>Size</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="center-member" class="member">
+<div id="center-link" class="member-link">
+<a name="center" href="#" onClick="return toggleMember('center', false);"><tt><b>center</b></tt></a>
+</div>
+<div id="center-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('center', false);"><tt><b>center</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('center', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The center of the visible area in project coordinates.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Point.html"><tt>Point</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="zoom-member" class="member">
+<div id="zoom-link" class="member-link">
+<a name="zoom" href="#" onClick="return toggleMember('zoom', false);"><tt><b>zoom</b></tt></a>
+</div>
+<div id="zoom-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('zoom', false);"><tt><b>zoom</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('zoom', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The zoom factor by which the project coordinates are magnified.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Number</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Event Handlers</h3>
+
+<div id="onframe-member" class="member">
+<div id="onframe-link" class="member-link">
+<a name="onframe" href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
+</div>
+<div id="onframe-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onframe', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Handler function to be called on each frame of an animation.</p>
+<p>The function receives an event object which contains information about
+the frame event:</p>
+<p><b><tt>event.count</tt></b>: the number of times the frame event was fired.</p>
+<p><b><tt>event.time</tt></b>: the total amount of time passed since the first frame
+event in seconds.</p>
+<p><b><tt>event.delta</tt></b>: the time passed in seconds since the last frame
+event.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Creating an animation:
+</p>
+
+<div class="paperscript split">
+<div class="button">Run</div>
+<script type="text/paperscript" canvas="canvas-0">
+// Create a rectangle shaped path with its top left point at:
+// {x: 50, y: 25} and a size of {width: 50, height: 50}
+var path = new Path.Rectangle(new Point(50, 25), new Size(50, 50));
+path.fillColor = 'black';
+
+function onFrame(event) {
+	// Every frame, rotate the path by 3 degrees:
+	path.rotate(3);
+}
+</script>
+<div class="canvas"><canvas width="516" height="100" id="canvas-0"></canvas></div>
+</div>
+
+
+</div>
+
+</div>
+</div>
+		
+			
+<div id="onresize-member" class="member">
+<div id="onresize-link" class="member-link">
+<a name="onresize" href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
+</div>
+<div id="onresize-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onresize', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>Handler function that is called whenever a view is resized.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	<p>
+<b>Example</b> &mdash; Repositioning items when a view is resized:
+</p>
+
+
+<pre class="code">// Create a circle shaped path in the center of the view:
+var path = new Path.Circle(view.bounds.center, 30);
+path.fillColor = 'red';
+
+function onResize(event) {
+	// Whenever the view is resized, move the path to its center:
+	path.position = view.center;
+}</pre>
+
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="activate-member" class="member">
+<div id="activate-link" class="member-link">
+<a name="activate" href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
+</div>
+<div id="activate-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('activate', false);"><tt><b>activate</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('activate', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Makes this view the active one, meaning <a href="../classes/PaperScope.html#view"><tt>paperScope.view</tt></a> will
+point to it.</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="remove-member" class="member">
+<div id="remove-link" class="member-link">
+<a name="remove" href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+<div id="remove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('remove', false);"><tt><b>remove</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('remove', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Removes thsi view from the <a href="../classes/PaperScope.html#views"><tt>paperScope.views</tt></a> list and frees the
+associated canvas.</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="isvisible-member" class="member">
+<div id="isvisible-link" class="member-link">
+<a name="isvisible" href="#" onClick="return toggleMember('isvisible', false);"><tt><b>isVisible</b>()</tt></a>
+</div>
+<div id="isvisible-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('isvisible', false);"><tt><b>isVisible</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('isvisible', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Checks whether the view is currently visible within the current browser
+viewport.</p>
+	
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>Boolean</tt></tt>&nbsp;&mdash;&nbsp;Whether the view is visible.
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="scrollby-point-member" class="member">
+<div id="scrollby-point-link" class="member-link">
+<a name="scrollby-point" href="#" onClick="return toggleMember('scrollby-point', false);"><tt><b>scrollBy</b>(point)</tt></a>
+</div>
+<div id="scrollby-point-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('scrollby-point', false);"><tt><b>scrollBy</b>(point)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('scrollby-point', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Scrolls the view by the given vector.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>point:</tt> 
+<a href="../classes/Point.html"><tt>Point</tt></a>
+
+
+</li>
+
+</ul>
+
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="draw-member" class="member">
+<div id="draw-link" class="member-link">
+<a name="draw" href="#" onClick="return toggleMember('draw', false);"><tt><b>draw</b>()</tt></a>
+</div>
+<div id="draw-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('draw', false);"><tt><b>draw</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('draw', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Draws the view.</p>
+	
+	
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/global.html b/dist/docs/classes/global.html
new file mode 100644
index 00000000..86893a0b
--- /dev/null
+++ b/dist/docs/classes/global.html
@@ -0,0 +1,574 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>_global_</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/paperscript.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/codemirror.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/paper.js" type="text/javascript"></script>
+<script src="../resources/js/codemirror.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-class">
+<h1>Global Scope</h1>
+
+
+
+</div>
+
+
+
+
+
+	<div class="reference-members"><h2>Properties</h2>
+		
+			
+<div id="paper-member" class="member">
+<div id="paper-link" class="member-link">
+<a name="paper" href="#" onClick="return toggleMember('paper', false);"><tt><b>paper</b></tt></a>
+</div>
+<div id="paper-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('paper', false);"><tt><b>paper</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('paper', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>A reference to the currently active <a href="../classes/PaperScope.html"><tt>PaperScope</tt></a> object.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/PaperScope.html"><tt>PaperScope</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Global PaperScope Properties (for PaperScript)</h3>
+
+<div id="project-member" class="member">
+<div id="project-link" class="member-link">
+<a name="project" href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+<div id="project-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('project', false);"><tt><b>project</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('project', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The currently active project.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Project.html"><tt>Project</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="projects-member" class="member">
+<div id="projects-link" class="member-link">
+<a name="projects" href="#" onClick="return toggleMember('projects', false);"><tt><b>projects</b></tt></a>
+</div>
+<div id="projects-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('projects', false);"><tt><b>projects</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('projects', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The list of all open projects within the current Paper.js context.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Project.html"><tt>Project</tt></a> objects
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="view-member" class="member">
+<div id="view-link" class="member-link">
+<a name="view" href="#" onClick="return toggleMember('view', false);"><tt><b>view</b></tt></a>
+</div>
+<div id="view-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('view', false);"><tt><b>view</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('view', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The reference to the active project's view.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/View.html"><tt>View</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="tool-member" class="member">
+<div id="tool-link" class="member-link">
+<a name="tool" href="#" onClick="return toggleMember('tool', false);"><tt><b>tool</b></tt></a>
+</div>
+<div id="tool-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tool', false);"><tt><b>tool</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tool', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The reference to the active tool.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<a href="../classes/Tool.html"><tt>Tool</tt></a>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="tools-member" class="member">
+<div id="tools-link" class="member-link">
+<a name="tools" href="#" onClick="return toggleMember('tools', false);"><tt><b>tools</b></tt></a>
+</div>
+<div id="tools-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('tools', false);"><tt><b>tools</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('tools', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>The list of available tools.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		Array of <a href="../classes/Tool.html"><tt>Tool</tt></a> objects
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>View Event Handlers (for PaperScript)</h3>
+
+<div id="onframe-member" class="member">
+<div id="onframe-link" class="member-link">
+<a name="onframe" href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
+</div>
+<div id="onframe-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onframe', false);"><tt><b>onFrame</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onframe', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>A reference to the <a href="../classes/View.html#onframe"><tt>view.onFrame</tt></a> handler function.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="onresize-member" class="member">
+<div id="onresize-link" class="member-link">
+<a name="onresize" href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
+</div>
+<div id="onresize-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onresize', false);"><tt><b>onResize</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onresize', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>A reference to the <a href="../classes/View.html#onresize"><tt>view.onResize</tt></a> handler function.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Mouse Event Handlers (for PaperScript)</h3>
+
+<div id="onmousedown-member" class="member">
+<div id="onmousedown-link" class="member-link">
+<a name="onmousedown" href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
+</div>
+<div id="onmousedown-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onmousedown', false);"><tt><b>onMouseDown</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousedown', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>A reference to the <a href="../classes/Tool.html#onmousedown"><tt>tool.onMouseDown</tt></a> handler function.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="onmousedrag-member" class="member">
+<div id="onmousedrag-link" class="member-link">
+<a name="onmousedrag" href="#" onClick="return toggleMember('onmousedrag', false);"><tt><b>onMouseDrag</b></tt></a>
+</div>
+<div id="onmousedrag-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onmousedrag', false);"><tt><b>onMouseDrag</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousedrag', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>A reference to the <a href="../classes/Tool.html#onmousedrag"><tt>tool.onMouseDrag</tt></a> handler function.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="onmousemove-member" class="member">
+<div id="onmousemove-link" class="member-link">
+<a name="onmousemove" href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
+</div>
+<div id="onmousemove-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onmousemove', false);"><tt><b>onMouseMove</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmousemove', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>A reference to the <a href="../classes/Tool.html#onmousemove"><tt>tool.onMouseMove</tt></a> handler function.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="onmouseup-member" class="member">
+<div id="onmouseup-link" class="member-link">
+<a name="onmouseup" href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
+</div>
+<div id="onmouseup-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onmouseup', false);"><tt><b>onMouseUp</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onmouseup', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>A reference to the <a href="../classes/Tool.html#onmouseup"><tt>tool.onMouseUp</tt></a> handler function.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+	<h3>Keyboard Event Handlers (for PaperScript)</h3>
+
+<div id="onkeydown-member" class="member">
+<div id="onkeydown-link" class="member-link">
+<a name="onkeydown" href="#" onClick="return toggleMember('onkeydown', false);"><tt><b>onKeyDown</b></tt></a>
+</div>
+<div id="onkeydown-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onkeydown', false);"><tt><b>onKeyDown</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onkeydown', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>A reference to the <a href="../classes/Tool.html#onkeydown"><tt>tool.onKeyDown</tt></a> handler function.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+			
+<div id="onkeyup-member" class="member">
+<div id="onkeyup-link" class="member-link">
+<a name="onkeyup" href="#" onClick="return toggleMember('onkeyup', false);"><tt><b>onKeyUp</b></tt></a>
+</div>
+<div id="onkeyup-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('onkeyup', false);"><tt><b>onKeyUp</b></tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('onkeyup', false);"></div>
+<div class="clear"></div>
+</div>
+
+<div class="member-text">
+	<p>A reference to the <a href="../classes/Tool.html#onkeyup"><tt>tool.onKeyUp</tt></a> handler function.</p>
+	
+	
+	<ul><b>Type:</b>
+	<li>
+		<tt>Function</tt>
+	</li>
+	</ul>
+	
+	
+</div>
+
+</div>
+</div>
+		
+	</div>
+
+
+
+<!-- ============================== methods ================================ -->
+	<div class="reference-members"><h2>Methods</h2>
+		
+			
+<div id="initialize-member" class="member">
+<div id="initialize-link" class="member-link">
+<a name="initialize" href="#" onClick="return toggleMember('initialize', false);"><tt><b>initialize</b>()</tt></a>
+</div>
+<div id="initialize-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('initialize', false);"><tt><b>initialize</b>()</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('initialize', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	
+	
+	
+	
+	
+</div>
+</div>
+</div>
+		
+			
+<div id="exportproject-project-member" class="member">
+<div id="exportproject-project-link" class="member-link">
+<a name="exportproject-project" href="#" onClick="return toggleMember('exportproject-project', false);"><tt><b>exportProject</b>(project)</tt></a>
+</div>
+<div id="exportproject-project-description" class="member-description hidden">
+<div class="member-header">
+<div class="member-title">
+<div class="member-link">
+<a href="#" onClick="return toggleMember('exportproject-project', false);"><tt><b>exportProject</b>(project)</tt></a>
+</div>
+</div>
+<div class="member-close"><input type="button" value="Close" onClick="toggleMember('exportproject-project', false);"></div>
+<div class="clear"></div>
+</div>
+<div class="member-text">
+	<p>Takes the selected Paper.js project and parses all of its layers and
+groups to be placed into SVG groups, converting the project into one
+SVG group.</p>
+	
+<ul><b>Parameters:</b>
+
+<li>
+<tt>project:</tt> 
+<tt>Paper.js</tt> Project
+&mdash;&nbsp;A Paper.js project
+
+</li>
+
+</ul>
+
+	
+	<ul><b>Returns:</b>
+	
+		<li>
+<tt><tt>SVG</tt> DOM</tt>&nbsp;&mdash;&nbsp;this.svgObj The imported project converted to an
+SVG project
+</li>
+	
+	</ul>
+
+	
+	
+</div>
+</div>
+</div>
+		
+	</div>
+
+
+
+
+<!-- =========================== copyright notice ========================= -->
+<p class="footer">Copyright &#169; 2011 <a href="http://www.lehni.org" target="_blank">J&uuml;rg Lehni</a> &amp; <a href="http://www.jonathanpuckey.com" target="_blank">Jonathan Puckey</a>. All Rights Reserved.</p>
+<div class="content-end"></div>
+
+</body>
\ No newline at end of file
diff --git a/dist/docs/classes/index.html b/dist/docs/classes/index.html
new file mode 100644
index 00000000..871e0c3c
--- /dev/null
+++ b/dist/docs/classes/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Paper.js</title>
+<base target="classFrame">
+<link rel="stylesheet" href="../resources/css/reference.css" type="text/css">
+<link rel="stylesheet" href="../resources/css/style.css" type="text/css">
+<script src="../resources/js/bootstrap.js" type="text/javascript"></script>
+<script src="../resources/js/reference.js" type="text/javascript"></script>
+</head>
+<body class="reference">
+<div class="reference-packages">
+<h1>Paper.js</h1>
+<ul class="package-classes"><li><a href="../classes/global.html">Global Scope</a></li>
+<li>
+<h2>Basic Types</h2>
+<ul>
+<li><a href="../classes/Point.html">Point</a></li>
+<li><a href="../classes/Size.html">Size</a></li>
+<li><a href="../classes/Rectangle.html">Rectangle</a></li>
+<li><a href="../classes/Matrix.html">Matrix</a></li>
+</ul>
+<li>
+<h2>Items</h2>
+<ul>
+<li><a href="../classes/Item.html">Item</a></li>
+<li><a href="../classes/Layer.html">Layer</a></li>
+<li><a href="../classes/Group.html">Group</a></li>
+<li><a href="../classes/PlacedItem.html">PlacedItem</a></li>
+<li><a href="../classes/Raster.html">Raster</a></li>
+<li><a href="../classes/PlacedSymbol.html">PlacedSymbol</a></li>
+<li><hr /></li>
+<li><a href="../classes/HitResult.html">HitResult</a></li>
+</ul>
+<li>
+<h2>Paths</h2>
+<ul>
+<li><a href="../classes/PathItem.html">PathItem</a></li>
+<li><a href="../classes/Path.html">Path</a></li>
+<li><a href="../classes/CompoundPath.html">CompoundPath</a></li>
+<li><a href="../classes/Segment.html">Segment</a></li>
+<li><a href="../classes/Curve.html">Curve</a></li>
+<li><a href="../classes/PathStyle.html">PathStyle</a></li>
+<li><hr /></li>
+<li><a href="../classes/CurveLocation.html">CurveLocation</a></li>
+</ul>
+<li>
+<h2>Projects</h2>
+<ul>
+<li><a href="../classes/Project.html">Project</a></li>
+<li><a href="../classes/Symbol.html">Symbol</a></li>
+</ul>
+<li>
+<h2>Colors</h2>
+<ul>
+<li><a href="../classes/Color.html">Color</a></li>
+<li><a href="../classes/RgbColor.html">RgbColor</a></li>
+<li><a href="../classes/GrayColor.html">GrayColor</a></li>
+<li><a href="../classes/HsbColor.html">HsbColor</a></li>
+<li><a href="../classes/HslColor.html">HslColor</a></li>
+</ul>
+<li>
+<h2>Gradients</h2>
+<ul>
+<li><a href="../classes/GradientColor.html">GradientColor</a></li>
+<li><a href="../classes/Gradient.html">Gradient</a></li>
+<li><a href="../classes/GradientStop.html">GradientStop</a></li>
+</ul>
+<li>
+<h2>Interface</h2>
+<ul>
+<li><a href="../classes/View.html">View</a></li>
+<li><a href="../classes/Tool.html">Tool</a></li>
+<li><a href="../classes/ToolEvent.html">ToolEvent</a></li>
+<li><a href="../classes/Key.html">Key</a></li>
+<li><a href="../classes/KeyEvent.html">KeyEvent</a></li>
+</ul>
+<li>
+<h2>Typography</h2>
+<ul>
+<li><a href="../classes/TextItem.html">TextItem</a></li>
+<li><a href="../classes/PointText.html">PointText</a></li>
+<li><h3>Style</h3></li>
+<li><a href="../classes/CharacterStyle.html">CharacterStyle</a></li>
+<li><a href="../classes/ParagraphStyle.html">ParagraphStyle</a></li>
+</ul>
+<li>
+<h2>JavaScript</h2>
+<ul>
+<li><a href="../classes/PaperScope.html">PaperScope</a></li>
+<li><a href="../classes/PaperScript.html">PaperScript</a></li>
+</ul>
+</ul>
+</body>
+</html>
\ No newline at end of file
diff --git a/dist/docs/index.html b/dist/docs/index.html
new file mode 100644
index 00000000..198c41b4
--- /dev/null
+++ b/dist/docs/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>
+Paper.js API
+</title>
+</head>
+<frameset cols="230,*">
+<frame src="classes/index.html" name="packageListFrame" title="All Packages">
+<frame src="about:blank" name="classFrame" title="Class and interface descriptions">
+</frameset>
+</html>
diff --git a/dist/docs/resources/css/assets/bullet.gif b/dist/docs/resources/css/assets/bullet.gif
new file mode 100644
index 0000000000000000000000000000000000000000..1789496d2e8f2b05ba41eef2d231489051507b22
GIT binary patch
literal 44
tcmZ?wbhEHbWM^PxXkcJ4H8o{mU{L(Y0wft2bU*}1hJlH>g`btd8UTw21o{8~

literal 0
HcmV?d00001

diff --git a/dist/docs/resources/css/codemirror.css b/dist/docs/resources/css/codemirror.css
new file mode 100644
index 00000000..98bbf7d3
--- /dev/null
+++ b/dist/docs/resources/css/codemirror.css
@@ -0,0 +1,141 @@
+.CodeMirror,
+.CodeMirror textarea,
+.CodeMirror pre {
+	font-family: Menlo, Consolas, "Vera Mono", monospace;
+	font-size: 12px;
+}
+
+.CodeMirror {
+	overflow: auto;
+	height: 100%;
+}
+
+.CodeMirror-gutter {
+	position: absolute;
+	left: 0;
+	top: 0;
+	min-width: 30px;
+	height: 100%;
+	background-color: #f4f4f4;
+	border-right: 1px solid #999;
+}
+
+.CodeMirror-gutter-text {
+	color: #aaa;
+	text-align: right;
+	padding: 2px 8px 2px 8px; /* 2px required for CodeMirror-selected */
+}
+
+.CodeMirror-gutter-text pre {
+	font-size: 10px;
+}
+
+.CodeMirror-lines {
+	background: #ffffff;
+	padding: 2px 0 2px 8px; /* 2px required for CodeMirror-selected */
+}
+
+.CodeMirror-lines pre.highlight {
+	background-color: #edf5fc;
+}
+
+/*
+.CodeMirror-lines pre:hover {
+	background-color: #edf5fc;
+}
+
+.CodeMirror-lines pre.highlight:hover {
+	background-color: #ffffff;
+}
+*/
+
+.CodeMirror pre {
+	line-height: 16px;
+	margin: 0;
+	padding: 0;
+	background: transparent;
+	font-family: inherit;
+}
+
+.CodeMirror-cursor {
+	z-index: 10;
+	position: absolute;
+	visibility: hidden;
+	border-left: 1px solid #7c7c7c !important;
+	height: 16px;
+}
+
+.CodeMirror-focused .CodeMirror-cursor {
+	visibility: visible;
+}
+
+span.CodeMirror-selected {
+	background: #ccc !important;
+	color: HighlightText !important;
+	padding: 2px 0 2px 0;
+}
+
+.CodeMirror-focused span.CodeMirror-selected {
+	background: Highlight !important;
+}
+
+.CodeMirror-matchingbracket {
+	background: #e3fc8d !important;
+}
+
+.CodeMirror-nonmatchingbracket {
+	color: #d62a28 !important;
+}
+
+/* JavaScript */
+
+span.cm-keyword {
+	color: #ff7800;
+}
+span.cm-atom,
+span.cm-number {
+	color: #3b5bb5;
+}
+span.cm-def,
+span.cm-variable-2,
+span.cm-variable-3 {
+	color: #3a4a64;
+}
+span.cm-variable {
+	color: #000;
+}
+span.cm-property {
+	color: #000;
+}
+span.cm-operator {
+	color: #000;
+}
+span.cm-comment {
+	color: #8c868f;
+}
+span.cm-string {
+	color: #409b1c;
+}
+span.cm-meta {
+	color: #555;
+}
+span.cm-error {
+	color: #f30;
+}
+span.cm-qualifier {
+	color: #555;
+}
+span.cm-builtin {
+	color: #30a;
+}
+span.cm-bracket {
+	color: #cc7;
+}
+span.cm-tag {
+	font-weight: bold;
+	color: #3b5bb5;
+}
+span.cm-attribute {
+	font-style: italic;
+	color: #3b5bb5;
+}
diff --git a/dist/docs/resources/css/paperscript.css b/dist/docs/resources/css/paperscript.css
new file mode 100644
index 00000000..c296c3c1
--- /dev/null
+++ b/dist/docs/resources/css/paperscript.css
@@ -0,0 +1,64 @@
+.paperscript .button,
+.paperscript .explain {
+	display: none;
+	position: relative; /* position (top / right) relative to paperscriptcontainer */
+	float: right; /* align right as block */
+	font-size: 11px;
+	line-height: 16px;
+	padding: 2px 6px;
+	margin-bottom: -20px; /* move canvas up by 16px (height) + 2 * 2px (padding) */
+	border-radius: 4px;
+	-moz-border-radius: 4px;
+	-webkit-border-radius: 4px;
+	z-index: 1;
+	top: 8px; /* margin to top */
+}
+
+.paperscript .button {
+	right: 8px; /* margin to right */
+	background: #eee;
+}
+
+.paperscript .explain {
+	display: block;
+	right: 64px; /* margin to right */
+	background: #e3f4fc;
+	margin-bottom: -36px; /* (height) + 2 * 2px (padding) */
+}
+
+.paperscript:hover .button {
+	display: block;
+}
+
+.paperscript .button:hover {
+	background: #ddd;
+	cursor: pointer;
+}
+
+.paperscript .source {
+	overflow: auto;
+	border: 1px solid #999;
+}
+
+.paperscript .CodeMirror {
+	margin: 0 !important; /* Override any potential margins again */
+}
+
+.paperscript .CodeMirror-gutter-text,
+.paperscript .CodeMirror-lines {
+	padding-top: 10px;
+	padding-bottom: 10px;
+}
+
+.paperscript .canvas {
+	line-height: 0; /* prevent weird 5px padding under canvas elements */
+}
+
+.paperscript .canvas.border canvas {
+	border: 1px solid #999;
+}
+
+.paperscript.split .canvas {
+	border: 1px solid #999;
+	border-top: 0;
+}
diff --git a/dist/docs/resources/css/reference.css b/dist/docs/resources/css/reference.css
new file mode 100644
index 00000000..d9e152c3
--- /dev/null
+++ b/dist/docs/resources/css/reference.css
@@ -0,0 +1,128 @@
+/* These styles are shared with the server version of docs */
+
+.reference h1, .reference h2, .reference h3 {
+	font-size: 13px;
+	font-weight: normal;
+	height: 18px; /* -2px so border-bottom aligns with contained links */
+	border-bottom: 1px solid;
+	margin-top: 0;
+	margin-bottom: 16px;
+}
+
+.reference h3 {
+	margin-top: 16px;
+	border-bottom-style: dotted;
+}
+
+.reference a tt {
+	line-height: 18px;
+}
+
+.reference p {
+	margin: 0 0 16px 0;
+}
+
+.reference ul {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.reference-list ul, .reference-inherited ul {
+	margin-left: 16px;
+}
+
+.reference hr {
+	border: none;
+	border-bottom: 1px dotted;
+}
+
+.reference-packages {
+	margin-left: 0px;
+}
+
+.reference-packages h2, .reference-packages h3, .reference-packages hr {
+	margin: 10px 0 10px 0;
+}
+
+.reference-packages .first h2 {
+	margin-top: 0;
+}
+
+* html .reference-packages img {
+	margin-top: 5px;
+}
+
+.reference-packages li {
+	list-style: none;
+	list-style-image: none; /* needed for ie 6 */
+}
+
+.reference-members {
+	margin-bottom: 16px;
+}
+
+.member-group-text {
+	margin-bottom: 16px;
+}
+
+.member-description {
+	border: 1px solid #999;
+	/* .member-header defines border-top for operator lists */
+	border-top: 0;
+	margin: 16px 0 16px 0;
+}
+
+.member-header {
+	border-top: 1px solid #999;
+	padding: 10px;
+}
+
+.member-title {
+	float: left;
+	width: 400px;
+}
+
+.member-close {
+	float: right;
+}
+
+.member-text {
+	border-top: 1px dashed #999;
+	padding: 10px 10px 0 10px;
+	margin-bottom: -6px; /* Compensate margins of p and ul to end up with 10px */
+}
+
+.reference ul,
+.reference .paperscript,
+.reference .CodeMirror {
+	margin-top: -8px; /* Move half way up close to previous paragraph */
+	margin-bottom: 16px;
+}
+
+.reference ul {
+	margin-top: 0; /* Clear the above -10px for ul again */
+}
+
+.member-link {
+	text-indent: -30px;
+	padding-left: 30px;
+}
+
+.reference-inherited ul li {
+	text-indent: -30px;
+	padding-left: 30px;
+}
+
+.package-classes {
+	padding-bottom: 4px;
+}
+
+.package-classes ul {
+	margin-left: 10px;
+	margin-bottom: 10px;
+}
+
+.reference h2 a {
+	font-weight: bold;
+}
diff --git a/dist/docs/resources/css/style.css b/dist/docs/resources/css/style.css
new file mode 100644
index 00000000..e74a2dea
--- /dev/null
+++ b/dist/docs/resources/css/style.css
@@ -0,0 +1,86 @@
+body, select, input, textarea {
+	font-family: "Lucida Grande", Geneva, Verdana, Arial, sans-serif;
+}
+
+body {
+	background: #fff;
+	margin: 16px;
+	font-size: 13px;
+	line-height: 20px;
+	color: #000;
+	max-width: 540px;
+}
+
+select, input, textarea {
+	font-size: 11px;
+	margin: 0;
+	color: #000;
+}
+
+tt, pre {
+	font-family: Menlo, Consolas, "Vera Mono", monospace;
+	font-size: 12px;
+	line-height: 20px;
+}
+
+a {
+	color: #000;
+	text-decoration: none;
+	border-bottom: 1px solid #000;
+}
+
+img {
+	border: 0;
+}
+
+a:hover {
+	background: #e5e5e5;
+}
+
+p {
+	margin: 0 0 20px 0;
+}
+
+ul {
+	padding: 0;
+	margin: 0 0 20px 16px;
+	list-style: disc outside url(assets/bullet.gif);
+}
+
+ol {
+	padding: 0;
+	margin: 0 0 20px 0;
+}
+
+.clear {
+	clear: both;
+}
+
+.hidden {
+	display: none;
+}
+
+.reference-packages, .reference-packages a {
+	color: #009dec;
+	border-bottom: 0px;
+}
+
+/* Border-bottom color for headers and ruler */
+.reference-packages h2, .reference-packages h3, .reference-packages hr {
+	border-color: #009dec;
+}
+
+.reference-packages a:hover {
+	background: #e3f4fc;
+}
+
+.reference h1 {
+	font-size: 18px;
+	font-weight: normal;
+	line-height: 24px;
+	border: none;
+}
+
+.footer {
+	margin-top: 20px;
+}
diff --git a/dist/docs/resources/js/bootstrap.js b/dist/docs/resources/js/bootstrap.js
new file mode 100644
index 00000000..59d03a88
--- /dev/null
+++ b/dist/docs/resources/js/bootstrap.js
@@ -0,0 +1,4040 @@
+new function() { 
+	var fix = !this.__proto__ && [Function, Number, Boolean, String, Array, Date, RegExp];
+	if (fix)
+		for (var i in fix)
+			fix[i].prototype.__proto__ = fix[i].prototype;
+
+	var has = {}.hasOwnProperty
+		? function(obj, name) {
+			return (!fix || name != '__proto__') && obj.hasOwnProperty(name);
+		}
+		: function(obj, name) {
+			return obj[name] !== (obj.__proto__ || Object.prototype)[name];
+		};
+
+	function inject(dest, src, enumerable, base, preserve, generics) {
+
+		function field(name, dontCheck, generics) {
+			var val = src[name], func = typeof val == 'function', res = val, prev = dest[name];
+			if (generics && func && (!preserve || !generics[name])) generics[name] = function(bind) {
+				return bind && dest[name].apply(bind,
+					Array.prototype.slice.call(arguments, 1));
+			}
+			if ((dontCheck || val !== undefined && has(src, name)) && (!preserve || !prev)) {
+				if (func) {
+					if (prev && /\bthis\.base\b/.test(val)) {
+						var fromBase = base && base[name] == prev;
+						res = (function() {
+							var tmp = this.base;
+							this.base = fromBase ? base[name] : prev;
+							try { return val.apply(this, arguments); }
+							finally { tmp ? this.base = tmp : delete this.base; }
+						}).pretend(val);
+					}
+				}
+				dest[name] = res;
+			}
+		}
+		if (src) {
+			for (var name in src)
+				if (has(src, name) && !/^(statics|generics|preserve|prototype|constructor|__proto__|toString|valueOf)$/.test(name))
+					field(name, true, generics);
+			field('toString');
+			field('valueOf');
+		}
+	}
+
+	function extend(obj) {
+		function ctor(dont) {
+			if (fix) this.__proto__ = obj;
+			if (this.initialize && dont !== ctor.dont)
+				return this.initialize.apply(this, arguments);
+		}
+		ctor.prototype = obj;
+		ctor.toString = function() {
+			return (this.prototype.initialize || function() {}).toString();
+		}
+		return ctor;
+	}
+
+	inject(Function.prototype, {
+		inject: function(src) {
+			if (src) {
+				var proto = this.prototype, base = proto.__proto__ && proto.__proto__.constructor;
+				inject(proto, src, false, base && base.prototype, src.preserve, src.generics && this);
+				inject(this, src.statics, true, base, src.preserve);
+			}
+			for (var i = 1, l = arguments.length; i < l; i++)
+				this.inject(arguments[i]);
+			return this;
+		},
+
+		extend: function(src) {
+			var proto = new this(this.dont), ctor = proto.constructor = extend(proto);
+			ctor.dont = {};
+			inject(ctor, this, true);
+			return arguments.length ? this.inject.apply(ctor, arguments) : ctor;
+		},
+
+		pretend: function(fn) {
+			this.toString = function() {
+				return fn.toString();
+			}
+			this.valueOf = function() {
+				return fn.valueOf();
+			}
+			return this;
+		}
+	});
+
+	function each(obj, iter, bind) {
+		return obj ? (typeof obj.length == 'number'
+			? Array : Hash).prototype.each.call(obj, iter, bind) : bind;
+	}
+
+	Base = Object.extend({
+		has: function(name) {
+			return has(this, name);
+		},
+
+		each: function(iter, bind) {
+			return each(this, iter, bind);
+		},
+
+		inject: function() {
+			for (var i = 0, l = arguments.length; i < l; i++)
+				inject(this, arguments[i]);
+			return this;
+		},
+
+		extend: function() {
+			var res = new (extend(this));
+			return res.inject.apply(res, arguments);
+		},
+
+		statics: {
+			has: has,
+			each: each,
+
+			type: function(obj) {
+				return (obj || obj === 0) && (
+					obj._type || obj.nodeName && (
+						obj.nodeType == 1 && 'element' ||
+						obj.nodeType == 3 && 'textnode' ||
+						obj.nodeType == 9 && 'document')
+						|| obj.location && obj.frames && obj.history && 'window'
+						|| typeof obj) || null;
+			},
+
+			check: function(obj) {
+				return !!(obj || obj === 0);
+			},
+
+			pick: function() {
+				for (var i = 0, l = arguments.length; i < l; i++)
+					if (arguments[i] !== undefined)
+						return arguments[i];
+				return null;
+			},
+
+			iterator: function(iter) {
+				return !iter
+					? function(val) { return val }
+					: typeof iter != 'function'
+						? function(val) { return val == iter }
+						: iter;
+			},
+
+			stop: {}
+		}
+	}, {
+		generics: true,
+
+		debug: function() {
+			return /^(string|number|function|regexp)$/.test(Base.type(this)) ? this
+				: Base.each(this, function(val, key) { this.push(key + ': ' + val); }, []).join(', ');
+		},
+
+		clone: function() {
+			return Base.each(this, function(val, i) {
+				this[i] = val;
+			}, new this.constructor());
+		},
+
+		toQueryString: function() {
+			return Base.each(this, function(val, key) {
+				this.push(key + '=' + encodeURIComponent(val));
+			}, []).join('&');
+		}
+	});
+}
+
+$each = Base.each;
+$type = Base.type;
+$check = Base.check;
+$pick = Base.pick;
+$stop = $break = Base.stop;
+
+Enumerable = {
+	generics: true,
+	preserve: true,
+
+	findEntry: function(iter, bind) {
+		var that = this, iter = Base.iterator(iter), ret = null;
+		Base.each(this, function(val, key) {
+			var res = iter.call(bind, val, key, that);
+			if (res) {
+				ret = { key: key, value: val, result: res };
+				throw Base.stop;
+			}
+		});
+		return ret;
+	},
+
+	find: function(iter, bind) {
+		var entry = this.findEntry(iter, bind);
+		return entry && entry.result;
+	},
+
+	contains: function(iter) {
+		return !!this.findEntry(iter);
+	},
+
+	remove: function(iter, bind) {
+		var entry = this.findEntry(iter, bind);
+		if (entry) {
+			delete this[entry.key];
+			return entry.value;
+		}
+	},
+
+	filter: function(iter, bind) {
+		var that = this;
+		return Base.each(this, function(val, i) {
+			if (iter.call(bind, val, i, that))
+				this[this.length] = val;
+		}, []);
+	},
+
+	map: function(iter, bind) {
+		var that = this;
+		return Base.each(this, function(val, i) {
+			this[this.length] = iter.call(bind, val, i, that);
+		}, []);
+	},
+
+	every: function(iter, bind) {
+		var that = this;
+		return this.find(function(val, i) {
+			return !iter.call(this, val, i, that);
+		}, bind || null) == null;
+	},
+
+	some: function(iter, bind) {
+		return this.find(iter, bind || null) != null;
+	},
+
+	collect: function(iter, bind) {
+		var that = this, iter = Base.iterator(iter);
+		return Base.each(this, function(val, i) {
+		 	val = iter.call(bind, val, i, that);
+			if (val != null)
+				this[this.length] = val;
+		}, []);
+	},
+
+	max: function(iter, bind) {
+		var that = this, iter = Base.iterator(iter);
+		return Base.each(this, function(val, i) {
+			val = iter.call(bind, val, i, that);
+			if (val >= (this.max || val)) this.max = val;
+		}, {}).max;
+	},
+
+	min: function(iter, bind) {
+		var that = this, iter = Base.iterator(iter);
+		return Base.each(this, function(val, i) {
+			val = iter.call(bind, val, i, that);
+			if (val <= (this.min || val)) this.min = val;
+		}, {}).min;
+	},
+
+	pluck: function(prop) {
+		return this.map(function(val) {
+			return val[prop];
+		});
+	},
+
+	sortBy: function(iter, bind) {
+		var that = this, iter = Base.iterator(iter);
+		return this.map(function(val, i) {
+			return { value: val, compare: iter.call(bind, val, i, that) };
+		}, bind).sort(function(left, right) {
+			var a = left.compare, b = right.compare;
+			return a < b ? -1 : a > b ? 1 : 0;
+		}).pluck('value');
+	},
+
+	toArray: function() {
+		return this.map(function(value) {
+			return value;
+		});
+	}
+};
+
+Hash = Base.extend(Enumerable, {
+	generics: true,
+
+	initialize: function(arg) {
+		if (typeof arg == 'string') {
+			for (var i = 0, l = arguments.length; i < l; i += 2)
+				this[arguments[i]] = arguments[i + 1];
+		} else {
+			this.append.apply(this, arguments);
+		}
+		return this;
+	},
+
+	each: function(iter, bind) {
+		var bind = bind || this, iter = Base.iterator(iter), has = Base.has;
+		try {
+			for (var i in this)
+				if (has(this, i))
+					iter.call(bind, this[i], i, this);
+		} catch (e) {
+			if (e !== Base.stop) throw e;
+		}
+		return bind;
+	},
+
+	append: function() {
+		for (var i = 0, l = arguments.length; i < l; i++) {
+			var obj = arguments[i];
+			for (var key in obj)
+				if (Base.has(obj, key))
+					this[key] = obj[key];
+		}
+		return this;
+	},
+
+	merge: function() {
+		return Array.each(arguments, function(obj) {
+			Base.each(obj, function(val, key) {
+				this[key] = Base.type(this[key]) == 'object'
+					? Hash.prototype.merge.call(this[key], val)
+					: Base.type(val) == 'object' ? Base.clone(val) : val;
+			}, this);
+		}, this);
+	},
+
+	getKeys: function() {
+		return Hash.getKeys(this);
+	},
+
+	getValues: Enumerable.toArray,
+
+	getSize: function() {
+		return this.each(function() {
+			this.size++;
+		}, { size: 0 }).size;
+	},
+
+	statics: {
+		create: function(obj) {
+			return arguments.length == 1 && obj.constructor == Hash
+				? obj : Hash.prototype.initialize.apply(new Hash(), arguments);
+		},
+
+		getKeys: Object.keys || function(obj) {
+			return Hash.map(function(val, key) {
+				return key;
+			});
+		}
+	}
+});
+
+$H = Hash.create;
+
+Array.inject({
+	generics: true,
+	preserve: true,
+	_type: 'array',
+
+	forEach: function(iter, bind) {
+		for (var i = 0, l = this.length; i < l; i++)
+			iter.call(bind, this[i], i, this);
+	},
+
+	indexOf: function(obj, i) {
+		i = i || 0;
+		if (i < 0) i = Math.max(0, this.length + i);
+		for (var l = this.length; i < l; i++)
+			if (this[i] == obj) return i;
+		return -1;
+	},
+
+	lastIndexOf: function(obj, i) {
+		i = i != null ? i : this.length - 1;
+		if (i < 0) i = Math.max(0, this.length + i);
+		for (; i >= 0; i--)
+			if (this[i] == obj) return i;
+		return -1;
+	},
+
+	filter: function(iter, bind) {
+		var res = [];
+		for (var i = 0, l = this.length; i < l; i++) {
+			var val = this[i];
+			if (iter.call(bind, val, i, this))
+				res[res.length] = val;
+		}
+		return res;
+	},
+
+	map: function(iter, bind) {
+		var res = new Array(this.length);
+		for (var i = 0, l = this.length; i < l; i++)
+			res[i] = iter.call(bind, this[i], i, this);
+		return res;
+	},
+
+	every: function(iter, bind) {
+		for (var i = 0, l = this.length; i < l; i++)
+			if (!iter.call(bind, this[i], i, this))
+				return false;
+		return true;
+	},
+
+	some: function(iter, bind) {
+		for (var i = 0, l = this.length; i < l; i++)
+			if (iter.call(bind, this[i], i, this))
+				return true;
+		return false;
+	},
+
+	reduce: function(fn, value) {
+		var i = 0;
+		if (arguments.length < 2 && this.length) value = this[i++];
+		for (var l = this.length; i < l; i++)
+			value = fn.call(null, value, this[i], i, this);
+		return value;
+	},
+
+	statics: {
+		isArray: function(obj) {
+			return Object.prototype.toString.call(obj) === '[object Array]';
+		}
+	}
+}, Enumerable, {
+	generics: true,
+
+	each: function(iter, bind) {
+		try {
+			Array.prototype.forEach.call(this, Base.iterator(iter), bind = bind || this);
+		} catch (e) {
+			if (e !== Base.stop) throw e;
+		}
+		return bind;
+	},
+
+	collect: function(iter, bind) {
+		var that = this;
+		return this.each(function(val, i) {
+			if ((val = iter.call(bind, val, i, that)) != null)
+				this[this.length] = val;
+		}, []);
+	},
+
+	findEntry: function(iter, bind) {
+		if (typeof iter != 'function') {
+			var i = this.indexOf(iter);
+			return i == -1 ? null : { key: i, value: iter, result: iter };
+		}
+		return Enumerable.findEntry.call(this, iter, bind);
+	},
+
+	remove: function(iter, bind) {
+		var entry = this.findEntry(iter, bind);
+		if (entry) {
+			this.splice(entry.key, 1);
+			return entry.value;
+		}
+	},
+
+	toArray: function() {
+		return Array.prototype.slice.call(this);
+	},
+
+	clone: function() {
+		return this.toArray();
+	},
+
+	clear: function() {
+		this.length = 0;
+	},
+
+	compact: function() {
+		return this.filter(function(value) {
+			return value != null;
+		});
+	},
+
+	append: function(items) {
+		for (var i = 0, l = items.length; i < l; i++)
+			this[this.length++] = items[i];
+		return this;
+	},
+
+	associate: function(obj) {
+		if (!obj)
+			obj = this;
+		else if (typeof obj == 'function')
+			obj = this.map(obj);
+		if (obj.length != null) {
+			var that = this;
+			return Base.each(obj, function(name, index) {
+				this[name] = that[index];
+				if (index == that.length)
+					throw Base.stop;
+			}, {});
+		} else {
+			obj = Hash.append({}, obj);
+			return Array.each(this, function(val) {
+				var type = Base.type(val);
+				Base.each(obj, function(hint, name) {
+					if (hint == 'any' || type == hint) {
+						this[name] = val;
+						delete obj[name];
+						throw Base.stop;
+					}
+				}, this);
+			}, {});
+		}
+	},
+
+	flatten: function() {
+		return Array.each(this, function(val) {
+			if (val != null && val.flatten) this.append(val.flatten());
+			else this.push(val);
+		}, []);
+	},
+
+	swap: function(i, j) {
+		var tmp = this[j];
+		this[j] = this[i];
+		this[i] = tmp;
+		return tmp;
+	},
+
+	shuffle: function() {
+		var res = this.clone();
+		var i = this.length;
+		while (i--) res.swap(i, Math.rand(i + 1));
+		return res;
+	},
+
+	pick: function() {
+		return this[Math.rand(this.length)];
+	},
+
+	getFirst: function() {
+		return this[0];
+	},
+
+	getLast: function() {
+		return this[this.length - 1];
+	}
+}, new function() {
+	function combine(subtract) {
+		return function(items) {
+			var res = new this.constructor();
+			for (var i = this.length - 1; i >= 0; i--)
+				if (subtract == !Array.find(items, this[i]))
+					res.push(this[i]);
+			return res;
+		}
+	}
+
+	return {
+		subtract: combine(true),
+
+		intersect: combine(false)
+	}
+});
+
+Array.inject(new function() {
+	var proto = Array.prototype, fields = ['push','pop','shift','unshift','sort',
+		'reverse','join','slice','splice','forEach','indexOf','lastIndexOf',
+		'filter','map','every','some','reduce','concat'].each(function(name) {
+		this[name] = proto[name];
+	}, { generics: true, preserve: true });
+
+	Array.inject(fields);
+
+	Hash.append(fields, proto, {
+		clear: function() {
+			for (var i = 0, l = this.length; i < l; i++)
+				delete this[i];
+			this.length = 0;
+		},
+
+		concat: function(list) {
+			return Browser.WEBKIT
+				? new Array(this.length + list.length).append(this).append(list)
+				: Array.concat(this, list);
+		},
+
+		toString: proto.join,
+
+		length: 0
+	});
+
+	return {
+		statics: {
+			create: function(obj) {
+				if (obj == null)
+					return [];
+				if (obj.toArray)
+					return obj.toArray();
+				if (typeof obj.length == 'number')
+					return Array.prototype.slice.call(obj);
+				return [obj];
+			},
+
+			convert: function(obj) {
+				return Base.type(obj) == 'array' ? obj : Array.create(obj);
+			},
+
+			extend: function(src) {
+				var ret = Base.extend(fields, src);
+				ret.extend = Function.extend;
+				return ret;
+			}
+		}
+	};
+});
+
+$A = Array.create;
+
+Function.inject(new function() {
+
+	function timer(set) {
+		return function(delay, bind, args) {
+			var func = this.wrap(bind, args);
+			if (delay === undefined)
+				return func();
+			var timer = set(func, delay);
+			func.clear = function() {
+				clearTimeout(timer);
+				clearInterval(timer);
+			};
+			return func;
+		};
+	}
+
+	return {
+		generics: true,
+		preserve: true,
+
+		delay: timer(setTimeout),
+		periodic: timer(setInterval),
+
+		bind: function(bind) {
+			var that = this, slice = Array.prototype.slice,
+				args = arguments.length > 1 ? slice.call(arguments, 1) : null;
+			return function() {
+				return that.apply(bind, args ? arguments.length > 0
+					? args.concat(slice.call(arguments)) : args : arguments);
+			}
+		},
+
+		wrap: function(bind, args) {
+			var that = this;
+			return function() {
+				return that.apply(bind, args || arguments);
+			}
+		}
+	}
+});
+
+Number.inject({
+	_type: 'number',
+
+	limit: function(min, max) {
+		return Math.min(max, Math.max(min, this));
+	},
+
+	times: function(func, bind) {
+		for (var i = 0; i < this; i++)
+			func.call(bind, i);
+		return bind || this;
+	},
+
+	toInt: function(base) {
+		return parseInt(this, base || 10);
+	},
+
+	toFloat: function() {
+		return parseFloat(this);
+	},
+
+	toPaddedString: function(length, base, prefix) {
+		var str = this.toString(base || 10);
+		return (prefix || '0').times(length - str.length) + str;
+	}
+});
+
+String.inject({
+	_type: 'string',
+
+	test: function(exp, param) {
+		return new RegExp(exp, param || '').test(this);
+	},
+
+	toArray: function() {
+		return this ? this.split(/\s+/) : [];
+	},
+
+	toInt: Number.prototype.toInt,
+
+	toFloat: Number.prototype.toFloat,
+
+	camelize: function(separator) {
+		return this.replace(separator ? new RegExp('[' + separator + '](\\w)', 'g') : /-(\w)/g, function(all, chr) {
+			return chr.toUpperCase();
+		});
+	},
+
+	uncamelize: function(separator) {
+		separator = separator || ' ';
+		return this.replace(/[a-z][A-Z0-9]|[0-9][a-zA-Z]|[A-Z]{2}[a-z]/g, function(match) {
+			return match.charAt(0) + separator + match.substring(1);
+		});
+	},
+
+	hyphenate: function(separator) {
+		return this.uncamelize(separator || '-').toLowerCase();
+	},
+
+	capitalize: function() {
+		return this.replace(/\b[a-z]/g, function(match) {
+			return match.toUpperCase();
+		});
+	},
+
+	escapeRegExp: function() {
+		return this.replace(/([-.*+?^${}()|[\]\/\\])/g, '\\$1');
+	},
+
+	trim: function(exp) {
+		exp = exp ? '[' + exp + ']' : '\\s';
+		return this.replace(new RegExp('^' + exp + '+|' + exp + '+$', 'g'), '');
+	},
+
+	clean: function() {
+		return this.replace(/\s{2,}/g, ' ').trim();
+	},
+
+	contains: function(string, sep) {
+		return (sep ? (sep + this + sep).indexOf(sep + string + sep) : this.indexOf(string)) != -1;
+	},
+
+	times: function(count) {
+		return count < 1 ? '' : new Array(count + 1).join(this);
+	},
+
+	isHtml: function() {
+		return /^[^<]*(<(.|\s)+>)[^>]*$/.test(this);
+	}
+});
+
+RegExp.inject({
+	_type: 'regexp'
+});
+
+Date.inject({
+	statics: {
+		SECOND: 1000,
+		MINUTE: 60000,
+		HOUR: 3600000,
+		DAY: 86400000,
+		WEEK: 604800000, 
+		MONTH: 2592000000, 
+		YEAR: 31536000000, 
+
+		now: Date.now || function() {
+			return +new Date();
+		}
+	}
+});
+
+Math.rand = function(first, second) {
+	return second == undefined
+		? Math.rand(0, first)
+		: Math.floor(Math.random() * (second - first) + first);
+}
+
+Array.inject({
+	hexToRgb: function(toArray) {
+		if (this.length >= 3) {
+			var rgb = [];
+			for (var i = 0; i < 3; i++)
+				rgb.push((this[i].length == 1 ? this[i] + this[i] : this[i]).toInt(16));
+			return toArray ? rgb : 'rgb(' + rgb.join(',') + ')';
+		}
+	},
+
+	rgbToHex: function(toArray) {
+		if (this.length >= 3) {
+			if (this.length == 4 && this[3] == 0 && !toArray) return 'transparent';
+			var hex = [];
+			for (var i = 0; i < 3; i++) {
+				var bit = (this[i] - 0).toString(16);
+				hex.push(bit.length == 1 ? '0' + bit : bit);
+			}
+			return toArray ? hex : '#' + hex.join('');
+		}
+	},
+
+	rgbToHsb: function() {
+		var r = this[0], g = this[1], b = this[2];
+		var hue, saturation, brightness;
+		var max = Math.max(r, g, b), min = Math.min(r, g, b);
+		var delta = max - min;
+		brightness = max / 255;
+		saturation = (max != 0) ? delta / max : 0;
+		if (saturation == 0) {
+			hue = 0;
+		} else {
+			var rr = (max - r) / delta;
+			var gr = (max - g) / delta;
+			var br = (max - b) / delta;
+			if (r == max) hue = br - gr;
+			else if (g == max) hue = 2 + rr - br;
+			else hue = 4 + gr - rr;
+			hue /= 6;
+			if (hue < 0) hue++;
+		}
+		return [Math.round(hue * 360), Math.round(saturation * 100), Math.round(brightness * 100)];
+	},
+
+	hsbToRgb: function() {
+		var br = Math.round(this[2] / 100 * 255);
+		if (this[1] == 0) {
+			return [br, br, br];
+		} else {
+			var hue = this[0] % 360;
+			var f = hue % 60;
+			var p = Math.round((this[2] * (100 - this[1])) / 10000 * 255);
+			var q = Math.round((this[2] * (6000 - this[1] * f)) / 600000 * 255);
+			var t = Math.round((this[2] * (6000 - this[1] * (60 - f))) / 600000 * 255);
+			switch (Math.floor(hue / 60)) {
+				case 0: return [br, t, p];
+				case 1: return [q, br, p];
+				case 2: return [p, br, t];
+				case 3: return [p, q, br];
+				case 4: return [t, p, br];
+				case 5: return [br, p, q];
+			}
+		}
+	}
+});
+
+String.inject({
+	hexToRgb: function(toArray) {
+		var hex = this.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
+		return hex && hex.slice(1).hexToRgb(toArray);
+	},
+
+	rgbToHex: function(toArray) {
+		var rgb = this.match(/\d{1,3}/g);
+		return rgb && rgb.rgbToHex(toArray);
+	}
+});
+
+Json = function(JSON) {
+	var special = { '\b': '\\b', '\t': '\\t', '\n': '\\n', '\f': '\\f', '\r': '\\r', '"' : '\\"', "'" : "\\'", '\\': '\\\\' };
+	return {
+		encode: JSON
+			? function(obj, properties) {
+				return JSON.stringify(obj, properties || Browser.TRIDENT && function(key, value) {
+					return key == '__proto__' ? undefined : value;
+				});
+			}
+			: function(obj, properties) {
+				if (Base.type(properties) == 'array') {
+					properties = properties.each(function(val) {
+						this[val] = true;
+					}, {});
+				}
+				switch (Base.type(obj)) {
+					case 'string':
+						return '"' + obj.replace(/[\x00-\x1f\\"]/g, function(chr) {
+							return special[chr] || '\\u' + chr.charCodeAt(0).toPaddedString(4, 16);
+						}) + '"';
+					case 'array':
+						return '[' + obj.collect(function(val) {
+							return Json.encode(val, properties);
+						}) + ']';
+					case 'object':
+					case 'hash':
+						return '{' + Hash.collect(obj, function(val, key) {
+							if (!properties || properties[key]) {
+								val = Json.encode(val, properties);
+								if (val !== undefined)
+									return Json.encode(key) + ':' + val;
+							}
+						}) + '}';
+					case 'function':
+						return undefined;
+					default:
+						return obj + '';
+				}
+				return null;
+			},
+
+		decode: JSON
+			? function(str, secure) {
+				try {
+					return JSON.parse(str);
+				} catch (e) {
+					return null;
+				}
+			}
+			: function(str, secure) {
+				try {
+					return Base.type(str) == 'string' && (str = str.trim()) &&
+						(!secure || /^[\],:{}\s]*$/.test(
+							str.replace(/\\(?:["\\\/bfnrt]|u[0-9a-fA-F]{4})/g, "@")
+								.replace(/"[^"\\\n\r]*"|true|false|null|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?/g, "]")
+								.replace(/(?:^|:|,)(?:\s*\[)+/g, "")))
+									? (new Function('return ' + str))() : null;
+				} catch (e) {
+					return null;
+				}
+			}
+	};
+}(this.JSON);
+
+Browser = new function() {
+	var name = window.orientation != undefined ? 'ipod'
+			: (navigator.platform.match(/mac|win|linux|nix/i) || ['other'])[0].toLowerCase();
+	var fields = {
+		PLATFORM: name,
+		XPATH: !!document.evaluate,
+		QUERY: !!document.querySelector
+	};
+	fields[name.toUpperCase()] = true;
+
+	function getVersion(prefix, min, max) {
+		var ver = (new RegExp(prefix + '([\\d.]+)', 'i').exec(navigator.userAgent) || [0, '0'])[1].split('.');
+		return (ver.slice(0, min).join('') + '.' + ver.slice(min, max || ver.length).join('')).toFloat();
+	}
+
+	var engines = {
+		presto: function() {
+			return !window.opera ? false : getVersion('Presto/', 2) || getVersion('Opera[/ ]', 1);
+		},
+
+		trident: function() {
+			return !window.ActiveXObject ? false : getVersion('MSIE ', 1);
+		},
+
+		webkit: function() {
+			return navigator.taintEnabled ? false : getVersion('WebKit/', 1, 2);
+		},
+
+		gecko: function() {
+			return !document.getBoxObjectFor && window.mozInnerScreenX == null ? false : getVersion('rv:', 2);
+		}
+	};
+
+	for (var engine in engines) {
+		var version = engines[engine]();
+		if (version) {
+			fields.ENGINE = engine;
+			fields.VERSION = version;
+			engine = engine.toUpperCase();
+			fields[engine] = true;
+			fields[(engine + version).replace(/\./g, '')] = true;
+			break;
+		}
+	}
+
+	fields.log = function() {
+		if (!Browser.TRIDENT && window.console && console.log)
+			console.log.apply(console, arguments);
+		else
+			(window.console && console.log
+				|| window.opera && opera.postError
+				|| alert)(Array.join(arguments, ' '));
+	}
+
+	return fields;
+};
+
+DomNodes = Array.extend(new function() {
+	var unique = 0;
+	return {
+		initialize: function(nodes) {
+			this._unique = unique++;
+			this.append(nodes && nodes.length != null && !nodes.nodeType
+				? nodes : arguments);
+		},
+
+		push: function() {
+			this.append(arguments);
+			return this.length;
+		},
+
+		append: function(items) {
+			for (var i = 0, l = items.length; i < l; i++) {
+				var el = items[i];
+				if ((el = el && (el._wrapper || DomNode.wrap(el))) && el._unique != this._unique) {
+					el._unique = this._unique;
+					this[this.length++] = el;
+				}
+			}
+			return this;
+		},
+
+		toNode: function() {
+			return this;
+		},
+
+		statics: {
+			inject: function(src) {
+				var proto = this.prototype;
+				this.base(Base.each(src || {}, function(val, key) {
+					if (typeof val == 'function') {
+						var func = val, prev = proto[key];
+						var count = func.length, prevCount = prev && prev.length;
+						val = function() {
+							var args = arguments, values;
+							if (prev && args.length == prevCount
+								|| (args.length > count && args.length <= prevCount))
+								return prev.apply(this, args);
+							this.each(function(obj) {
+								var ret = (obj[key] || func).apply(obj, args);
+								if (ret !== undefined && ret != obj) {
+									values = values || (DomNode.isNode(ret)
+										? new obj._collection() : []);
+									values.push(ret);
+								}
+							});
+							return values || this;
+						}
+					}
+					this[key] = val;
+				}, {}));
+				for (var i = 1, l = arguments.length; i < l; i++)
+					this.inject(arguments[i]);
+				return this;
+			}
+		}
+	};
+});
+
+DomNode = Base.extend(new function() {
+	var nodes = [];
+	var tags = {}, classes = {}, classCheck, unique = 0;
+
+	function dispose(force) {
+		for (var i = nodes.length - 1; i >= 0; i--) {
+			var el = nodes[i];
+			if (force || (!el || el != window && el != document &&
+				(!el.parentNode || !el.offsetParent))) {
+				if (el) {
+					var obj = el._wrapper;
+					if (obj && obj.finalize) obj.finalize();
+					el._wrapper = el._unique = null;
+				}
+				if (!force) nodes.splice(i, 1);
+			}
+		}
+	}
+
+	function inject(src) {
+		src = src || {};
+		(src._methods || []).each(function(name) {
+			src[name] = function(arg) {
+				var ret = this.$[name] && this.$[name](arg);
+				return ret === undefined ? this : ret;
+			}
+		});
+		(src._properties || []).each(function(name) {
+			var part = name.capitalize(), prop = name.toLowerCase();
+			src['get' + part] = function() {
+				return this.getProperty(prop);
+			}
+			src['set' + part] = function(value) {
+				return this.setProperty(prop, value);
+			}
+		});
+		delete src._methods;
+		delete src._properties;
+		return Function.inject.call(this, src);
+	}
+
+	function getConstructor(el) {
+		var match;
+		return classCheck && el.className && (match = el.className.match(classCheck)) && match[2] && classes[match[2]] ||
+			el.tagName && tags[el.tagName] ||
+			el.className !== undefined && HtmlElement ||
+			el.nodeType == 1 && DomElement ||
+			el.nodeType == 3 && DomTextNode ||
+			el.nodeType == 9 && (el.documentElement.nodeName.toLowerCase() == 'html' && HtmlDocument || DomDocument) ||
+			el.location && el.frames && el.history && DomWindow ||
+			DomNode;
+	}
+
+	var dont = {};
+
+	return {
+		_type: 'node',
+		_collection: DomNodes,
+		_initialize: true,
+
+		initialize: function(el, props, doc) {
+			if (!el) return null;
+			if (this._tag && Base.type(el) == 'object') {
+				props = el;
+				el = this._tag;
+			}
+			if (typeof(el) == 'string') {
+				el = DomElement.create(el, props, doc);
+			} else if (el._wrapper) {
+				return el._wrapper;
+			}
+			if (props === dont) {
+				props = null;
+			} else {
+				var ctor = getConstructor(el);
+				if (ctor != this.constructor)
+					return new ctor(el, props);
+			}
+			this.$ = el;
+			try {
+				el._wrapper = this;
+				nodes[nodes.length] = el;
+			} catch (e) {} 
+			if (props) this.set(props);
+		},
+
+		statics: {
+			inject: function(src) {
+				if (src) {
+					var proto = this.prototype, that = this;
+					src.statics = Base.each(src, function(val, name) {
+						if (typeof val == 'function' && !this[name] && !that[name]) {
+							this[name] = function(el, param1, param2) {
+								if (el) try {
+									proto.$ = el.$ || el;
+									return proto[name](param1, param2);
+								} finally {
+									delete proto.$;
+								}
+							}
+						}
+					}, src.statics || {});
+					inject.call(this, src);
+					delete src.toString;
+					proto._collection.inject(src);
+				}
+				for (var i = 1, l = arguments.length; i < l; i++)
+					this.inject(arguments[i]);
+				return this;
+			},
+
+			extend: function(src) {
+				var ret = this.base();
+				var init = src.initialize;
+				if (init) src.initialize = function(el, props) {
+					var ret = this._initialize && this.base(el, props);
+					if (ret) return ret;
+					init.apply(this, arguments);
+				}
+				inject.call(ret, src);
+				if (ret.prototype._collection == this.prototype._collection)
+					ret.inject = inject;
+				if (src) {
+					if (src._tag)
+						tags[src._tag.toLowerCase()] = tags[src._tag.toUpperCase()] = ret;
+					if (src._class) {
+						classes[src._class] = ret;
+						classCheck = new RegExp('(^|\\s)(' + Base.each(classes, function(val, name) {
+							this.push(name);
+						}, []).join('|') + ')(\\s|$)');
+						if (!src._lazy && src.initialize) Browser.document.addEvent('domready', function() {
+							this.getElements('.' + src._class);
+						});
+					}
+				}
+				return ret;
+			},
+
+			wrap: function(el) {
+				return el ? typeof el == 'string' 
+					? DomElement.get(el)
+					: el._wrapper || el._collection && el || new (getConstructor(el))(el, dont)
+						: null;
+			},
+
+			unwrap: function(el) {
+				return el && el.$ || el;
+			},
+
+			unique: function(el) {
+				if (!el._unique) {
+					nodes.push(el);
+					el._unique = ++unique;
+				}
+			},
+
+			isNode: function(obj) {
+				return /^(element|node|textnode|document)$/.test(
+					typeof obj == 'string' ? obj : Base.type(obj));
+			},
+
+			dispose: function() {
+				dispose(true);
+			}
+		}
+	}
+});
+
+DomNode.inject(new function() {
+	var bools = ['compact', 'nowrap', 'ismap', 'declare', 'noshade', 'checked',
+		'disabled', 'readonly', 'multiple', 'selected', 'noresize', 'defer'
+	].associate();
+	var properties = Hash.append({ 
+		text: Browser.TRIDENT || Browser.WEBKIT && Browser.VERSION < 420 || Browser.PRESTO && Browser.VERSION < 9
+			? function(node) {
+				return node.$.innerText !== undefined ? 'innerText' : 'nodeValue'
+			} : 'textContent',
+		html: 'innerHTML', 'class': 'className', className: 'className', 'for': 'htmlFor'
+	}, [ 
+		'value', 'accessKey', 'cellPadding', 'cellSpacing', 'colSpan',
+		'frameBorder', 'maxLength', 'readOnly', 'rowSpan', 'tabIndex',
+		'selectedIndex', 'useMap', 'width', 'height'
+	].associate(function(name) {
+		return name.toLowerCase();
+	}), bools);
+
+	var clones = { input: 'checked', option: 'selected', textarea: Browser.WEBKIT && Browser.VERSION < 420 ? 'innerHTML' : 'value' };
+
+	function handle(that, prefix, name, value) {
+		var ctor = that.__proto__.constructor;
+		var handlers = ctor.handlers = ctor.handlers || { get: {}, set: {} };
+		var list = handlers[prefix];
+		var fn = name == 'events' && prefix == 'set' ? that.addEvents : list[name];
+		if (fn === undefined)
+			fn = list[name] = that[prefix + name.capitalize()] || null;
+		return fn
+			? fn[Base.type(value) == 'array' ? 'apply' : 'call'](that, value)
+			: that[prefix + 'Property'](name, value);
+	}
+
+	function toNodes(elements) {
+		var els = Base.type(elements) == 'array' ? elements : Array.create(arguments);
+		var created = els.find(function(el) {
+			return !DomNode.isNode(el);
+		});
+		var result = els.toNode(this.getDocument());
+		return {
+			array: result ? (Base.type(result) == 'array' ? result : [result]) : [],
+			result: created && result
+		};
+	}
+
+	var fields = {
+		_properties: ['text'],
+
+		set: function(name, value) {
+			switch (Base.type(name)) {
+				case 'string':
+					return handle(this, 'set', name, value);
+				case 'object':
+					return Base.each(name, function(value, key) {
+						handle(this, 'set', key, value);
+					}, this);
+			}
+			return this;
+		},
+
+		get: function(name) {
+			return handle(this, 'get', name);
+		},
+
+		getDocument: function() {
+			return DomNode.wrap(this.$.ownerDocument);
+		},
+
+		getWindow: function() {
+			return this.getDocument().getWindow();
+		},
+
+		getPreviousNode: function() {
+			return DomNode.wrap(this.$.previousSibling);
+		},
+
+		getNextNode: function() {
+			return DomNode.wrap(this.$.nextSibling);
+		},
+
+		getFirstNode: function() {
+			return DomNode.wrap(this.$.firstChild);
+		},
+
+		getLastNode: function() {
+			return DomNode.wrap(this.$.lastChild);
+		},
+
+		getParentNode: function() {
+			return DomNode.wrap(this.$.parentNode);
+		},
+
+		getChildNodes: function() {
+		 	return new DomNodes(this.$.childNodes);
+		},
+
+		hasChildNodes: function() {
+			return this.$.hasChildNodes();
+		},
+
+		appendChild: function(el) {
+			if (el = DomNode.wrap(el)) {
+				var text = Browser.TRIDENT && el.$.text;
+				if (text) el.$.text = '';
+				this.$.appendChild(el.$);
+				if (text) el.$.text = text;
+			}
+			return this;
+		},
+
+		appendChildren: function() {
+			return Array.flatten(arguments).each(function(el) {
+				this.appendChild($(DomNode.wrap(el)));
+			}, this);
+		},
+
+		appendText: function(text) {
+			return this.injectBottom(this.getDocument().createTextNode(text));
+		},
+
+		prependText: function(text) {
+			return this.injectTop(this.getDocument().createTextNode(text));
+		},
+
+		remove: function() {
+			if (this.$.parentNode)
+				this.$.parentNode.removeChild(this.$);
+			return this;
+		},
+
+		removeChild: function(el) {
+			el = DomNode.wrap(el);
+			this.$.removeChild(el.$);
+			return el;
+		},
+
+		removeChildren: function() {
+			var nodes = this.getChildNodes();
+			nodes.remove();
+			return nodes;
+		},
+
+		replaceWith: function(el) {
+			if (this.$.parentNode) {
+				el = toNodes.apply(this, arguments);
+				var els = el.array;
+				if (els.length > 0)
+					this.$.parentNode.replaceChild(els[0].$, this.$);
+				for (var i = els.length - 1; i > 0; i--)
+					els[i].insertAfter(els[0]);
+				return el.result;
+			}
+			return null;
+		},
+
+		wrap: function() {
+			var el = this.injectBefore.apply(this, arguments), last;
+			do {
+				last = el;
+				el = el.getFirst();
+			} while(el);
+			last.appendChild(this);
+			return last;
+		},
+
+		clone: function(contents) {
+			var clone = this.$.cloneNode(!!contents);
+			function clean(left, right) {
+				if (Browser.TRIDENT) {
+					left.clearAttributes();
+					left.mergeAttributes(right);
+					left.removeAttribute('_wrapper');
+					left.removeAttribute('_unique');
+					if (left.options)
+						for (var l = left.options, r = right.options, i = l.length; i--;)
+							l[i].selected = r[i].selected;
+				}
+				var name = clones[right.tagName.toLowerCase()];
+				if (name && right[name])
+					left[name] = right[name];
+				if (contents)
+					for (var l = left.childNodes, r = right.childNodes, i = l.length; i--;)
+						clean(l[i], r[i]);
+			}
+			clean(clone, this.$);
+			return DomNode.wrap(clone);
+		},
+
+		hasProperty: function(name) {
+			var key = properties[name];
+			key = key && typeof key == 'function' ? key(this) : key;
+			return key ? this.$[key] !== undefined : this.$.hasAttribute(name);
+		},
+
+		getProperty: function(name) {
+			var key = properties[name], value;
+			key = key && typeof key == 'function' ? key(this) : key;
+			var value = key ? this.$[key] : this.$.getAttribute(name);
+			return bools[name] ? !!value : value;
+		},
+
+		setProperty: function(name, value) {
+			var key = properties[name], defined = value !== undefined;
+			key = key && typeof key == 'function' ? key(this) : key;
+			if (key && bools[name]) value = value || !defined ? true : false;
+			else if (!defined) return this.removeProperty(name);
+			key ? this.$[key] = value : this.$.setAttribute(name, value);
+			return this;
+		},
+
+		removeProperty: function(name) {
+			var key = properties[name], bool = key && bools[name];
+			key = key && typeof key == 'function' ? key(this) : key;
+			key ? this.$[key] = bool ? false : '' : this.$.removeAttribute(name);
+			return this;
+		},
+
+		getProperties: function() {
+			var props = {};
+			for (var i = 0; i < arguments.length; i++)
+				props[arguments[i]] = this.getProperty(arguments[i]);
+			return props;
+		},
+
+		setProperties: function(src) {
+			return Base.each(src, function(value, name) {
+				this.setProperty(name, value);
+			}, this);
+		},
+
+		removeProperties: function() {
+			return Array.each(arguments, this.removeProperty, this);
+		}
+	};
+
+	var inserters = {
+		before: function(source, dest) {
+			if (source && dest && dest.$.parentNode) {
+				var text = Browser.TRIDENT && dest.$.text;
+				if (text) dest.$.text = '';
+				dest.$.parentNode.insertBefore(source.$, dest.$);
+				if (text) dest.$.text = text;
+			}
+		},
+
+		after: function(source, dest) {
+			if (source && dest && dest.$.parentNode) {
+				var next = dest.$.nextSibling;
+				if (next) source.insertBefore(next);
+				else dest.getParent().appendChild(source);
+			}
+		},
+
+		bottom: function(source, dest) {
+			if (source && dest)
+				dest.appendChild(source);
+		},
+
+		top: function(source, dest) {
+			if (source && dest) {
+				var first = dest.$.firstChild;
+				if (first) source.insertBefore(first);
+				else dest.appendChild(source);
+			}
+		}
+	};
+
+	inserters.inside = inserters.bottom;
+
+	Base.each(inserters, function(inserter, name) {
+		var part = name.capitalize();
+		fields['insert' + part] = function(el) {
+			el = toNodes.apply(this, arguments);
+			for (var i = 0, list = el.array, l = list.length; i < l; i++)
+				inserter(i == 0 ? this : this.clone(true), list[i]);
+			return el.result || this;
+		}
+
+		fields['inject' + part] = function(el) {
+			el = toNodes.apply(this, arguments);
+			for (var i = 0, list = el.array, l = list.length; i < l; i++)
+				inserter(list[i], this);
+			return el.result || this;
+		}
+	});
+
+	return fields;
+});
+
+DomElements = DomNodes.extend();
+
+DomElement = DomNode.extend({
+	_type: 'element',
+	_collection: DomElements,
+
+	statics: {
+		get: function(selector, root) {
+			return (root && DomNode.wrap(root) || Browser.document).getElement(selector);
+		},
+
+		getAll: function(selector, root) {
+			return (root && DomNode.wrap(root) || Browser.document).getElements(selector);
+		},
+
+		create: function(tag, props, doc) {
+			if (Browser.TRIDENT && props) {
+				['name', 'type', 'checked'].each(function(key) {
+					if (props[key]) {
+						tag += ' ' + key + '="' + props[key] + '"';
+						if (key != 'checked')
+							delete props[key];
+					}
+				});
+				tag = '<' + tag + '>';
+			}
+			return (DomElement.unwrap(doc) || document).createElement(tag);
+		},
+
+		isAncestor: function(el, parent) {
+			return !el ? false : el.ownerDocument == parent ? true
+				: Browser.WEBKIT && Browser.VERSION < 420
+					? Array.contains(parent.getElementsByTagName(el.tagName), el)
+					: parent.contains
+						? parent != el && parent.contains(el)
+						: !!(parent.compareDocumentPosition(el) & 16)
+		}
+	}
+});
+
+DomElement.inject(new function() {
+	function walk(el, walk, start, match, all) {
+		var elements = all && new el._collection();
+		el = el.$[start || walk];
+		while (el) {
+			if (el.nodeType == 1 && (!match || DomElement.match(el, match))) {
+				if (!all) return DomNode.wrap(el);
+				elements.push(el);
+			}
+			el = el[walk];
+		}
+		return elements;
+	}
+
+	return {
+		_properties: ['id'],
+
+		getTag: function() {
+			return (this.$.tagName || '').toLowerCase();
+		},
+
+		getPrevious: function(match) {
+			return walk(this, 'previousSibling', null, match);
+		},
+
+		getAllPrevious: function(match) {
+			return walk(this, 'previousSibling', null, match, true);
+		},
+
+		getNext: function(match) {
+			return walk(this, 'nextSibling', null, match);
+		},
+
+		getAllNext: function(match) {
+			return walk(this, 'nextSibling', null, match, true);
+		},
+
+		getFirst: function(match) {
+			return walk(this, 'nextSibling', 'firstChild', match);
+		},
+
+		getLast: function(match) {
+			return walk(this, 'previousSibling', 'lastChild', match);
+		},
+
+		hasChild: function(match) {
+			return DomNode.isNode(match)
+				? DomElement.isAncestor(DomElement.unwrap(match), this.$)
+				: !!this.getFirst(match);
+		},
+
+		getParent: function(match) {
+			return walk(this, 'parentNode', null, match);
+		},
+
+		getParents: function(match) {
+			return walk(this, 'parentNode', null, match, true);
+		},
+
+		hasParent: function(match) {
+			return DomNode.isNode(match)
+				? DomElement.isAncestor(this.$, DomElement.unwrap(match))
+				: !!this.getParent(match);
+		},
+
+		getChildren: function(match) {
+			return walk(this, 'nextSibling', 'firstChild', match, true);
+		},
+
+		hasChildren: function(match) {
+			return !!this.getChildren(match).length;
+		},
+
+		toString: function() {
+			return (this.$.tagName || this._type).toLowerCase() +
+				(this.$.id ? '#' + this.$.id : '');
+		},
+
+		toNode: function() {
+			return this;
+		}
+	};
+});
+
+$ = DomElement.get;
+$$ = DomElement.getAll;
+
+DomTextNode = DomNode.extend({
+	_type: 'textnode'
+});
+
+DomDocument = DomElement.extend({
+	_type: 'document',
+
+	initialize: function() {
+		if (Browser.TRIDENT && Browser.VERSION < 7)
+			try {
+				this.$.execCommand('BackgroundImageCache', false, true);
+			} catch (e) {}
+	},
+
+	createElement: function(tag, props) {
+		return DomNode.wrap(DomElement.create(tag, props, this.$)).set(props);
+	},
+
+	createTextNode: function(text) {
+		return $(this.$.createTextNode(text));
+	},
+
+	getDocument: function() {
+		return this;
+	},
+
+	getWindow: function() {
+		return DomNode.wrap(this.$.defaultView || this.$.parentWindow);
+	},
+
+	open: function() {
+		this.$.open();
+	},
+
+	close: function() {
+		this.$.close();
+	},
+
+	write: function(markup) {
+		this.$.write(markup);
+	},
+
+	writeln: function(markup) {
+		this.$.writeln(markup);
+	}
+});
+
+Window = DomWindow = DomElement.extend({
+	_type: 'window',
+	_initialize: false,
+	_methods: ['close', 'alert', 'prompt', 'confirm', 'blur', 'focus', 'reload'],
+
+	getDocument: function() {
+		return DomNode.wrap(this.$.document);
+	},
+
+	getWindow: function() {
+		return this;
+	},
+
+	initialize: function(param) {
+		var win;
+		if (param.location && param.frames && param.history) {
+			win = this.base(param) || this;
+		} else {
+			if (typeof param == 'string')
+				param = { url: param };
+			(['toolbar','menubar','location','status','resizable','scrollbars']).each(function(key) {
+				param[key] = param[key] ? 1 : 0;
+			});
+			if (param.width && param.height) {
+				if (param.left == null) param.left = Math.round(
+					Math.max(0, (screen.width - param.width) / 2));
+				if (param.top == null) param.top = Math.round(
+					Math.max(0, (screen.height - param.height) / 2 - 40));
+			}
+			var str = Base.each(param, function(val, key) {
+				if (!/^(focus|confirm|url|name)$/.test(key))
+					this.push(key + '=' + (val + 0));
+			}, []).join();
+			win = this.base(window.open(param.url, param.name.replace(/\s+|\.+|-+/gi, ''), str)) || this;
+			if (win && param.focus)
+				win.focus();
+		}
+		return ['location', 'frames', 'history'].each(function(key) {
+			this[key] = this.$[key];
+		}, win);
+	}
+});
+
+DomElement.inject(new function() {
+	function cumulate(name, parent, iter) {
+		var left = name + 'Left', top = name + 'Top';
+		return function(that) {
+			var cur, next = that, x = 0, y = 0;
+			do {
+				cur = next;
+				x += cur.$[left] || 0;
+				y += cur.$[top] || 0;
+			} while((next = DomNode.wrap(cur.$[parent])) && (!iter || iter(cur, next)))
+			return { x: x, y: y };
+		}
+	}
+
+	function setBounds(fields, offset) {
+		return function(values) {
+			var vals = /^(object|array)$/.test(Base.type(values)) ? values : arguments;
+			if (offset) {
+				if (vals.x) vals.left = vals.x;
+				if (vals.y) vals.top = vals.y;
+			}
+			var i = 0;
+			return fields.each(function(name) {
+				var val = vals.length ? vals[i++] : vals[name];
+				if (val != null) this.setStyle(name, val);
+			}, this);
+		}
+	}
+
+	function isBody(that) {
+		return that.getTag() == 'body';
+	}
+
+	var getAbsolute = cumulate('offset', 'offsetParent', Browser.WEBKIT ? function(cur, next) {
+		return next.$ != document.body || cur.getStyle('position') != 'absolute';
+	} : null, true);
+
+	var getPositioned = cumulate('offset', 'offsetParent', function(cur, next) {
+		return next.$ != document.body && !/^(relative|absolute)$/.test(next.getStyle('position'));
+	});
+
+	var getScrollOffset = cumulate('scroll', 'parentNode');
+
+	var fields = {
+
+		getSize: function() {
+			return isBody(this)
+				? this.getWindow().getSize()
+				: { width: this.$.offsetWidth, height: this.$.offsetHeight };
+		},
+
+		getOffset: function(relative, scroll) {
+			if (isBody(this))
+				return this.getWindow().getOffset();
+		 	if (relative && !DomNode.isNode(relative))
+				return getPositioned(this);
+			var off = getAbsolute(this);
+			if (relative) {
+				var rel = getAbsolute(DomNode.wrap(relative));
+				off = { x: off.x - rel.x, y: off.y - rel.y };
+			}
+			if (scroll) {
+				scroll = this.getScrollOffset();
+				off.x -= scroll.x;
+				off.y -= scroll.y;
+			}
+			return off;
+		},
+
+		getScrollOffset: function() {
+			return isBody(this)
+				? this.getWindow().getScrollOffset()
+				: getScrollOffset(this);
+		},
+
+		getScrollSize: function() {
+			return isBody(this)
+				? this.getWindow().getScrollSize()
+				: { width: this.$.scrollWidth, height: this.$.scrollHeight };
+		},
+
+		getBounds: function(relative, scroll) {
+			if (isBody(this))
+				return this.getWindow().getBounds();
+			var off = this.getOffset(relative, scroll),
+				el = this.$;
+			return {
+				left: off.x,
+				top: off.y,
+				right: off.x + el.offsetWidth,
+				bottom: off.y + el.offsetHeight,
+				width: el.offsetWidth,
+				height: el.offsetHeight
+			};
+		},
+
+		setBounds: setBounds(['left', 'top', 'width', 'height', 'clip'], true),
+
+		setOffset: setBounds(['left', 'top'], true),
+
+		setSize: setBounds(['width', 'height', 'clip']),
+
+		setScrollOffset: function(x, y) {
+			if (isBody(this)) {
+				this.getWindow().setScrollOffset(x, y);
+			} else {
+				var off = typeof x == 'object' ? x : { x: x, y: y };
+				this.$.scrollLeft = off.x;
+				this.$.scrollTop = off.y;
+			}
+			return this;
+		},
+
+		scrollTo: function(x, y) {
+			return this.setScrollOffset(x, y);
+		},
+
+		contains: function(pos) {
+			var bounds = this.getBounds();
+			return pos.x >= bounds.left && pos.x < bounds.right &&
+				pos.y >= bounds.top && pos.y < bounds.bottom;
+		},
+
+		isVisible: function(fully) {
+			var win = this.getWindow(), top = win.getScrollOffset().y,
+				bottom = top + win.getSize().height,
+				bounds = this.getBounds(false, true);
+			return (bounds.height > 0 || bounds.width > 0) 
+					&& (bounds.top >= top && bounds.bottom <= bottom 
+						|| (fully && bounds.top <= top && bounds.bottom >= bottom) 
+						|| !fully && (bounds.top <= top && bounds.bottom >= top 
+							|| bounds.top <= bottom && bounds.bottom >= bottom)); 
+		}
+	};
+
+	['left', 'top', 'right', 'bottom', 'width', 'height'].each(function(name) {
+		var part = name.capitalize();
+		fields['get' + part] = function() {
+			return this.$['offset' + part];
+		};
+		fields['set' + part] = function(value) {
+			this.$.style[name] = isNaN(value) ? value : value + 'px';
+		};
+	});
+
+	return fields;
+});
+
+[DomDocument, DomWindow].each(function(ctor) {
+	ctor.inject(this);
+}, {
+
+	getSize: function() {
+		if (Browser.PRESTO || Browser.WEBKIT) {
+			var win = this.getWindow().$;
+			return { width: win.innerWidth, height: win.innerHeight };
+		}
+		var doc = this.getCompatElement();
+		return { width: doc.clientWidth, height: doc.clientHeight };
+	},
+
+	getScrollOffset: function() {
+		var win = this.getWindow().$, doc = this.getCompatElement();
+		return { x: win.pageXOffset || doc.scrollLeft, y: win.pageYOffset || doc.scrollTop };
+	},
+
+	getScrollSize: function() {
+		var doc = this.getCompatElement(), min = this.getSize();
+		return { width: Math.max(doc.scrollWidth, min.width), height: Math.max(doc.scrollHeight, min.height) };
+	},
+
+	getOffset: function() {
+		return { x: 0, y: 0 };
+	},
+
+	getBounds: function() {
+		var size = this.getSize();
+		return {
+			left: 0, top: 0,
+			right: size.width, bottom: size.height,
+			width: size.width, height: size.height
+		};
+	},
+
+	setScrollOffset: function(x, y) {
+		var off = typeof x == 'object' ? x : { x: x, y: y };
+		this.getWindow().$.scrollTo(off.x, off.y);
+		return this;
+	},
+
+	getElementAt: function(pos, exclude) {
+		var el = this.getDocument().getElement('body');
+		while (true) {
+			var max = -1;
+			var ch = el.getFirst();
+			while (ch) {
+				if (ch.contains(pos) && ch != exclude) {
+					var z = ch.$.style.zIndex.toInt() || 0;
+					if (z >= max) {
+						el = ch;
+						max = z;
+					}
+				}
+				ch = ch.getNext();
+			}
+			if (max < 0) break;
+		}
+		return el;
+	},
+
+	getCompatElement: function() {
+		var doc = this.getDocument();
+		return doc.getElement(!doc.$.compatMode
+				|| doc.$.compatMode == 'CSS1Compat' ? 'html' : 'body').$;
+	}
+});
+
+DomEvent = Base.extend(new function() {
+	var keys = {
+		 '8': 'backspace',
+		'13': 'enter',
+		'27': 'escape',
+		'32': 'space',
+		'37': 'left',
+		'38': 'up',
+		'39': 'right',
+		'40': 'down',
+		'46': 'delete'
+	};
+
+	function hover(name, type) {
+		return {
+			type: type,
+			listener: function(event) {
+				if (event.relatedTarget != this && !this.hasChild(event.relatedTarget))
+					this.fireEvent(name, [event]);
+			}
+		}
+	}
+
+	return {
+		initialize: function(event) {
+			this.event = event = event || window.event;
+			this.type = event.type;
+			this.target = DomNode.wrap(event.target || event.srcElement);
+			if (this.target && this.target.$.nodeType == 3)
+				this.target = this.target.getParentNode(); 
+			this.shift = event.shiftKey;
+			this.control = event.ctrlKey;
+			this.alt = event.altKey;
+			this.meta = event.metaKey;
+			if (/^(mousewheel|DOMMouseScroll)$/.test(this.type)) {
+				this.wheel = event.wheelDelta ?
+					event.wheelDelta / (window.opera ? -120 : 120) :
+					- (event.detail || 0) / 3;
+			} else if (/^key/.test(this.type)) {
+				this.code = event.which || event.keyCode;
+				this.key = keys[this.code] || String.fromCharCode(this.code).toLowerCase();
+			} else if (/^mouse|^click$/.test(this.type)) {
+				this.page = {
+					x: event.pageX || event.clientX + document.documentElement.scrollLeft,
+					y: event.pageY || event.clientY + document.documentElement.scrollTop
+				};
+				this.client = {
+					x: event.pageX ? event.pageX - window.pageXOffset : event.clientX,
+					y: event.pageY ? event.pageY - window.pageYOffset : event.clientY
+				};
+				var offset = this.target.getOffset();
+				this.offset = {
+					x: this.page.x - offset.x,
+					y: this.page.y - offset.y
+				}
+				this.rightClick = event.which == 3 || event.button == 2;
+				if (/^mouse(over|out)$/.test(this.type))
+					this.relatedTarget = DomNode.wrap(event.relatedTarget ||
+						this.type == 'mouseout' ? event.toElement : event.fromElement);
+			}
+		},
+
+		stop: function() {
+			this.stopPropagation();
+			this.preventDefault();
+			return this;
+		},
+
+		stopPropagation: function() {
+			if (this.event.stopPropagation) this.event.stopPropagation();
+			else this.event.cancelBubble = true;
+			this.stopped = true;
+			return this;
+		},
+
+		preventDefault: function() {
+			if (this.event.preventDefault) this.event.preventDefault();
+			else this.event.returnValue = false;
+			return this;
+		},
+
+		statics: {
+			events: new Hash({
+				mouseenter: hover('mouseenter', 'mouseover'),
+
+				mouseleave: hover('mouseleave', 'mouseout'),
+
+				mousewheel: { type: Browser.GECKO ? 'DOMMouseScroll' : 'mousewheel' },
+
+				domready: function(func) {
+					var win = this.getWindow(), doc = this.getDocument();
+					if (Browser.loaded) {
+						func.call(this);
+					} else if (!doc.onDomReady) {
+						doc.onDomReady = function() {
+							if (!Browser.loaded) {
+								Browser.loaded = true;
+								doc.fireEvent('domready');
+								win.fireEvent('domready');
+							}
+						}
+						if (Browser.TRIDENT) {
+							var temp = doc.createElement('div');
+							(function() {
+								try {
+									temp.$.doScroll('left');
+									temp.insertBottom(DomElement.get('body')).setHtml('temp').remove();
+									doc.onDomReady();
+								} catch (e) {
+									arguments.callee.delay(50);
+								}
+							}).delay(0);
+						} else if (Browser.WEBKIT && Browser.VERSION < 525) {
+							(function() {
+								/^(loaded|complete)$/.test(doc.$.readyState)
+									? doc.onDomReady() : arguments.callee.delay(50);
+							})();
+						} else {
+							win.addEvent('load', doc.onDomReady);
+							doc.addEvent('DOMContentLoaded', doc.onDomReady);
+						}
+					}
+				}
+			}),
+
+			add: function(events) {
+				this.events.append(events);
+			}
+		}
+	};
+});
+
+DomElement.inject(new function() {
+	function callEvent(fire) {
+		return function(type, args, delay) {
+			var entries = (this.events || {})[type];
+			if (entries) {
+				var event = args && args[0];
+				if (event)
+					args[0] = event.event ? event : new DomEvent(event);
+				entries.each(function(entry) {
+					entry[fire ? 'func' : 'bound'].delay(delay, this, args);
+				}, this);
+			}
+			return !!entries;
+		}
+	}
+
+	return {
+		addEvent: function(type, func) {
+			this.events = this.events || {};
+			var entries = this.events[type] = this.events[type] || [];
+			if (func && !entries.find(function(entry) { return entry.func == func })) {
+				var listener = func, name = type, pseudo = DomEvent.events[type];
+				if (pseudo) {
+					if (typeof pseudo == 'function') pseudo = pseudo.call(this, func);
+					listener = pseudo && pseudo.listener || listener;
+					name = pseudo && pseudo.type;
+				}
+				var that = this, bound = function(event) {
+						if (event || window.event)
+						 	event = event && event.event ? event : new DomEvent(event);
+						if (listener.call(that, event) === false && event)
+							event.stop();
+					};
+				if (name) {
+					if (this.$.addEventListener) {
+						this.$.addEventListener(name, bound, false);
+					} else if (this.$.attachEvent) {
+						this.$.attachEvent('on' + name, bound);
+					}
+				}
+				entries.push({ func: func, name: name, bound: bound });
+			}
+			return this;
+		},
+
+		removeEvent: function(type, func) {
+			var entries = (this.events || {})[type], entry;
+			if (func && entries) {
+				if (entry = entries.remove(function(entry) { return entry.func == func })) {
+					var name = entry.name, pseudo = DomEvent.events[type];
+					if (pseudo && pseudo.remove) pseudo.remove.call(this, func);
+					if (name) {
+						if (this.$.removeEventListener) {
+							this.$.removeEventListener(name, entry.bound, false);
+						} else if (this.$.detachEvent) {
+							this.$.detachEvent('on' + name, entry.bound);
+						}
+					}
+				}
+			}
+			return this;
+		},
+
+		addEvents: function(events) {
+			return Base.each(events || [], function(fn, type) {
+				this.addEvent(type, fn);
+			}, this);
+		},
+
+		removeEvents: function(type) {
+			if (this.events) {
+				if (type) {
+					(this.events[type] || []).each(function(fn) {
+						this.removeEvent(type, fn);
+					}, this);
+					delete this.events[type];
+				} else {
+					Base.each(this.events, function(ev, type) {
+						this.removeEvents(type);
+					}, this);
+					this.events = null;
+				}
+			}
+			return this;
+		},
+
+		fireEvent: callEvent(true),
+
+		triggerEvent: callEvent(false),
+
+		finalize: function() {
+			this.removeEvents();
+		}
+	};
+});
+
+DomEvent.add(new function() {
+	var object, last;
+
+	function dragStart(event) {
+		if (object != this) {
+			event.type = 'dragstart';
+			last = event.page;
+			this.fireEvent('dragstart', [event]);
+			if (!event.stopped) {
+				event.stop();
+				var doc = this.getDocument();
+				doc.addEvent('mousemove', drag);
+				doc.addEvent('mouseup', dragEnd);
+				object = this;
+			}
+		}
+	}
+
+	function drag(event) {
+		event.type = 'drag';
+		event.delta = {
+			x: event.page.x - last.x,
+			y: event.page.y - last.y
+		}
+		last = event.page;
+		object.fireEvent('drag', [event]);
+		event.preventDefault();
+	}
+
+	function dragEnd(event) {
+		if (object) {
+			event.type = 'dragend';
+			object.fireEvent('dragend', [event]);
+			event.preventDefault();
+			var doc = object.getDocument();
+			doc.removeEvent('mousemove', drag);
+			doc.removeEvent('mouseup', dragEnd);
+			object = null;
+		}
+	}
+
+	return {
+		dragstart: {
+			type: 'mousedown',
+			listener: dragStart
+		},
+
+		drag: {
+			type: 'mousedown',
+			listener: dragStart
+		},
+
+		dragend: {}
+	};
+});
+
+DomElement.inject(new function() {
+	var XPATH= 0, FILTER = 1;
+
+	var methods = [{ 
+		getParam: function(items, separator, context, params) {
+			var str = context.namespaceURI ? 'xhtml:' + params.tag : params.tag;
+			if (separator && (separator = DomElement.separators[separator]))
+				str = separator[XPATH] + str;
+			for (var i = params.pseudos.length; i--;) {
+				var pseudo = params.pseudos[i];
+				str += pseudo.handler[XPATH](pseudo.argument);
+			}
+			if (params.id) str += '[@id="' + params.id + '"]';
+			for (var i = params.classes.length; i--;)
+				str += '[contains(concat(" ", @class, " "), " ' + params.classes[i] + ' ")]';
+			for (var i = params.attributes.length; i--;) {
+				var attribute = params.attributes[i];
+				var operator = DomElement.operators[attribute[1]];
+				if (operator) str += operator[XPATH](attribute[0], attribute[2]);
+				else str += '[@' + attribute[0] + ']';
+			}
+			items.push(str);
+			return items;
+		},
+
+		getElements: function(items, elements, context) {
+			function resolver(prefix) {
+				return prefix == 'xhtml' ? 'http://www.w3.org/1999/xhtml' : false;
+			}
+			var res = (context.ownerDocument || context).evaluate('.//' + items.join(''), context,
+				resolver, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
+			for (var i = 0, l = res.snapshotLength; i < l; i++)
+				elements.push(res.snapshotItem(i));
+		}
+	}, { 
+		getParam: function(items, separator, context, params, data) {
+			var found = [];
+			var tag = params.tag;
+			if (separator && (separator = DomElement.separators[separator])) {
+				separator = separator[FILTER];
+				var uniques = {};
+				function add(item) {
+					if (!item._unique)
+						DomNode.unique(item);
+					if (!uniques[item._unique] && match(item, params, data)) {
+						uniques[item._unique] = true;
+						found.push(item);
+						return true;
+					}
+				}
+				for (var i = 0, l = items.length; i < l; i++)
+					separator(items[i], params, add);
+				if (params.clearTag)
+					params.tag = params.clearTag = null;
+				return found;
+			}
+			if (params.id) {
+				var el = (context.ownerDocument || context).getElementById(params.id);
+				params.id = null;
+				return el && DomElement.isAncestor(el, context)
+					&& match(el, params, data) ? [el] : null;
+			} else {
+				if (!items.length) {
+					items = context.getElementsByTagName(tag);
+					params.tag = null;
+				}
+				for (var i = 0, l = items.length; i < l; i++)
+					if (match(items[i], params, data))
+						found.push(items[i]);
+			}
+			return found;
+		},
+
+		getElements: function(items, elements, context) {
+			elements.append(items);
+		}
+	}];
+
+	function parse(selector) {
+		var params = { tag: '*', id: null, classes: [], attributes: [], pseudos: [] };
+		selector.replace(/:([^:(]+)*(?:\((["']?)(.*?)\2\))?|\[([\w-]+)(?:([!*^$~|]?=)(["']?)(.*?)\6)?\]|\.[\w-]+|#[\w-]+|\w+|\*/g, function(part) {
+			switch (part.charAt(0)) {
+				case '.': params.classes.push(part.slice(1)); break;
+				case '#': params.id = part.slice(1); break;
+				case '[': params.attributes.push([arguments[4], arguments[5], arguments[7]]); break;
+				case ':':
+					var handler = DomElement.pseudos[arguments[1]];
+					if (!handler) {
+						params.attributes.push([arguments[1], arguments[3] ? '=' : '', arguments[3]]);
+						break;
+					}
+					params.pseudos.push({
+						name: arguments[1],
+						argument: handler && handler.parser
+							? (handler.parser.apply ? handler.parser(arguments[3]) : handler.parser)
+							: arguments[3],
+						handler: handler.handler || handler
+					});
+				break;
+				default: params.tag = part;
+			}
+			return '';
+		});
+		return params;
+	}
+
+	function match(el, params, data) {
+		if (params.id && params.id != el.id)
+			return false;
+
+		if (params.tag && params.tag != '*' && params.tag != (el.tagName || '').toLowerCase())
+			return false;
+
+		for (var i = params.classes.length; i--;)
+			if (!el.className || !el.className.contains(params.classes[i], ' '))
+				return false;
+
+		var proto = DomElement.prototype;
+		for (var i = params.attributes.length; i--;) {
+			var attribute = params.attributes[i];
+			proto.$ = el; 
+			var val = proto.getProperty(attribute[0]);
+			if (!val) return false;
+			var operator = DomElement.operators[attribute[1]];
+			operator = operator && operator[FILTER];
+			if (operator && (!val || !operator(val, attribute[2])))
+				return false;
+		}
+
+		for (var i = params.pseudos.length; i--;) {
+			var pseudo = params.pseudos[i];
+			if (!pseudo.handler[FILTER](el, pseudo.argument, data))
+				return false;
+		}
+
+		return true;
+	}
+
+	function filter(items, selector, context, elements, data) {
+		var method = methods[!Browser.XPATH || items.length ||
+			typeof selector == 'string' && selector.contains('option[')
+			? FILTER : XPATH];
+		var separators = [];
+		selector = selector.trim().replace(/\s*([+>~\s])[a-zA-Z#.*\s]/g, function(match) {
+			if (match.charAt(2)) match = match.trim();
+			separators.push(match.charAt(0));
+			return ':)' + match.charAt(1);
+		}).split(':)');
+		for (var i = 0, l = selector.length; i < l; i++) {
+			var params = parse(selector[i]);
+			if (!params) return elements; 
+			var next = method.getParam(items, separators[i - 1], context, params, data);
+			if (!next) break;
+			items = next;
+		}
+		method.getElements(items, elements, context);
+		return elements;
+	}
+
+	return {
+
+		getElements: function(selectors, nowrap) {
+			var elements = nowrap ? [] : new this._collection();
+			selectors = !selectors ? ['*'] : typeof selectors == 'string'
+				? selectors.split(',')
+				: selectors.length != null ? selectors : [selectors];
+			for (var i = 0, l = selectors.length; i < l; i++) {
+				var selector = selectors[i];
+				if (Base.type(selector) == 'element') elements.push(selector);
+				else filter([], selector, this.$, elements, {});
+			}
+			return elements;
+		},
+
+		getElement: function(selector) {
+			var el, type = Base.type(selector), match;
+			if (type == 'window') {
+				el = selector;
+			} else {
+				if (type == 'string' && (match = selector.match(/^#?([\w-]+)$/)))
+					el = this.getDocument().$.getElementById(match[1]);
+				else if (DomNode.isNode(type))
+					el = DomElement.unwrap(selector);
+				if (el && el != this.$ && !DomElement.isAncestor(el, this.$))
+					el = null;
+				if (!el)
+					el = this.getElements(selector, true)[0];
+			}
+			return DomNode.wrap(el);
+		},
+
+		hasElement: function(selector) {
+			return !!this.getElement(selector);
+		},
+
+		match: function(selector) {
+			return !selector || match(this.$, parse(selector), {});
+		},
+
+		filter: function(elements, selector) {
+			return filter(elements, selector, this.$, new this._collection(), {});
+		},
+
+		statics: {
+			match: function(el, selector) {
+				return !selector || match(DomElement.unwrap(el), parse(selector), {});
+			}
+		}
+	};
+});
+
+DomElement.separators = {
+	'~': [
+		'/following-sibling::',
+		function(item, params, add) {
+			while (item = item.nextSibling)
+				if (item.nodeType == 1 && add(item))
+					break;
+		}
+	],
+
+	'+': [
+		'/following-sibling::*[1]/self::',
+		function(item, params, add) {
+			while (item = item.nextSibling) {
+				if (item.nodeType == 1) {
+					add(item);
+					break;
+				}
+			}
+		}
+	],
+
+	'>': [
+	 	'/',
+		function(item, params, add) {
+			var children = item.childNodes;
+			for (var i = 0, l = children.length; i < l; i++)
+				if (children[i].nodeType == 1)
+					add(children[i]);
+		}
+	],
+
+	' ': [
+		'//',
+		function(item, params, add) {
+			var children = item.getElementsByTagName(params.tag);
+			params.clearTag = true;
+			for (var i = 0, l = children.length; i < l; i++)
+				add(children[i]);
+		}
+	]
+};
+
+DomElement.operators = new function() {
+	function contains(sep) {
+		return [
+			function(a, v) {
+				return '[contains(' + (sep ? 'concat("' + sep + '", @' + a + ', "' + sep + '")' : '@' + a) + ', "' + sep + v + sep + '")]';
+			},
+			function(a, v) {
+				return a.contains(v, sep);
+			}
+		]
+	}
+
+	return {
+		'=': [
+			function(a, v) {
+				return '[@' + a + '="' + v + '"]';
+			},
+			function(a, v) {
+				return a == v;
+			}
+		],
+
+		'^=': [
+	 		function(a, v) {
+				return '[starts-with(@' + a + ', "' + v + '")]';
+			},
+			function(a, v) {
+				return a.substring(0, v.length) == v;
+			}
+		],
+
+		'$=': [
+			function(a, v) {
+				return '[substring(@' + a + ', string-length(@' + a + ') - ' + v.length + ' + 1) = "' + v + '"]';
+			},
+			function(a, v) {
+				return a.substring(a.length - v.length) == v;
+			}
+		],
+
+		'!=': [
+			function(a, v) {
+				return '[@' + a + '!="' + v + '"]';
+			},
+			function(a, v) {
+				return a != v;
+			}
+		],
+
+		'*=': contains(''),
+
+		'|=': contains('-'),
+
+		'~=': contains(' ')
+	};
+};
+
+DomElement.pseudos = new function() {
+	var nthChild = [
+		function(argument) {
+			switch (argument.special) {
+				case 'n': return '[count(preceding-sibling::*) mod ' + argument.a + ' = ' + argument.b + ']';
+				case 'first': return '[count(preceding-sibling::*) = 0]';
+				case 'last': return '[count(following-sibling::*) = 0]';
+				case 'only': return '[not(preceding-sibling::* or following-sibling::*)]';
+				case 'index': return '[count(preceding-sibling::*) = ' + argument.a + ']';
+			}
+		},
+		function(el, argument, data) {
+			var count = 0;
+			switch (argument.special) {
+				case 'n':
+					data.indices = data.indices || {};
+					if (!data.indices[el._unique]) {
+						var children = el.parentNode.childNodes;
+						for (var i = 0, l = children.length; i < l; i++) {
+							var child = children[i];
+							if (child.nodeType == 1) {
+								if (!child._unique)
+									DomNode.unique(item);
+								data.indices[child._unique] = count++;
+							}
+						}
+					}
+					return data.indices[el._unique] % argument.a == argument.b;
+				case 'first':
+					while (el = el.previousSibling)
+						if (el.nodeType == 1)
+							return false;
+					return true;
+				case 'last':
+					while (el = el.nextSibling)
+						if (el.nodeType == 1)
+							return false;
+					return true;
+				case 'only':
+					var prev = el;
+					while(prev = prev.previousSibling)
+						if (prev.nodeType == 1)
+							return false;
+					var next = el;
+					while (next = next.nextSibling)
+						if (next.nodeType == 1)
+							return false;
+					return true;
+				case 'index':
+					while (el = el.previousSibling)
+						if (el.nodeType == 1 && ++count > argument.a)
+							return false;
+					return true;
+			}
+			return false;
+		}
+	];
+
+	function contains(caseless) {
+		var abc = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+		return [
+			function(argument) {
+				return '[contains(' + (caseless ? 'translate(text(), "' + abc
+					+ '", "' + abc.toLowerCase() + '")' : 'text()') + ', "'
+					+ (caseless && argument ? argument.toLowerCase() : argument) + '")]';
+			},
+			function(el, argument) {
+				if (caseless && argument) argument = argument.toLowerCase();
+				var nodes = el.childNodes;
+				for (var i = nodes.length - 1; i >= 0; i--) {
+					var child = nodes[i];
+					if (child.nodeName && child.nodeType == 3 &&
+						(caseless ? child.nodeValue.toLowerCase() : child.nodeValue).contains(argument))
+							return true;
+				}
+				return false;
+			}
+		];
+	}
+
+	return {
+		'nth-child': {
+			parser: function(argument) {
+				var match = argument ? argument.match(/^([+-]?\d*)?([a-z]+)?([+-]?\d*)?$/) : [null, 1, 'n', 0];
+				if (!match) return null;
+				var i = parseInt(match[1]),
+					a = isNaN(i) ? 1 : i,
+					special = match[2],
+					b = parseInt(match[3]) || 0;
+				if (a != 0) {
+					b--;
+					while (b < 1) b += a;
+					while (b >= a) b -= a;
+				} else {
+					a = b;
+					special = 'index';
+				}
+				switch (special) {
+					case 'n': return { a: a, b: b, special: 'n' };
+					case 'odd': return { a: 2, b: 0, special: 'n' };
+					case 'even': return { a: 2, b: 1, special: 'n' };
+					case 'first': return { special: 'first' };
+					case 'last': return { special: 'last' };
+					case 'only': return { special: 'only' };
+					default: return { a: a - 1, special: 'index' };
+				}
+			},
+			handler: nthChild
+		},
+
+		'even': {
+			parser: { a: 2, b: 1, special: 'n' },
+			handler: nthChild
+		},
+
+		'odd': {
+			parser: { a: 2, b: 0, special: 'n' },
+			handler: nthChild
+		},
+
+		'first-child': {
+			parser: { special: 'first' },
+			handler: nthChild
+		},
+
+		'last-child': {
+			parser: { special: 'last' },
+			handler: nthChild
+		},
+
+		'only-child': {
+			parser: { special: 'only' },
+			handler: nthChild
+		},
+
+		'enabled': [
+			function() {
+				return '[not(@disabled)]';
+			},
+			function(el) {
+				return !el.disabled;
+			}
+		],
+
+		'empty': [
+		 	function() {
+				return '[not(node())]';
+			},
+			function(el) {
+				return !(el.innerText || el.textContent || '').length;
+			}
+		],
+
+		'contains': contains(false),
+
+		'contains-caseless': contains(true)
+	};
+};
+
+HtmlElements = DomElements.extend();
+
+HtmlElement = DomElement.extend({
+	_collection: HtmlElements
+});
+
+HtmlElement.inject({
+	_properties: ['html'],
+
+	getClass: function() {
+		return this.$.className;
+	},
+
+	setClass: function(cls) {
+		this.$.className = cls;
+	},
+
+	modifyClass: function(name, add) {
+		if (!this.hasClass(name) ^ !add) 
+			this.$.className = (add ? this.$.className + ' ' + name :
+				this.$.className.replace(name, '')).clean();
+		return this;
+	},
+
+	addClass: function(name) {
+		return this.modifyClass(name, true);
+	},
+
+	removeClass: function(name) {
+		return this.modifyClass(name, false);
+	},
+
+	toggleClass: function(name) {
+		return this.modifyClass(name, !this.hasClass(name));
+	},
+
+	hasClass: function(name) {
+		return this.$.className.contains(name, ' ');
+	}
+});
+
+Array.inject({
+	toNode: function(doc) {
+		doc = DomNode.wrap(doc || document);
+		var elements = new HtmlElements();
+		for (var i = 0; i < this.length;) {
+			var value = this[i++], element = null, type = Base.type(value);
+			if (type == 'string') {
+				var props = /^(object|hash)$/.test(Base.type(this[i])) && this[i++];
+				element = value.isHtml()
+					? value.toNode(doc).set(props)
+					: doc.createElement(value, props);
+				if (Base.type(this[i]) == 'array')
+					element.injectBottom(this[i++].toNode(doc));
+			} else if (DomNode.isNode(type)) {
+				element = value;
+			} else if (value && value.toNode) {
+				element = value.toNode(doc);
+			}
+			if (element)
+				elements[Base.type(element) == 'array' ? 'append' : 'push'](element);
+		}
+		return elements.length == 1 ? elements[0] : elements;
+	}
+});
+
+String.inject({
+	toNode: function(doc) {
+		var doc = doc || document, elements;
+		if (this.isHtml()) {
+			var str = this.trim().toLowerCase();
+			var div = DomElement.unwrap(doc).createElement('div');
+
+			var wrap =
+				!str.indexOf('<opt') &&
+				[1, '<select>', '</select>'] ||
+				!str.indexOf('<leg') &&
+				[1, '<fieldset>', '</fieldset>'] ||
+				(!str.indexOf('<thead') || !str.indexOf('<tbody') || !str.indexOf('<tfoot') || !str.indexOf('<colg')) &&
+				[1, '<table>', '</table>'] ||
+				!str.indexOf('<tr') &&
+				[2, '<table><tbody>', '</tbody></table>'] ||
+				(!str.indexOf('<td') || !str.indexOf('<th')) &&
+				[3, '<table><tbody><tr>', '</tr></tbody></table>'] ||
+				!str.indexOf('<col') &&
+				[2, '<table><colgroup>', '</colgroup></table>'] ||
+				[0,'',''];
+
+			div.innerHTML = wrap[1] + this + wrap[2];
+			while (wrap[0]--)
+				div = div.firstChild;
+			if (Browser.TRIDENT) {
+				var els = [];
+				if (!str.indexOf('<table') && str.indexOf('<tbody') < 0) {
+					els = div.firstChild && div.firstChild.childNodes;
+				} else if (wrap[1] == '<table>' && str.indexOf('<tbody') < 0) {
+					els = div.childNodes;
+				}
+				for (var i = els.length - 1; i >= 0 ; --i) {
+					var el = els[i];
+					if (el.nodeName.toLowerCase() == 'tbody' && !el.childNodes.length)
+						el.parentNode.removeChild(el);
+				}
+			}
+			elements = new HtmlElements(div.childNodes);
+		} else {
+			elements = DomNode.wrap(doc).getElements(this);
+		}
+		return elements.length == 1 ? elements[0] : elements;
+	}
+});
+
+HtmlDocument = DomDocument.extend({
+	_collection: HtmlElements
+});
+
+HtmlElement.inject(new function() {
+	var styles = {
+		all: {
+			width: '@px', height: '@px', left: '@px', top: '@px', right: '@px', bottom: '@px',
+			color: 'rgb(@, @, @)', backgroundColor: 'rgb(@, @, @)', backgroundPosition: '@px @px',
+			fontSize: '@px', letterSpacing: '@px', lineHeight: '@px', textIndent: '@px',
+			margin: '@px @px @px @px', padding: '@px @px @px @px',
+			border: '@px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @) @px @ rgb(@, @, @)',
+			borderWidth: '@px @px @px @px', borderStyle: '@ @ @ @',
+			borderColor: 'rgb(@, @, @) rgb(@, @, @) rgb(@, @, @) rgb(@, @, @)',
+			clip: 'rect(@px, @px, @px, @px)', opacity: '@'
+		},
+		part: {
+			'border': {}, 'borderWidth': {}, 'borderStyle': {}, 'borderColor': {},
+			'margin': {}, 'padding': {}
+		}
+	};
+
+	['Top', 'Right', 'Bottom', 'Left'].each(function(dir) {
+		['margin', 'padding'].each(function(style) {
+			var sd = style + dir;
+			styles.part[style][sd] = styles.all[sd] = '@px';
+		});
+		var bd = 'border' + dir;
+		styles.part.border[bd] = styles.all[bd] = '@px @ rgb(@, @, @)';
+		var bdw = bd + 'Width', bds = bd + 'Style', bdc = bd + 'Color';
+		styles.part[bd] = {};
+		styles.part.borderWidth[bdw] = styles.part[bd][bdw] = '@px';
+		styles.part.borderStyle[bds] = styles.part[bd][bds] = '@';
+		styles.part.borderColor[bdc] = styles.part[bd][bdc] = 'rgb(@, @, @)';
+	});
+
+	Base.each(styles.all, function(val, name) {
+		this[name] = val.split(' ');
+	});
+
+	var fields = {
+
+		getComputedStyle: function(name) {
+			if (this.$.currentStyle) return this.$.currentStyle[name.camelize()];
+			var style = this.getWindow().$.getComputedStyle(this.$, null);
+			return style ? style.getPropertyValue(name.hyphenate()) : null;
+		},
+
+		getStyle: function(name) {
+			if (name === undefined) return this.getStyles();
+			if (name == 'opacity') {
+				var op = this.opacity;
+				return op || op == 0 ? op : this.getVisibility() ? 1 : 0;
+			}
+			var el = this.$;
+			name = name.camelize();
+			var style = el.style[name];
+			if (!Base.check(style)) {
+				if (styles.part[name]) {
+					style = Hash.map(styles.part[name], function(val, key) {
+						return this.getStyle(key);
+					}, this);
+					return style.every(function(val) {
+						return val == style[0];
+					}) ? style[0] : style.join(' ');
+				}
+				style = this.getComputedStyle(name);
+			}
+			if (name == 'visibility')
+				return /^(visible|inherit(|ed))$/.test(style);
+			var color = style && style.match(/rgb[a]?\([\d\s,]+\)/);
+			if (color) return style.replace(color[0], color[0].rgbToHex());
+			if (Browser.PRESTO || Browser.TRIDENT && isNaN(parseInt(style))) {
+				if (/^(width|height)$/.test(name)) {
+					var size = 0;
+					(name == 'width' ? ['left', 'right'] : ['top', 'bottom']).each(function(val) {
+						size += this.getStyle('border-' + val + '-width').toInt() + this.getStyle('padding-' + val).toInt();
+					}, this);
+					return this.$['offset' + name.capitalize()] - size + 'px';
+				}
+				if (Browser.PRESTO && /px/.test(style)) return style;
+				if (/border(.+)[wW]idth|margin|padding/.test(name)) return '0px';
+			}
+			return style;
+		},
+
+		setStyle: function(name, value) {
+			if (value === undefined) return this.setStyles(name);
+			var el = this.$;
+			switch (name) {
+				case 'float':
+					name = Browser.TRIDENT ? 'styleFloat' : 'cssFloat';
+					break;
+				case 'clip':
+					if (value == true)
+						value = [0, el.offsetWidth, el.offsetHeight, 0];
+					break;
+				default:
+					name = name.camelize();
+			}
+			var type = Base.type(value);
+			if (value != undefined && type != 'string') {
+				var parts = styles.all[name] || ['@'], index = 0;
+				value = (type == 'array' ? value.flatten() : [value]).map(function(val) {
+					var part = parts[index++];
+					if (!part)
+						throw Base.stop;
+					return Base.type(val) == 'number' ? part.replace('@', name == 'opacity' ? val : Math.round(val)) : val;
+				}).join(' ');
+			}
+			switch (name) {
+				case 'visibility':
+					if (!isNaN(value)) value = !!value.toInt() + '';
+				 	value = value == 'true' && 'visible' || value == 'false' && 'hidden' || value;
+					break;
+				case 'opacity':
+					this.opacity = value = parseFloat(value);
+					this.setStyle('visibility', !!value);
+					if (!value) value = 1;
+					if (!el.currentStyle || !el.currentStyle.hasLayout) el.style.zoom = 1;
+					if (Browser.TRIDENT) el.style.filter = value > 0 && value < 1 ? 'alpha(opacity=' + value * 100 + ')' : '';
+					el.style.opacity = value;
+					return this;
+			}
+			el.style[name] = value;
+			return this;
+		},
+
+		getStyles: function() {
+			return arguments.length ? Array.each(arguments, function(name) {
+				this[name] = that.getStyle(name);
+			}, {}) : this.$.style.cssText;
+		},
+
+		setStyles: function(styles) {
+			switch (Base.type(styles)) {
+				case 'object':
+					Base.each(styles, function(style, name) {
+						if (style !== undefined)
+							this.setStyle(name, style);
+					}, this);
+					break;
+				case 'string':
+					this.$.style.cssText = styles;
+			}
+			return this;
+		}
+	};
+
+	['opacity', 'color', 'background', 'visibility', 'clip', 'zIndex',
+		'border', 'margin', 'padding', 'display'].each(function(name) {
+		var part = name.capitalize();
+		fields['get' + part] = function() {
+			return this.getStyle(name);
+		};
+		fields['set' + part] = function(value) {
+			return this.setStyle(name, arguments.length > 1
+				? Array.create(arguments) : value);
+		};
+	});
+
+	return fields;
+});
+
+HtmlElement.inject({
+
+	getFormElements: function() {
+		return this.getElements(['input', 'select', 'textarea']);
+	},
+
+	getValue: function(name) {
+		var el = this.getElement(name);
+		return el && el.getValue && el.getValue();
+	},
+
+	setValue: function(name, val) {
+		var el = this.getElement(name);
+		if (!el) el = this.injectTop('input', { type: 'hidden', id: name, name: name });
+		return el.setValue(val);
+	},
+
+	getValues: function() {
+		return this.getFormElements().each(function(el) {
+			var name = el.getName(), value = el.getValue();
+			if (name && value !== undefined && !el.getDisabled())
+				this[name] = value;
+		}, new Hash());
+	},
+
+	setValues: function(values) {
+		return Base.each(values, function(val, name) {
+			this.setValue(name, val);
+		}, this);
+	},
+
+	toQueryString: function() {
+		return Base.toQueryString(this.getValues());
+	}
+});
+
+HtmlForm = HtmlElement.extend({
+	_tag: 'form',
+	_properties: ['action', 'method', 'target'],
+	_methods: ['submit'],
+
+	blur: function() {
+		return this.getFormElements().each(function(el) {
+			el.blur();
+		}, this);
+	},
+
+	enable: function(enable) {
+		return this.getFormElements().each(function(el) {
+			el.enable(enable);
+		}, this);
+	}
+});
+
+HtmlFormElement = HtmlElement.extend({
+	_properties: ['name', 'disabled'],
+	_methods: ['focus', 'blur'],
+
+	enable: function(enable) {
+		var disabled = !enable && enable !== undefined;
+		if (disabled) this.$.blur();
+		this.$.disabled = disabled;
+		return this;
+	}
+});
+
+HtmlInput = HtmlFormElement.extend({
+	_tag: 'input',
+	_properties: ['type', 'checked', 'defaultChecked', 'readOnly', 'maxLength'],
+	_methods: ['click'],
+
+	getValue: function() {
+		if (this.$.checked && /^(checkbox|radio)$/.test(this.$.type) ||
+			/^(hidden|text|password|button|search)$/.test(this.$.type))
+			return this.$.value;
+	},
+
+	setValue: function(val) {
+		if (/^(checkbox|radio)$/.test(this.$.type)) this.$.checked = this.$.value == val;
+		else this.$.value = val != null ? val : '';
+		return this;
+	}
+});
+
+HtmlTextArea = HtmlFormElement.extend({
+	_tag: 'textarea',
+	_properties: ['value']
+});
+
+HtmlSelect = HtmlFormElement.extend({
+	_tag: 'select',
+	_properties: ['type', 'selectedIndex'],
+
+	getOptions: function() {
+		return this.getElements('option');
+	},
+
+	getSelected: function() {
+		return this.getElements('option[selected]');
+	},
+
+	setSelected: function(values) {
+		this.$.selectedIndex = -1;
+		if (values) {
+			Array.each(values.length != null ? values : [values], function(val) {
+				val = DomElement.unwrap(val);
+				if (val != null)
+					this.getElements('option[value="' + (val.value || val) + '"]').setProperty('selected', true);
+			}, this);
+		}
+		return this;
+	},
+
+	getValue: function() {
+		return this.getSelected().getProperty('value');
+	},
+
+	setValue: function(values) {
+		return this.setSelected(values);
+	}
+});
+
+HtmlOption = HtmlFormElement.extend({
+	_tag: 'option',
+	_properties: ['text', 'value', 'selected', 'defaultSelected', 'index']
+});
+
+HtmlFormElement.inject({
+	setSelection: function(start, end) {
+		var sel = end == undefined ? start : { start: start, end: end };
+		this.focus();
+		if (this.$.setSelectionRange) {
+			this.$.setSelectionRange(sel.start, sel.end);
+		} else {
+			var value = this.getValue();
+			var len = value.substring(sel.start, sel.end).replace(/\r/g, '').length;
+			var pos = value.substring(0, sel.start).replace(/\r/g, '').length;
+			var range = this.$.createTextRange();
+			range.collapse(true);
+			range.moveEnd('character', pos + len);
+			range.moveStart('character', pos);
+			range.select();
+		}
+		return this;
+	},
+
+	getSelection: function() {
+		if (this.$.selectionStart !== undefined) {
+			return { start: this.$.selectionStart, end: this.$.selectionEnd };
+		} else {
+			this.focus();
+			var pos = { start: 0, end: 0 };
+			var range = this.getDocument().$.selection.createRange();
+			var dup = range.duplicate();
+			if (this.$.type == 'text') {
+				pos.start = 0 - dup.moveStart('character', -100000);
+				pos.end = pos.start + range.text.length;
+			} else {
+				var value = this.getValue();
+				dup.moveToElementText(this.$);
+				dup.setEndPoint('StartToEnd', range);
+				pos.end = value.length - dup.text.length;
+				dup.setEndPoint('StartToStart', range);
+				pos.start = value.length - dup.text.length;
+			}
+			return pos;
+		}
+	},
+
+	getSelectedText: function() {
+ 		var range = this.getSelection();
+		return this.getValue().substring(range.start, range.end);
+	},
+
+	replaceSelectedText: function(value, select) {
+		var range = this.getSelection(), current = this.getValue();
+		var top = this.$.scrollTop, height = this.$.scrollHeight;
+		this.setValue(current.substring(0, range.start) + value + current.substring(range.end, current.length));
+		if (top != null)
+			this.$.scrollTop = top + this.$.scrollHeight - height;
+		return select || select == undefined
+			? this.setSelection(range.start, range.start + value.length)
+			: this.setCaret(range.start + value.length);
+	},
+
+	getCaret: function() {
+		return this.getSelection().start;
+	},
+
+	setCaret: function(pos) {
+		return this.setSelection(pos, pos);
+	}
+});
+
+HtmlImage = HtmlElement.extend({
+	_tag: 'img',
+	_properties: ['src', 'alt', 'title']
+});
+
+$document = Browser.document = DomNode.wrap(document);
+$window = Browser.window = DomNode.wrap(window).addEvent('unload', DomNode.dispose);
+
+Chain = {
+	chain: function(fn) {
+		(this._chain = this._chain || []).push(fn);
+		return this;
+	},
+
+	callChain: function() {
+		if (this._chain && this._chain.length)
+			this._chain.shift().apply(this, arguments);
+		return this;
+	},
+
+	clearChain: function() {
+		this._chain = [];
+		return this;
+	}
+};
+
+Callback = {
+	addEvent: function(type, fn) {
+		var ref = this.events = this.events || {};
+		ref = ref[type] = ref[type] || [];
+		if (!ref.find(function(val) { return val == fn })) ref.push(fn);
+		return this;
+	},
+
+	addEvents: function(events) {
+		return Base.each((events || []), function(fn, type) {
+			this.addEvent(type, fn);
+		}, this);
+	},
+
+	fireEvent: function(type, args, delay) {
+		return (this.events && this.events[type] || []).each(function(fn) {
+			fn.delay(delay, this, args);
+		}, this);
+	},
+
+	removeEvent: function(type, fn) {
+		if (this.events && this.events[type])
+			this.events[type].remove(function(val) { return fn == val; });
+		return this;
+	},
+
+	setOptions: function(opts) {
+		return (this.options = Hash.create(this.options, opts)).each(function(val, i) {
+			if (typeof val == 'function' && (i = i.match(/^on([A-Z]\w*)/)))
+				this.addEvent(i[1].toLowerCase(), val);
+		}, this);
+	},
+
+	statics: {
+		inject: function() {
+			var proto = this.prototype, options = proto.options;
+			this.base.apply(this, arguments);
+			if (proto.options != options)
+				proto.options = Hash.merge({}, options, proto.options);
+			return this;
+		}
+	}
+};
+
+Request = Base.extend(Chain, Callback, new function() {
+	var unique = 0;
+
+	function createRequest(that) {
+		if (!that.transport)
+			that.transport = window.XMLHttpRequest && new XMLHttpRequest()
+				|| Browser.TRIDENT && new ActiveXObject('Microsoft.XMLHTTP');
+	}
+
+	function createFrame(that) {
+		var id = 'request_' + unique++, load = that.onFrameLoad.bind(that);
+		var div = DomElement.get('body').injectBottom('div', {
+				styles: {
+					position: 'absolute', width: 0, height: 0, top: 0, marginLeft: '-10000px'
+				}
+			}, [
+				'iframe', {
+					name: id, id: id, events: { load: load, readystatechange: load }
+				}
+			]
+		);
+		that.frame = {
+			id: id, div: div,
+			iframe: window.frames[id] || document.getElementById(id),
+			element: DomElement.get(id)
+		};
+		div.offsetWidth;
+	}
+
+	return {
+		options: {
+			headers: {
+				'X-Requested-With': 'XMLHttpRequest',
+				'Accept': 'text/javascript, text/html, application/xml, text/xml, */*'
+			},
+			method: 'post',
+			async: true,
+			urlEncoded: true,
+			encoding: 'utf-8',
+			emulation: true,
+			secure: false
+		},
+
+		initialize: function() {
+			var params = Array.associate(arguments, { url: 'string', options: 'object', handler: 'function' });
+			this.setOptions(params.options);
+			if (params.handler)
+				this.addEvent('complete', params.handler);
+			if (this.options.update)
+				this.options.type = 'html';
+			this.headers = new Hash(this.options.headers);
+			if (this.options.type == 'json') {
+				this.setHeader('Accept', 'application/json');
+				this.setHeader('X-Request', 'JSON');
+			}
+			if (this.options.urlEncoded && /^(post|put)$/.test(this.options.method)) {
+				this.setHeader('Content-Type', 'application/x-www-form-urlencoded' +
+					(this.options.encoding ? '; charset=' + this.options.encoding : ''));
+			}
+			this.headers.append(this.options.headers);
+		},
+
+		onStateChange: function() {
+			if (this.transport.readyState == 4 && this.running) {
+				this.running = false;
+				this.status = 0;
+				try {
+					this.status = this.transport.status;
+					delete this.transport.onreadystatechange;
+				} catch (e) {}
+				if (!this.status || this.status >= 200 && this.status < 300) {
+					this.success(this.transport.responseText, this.transport.responseXML);
+				} else {
+					this.fireEvent('complete').fireEvent('failure');
+				}
+			}
+		},
+
+		onFrameLoad: function() {
+			var frame = this.frame && this.frame.iframe, loc = frame && frame.location,
+				doc = frame && (frame.contentDocument || frame.contentWindow || frame).document;
+			if (this.running && frame && loc && (!loc.href || loc.href.indexOf(this.url) != -1)
+				&& /^(loaded|complete|undefined)$/.test(doc.readyState)) {
+				this.running = false;
+				var html = this.options.type == 'html', area = !html
+					&& doc.getElementsByTagName('textarea')[0];
+				var text = doc && (area && area.value || doc.body
+					&& (html && doc.body.innerHTML || doc.body.textContent
+					|| doc.body.innerText)) || '';
+				this.frame.element.setProperty('src', '');
+				this.success(text);
+				if (!this.options.link) {
+					var div = this.frame.div;
+					div.insertBottom(DomElement.get('body'));
+					div.remove.delay(5000, div);
+					this.frame = null;
+				}
+			}
+		},
+
+		success: function(text, xml) {
+			var args;
+			switch (this.options.type) {
+			case 'html':
+				var match = text.match(/<body[^>]*>([\u0000-\uffff]*?)<\/body>/i);
+				var stripped = this.stripScripts(match ? match[1] : text);
+				if (this.options.update)
+					DomElement.get(this.options.update).setHtml(stripped.html);
+				if (this.options.evalScripts)
+					this.executeScript(stripped.script);
+				args = [ stripped.html, text ];
+				break;
+			case 'json':
+				args = [ Json.decode(text, this.options.secure), text ];
+				break;
+			default: 
+				args = [ this.processScripts(text), xml ]
+			}
+			this.fireEvent('complete', args)
+				.fireEvent('success', args)
+				.callChain();
+		},
+
+		stripScripts: function(html) {
+			var script = '';
+			html = html.replace(/<script[^>]*>([\u0000-\uffff]*?)<\/script>/gi, function() {
+				script += arguments[1] + '\n';
+				return '';
+			});
+			return { html: html, script: script };
+		},
+
+		processScripts: function(text) {
+			if (this.options.evalResponse || (/(ecma|java)script/).test(this.getHeader('Content-type'))) {
+				this.executeScript(text);
+				return text;
+			} else {
+				var stripped = this.stripScripts(text);
+				if (this.options.evalScripts)
+					this.executeScript(stripped.script);
+				return stripped.html;
+			}
+		},
+
+		executeScript: function(script) {
+			if (window.execScript) {
+				window.execScript(script);
+			} else {
+				DomElement.get('head').injectBottom('script', {
+					type: 'text/javascript', text: script
+				}).remove();
+			}
+		},
+
+		setHeader: function(name, value) {
+			this.headers[name] = value;
+			return this;
+		},
+
+		getHeader: function(name) {
+			try {
+				if (this.transport)
+					return this.transport.getResponseHeader(name);
+			} catch (e) {}
+			return null;
+		},
+
+		send: function() {
+			var params = Array.associate(arguments, { url: 'string', options: 'object', handler: 'function' });
+			var opts = params.options ? Hash.merge(params.options, this.options) : this.options;
+			if (params.handler)
+				this.addEvent('complete', function() {
+					params.handler.apply(this, arguments);
+					this.removeEvent('complete', arguments.callee);
+				});
+			if (this.running) {
+				switch (opts.link) {
+					case 'cancel':
+						this.cancel();
+						break;
+					case 'chain':
+						this.chain(this.send.wrap(this, arguments));
+					default:
+						return this;
+				}
+			}
+			var data = opts.data || '';
+			var url = params.url || opts.url;
+			switch (Base.type(data)) {
+				case 'element':
+				 	data = DomNode.wrap(data);
+					if (data.getTag() != 'form' || !data.hasElement('input[type=file]'))
+						data = data.toQueryString();
+					break;
+				case 'object':
+					data = Base.toQueryString(data);
+					break;
+				default:
+					data = data.toString();
+			}
+			var string = typeof data == 'string', method = opts.method;
+			if (opts.emulation && /^(put|delete)$/.test(method)) {
+				if (string) data += '&_method=' + method;
+				else data.setValue('_method', method);
+				method = 'post';
+			}
+			if (string && !this.options.iframe) {
+				createRequest(this);
+				if (!this.transport) {
+					if (!this.frame)
+						createFrame(this);
+					method = 'get';
+				}
+			} else if (!this.frame) {
+ 				createFrame(this);
+			}
+			if (string && data && method == 'get') {
+				url += (url.contains('?') ? '&' : '?') + data;
+				data = null;
+			}
+			this.running = true;
+			this.url = url;
+			if (this.frame) {
+				var form = !string && data;
+				if (form) {
+					form.set({
+						target: this.frame.id, action: url, method: method,
+						enctype:  method == 'get'
+							? 'application/x-www-form-urlencoded'
+							: 'multipart/form-data',
+						'accept-charset': opts.encoding || ''
+					}).submit();
+				} else {
+					this.frame.element.setProperty('src', url);
+				}
+			} else if (this.transport) {
+				try {
+					this.transport.open(method.toUpperCase(), url, opts.async);
+					this.transport.onreadystatechange = this.onStateChange.bind(this);
+					new Hash(this.headers, opts.headers).each(function(header, name) {
+						try{
+							this.transport.setRequestHeader(name, header);
+						} catch (e) {
+							this.fireEvent('exception', [e, name, header]);
+						}
+					}, this);
+					this.fireEvent('request');
+					this.transport.send(data);
+					if (!opts.async)
+						this.onStateChange();
+				} catch (e) {
+					this.fireEvent('failure', [e]);
+				}
+			}
+			return this;
+		},
+
+		cancel: function() {
+			if (this.running) {
+				this.running = false;
+				if (this.transport) {
+					this.transport.abort();
+					this.transport.onreadystatechange = null;
+					this.transport = null;
+				} else if (this.frame) {
+					this.frame.div.remove();
+					this.frame = null;
+				}
+				this.fireEvent('cancel');
+			}
+			return this;
+		}
+	};
+});
+
+HtmlForm.inject({
+	send: function(url) {
+		if (!this.sender)
+			this.sender = new Request({ link: 'cancel' });
+		this.sender.send({
+			url: url || this.getProperty('action'),
+			data: this, method: this.getProperty('method') || 'post'
+		});
+	}
+});
+
+HtmlElement.inject({
+	load: function() {
+		if (!this.loader)
+			this.loader = new Request({ link: 'cancel', update: this, method: 'get' });
+		this.loader.send(Array.associate(arguments, { data: 'object', url: 'string' }));
+		return this;
+	}
+});
+
+Asset = new function() {
+	function getProperties(props) {
+		return props ? Hash.create(props).each(function(val, key) {
+			if (/^on/.test(key)) delete this[key];
+		}) : {};
+	}
+
+	function createMultiple(type, sources, options) {
+		var props = getProperties(options), count = 0;
+		options = options || {};
+		return sources.each(function(src) {
+			props.onLoad = function() {
+				if (options.onProgress)
+					options.onProgress(src);
+				if (++count == sources.length && options.onComplete)
+					options.onComplete();
+			}
+			this.push(Asset[type](src, props));
+		}, new HtmlElements());
+	}
+
+	return {
+		script: function(src, props) {
+			var script = DomElement.get('head').injectBottom('script', Hash.merge({
+				events: {
+					load: props.onLoad && function() {
+						if (!this.loaded) {
+							this.loaded = true;
+							props.onLoad.call(this);
+						}
+					},
+					readystatechange: function() {
+						if (/loaded|complete/.test(this.$.readyState))
+							this.fireEvent('load');
+					}
+				},
+				src: src
+			}, getProperties(props)));
+			if (Browser.WEBKIT && Browser.VERSION < 420)
+				new Request({ url: src, method: 'get' }).addEvent('success', function() {
+					script.fireEvent('load', [], 1);
+				}).send();
+			return script;
+		},
+
+		stylesheet: function(src, props) {
+			return new HtmlElement('link', new Hash({
+				rel: 'stylesheet', media: 'screen', type: 'text/css', href: src
+			}, props)).insertInside(DomElement.get('head'));
+		},
+
+		image: function(src, props) {
+			props = props || {};
+			var image = new Image();
+			image.src = src;
+			var element = new HtmlElement('img', { src: src });
+			['load', 'abort', 'error'].each(function(type) {
+				var name = 'on' + type.capitalize();
+				if (props[name]) element.addEvent(type, function() {
+					this.removeEvent(type, arguments.callee);
+					props[name].call(this);
+				});
+			});
+			if (image.width && image.height)
+				element.fireEvent('load', [], 1);
+			return element.setProperties(getProperties(props));
+		},
+
+	 	scripts: function(sources, options) {
+			return createMultiple('script', sources, options);
+		},
+
+	 	stylesheets: function(sources, options) {
+			return createMultiple('stylesheet', sources, options);
+		},
+
+	 	images: function(sources, options) {
+			return createMultiple('image', sources, options);
+		}
+	}
+};
+
+Cookie = {
+	set: function(name, value, expires, path) {
+		document.cookie = name + '=' + encodeURIComponent(value) + (expires ? ';expires=' +
+			expires.toGMTString() : '') + ';path=' + (path || '/');
+	},
+	get: function(name) {
+		var res = document.cookie.match('(?:^|;)\\s*' + name + '=([^;]*)');
+		if (res) return decodeURIComponent(res[1]);
+	},
+
+	remove: function(name) {
+		this.set(name, '', -1);
+	}
+};
+
+Fx = Base.extend(Chain, Callback, {
+	options: {
+		fps: 50,
+		unit: false,
+		duration: 500,
+		wait: true,
+		transition: function(p) {
+			return -(Math.cos(Math.PI * p) - 1) / 2;
+		}
+	},
+
+	initialize: function(element, options) {
+		this.element = DomElement.get(element);
+		this.setOptions(options);
+	},
+
+	step: function() {
+		var time = Date.now();
+		if (time < this.time + this.options.duration) {
+			this.delta = this.options.transition((time - this.time) / this.options.duration);
+			this.update(this.get());
+		} else {
+			this.stop(true);
+			this.update(this.to);
+			this.fireEvent('complete', [this.element]).callChain();
+		}
+	},
+
+	set: function(to) {
+		this.update(to);
+		this.fireEvent('set', [this.element]);
+		return this;
+	},
+
+	get: function() {
+		return this.compute(this.from, this.to);
+	},
+
+	compute: function(from, to) {
+		return (to - from) * this.delta + from;
+	},
+
+	start: function(from, to) {
+		if (!this.options.wait) this.stop();
+		else if (this.timer) return this;
+		this.from = from;
+		this.to = to;
+		this.time = Date.now();
+		if (!this.slave) {
+			this.timer = this.step.periodic(Math.round(1000 / this.options.fps), this);
+			this.fireEvent('start', [this.element]);
+		}
+		this.step();
+		return this;
+	},
+
+	stop: function(end) {
+		if (this.timer) {
+			this.timer = this.timer.clear();
+			if (!end) this.fireEvent('cancel', [this.element]).clearChain();
+		}
+		return this;
+	}
+});
+
+Fx.Scroll = Fx.extend({
+	options: {
+		offset: { x: 0, y: 0 },
+		wheelStops: true
+	},
+
+	initialize: function(element, options) {
+		this.base(element, options);
+		if (this.options.wheelStops) {
+			var stop = this.stop.bind(this), stopper = this.element;
+			this.addEvent('start', function() {
+				stopper.addEvent('mousewheel', stop);
+			}, true);
+			this.addEvent('complete', function() {
+				stopper.removeEvent('mousewheel', stop);
+			}, true);
+		}
+	},
+
+	update: function(x, y) {
+		var now = Array.flatten(arguments);
+		this.element.setScrollOffset(now[0], now[1]);
+	},
+
+	get: function() {
+		var now = [];
+		for (var i = 0; i < 2; i++)
+			now.push(this.compute(this.from[i], this.to[i]));
+		return now;
+	},
+
+	start: function(x, y) {
+		var offsetSize = this.element.getSize(),
+			scrollSize = this.element.getScrollSize(),
+			scroll = this.element.getScrollOffset(),
+			values = { x: x, y: y },
+			lookup = { x: 'width', y: 'height' };
+		for (var i in values) {
+			var s = lookup[i];
+			var max = scrollSize[s] - offsetSize[s];
+			if (Base.check(values[i]))
+				values[i] = Base.type(values[i]) == 'number'
+					? values[i].limit(0, max) : max;
+			else values[i] = scroll[i];
+			values[i] += this.options.offset[i];
+		}
+		return this.base([scroll.x, scroll.y], [values.x, values.y]);
+	},
+
+	toTop: function() {
+		return this.start(false, 0);
+	},
+
+	toLeft: function() {
+		return this.start(0, false);
+	},
+
+	toRight: function() {
+		return this.start('right', false);
+	},
+
+	toBottom: function() {
+		return this.start(false, 'bottom');
+	},
+
+	toElement: function(el, options) {
+		var el = DomElement.get(el), offset = el.getOffset(),
+			current = el.getWindow().getScrollOffset();
+		return this.start(
+				!options || options.x ? offset.x : current.x,
+				!options || options.y ? offset.y : current.y);
+	}
+});
+
+Fx.SmoothScroll = Fx.Scroll.extend({
+	initialize: function(options, context) {
+		context = DomElement.get(context || document);
+		var doc = context.getDocument(), win = context.getWindow();
+		this.base(doc, options);
+		var links = this.options.links ? $$(this.options.links) : $$('a', context);
+		var loc = win.location.href.match(/^[^#]*/)[0] + '#';
+		links.each(function(link) {
+			if (link.$.href.indexOf(loc) != 0) return;
+			var hash = link.$.href.substring(loc.length);
+			var anchor = hash && DomElement.get('#' + hash, context);
+			if (anchor) {
+				link.addEvent('click', function(event) {
+					this.toElement(anchor);
+					var props = anchor.getProperties('name', 'id');
+					anchor.removeProperties('name', 'id');
+					win.location.hash = hash;
+					anchor.setProperties(props);
+					event.stop();
+				}.bind(this));
+			}
+		}, this);
+	}
+});
+
+Fx.CSS = new function() {
+
+	var parsers = new Hash({
+		color: {
+			match: function(value) {
+				if (value.match(/^#[0-9a-f]{3,6}$/i)) return value.hexToRgb(true);
+				return ((value = value.match(/(\d+),\s*(\d+),\s*(\d+)/))) ? [value[1], value[2], value[3]] : false;
+			},
+
+			compute: function(from, to, fx) {
+				return from.map(function(value, i) {
+					return Math.round(fx.compute(value, to[i]));
+				});
+			},
+
+			get: function(value) {
+				return value.map(Number);
+			}
+		},
+
+		number: {
+			match: function(value) {
+				return parseFloat(value);
+			},
+
+			compute: function(from, to, fx) {
+				return fx.compute(from, to);
+			},
+
+			get: function(value, unit) {
+				return (unit) ? value + unit : value;
+			}
+		}
+	});
+
+	return {
+		start: function(element, property, values) {
+			values = Array.convert(values);
+			if (!Base.check(values[1]))
+				values = [ element.getStyle(property), values[0] ];
+			var parsed = values.map(Fx.CSS.set);
+			return { from: parsed[0], to: parsed[1] };
+		},
+
+		set: function(value) {
+			return Array.convert(value).map(function(val) {
+				val = val + '';
+				var res = parsers.find(function(parser, key) {
+					var value = parser.match(val);
+					if (Base.check(value)) return { value: value, parser: parser };
+				}) || {
+					value: val,
+					parser: {
+						compute: function(from, to) {
+							return to;
+						}
+					}
+				};
+				return res;
+			});
+		},
+
+		compute: function(from, to, fx) {
+			return from.map(function(obj, i) {
+				return {
+					value: obj.parser.compute(obj.value, to[i].value, fx),
+					parser: obj.parser
+				};
+			});
+		},
+
+		get: function(now, unit) {
+			return now.reduce(function(prev, cur) {
+				var get = cur.parser.get;
+				return prev.concat(get ? get(cur.value, unit) : cur.value);
+			}, []);
+		}
+	}
+};
+
+Fx.Style = Fx.extend({
+	initialize: function(element, property, options) {
+		this.base(element, options);
+		this.property = property;
+	},
+
+	hide: function() {
+		return this.set(0);
+	},
+
+	get: function() {
+		return Fx.CSS.compute(this.from, this.to, this);
+	},
+
+	set: function(to) {
+		return this.base(Fx.CSS.set(to));
+	},
+
+	start: function(from, to) {
+		if (this.timer && this.options.wait) return this;
+		var parsed = Fx.CSS.start(this.element, this.property, [from, to]);
+		return this.base(parsed.from, parsed.to);
+	},
+
+	update: function(val) {
+		this.element.setStyle(this.property, Fx.CSS.get(val, this.options.unit));
+	}
+});
+
+HtmlElement.inject({
+	effect: function(prop, opts) {
+		return new Fx.Style(this, prop, opts);
+	}
+});
+
+Fx.Styles = Fx.extend({
+	get: function() {
+		var that = this;
+		return Base.each(this.from, function(from, key) {
+			this[key] = Fx.CSS.compute(from, that.to[key], that);
+		}, {});
+	},
+
+	set: function(to) {
+		return this.base(Base.each(to, function(val, key) {
+			this[key] = Fx.CSS.set(val);
+		}, {}));
+	},
+
+	start: function(obj) {
+		if (this.timer && this.options.wait) return this;
+		var from = {}, to = {};
+		Base.each(obj, function(val, key) {
+			var parsed = Fx.CSS.start(this.element, key, val);
+			from[key] = parsed.from;
+			to[key] = parsed.to;
+		}, this);
+		return this.base(from, to);
+	},
+
+	update: function(val) {
+		Base.each(val, function(val, key) {
+			this.element.setStyle(key, Fx.CSS.get(val, this.options.unit));
+		}, this);
+	}
+
+});
+
+HtmlElement.inject({
+	effects: function(opts) {
+		return new Fx.Styles(this, opts);
+	}
+});
+
+Fx.Elements = Fx.extend({
+	initialize: function(elements, options) {
+		this.base(null, options);
+		this.elements = DomElement.getAll(elements);
+	},
+
+	start: function(obj) {
+		if (this.timer && this.options.wait) return this;
+		this.effects = {};
+
+		function start(that, key, val) {
+			var fx = that.effects[key] = new Fx.Styles(that.elements[key], that.options);
+			fx.slave = true;
+			fx.start(val);
+		}
+
+		Base.each(obj, function(val, key) {
+			if (key == '*') {
+				this.elements.each(function(el, key) {
+					start(this, key, val);
+				}, this);
+			} else if (isNaN(parseInt(key))) {
+				var els = DomElement.getAll(key);
+				this.elements.append(els);
+				els.each(function(el) {
+					start(this, this.elements.indexOf(el), val);
+				}, this);
+			} else {
+				start(this, key, val);
+			}
+		}, this);
+		return this.base();
+	},
+
+	set: function(to) {
+	},
+
+	update: function(to) {
+		Base.each(this.effects, function(fx) {
+			fx.step();
+		});
+	}
+});
+
+Fx.Transitions = new Base().inject({
+	inject: function(src) {
+		return this.base(Base.each(src, function(func, name) {
+			func.In = func;
+
+			func.Out = function(pos) {
+				return 1 - func(1 - pos);
+			}
+
+			func.InOut = function(pos) {
+				return pos <= 0.5 ? func(2 * pos) / 2 : (2 - func(2 * (1 - pos))) / 2;
+			}
+		}));
+	},
+
+	Linear: function(p) {
+		return p;
+	}
+});
+
+Fx.Transitions.inject({
+	Pow: function(p, x) {
+		return Math.pow(p, x[0] || 6);
+	},
+
+	Expo: function(p) {
+		return Math.pow(2, 8 * (p - 1));
+	},
+
+	Circ: function(p) {
+		return 1 - Math.sin(Math.acos(p));
+	},
+
+	Sine: function(p) {
+		return 1 - Math.sin((1 - p) * Math.PI / 2);
+	},
+
+	Back: function(p, x) {
+		x = x[0] || 1.618;
+		return Math.pow(p, 2) * ((x + 1) * p - x);
+	},
+
+	Bounce: function(p) {
+		var value;
+		for (var a = 0, b = 1; 1; a += b, b /= 2) {
+			if (p >= (7 - 4 * a) / 11) {
+				value = - Math.pow((11 - 6 * a - 11 * p) / 4, 2) + b * b;
+				break;
+			}
+		}
+		return value;
+	},
+
+	Elastic: function(p, x) {
+		return Math.pow(2, 10 * --p) * Math.cos(20 * p * Math.PI * (x[0] || 1) / 3);
+	}
+
+});
+
+Fx.Transitions.inject(['Quad', 'Cubic', 'Quart', 'Quint'].each(function(name, i) {
+	this[name] = function(p) {
+		return Math.pow(p, i + 2);
+	}
+}, {}));
+
diff --git a/dist/docs/resources/js/codemirror.js b/dist/docs/resources/js/codemirror.js
new file mode 100644
index 00000000..0c1c6427
--- /dev/null
+++ b/dist/docs/resources/js/codemirror.js
@@ -0,0 +1 @@
+var CodeMirror=function(){function O(a,b){if(a.indexOf)return a.indexOf(b);for(var c=0,d=a.length;c<d;++c)if(a[c]==b)return c;return-1}function N(a,b){if(!b)return a?a.length:0;if(!a)return b.length;for(var c=a.length,d=b.length;c>=0&&d>=0;--c,--d)if(a.charAt(c)!=b.charAt(d))break;return d+1}function M(a){L.innerText=L.textContent=a;return L.innerHTML}function K(a){return{line:a.line,ch:a.ch}}function J(a,b){return a.line<b.line||a.line==b.line&&a.ch<b.ch}function I(a,b){return a.line==b.line&&a.ch==b.ch}function H(a){return a.textContent||a.innerText||a.nodeValue||""}function G(a,b){var c=a.ownerDocument.body,d=0,e=0,f=!1;for(var g=a;g;g=g.offsetParent)d+=g.offsetLeft,e+=g.offsetTop,b&&F(g).position=="fixed"&&(f=!0);var h=b&&!f?null:c;for(var g=a.parentNode;g!=h;g=g.parentNode)g.scrollLeft!=null&&(d-=g.scrollLeft,e-=g.scrollTop);return{left:d,top:e}}function F(a){if(a.currentStyle)return a.currentStyle;return window.getComputedStyle(a,null)}function E(a,b){b==null&&(b=a.search(/[^\s\u00a0]/),b==-1&&(b=a.length));for(var c=0,d=0;c<b;++c)a.charAt(c)=="\t"?d+=A-d%A:++d;return d}function u(){this.id=null}function t(a,b,c,d){function e(a){c(a||window.event)}if(typeof a.addEventListener=="function"){a.addEventListener(b,e,!1);if(d)return function(){a.removeEventListener(b,e,!1)}}else{a.attachEvent("on"+b,e);if(d)return function(){a.detachEvent("on"+b,e)}}}function s(a){if(a.pageY!=null)return a.pageY;var b=p(a).ownerDocument;return a.clientY+b.body.scrollTop+b.documentElement.scrollTop}function r(a){if(a.pageX!=null)return a.pageX;var b=p(a).ownerDocument;return a.clientX+b.body.scrollLeft+b.documentElement.scrollLeft}function q(a){if(a.which)return a.which;if(a.button&1)return 1;if(a.button&2)return 3;if(a.button&4)return 2}function p(a){return a.target||a.srcElement}function o(a){m(a),n(a)}function n(a){a.stopPropagation?a.stopPropagation():a.cancelBubble=!0}function m(a){a.preventDefault?a.preventDefault():a.returnValue=!1}function l(a){a.stop||(a.stop=k);return a}function k(){o(this)}function j(){this.time=0,this.done=[],this.undone=[]}function i(a,b,c,d){for(var e=0,f=0,g=0;f<b;e+=2){var h=c[e],i=f+h.length;g==0?(i>a&&d.push(h.slice(a-f,Math.min(h.length,b-f)),c[e+1]),i>=a&&(g=1)):g==1&&(i>b?d.push(h.slice(0,b-f),c[e+1]):d.push(h,c[e+1])),f=i}}function h(a,b){this.styles=b||[a,null],this.stateAfter=null,this.text=a,this.marked=this.gutterMarker=this.className=null}function g(a){this.pos=this.start=0,this.string=a}function f(a,b,c){return a.startState?a.startState(b,c):!0}function e(a,b){if(b===!0)return b;if(a.copyState)return a.copyState(b);var c={};for(var d in b){var e=b[d];e instanceof Array&&(e=e.concat([])),c[d]=e}return c}function a(b,c){function cV(a,b,c){this.atOccurrence=!1,c==null&&(c=typeof a=="string"&&a==a.toLowerCase()),b&&typeof b=="object"?b=cj(b):b={line:0,ch:0},this.pos={from:b,to:b};if(typeof a!="string")this.matches=function(b,c){if(b){var d=ba[c.line].text.slice(0,c.ch),e=d.match(a),f=0;while(e){var g=d.indexOf(e[0]);f+=g,d=d.slice(g+1);var h=d.match(a);if(h)e=h;else break;f++}}else var d=ba[c.line].text.slice(c.ch),e=d.match(a),f=e&&c.ch+d.indexOf(e[0]);if(e)return{from:{line:c.line,ch:f},to:{line:c.line,ch:f+e[0].length},match:e}};else{c&&(a=a.toLowerCase());var d=c?function(a){return a.toLowerCase()}:function(a){return a},e=a.split("\n");e.length==1?this.matches=function(b,c){var e=d(ba[c.line].text),f=a.length,g;if(b?c.ch>=f&&(g=e.lastIndexOf(a,c.ch-f))!=-1:(g=e.indexOf(a,c.ch))!=-1)return{from:{line:c.line,ch:g},to:{line:c.line,ch:g+f}}}:this.matches=function(a,b){var c=b.line,f=a?e.length-1:0,g=e[f],h=d(ba[c].text),i=a?h.indexOf(g)+g.length:h.lastIndexOf(g);if(!(a?i>=b.ch||i!=g.length:i<=b.ch||i!=h.length-g.length))for(;;){if(a?!c:c==ba.length-1)return;h=d(ba[c+=a?-1:1].text),g=e[a?--f:++f];if(f>0&&f<e.length-1){if(h!=g)return;continue}var j=a?h.lastIndexOf(g):h.indexOf(g)+g.length;if(a?j!=h.length-g.length:j!=g.length)return;var k={line:b.line,ch:i},l={line:c,ch:j};return{from:a?l:k,to:a?k:l}}}}}function cU(a){return function(){cT++||cR();try{var b=a.apply(this,arguments)}finally{--cT||cS()}return b}}function cS(){var a=!1;bl&&(a=!bZ()),bj.length?ca(bj):bl&&ce(),a&&bZ(),bl&&cJ(),bd&&!bm&&(bi===!0||bi!==!1&&bl)&&bX(),bl&&g.matchBrackets&&setTimeout(cU(function(){bs&&(bs(),bs=null),cL(!1)}),20);var b=bk;bl&&g.onCursorActivity&&g.onCursorActivity(by),b&&g.onChange&&by&&g.onChange(by,b)}function cR(){bi=null,bj=[],bk=bl=!1}function cQ(a){!bb.length||Z.set(a,cU(cP))}function cP(){var a=+(new Date)+g.workTime,b=bb.length;while(bb.length){if(!ba[bn].stateAfter)var c=bn;else var c=bb.pop();if(c>=ba.length)continue;var d=cM(c),h=d&&ba[d-1].stateAfter;h?h=e(_,h):h=f(_);var i=0,j=_.compareStates;for(var k=d,l=ba.length;k<l;++k){var m=ba[k],n=m.stateAfter;if(+(new Date)>a){bb.push(k),cQ(g.workDelay),bj.push({from:c,to:k+1});return}var o=m.highlight(_,h);m.stateAfter=e(_,h);if(j){if(n&&j(n,h))break}else if(o||!n)i=0;else if(++i>3)break}bj.push({from:c,to:k+1})}b&&g.onHighlightComplete&&g.onHighlightComplete(by)}function cO(a,b){var c=cN(a);for(var d=a;d<b;++d){var f=ba[d];f.highlight(_,c),f.stateAfter=e(_,c)}}function cN(a){var b=cM(a),c=b&&ba[b-1].stateAfter;c?c=e(_,c):c=f(_);for(var d=b;d<a;++d){var g=ba[d];g.highlight(_,c),g.stateAfter=e(_,c)}a<ba.length&&!ba[a].stateAfter&&bb.push(a);return c}function cM(a){var b,c;for(var d=a,e=a-40;d>e;--d){if(d==0)return 0;var f=ba[d-1];if(f.stateAfter)return d;var g=f.indentation();if(c==null||b>g)c=d,b=g}return c}function cL(a){function p(a,b,c){if(!!a.text){var d=a.styles,e=g?0:a.text.length-1,f;for(var i=g?0:d.length-2,j=g?d.length:-2;i!=j;i+=2*h){var k=d[i];if(d[i+1]!=null&&d[i+1]!=m){e+=h*k.length;continue}for(var l=g?0:k.length-1,p=g?k.length:-1;l!=p;l+=h,e+=h)if(e>=b&&e<c&&o.test(f=k.charAt(l))){var q=cK[f];if(q.charAt(1)==">"==g)n.push(f);else{if(n.pop()!=q.charAt(0))return{pos:e,match:!1};if(!n.length)return{pos:e,match:!0}}}}}}var b=be.inverted?be.from:be.to,c=ba[b.line],d=b.ch-1,e=d>=0&&cK[c.text.charAt(d)]||cK[c.text.charAt(++d)];if(!!e){var f=e.charAt(0),g=e.charAt(1)==">",h=g?1:-1,i=c.styles;for(var j=d+1,k=0,l=i.length;k<l;k+=2)if((j-=i[k].length)<=0){var m=i[k+1];break}var n=[c.text.charAt(d)],o=/[(){}[\]]/;for(var k=b.line,l=g?Math.min(k+100,ba.length):Math.max(-1,k-100);k!=l;k+=h){var c=ba[k],q=k==b.line,r=p(c,q&&g?d+1:0,q&&!g?d:c.text.length);if(r)break}r||(r={pos:null,match:!1});var m=r.match?"CodeMirror-matchingbracket":"CodeMirror-nonmatchingbracket",s=cu({line:b.line,ch:d},{line:b.line,ch:d+1},m),t=r.pos!=null?cu({line:k,ch:r.pos},{line:k,ch:r.pos+1},m):function(){},u=cU(function(){s(),t()});a?setTimeout(u,800):bs=u}}function cJ(){clearInterval($);var a=!0;W.style.visibility="",$=setInterval(function(){W.style.visibility=(a=!a)?"":"hidden"},650)}function cI(a){function e(){var a=P(E.value).join("\n");a!=d&&cU(bP)(a,"end"),D.style.position="relative",E.style.cssText=c,bm=!1,bX(),bU()}var b=cH(a);if(!!b&&!window.opera){(I(be.from,be.to)||J(b,be.from)||!J(b,be.to))&&cU(ch)(b.line,b.ch);var c=E.style.cssText;D.style.position="absolute",E.style.cssText="position: fixed; width: 30px; height: 30px; top: "+(s(a)-1)+"px; left: "+(r(a)-1)+"px; z-index: 1000; background: white; "+"border-width: 0; outline: none; overflow: hidden; opacity: .05; filter: alpha(opacity=5);",bm=!0;var d=E.value=bS();bY(),R(E,0,E.value.length);if(w){o(a);var f=t(window,"mouseup",function(){f(),setTimeout(e,20)},!0)}else setTimeout(e,50)}}function cH(a,b){var c=G(F,!0),d,e;try{d=a.clientX,e=a.clientY}catch(a){return null}if(!b&&(d-c.left>F.clientWidth||e-c.top>F.clientHeight))return null;var f=G(V,!0),g=bn+Math.floor((e-f.top)/cE());return cj({line:g,ch:cB(ci(g),d-f.left)})}function cG(){return V.offsetLeft}function cF(){return V.offsetTop}function cE(){var a=X.childNodes.length;if(a)return X.offsetHeight/a||1;M.innerHTML="<pre>x</pre>";return M.firstChild.offsetHeight||1}function cD(a){var b=cC(a,!0),c=G(V);return{x:c.left+b.x,y:c.top+b.y,yBot:c.top+b.yBot}}function cC(a,b){var c=cE(),d=a.line-(b?bn:0);return{x:cA(a.line,a.ch),y:d*c,yBot:(d+1)*c}}function cB(a,b){function e(a){M.innerHTML="<pre><span>"+c.getHTML(null,null,!1,a)+"</span></pre>";return M.firstChild.firstChild.offsetWidth}if(b<=0)return 0;var c=ba[a],d=c.text,f=0,g=0,h=d.length,i,j=Math.min(h,Math.ceil(b/cz("x")));for(;;){var k=e(j);if(k<=b&&j<h)j=Math.min(h,Math.ceil(j*1.2));else{i=k,h=j;break}}if(b>i)return h;j=Math.floor(h*.8),k=e(j),k<b&&(f=j,g=k);for(;;){if(h-f<=1)return i-b>b-g?f:h;var l=Math.ceil((f+h)/2),m=e(l);m>b?(h=l,i=m):(f=l,g=m)}}function cA(a,b){if(b==0)return 0;M.innerHTML="<pre><span>"+ba[a].getHTML(null,null,!1,b)+"</span></pre>";return M.firstChild.firstChild.offsetWidth}function cz(a){M.innerHTML="<pre><span>x</span></pre>",M.firstChild.firstChild.firstChild.nodeValue=a;return M.firstChild.firstChild.offsetWidth||10}function cy(a){if(typeof a=="number"){var b=a;a=ba[a];if(!a)return null}else{var b=O(ba,a);if(b==-1)return null}var c=a.gutterMarker;return{line:b,text:a.text,markerText:c&&c.text,markerClass:c&&c.style}}function cx(a,b){if(typeof a=="number"){var c=a;a=ba[ci(a)]}else{var c=O(ba,a);if(c==-1)return null}a.className!=b&&(a.className=b,bj.push({from:c,to:c+1}));return a}function cw(a){typeof a=="number"&&(a=ba[ci(a)]),a.gutterMarker=null,cd()}function cv(a,b,c){typeof a=="number"&&(a=ba[ci(a)]),a.gutterMarker={text:b,style:c},cd();return a}function cu(a,b,c){function e(a,b,c,e){var a=ba[a],f=a.addMark(b,c,e);f.line=a,d.push(f)}a=cj(a),b=cj(b);var d=[];if(a.line==b.line)e(a.line,a.ch,b.ch,c);else{e(a.line,a.ch,null,c);for(var f=a.line+1,g=b.line;f<g;++f)e(f,0,null,c);e(b.line,0,b.ch,c)}bj.push({from:a.line,to:b.line+1});return function(){var a,b;for(var c=0;c<d.length;++c){var e=d[c],f=O(ba,e.line);e.line.removeMark(e),f>-1&&(a==null&&(a=f),b=f)}a!=null&&bj.push({from:a,to:b+1})}}function ct(){var a=g.gutter||g.lineNumbers;T.style.display=a?"":"none",a?cd():X.parentNode.style.marginLeft=0}function cs(){_=a.getMode(g,g.mode);for(var b=0,c=ba.length;b<c;++b)ba[b].stateAfter=null;bb=[0],cQ()}function cr(a,b){if(b=="smart")if(!_.indent)b="prev";else var c=cN(a);var d=ba[a],e=d.indentation(),f=d.text.match(/^\s*/)[0],h;b=="prev"?a?h=ba[a-1].indentation():h=0:b=="smart"?h=_.indent(c,d.text.slice(f.length)):b=="add"?h=e+g.indentUnit:b=="subtract"&&(h=e-g.indentUnit),h=Math.max(0,h);var i=h-e;if(!i){if(be.from.line!=a&&be.to.line!=a)return;var j=f}else{var j="",k=0;if(g.indentWithTabs)for(var l=Math.floor(h/A);l;--l)k+=A,j+="\t";while(k<h)++k,j+=" "}bO(j,{line:a,ch:0},{line:a,ch:f.length})}function cq(a){function b(a){if(I(be.from,be.to))return cr(be.from.line,a);var b=be.to.line-(be.to.ch?0:1);for(var c=be.from.line;c<=b;++c)cr(c,a)}bf=null;switch(g.tabMode){case"default":return!1;case"indent":b("smart");break;case"classic":if(I(be.from,be.to)){a?cr(be.from.line,"smart"):bP("\t","end");break};case"shift":b(a?"subtract":"add")}return!0}function cp(){bP("\n","end"),g.enterMode!="flat"&&cr(be.from.line,g.enterMode=="keep"?"prev":"smart")}function co(a){cf({line:a,ch:0},{line:a,ch:ba[a].text.length})}function cn(a){var b=ba[a.line].text,c=a.ch,d=a.ch;while(c>0&&/\w/.test(b.charAt(c-1)))--c;while(d<b.length&&/\w/.test(b.charAt(d)))++d;cf({line:a.line,ch:c},{line:a.line,ch:d})}function cm(){var a=ba.length-1;cg({line:0,ch:0},{line:a,ch:ba[a].text.length})}function cl(a){var b=a?{line:0,ch:0}:{line:ba.length-1,ch:ba[ba.length-1].text.length};cf(b,b)}function ck(a){var b=Math.floor(F.clientHeight/cE()),c=be.inverted?be.from:be.to;ch(c.line+Math.max(b-1,1)*(a?1:-1),c.ch,!0)}function cj(a){if(a.line<0)return{line:0,ch:0};if(a.line>=ba.length)return{line:ba.length-1,ch:ba[ba.length-1].text.length};var b=a.ch,c=ba[a.line].text.length;return b==null||b>c?{line:a.line,ch:c}:b<0?{line:a.line,ch:0}:a}function ci(a){return Math.max(0,Math.min(a,ba.length-1))}function ch(a,b,c){var d=cj({line:a,ch:b||0});(c?cf:cg)(d,d)}function cg(a,b,c,d){if(!I(be.from,a)||!I(be.to,b)){if(J(b,a)){var e=b;b=a,a=e}I(a,b)?be.inverted=!1:I(a,be.to)?be.inverted=!1:I(b,be.from)&&(be.inverted=!0),c==null&&(c=be.from.line,d=be.to.line),I(a,b)?I(be.from,be.to)||bj.push({from:c,to:d+1}):I(be.from,be.to)?bj.push({from:a.line,to:b.line+1}):(I(a,be.from)||(a.line<c?bj.push({from:a.line,to:Math.min(b.line,c)+1}):bj.push({from:c,to:Math.min(d,a.line)+1})),I(b,be.to)||(b.line<d?bj.push({from:Math.max(c,a.line),to:d+1}):bj.push({from:Math.max(a.line,d),to:b.line+1}))),be.from=a,be.to=b,bl=!0}}function cf(a,b){var c=bf&&cj(bf);c&&(J(c,a)?a=c:J(b,c)&&(b=c)),cg(a,b)}function ce(){var a=be.inverted?be.from:be.to,b=cE(),c=cA(a.line,a.ch)+"px",d=(a.line-bn)*b+"px";D.style.top=a.line*b-F.scrollTop+"px",I(be.from,be.to)?(W.style.top=d,W.style.left=c,W.style.display=""):W.style.display="none"}function cd(){if(!!g.gutter||!!g.lineNumbers){var a=S.offsetHeight,b=F.clientHeight;T.style.height=(a-b<2?b:a)+"px";var c=[];for(var d=bn;d<Math.max(bo,bn+1);++d){var e=ba[d].gutterMarker,f=g.lineNumbers?d+g.firstLineNumber:null;e&&e.text?f=e.text.replace("%N%",f!=null?f:""):f==null&&(f="\u00a0"),c.push(e&&e.style?'<pre class="'+e.style+'">':"<pre>",f,"</pre>")}T.style.display="none",U.innerHTML=c.join("");var h=String(ba.length).length,i=U.firstChild,j=H(i),k="";while(j.length+k.length<h)k+="\u00a0";k&&i.insertBefore(n.createTextNode(k),i.firstChild),T.style.display="",V.style.marginLeft=T.offsetWidth+"px"}}function cc(a){var b=be.from.line,c=be.to.line,d=0,e=v&&n.createElement("div");for(var f=0,g=a.length;f<g;++f){var h=a[f],i=h.to-h.from-h.domSize,j=X.childNodes[h.domStart+h.domSize+d]||null;if(v)for(var k=Math.max(-i,h.domSize);k>0;--k)X.removeChild(j?j.previousSibling:X.lastChild);else if(i){for(var k=Math.max(0,i);k>0;--k)X.insertBefore(n.createElement("pre"),j);for(var k=Math.max(0,-i);k>0;--k)X.removeChild(j?j.previousSibling:X.lastChild)}var l=X.childNodes[h.domStart+d],m=b<h.from&&c>=h.from;for(var k=h.from;k<h.to;++k){var o=null,p=null;m?(o=0,c==k&&(m=!1,p=be.to.ch)):b==k&&(c==k?(o=be.from.ch,p=be.to.ch):(m=!0,o=be.from.ch)),v?(e.innerHTML=ba[k].getHTML(o,p,!0),X.insertBefore(e.firstChild,j)):(l.innerHTML=ba[k].getHTML(o,p,!1),l.className=ba[k].className||"",l=l.nextSibling)}d+=i}}function cb(a,b){var c=[],d={line:a,ch:0},e=J(be.from,d)&&!J(be.to,d);for(var f=a;f<b;++f){var g=null,h=null;e?(g=0,be.to.line==f&&(e=!1,h=be.to.ch)):be.from.line==f&&(be.to.line==f?(g=be.from.ch,h=be.to.ch):(e=!0,g=be.from.ch)),c.push(ba[f].getHTML(g,h,!0))}X.innerHTML=c.join("")}function ca(a){if(!F.clientWidth)bn=bo=0;else{var b=a===!0?[]:[{from:bn,to:bo,domStart:0}];for(var c=0,d=a.length||0;c<d;++c){var e=a[c],f=[],g=e.diff||0;for(var h=0,i=b.length;h<i;++h){var j=b[h];e.to<=j.from?f.push({from:j.from+g,to:j.to+g,domStart:j.domStart}):j.to<=e.from?f.push(j):(e.from>j.from&&f.push({from:j.from,to:e.from,domStart:j.domStart}),e.to<j.to&&f.push({from:e.to+g,to:j.to+g,domStart:j.domStart+(e.to-j.from)}))}b=f}var k=b_(),l=Math.min(bn,Math.max(k.from-3,0)),m=Math.min(ba.length,Math.max(bo,k.to+3)),n=[],o=0,p=bo-bn,q=l,r=0;for(var c=0,d=b.length;c<d;++c){var j=b[c];if(j.to<=l)continue;if(j.from>=m)break;if(j.domStart>o||j.from>q)n.push({from:q,to:j.from,domSize:j.domStart-o,domStart:o}),r+=j.from-q;q=j.to,o=j.domStart+(j.to-j.from)}if(o!=p||q!=m)r+=Math.abs(m-q),n.push({from:q,to:m,domSize:p-o,domStart:o});if(!n.length)return;X.style.display="none",r>(k.to-k.from)*.3?cb(l=Math.max(k.from-10,0),m=Math.min(k.to+7,ba.length)):cc(n),X.style.display="";var s=l!=bn||m!=bo||bp!=F.clientHeight;bn=l,bo=m,S.style.top=l*cE()+"px",s&&(bp=F.clientHeight,L.style.height=ba.length*cE()+2*cF()+"px",cd()),bu==null&&(bu=cz(bt)),bu>F.clientWidth?(V.style.width=bu+"px",L.style.width="",L.style.width=F.scrollWidth+"px"):V.style.width=L.style.width="";if(X.childNodes.length!=bo-bn)throw new Error("BAD PATCH! "+JSON.stringify(n)+" size="+(bo-bn)+" nodes="+X.childNodes.length);ce()}}function b_(){var a=cE(),b=F.scrollTop-cF();return{from:Math.min(ba.length,Math.max(0,Math.floor(b/a))),to:Math.min(ba.length,Math.ceil((b+F.clientHeight)/a))}}function b$(a,b,c,d){var e=cG(),f=cF(),h=cE();b+=f,d+=f,a+=e,c+=e;var i=F.clientHeight,j=F.scrollTop,k=!1,l=!0;b<j?(F.scrollTop=Math.max(0,b-2*h),k=!0):d>j+i&&(F.scrollTop=d+h-i,k=!0);var m=F.clientWidth,n=F.scrollLeft;a<n?(a<50&&(a=0),F.scrollLeft=Math.max(0,a-10),k=!0):c>m+n&&(F.scrollLeft=c+10-m,k=!0,c>L.clientWidth&&(l=!1)),k&&g.onScroll&&g.onScroll(by);return l}function bZ(){var a=cC(be.inverted?be.from:be.to);return b$(a.x,a.y,a.x,a.yBot)}function bY(){g.readOnly!="nocursor"&&E.focus()}function bX(){var a=[],b=Math.max(0,be.from.line-1),c=Math.min(ba.length,be.to.line+2);for(var d=b;d<c;++d)a.push(ba[d].text);a=E.value=a.join(z);var e=be.from.ch,f=be.to.ch;for(var d=b;d<be.from.line;++d)e+=z.length+ba[d].text.length;for(var d=b;d<be.to.line;++d)f+=z.length+ba[d].text.length;br={text:a,from:b,to:c,start:e,end:f},R(E,e,bg?e:f)}function bW(){function f(a,c){var d=0;for(;;){var e=b.indexOf("\n",d);if(e==-1||(b.charAt(e-1)=="\r"?e-1:e)>=a)return{line:c,ch:a-d};++c,d=e+1}}if(!bm&&!!bd){var a=!1,b=E.value,c=Q(E);if(!c)return!1;var a=br.text!=b,d=bg,e=a||c.start!=br.start||c.end!=(d?br.start:br.end);if(!e&&!d)return!1;if(a){bf=bg=null;if(g.readOnly){bi=!0;return"changed"}}var h=f(c.start,br.from),i=f(c.end,br.from);if(d){var j=c.start==d.anchor?i:h,k=bf?be.to:c.start==d.anchor?h:i;(be.inverted=J(j,k))?(h=j,i=k):(bg=null,h=k,i=j)}h.line==i.line&&h.line==be.from.line&&h.line==be.to.line&&!bf&&(bi=!1);if(a){var l=0,m=b.length,n=Math.min(m,br.text.length),o,p=br.from,q=-1;while(l<n&&(o=b.charAt(l))==br.text.charAt(l))++l,o=="\n"&&(p++,q=l);var r=q>-1?l-q:l,s=br.to-1,t=br.text.length;for(;;){o=br.text.charAt(t);if(b.charAt(m)!=o){++m,++t;break}o=="\n"&&s--;if(t<=l||m<=l)break;--m,--t}var q=br.text.lastIndexOf("\n",t-1),u=q==-1?t:t-q-1;bJ({line:p,ch:r},{line:s,ch:u},P(b.slice(l,m)),h,i);if(p!=s||h.line!=p)bi=!0}else cg(h,i);br.text=b,br.start=c.start,br.end=c.end;return a?"changed":e?"moved":!1}}function bV(a){function c(){cR();var d=bW();d=="moved"&&a&&(C[a]=!0),!d&&!b?(b=!0,Y.set(80,c)):(bT=!1,bU()),cS()}var b=!1;bT=!0,Y.set(20,c)}function bU(){bT||Y.set(2e3,function(){cR(),bW(),bd&&bU(),cS()})}function bS(){return bR(be.from,be.to)}function bR(a,b){var c=a.line,d=b.line;if(c==d)return ba[c].text.slice(a.ch,b.ch);var e=[ba[c].text.slice(a.ch)];for(var f=c+1;f<d;++f)e.push(ba[f].text);e.push(ba[d].text.slice(0,b.ch));return e.join("\n")}function bQ(a,b,c,d){var e=a.length==1?a[0].length+b.ch:a[a.length-1].length,f=d({line:b.line+a.length-1,ch:e});bJ(b,c,a,f.from,f.to)}function bP(a,b){bQ(P(a),be.from,be.to,function(a){return b=="end"?{from:a,to:a}:b=="start"?{from:be.from,to:be.from}:{from:be.from,to:a}})}function bO(a,b,c){function d(d){if(J(d,b))return d;if(!J(c,d))return e;var f=d.line+a.length-(c.line-b.line)-1,g=d.ch;d.line==c.line&&(g+=a[a.length-1].length-(c.ch-(c.line==b.line?b.ch:0)));return{line:f,ch:g}}b=cj(b),c?c=cj(c):c=b,a=P(a);var e;bQ(a,b,c,function(a){e=a;return{from:d(be.from),to:d(be.to)}});return e}function bN(a,b,c,d,e){function s(a){return a<=Math.min(b.line,b.line+q)?a:a+q}var f=!1,g=bt.length;for(var i=a.line;i<=b.line;++i)if(ba[i].text.length==g){f=!0;break}var j=b.line-a.line,k=ba[a.line],l=ba[b.line];if(k==l)if(c.length==1)k.replace(a.ch,b.ch,c[0]);else{l=k.split(b.ch,c[c.length-1]);var m=[a.line+1,j];k.replace(a.ch,k.text.length,c[0]);for(var i=1,n=c.length-1;i<n;++i)m.push(new h(c[i]));m.push(l),ba.splice.apply(ba,m)}else if(c.length==1)k.replace(a.ch,k.text.length,c[0]+l.text.slice(b.ch)),ba.splice(a.line+1,j);else{var m=[a.line+1,j-1];k.replace(a.ch,k.text.length,c[0]),l.replace(0,b.ch,c[c.length-1]);for(var i=1,n=c.length-1;i<n;++i)m.push(new h(c[i]));ba.splice.apply(ba,m)}for(var i=a.line,n=i+c.length;i<n;++i){var o=ba[i].text;o.length>g&&(bt=o,g=o.length,bu=null,f=!1)}if(f){g=0,bt="",bu=null;for(var i=0,n=ba.length;i<n;++i){var o=ba[i].text;o.length>g&&(g=o.length,bt=o)}}var p=[],q=c.length-j-1;for(var i=0,o=bb.length;i<o;++i){var r=bb[i];r<a.line?p.push(r):r>b.line&&p.push(r+q)}c.length<5?(cO(a.line,a.line+c.length),p.push(a.line+c.length)):p.push(a.line),bb=p,cQ(100),bj.push({from:a.line,to:b.line+1,diff:q}),bk={from:a,to:b,text:c},cg(d,e,s(be.from.line),s(be.to.line)),L.style.height=ba.length*cE()+2*cF()+"px"}function bM(){bK(bc.undone,bc.done)}function bL(){bK(bc.done,bc.undone)}function bK(a,b){var c=a.pop();if(c){var d=[],e=c.start+c.added;for(var f=c.start;f<e;++f)d.push(ba[f].text);b.push({start:c.start,added:c.old.length,old:d});var g=cj({line:c.start+c.old.length-1,ch:N(d[d.length-1],c.old[c.old.length-1])});bN({line:c.start,ch:0},{line:e-1,ch:ba[e-1].text.length},c.old,g,g),bi=!0}}function bJ(a,b,c,d,e){if(bc){var f=[];for(var h=a.line,i=b.line+1;h<i;++h)f.push(ba[h].text);bc.addChange(a.line,c.length,f);while(bc.done.length>g.undoDepth)bc.done.shift()}bN(a,b,c,d,e)}function bI(){bd&&(g.onBlur&&g.onBlur(by),bd=!1,y.className=y.className.replace(" CodeMirror-focused","")),clearInterval($),setTimeout(function(){bd||(bf=null)},150)}function bH(){g.readOnly!="nocursor"&&(bd||(g.onFocus&&g.onFocus(by),bd=!0,y.className.search(/\bCodeMirror-focused\b/)==-1&&(y.className+=" CodeMirror-focused"),bm||bX()),bU(),cJ())}function bG(a){if(!g.onKeyEvent||!g.onKeyEvent(by,l(a))){if(g.electricChars&&_.electricChars){var b=String.fromCharCode(a.charCode==null?a.keyCode:a.charCode);_.electricChars.indexOf(b)>-1&&setTimeout(cU(function(){cr(be.to.line,"smart")}),50)}var c=a.keyCode;c==13?(g.readOnly||cp(),m(a)):!a.ctrlKey&&!a.altKey&&!a.metaKey&&c==9&&g.tabMode!="default"?m(a):bV(bq)}}function bF(a){if(!g.onKeyEvent||!g.onKeyEvent(by,l(a)))bg&&(bg=null,bi=!0),a.keyCode==16&&(bf=null)}function bE(a){bd||bH();var b=a.keyCode;x&&b==27&&(a.returnValue=!1);var c=(B?a.metaKey:a.ctrlKey)&&!a.altKey,d=a.ctrlKey||a.altKey||a.metaKey;b==16||a.shiftKey?bf=bf||(be.inverted?be.to:be.from):bf=null;if(!g.onKeyEvent||!g.onKeyEvent(by,l(a))){if(b==33||b==34){ck(b==34);return m(a)}if(c&&(b==36||b==35||B&&(b==38||b==40))){cl(b==36||b==38);return m(a)}if(c&&b==65){cm();return m(a)}if(!g.readOnly){if(!d&&b==13)return;if(!d&&b==9&&cq(a.shiftKey))return m(a);if(c&&b==90){bL();return m(a)}if(c&&(a.shiftKey&&b==90||b==89)){bM();return m(a)}}bq=(c?"c":"")+b;if(be.inverted&&C.hasOwnProperty(bq)){var e=Q(E);e&&(bg={anchor:e.start},R(E,e.start,e.start))}bV(bq)}}function bD(a){a.preventDefault();var b=cH(a,!0),c=a.dataTransfer.files;if(!!b&&!g.readOnly)if(c&&c.length&&window.FileReader&&window.File){function d(a,c){var d=new FileReader;d.onload=function(){f[c]=d.result,++h==e&&bO(f.join(""),cj(b),cj(b))},d.readAsText(a)}var e=c.length,f=Array(e),h=0;for(var i=0;i<e;++i)d(c[i],i)}else try{var f=a.dataTransfer.getData("Text");f&&bO(f,b,b)}catch(a){}}function bC(a){var b=cH(a);!b||(cn(b),m(a),bh=+(new Date))}function bB(a){function i(a){var b=cH(a,!0);if(b&&!I(b,e)){bd||bH(),e=b,cf(d,b),bi=!1;var c=b_();if(b.line>=c.to||b.line<c.from)f=setTimeout(cU(function(){i(a)}),150)}}function h(){bY(),bi=!0,j(),k()}for(var b=p(a);b!=y;b=b.parentNode)if(b.parentNode==L&&b!=S)return;var c=bh;bh=null;for(var b=p(a);b!=y;b=b.parentNode)if(b.parentNode==U){g.onGutterClick&&g.onGutterClick(by,O(U.childNodes,b)+bn);return m(a)}var d=cH(a);switch(q(a)){case 3:w&&!B&&cI(a);return;case 2:d&&ch(d.line,d.ch,!0);return}if(!d)p(a)==F&&m(a);else{bd||bH(),m(a);if(c&&+(new Date)-c<400)return co(d.line);ch(d.line,d.ch,!0);var e=d,f,j=t(n,"mousemove",cU(function(a){clearTimeout(f),m(a),i(a)}),!0),k=t(n,"mouseup",cU(function(a){clearTimeout(f);var b=cH(a);b&&cf(d,b),m(a),h()}),!0)}}function bA(a){var b=[];for(var c=0,d=ba.length;c<d;++c)b.push(ba[c].text);return b.join("\n")}function bz(a){bc=null;var b={line:0,ch:0};bJ(b,{line:ba.length-1,ch:ba[ba.length-1].text.length},P(a),b,b),bc=new j}function bx(a){return a>=0&&a<ba.length}var g={},i=a.defaults;for(var k in i)i.hasOwnProperty(k)&&(g[k]=(c&&c.hasOwnProperty(k)?c:i)[k]);var n=g.document,y=n.createElement("div");y.className="CodeMirror",y.innerHTML='<div style="overflow: hidden; position: relative; width: 1px; height: 0px;"><textarea style="position: absolute; width: 2px;" wrap="off"></textarea></div><div class="CodeMirror-scroll cm-s-'+g.theme+'">'+'<div style="position: relative">'+'<div style="position: absolute; height: 0; width: 0; overflow: hidden;"></div>'+'<div style="position: relative">'+'<div class="CodeMirror-gutter"><div class="CodeMirror-gutter-text"></div></div>'+'<div class="CodeMirror-lines"><div style="position: relative">'+'<pre class="CodeMirror-cursor">&#160;</pre>'+"<div></div>"+"</div></div></div></div></div>",b.appendChild?b.appendChild(y):b(y);var D=y.firstChild,E=D.firstChild,F=y.lastChild,L=F.firstChild,M=L.firstChild,S=M.nextSibling,T=S.firstChild,U=T.firstChild,V=T.nextSibling.firstChild,W=V.firstChild,X=W.nextSibling;g.tabindex!=null&&(E.tabindex=g.tabindex),!g.gutter&&!g.lineNumbers&&(T.style.display="none");var Y=new u,Z=new u,$,_,ba=[new h("")],bb,bc=new j,bd;cs();var be={from:{line:0,ch:0},to:{line:0,ch:0},inverted:!1},bf,bg,bh,bi,bj,bk,bl,bm,bn=0,bo=0,bp=0,bq=null,br,bs,bt="",bu;cU(function(){bz(g.value||""),bi=!1})(),t(F,"mousedown",cU(bB)),w||t(F,"contextmenu",cI),t(L,"dblclick",cU(bC)),t(F,"scroll",function(){ca([]),g.onScroll&&g.onScroll(by)}),t(window,"resize",function(){ca(!0)}),t(E,"keyup",cU(bF)),t(E,"keydown",cU(bE)),t(E,"keypress",cU(bG)),t(E,"focus",bH),t(E,"blur",bI),t(F,"dragenter",o),t(F,"dragover",o),t(F,"drop",cU(bD)),t(F,"paste",function(){bY(),bV()}),t(E,"paste",function(){bV()}),t(E,"cut",function(){bV()});var bv;try{bv=n.activeElement==E}catch(bw){}bv?setTimeout(bH,20):bI();var by={getValue:bA,setValue:cU(bz),getSelection:bS,replaceSelection:cU(bP),focus:function(){bY(),bH(),bV()},setOption:function(a,b){g[a]=b,a=="lineNumbers"||a=="gutter"?ct():a=="mode"||a=="indentUnit"?cs():a=="readOnly"&&b=="nocursor"?E.blur():a=="theme"&&(F.className=F.className.replace(/cm-s-\w+/,"cm-s-"+b))},getOption:function(a){return g[a]},undo:cU(bL),redo:cU(bM),indentLine:cU(function(a,b){bx(a)&&cr(a,b==null?"smart":b?"add":"subtract")}),historySize:function(){return{undo:bc.done.length,redo:bc.undone.length}},matchBrackets:cU(function(){cL(!0)}),getTokenAt:function(a){a=cj(a);return ba[a.line].getTokenAt(_,cN(a.line),a.ch)},getStateAfter:function(a){a=ci(a==null?ba.length-1:a);return cN(a+1)},cursorCoords:function(a){a==null&&(a=be.inverted);return cD(a?be.from:be.to)},charCoords:function(a){return cD(cj(a))},coordsChar:function(a){var b=G(V),c=ci(Math.min(ba.length-1,bn+Math.floor((a.y-b.top)/cE())));return cj({line:c,ch:cB(ci(c),a.x-b.left)})},getSearchCursor:function(a,b,c){return new cV(a,b,c)},markText:cU(function(a,b,c){return cU(cu(a,b,c))}),setMarker:cv,clearMarker:cw,setLineClass:cU(cx),lineInfo:cy,addWidget:function(a,b,c,d){a=cC(cj(a));var e=a.yBot,f=a.x;b.style.position="absolute",L.appendChild(b),b.style.left=f+"px";if(d=="over")e=a.y;else if(d=="near"){var g=Math.max(F.offsetHeight,ba.length*cE()),h=Math.max(L.clientWidth,V.clientWidth)-cG();a.yBot+b.offsetHeight>g&&a.y>b.offsetHeight&&(e=a.y-b.offsetHeight),f+b.offsetWidth>h&&(f=h-b.offsetWidth)}b.style.top=e+cF()+"px",b.style.left=f+cG()+"px",c&&b$(f,e,f+b.offsetWidth,e+b.offsetHeight)},lineCount:function(){return ba.length},getCursor:function(a){a==null&&(a=be.inverted);return K(a?be.from:be.to)},somethingSelected:function(){return!I(be.from,be.to)},setCursor:cU(function(a,b){b==null&&typeof a.line=="number"?ch(a.line,a.ch):ch(a,b)}),setSelection:cU(function(a,b){cg(cj(a),cj(b||a))}),getLine:function(a){if(bx(a))return ba[a].text},setLine:cU(function(a,b){bx(a)&&bO(b,{line:a,ch:0},{line:a,ch:ba[a].text.length})}),removeLine:cU(function(a){bx(a)&&bO("",{line:a,ch:0},cj({line:a+1,ch:0}))}),replaceRange:cU(bO),getRange:function(a,b){return bR(cj(a),cj(b))},operation:function(a){return cU(a)()},refresh:function(){ca(!0)},getInputField:function(){return E},getWrapperElement:function(){return y},getScrollerElement:function(){return F},getGutterElement:function(){return T}},bT=!1,cK={"(":")>",")":"(<","[":"]>","]":"[<","{":"}>","}":"{<"},cT=0;cV.prototype={findNext:function(){return this.find(!1)},findPrevious:function(){return this.find(!0)},find:function(a){function d(a){var c={line:a,ch:0};b.pos={from:c,to:c},b.atOccurrence=!1;return!1}var b=this,c=cj(a?this.pos.from:this.pos.to);for(;;){if(this.pos=this.matches(a,c)){this.atOccurrence=!0;return this.pos.match||!0}if(a){if(!c.line)return d(0);c={line:c.line-1,ch:ba[c.line-1].text.length}}else{if(c.line==ba.length-1)return d(ba.length);c={line:c.line+1,ch:0}}}},from:function(){if(this.atOccurrence)return K(this.pos.from)},to:function(){if(this.atOccurrence)return K(this.pos.to)},replace:function(a){var b=this;this.atOccurrence&&cU(function(){b.pos.to=bO(a,b.pos.from,b.pos.to)})()}};for(var cW in d)d.propertyIsEnumerable(cW)&&!by.propertyIsEnumerable(cW)&&(by[cW]=d[cW]);return by}a.defaults={value:"",mode:null,theme:"default",indentUnit:2,indentWithTabs:!1,tabMode:"classic",enterMode:"indent",electricChars:!0,onKeyEvent:null,lineNumbers:!1,gutter:!1,firstLineNumber:1,readOnly:!1,onChange:null,onCursorActivity:null,onGutterClick:null,onHighlightComplete:null,onFocus:null,onBlur:null,onScroll:null,matchBrackets:!1,workTime:100,workDelay:200,undoDepth:40,tabindex:null,document:window.document};var b={},c={};a.defineMode=function(c,d){!a.defaults.mode&&c!="null"&&(a.defaults.mode=c),b[c]=d},a.defineMIME=function(a,b){c[a]=b},a.getMode=function(d,e){typeof e=="string"&&c.hasOwnProperty(e)&&(e=c[e]);if(typeof e=="string")var f=e,g={};else if(e!=null)var f=e.name,g=e;var h=b[f];if(!h){window.console&&console.warn("No mode "+f+" found, falling back to plain text.");return a.getMode(d,"text/plain")}return h(d,g||{})},a.listModes=function(){var a=[];for(var c in b)b.propertyIsEnumerable(c)&&a.push(c);return a},a.listMIMEs=function(){var a=[];for(var b in c)c.propertyIsEnumerable(b)&&a.push(b);return a};var d={};a.defineExtension=function(a,b){d[a]=b},a.fromTextArea=function(b,c){function d(){b.value=h.getValue()}c||(c={}),c.value=b.value,!c.tabindex&&b.tabindex&&(c.tabindex=b.tabindex);if(b.form){var e=t(b.form,"submit",d,!0);if(typeof b.form.submit=="function"){var f=b.form.submit;function g(){d(),b.form.submit=f,b.form.submit(),b.form.submit=g}b.form.submit=g}}b.style.display="none";var h=a(function(a){b.parentNode.insertBefore(a,b.nextSibling)},c);h.save=d,h.toTextArea=function(){d(),b.parentNode.removeChild(h.getWrapperElement()),b.style.display="",b.form&&(e(),typeof b.form.submit=="function"&&(b.form.submit=f))};return h},a.startState=f,a.copyState=e,g.prototype={eol:function(){return this.pos>=this.string.length},sol:function(){return this.pos==0},peek:function(){return this.string.charAt(this.pos)},next:function(){if(this.pos<this.string.length)return this.string.charAt(this.pos++)},eat:function(a){var b=this.string.charAt(this.pos);if(typeof a=="string")var c=b==a;else var c=b&&(a.test?a.test(b):a(b));if(c){++this.pos;return b}},eatWhile:function(a){var b=this.start;while(this.eat(a));return this.pos>b},eatSpace:function(){var a=this.pos;while(/[\s\u00a0]/.test(this.string.charAt(this.pos)))++this.pos;return this.pos>a},skipToEnd:function(){this.pos=this.string.length},skipTo:function(a){var b=this.string.indexOf(a,this.pos);if(b>-1){this.pos=b;return!0}},backUp:function(a){this.pos-=a},column:function(){return E(this.string,this.start)},indentation:function(){return E(this.string)},match:function(a,b,c){if(typeof a!="string"){var e=this.string.slice(this.pos).match(a);e&&b!==!1&&(this.pos+=e[0].length);return e}function d(a){return c?a.toLowerCase():a}if(d(this.string).indexOf(d(a),this.pos)==this.pos){b!==!1&&(this.pos+=a.length);return!0}},current:function(){return this.string.slice(this.start,this.pos)}},a.StringStream=g,h.prototype={replace:function(a,b,c){var d=[],e=this.marked;i(0,a,this.styles,d),c&&d.push(c,null),i(b,this.text.length,this.styles,d),this.styles=d,this.text=this.text.slice(0,a)+c+this.text.slice(b),this.stateAfter=null;if(e){var f=c.length-(b-a),g=this.text.length;function h(a){return a<=Math.min(b,b+f)?a:a+f}for(var j=0;j<e.length;++j){var k=e[j],l=!1;k.from>=g?l=!0:(k.from=h(k.from),k.to!=null&&(k.to=h(k.to)));if(l||k.from>=k.to)e.splice(j,1),j--}}},split:function(a,b){var c=[b,null];i(a,this.text.length,this.styles,c);return new h(b+this.text.slice(a),c)},addMark:function(a,b,c){var d=this.marked,e={from:a,to:b,style:c};this.marked==null&&(this.marked=[]),this.marked.push(e),this.marked.sort(function(a,b){return a.from-b.from});return e},removeMark:function(a){var b=this.marked;if(!!b)for(var c=0;c<b.length;++c)if(b[c]==a){b.splice(c,1);break}},highlight:function(a,b){var c=new g(this.text),d=this.styles,e=0,f=!1,h=d[0],i;this.text==""&&a.blankLine&&a.blankLine(b);while(!c.eol()){var j=a.token(c,b),k=this.text.slice(c.start,c.pos);c.start=c.pos,e&&d[e-1]==j?d[e-2]+=k:k&&(!f&&(d[e+1]!=j||e&&d[e-2]!=i)&&(f=!0),d[e++]=k,d[e++]=j,i=h,h=d[e]);if(c.pos>5e3){d[e++]=this.text.slice(c.pos),d[e++]=null;break}}d.length!=e&&(d.length=e,f=!0),e&&d[e-2]!=i&&(f=!0);return f||d.length<5&&this.text.length<10},getTokenAt:function(a,b,c){var d=this.text,e=new g(d);while(e.pos<c&&!e.eol()){e.start=e.pos;var f=a.token(e,b)}return{start:e.start,end:e.pos,string:e.current(),className:f||null,state:b}},indentation:function(){return E(this.text)},getHTML:function(a,b,c,d){function f(a,b){!a||(b?e.push('<span class="',b,'">',M(a),"</span>"):e.push(M(a)))}var e=[];c&&e.push(this.className?'<pre class="'+this.className+'">':"<pre>");var g=this.styles,h=this.text,i=this.marked;a==b&&(a=null);var j=h.length;d!=null&&(j=Math.min(d,j));if(!h&&d==null)f(" ",a!=null&&b==null?"CodeMirror-selected":null);else if(!i&&a==null)for(var k=0,l=0;l<j;k+=2){var m=g[k],n=m.length;l+n>j&&(m=m.slice(0,j-l)),l+=n,f(m,"cm-"+g[k+1])}else{var o=0,k=0,p="",q,r=0,s=-1,t=null;function u(){i&&(s+=1,t=s<i.length?i[s]:null)}u();while(o<j){var v=j,w="";if(a!=null)if(a>o)v=a;else if(b==null||b>o)w=" CodeMirror-selected",b!=null&&(v=Math.min(v,b));while(t&&t.to!=null&&t.to<=o)u();t&&(t.from>o?v=Math.min(v,t.from):(w+=" "+t.style,t.to!=null&&(v=Math.min(v,t.to))));for(;;){var x=o+p.length,y=q;w&&(y=q?q+w:w),f(x>v?p.slice(0,v-o):p,y);if(x>=v){p=p.slice(v-o),o=v;break}o=x,p=g[k++],q="cm-"+g[k++]}}a!=null&&b==null&&f(" ","CodeMirror-selected")}c&&e.push("</pre>");return e.join("")}},j.prototype={addChange:function(a,b,c){this.undone.length=0;var d=+(new Date),e=this.done[this.done.length-1];if(d-this.time>400||!e||e.start>a+b||e.start+e.added<a-e.added+e.old.length)this.done.push({start:a,added:b,old:c});else{var f=0;if(a<e.start){for(var g=e.start-a-1;g>=0;--g)e.old.unshift(c[g]);e.added+=e.start-a,e.start=a}else e.start<a&&(f=a-e.start,b+=f);for(var g=e.added-f,h=c.length;g<h;++g)e.old.push(c[g]);e.added<b&&(e.added=b)}this.time=d}},u.prototype={set:function(a,b){clearTimeout(this.id),this.id=setTimeout(b,a)}};var v=function(){var a=document.createElement("pre");a.innerHTML=" ";return!a.innerHTML}(),w=/gecko\/\d{7}/i.test(navigator.userAgent),x=/MSIE \d/.test(navigator.userAgent),y=/Apple Computer/.test(navigator.vendor),z="\n";(function(){var a=document.createElement("textarea");a.value="foo\nbar",a.value.indexOf("\r")>-1&&(z="\r\n")})();var A=8,B=/Mac/.test(navigator.platform),C={};for(var D=35;D<=40;++D)C[D]=C["c"+D]=!0;var L=document.createElement("div");a.htmlEscape=M;var P,Q,R;"\n\nb".split(/\n/).length!=3?P=function(a){var b=0,c,d=[];while((c=a.indexOf("\n",b))>-1)d.push(a.slice(b,a.charAt(c-1)=="\r"?c-1:c)),b=c+1;d.push(a.slice(b));return d}:P=function(a){return a.split(/\r?\n/)},a.splitLines=P,window.getSelection?(Q=function(a){try{return{start:a.selectionStart,end:a.selectionEnd}}catch(b){return null}},y?R=function(a,b,c){b==c?a.setSelectionRange(b,c):(a.setSelectionRange(b,c-1),window.getSelection().modify("extend","forward","character"))}:R=function(a,b,c){try{a.setSelectionRange(b,c)}catch(d){}}):(Q=function(a){try{var b=a.ownerDocument.selection.createRange()}catch(c){return null}if(!b||b.parentElement()!=a)return null;var d=a.value,e=d.length,f=a.createTextRange();f.moveToBookmark(b.getBookmark());var g=a.createTextRange();g.collapse(!1);if(f.compareEndPoints("StartToEnd",g)>-1)return{start:e,end:e};var h=-f.moveStart("character",-e);for(var i=d.indexOf("\r");i>-1&&i<h;i=d.indexOf("\r",i+1),h++);if(f.compareEndPoints("EndToEnd",g)>-1)return{start:h,end:e};var j=-f.moveEnd("character",-e);for(var i=d.indexOf("\r");i>-1&&i<j;i=d.indexOf("\r",i+1),j++);return{start:h,end:j}},R=function(a,b,c){var d=a.createTextRange();d.collapse(!0);var e=d.duplicate(),f=0,g=a.value;for(var h=g.indexOf("\n");h>-1&&h<b;h=g.indexOf("\n",h+1))++f;d.move("character",b-f);for(;h>-1&&h<c;h=g.indexOf("\n",h+1))++f;e.move("character",c-f),d.setEndPoint("EndToEnd",e),d.select()}),a.defineMode("null",function(){return{token:function(a){a.skipToEnd()}}}),a.defineMIME("text/plain","null");return a}();CodeMirror.defineMode("javascript",function(a,b){function R(a,b){if(a=="variable"){v(b);return u()}}function Q(a,b){if(a=="variable"){v(b);return u(Q)}if(a=="(")return u(z(")"),x,I(R,")"),A,C,y)}function P(a){a!=")"&&u(D)}function O(a,b){if(a==";")return u(P);if(b=="in")return u(D);return u(D,B(";"),P)}function N(a,b){if(b=="in")return u(D);return u(E,O)}function M(a){if(a=="var")return u(K,O);if(a==";")return t(O);if(a=="variable")return u(N);return t(O)}function L(a,b){if(b=="=")return u(D,L);if(a==",")return u(K)}function K(a,b){if(a=="variable"){v(b);return u(L)}return u()}function J(a){if(a=="}")return u();return t(C,J)}function I(a,b){function c(d){if(d==",")return u(a,c);if(d==b)return u();return u(B(b))}return function(d){return d==b?u():t(a,c)}}function H(a){a=="variable"&&(s.marked="property");if(o.hasOwnProperty(a))return u(B(":"),D)}function G(a){if(a=="variable"){s.marked="property";return u()}}function F(a){if(a==":")return u(A,C);return t(E,B(";"),A)}function E(a,b){if(a=="operator"&&/\+\+|--/.test(b))return u(E);if(a=="operator")return u(D);if(a!=";"){if(a=="(")return u(z(")"),I(D,")"),A,E);if(a==".")return u(G,E);if(a=="[")return u(z("]"),D,B("]"),A,E)}}function D(a){if(o.hasOwnProperty(a))return u(E);if(a=="function")return u(Q);if(a=="keyword c")return u(D);if(a=="(")return u(z(")"),D,B(")"),A,E);if(a=="operator")return u(D);if(a=="[")return u(z("]"),I(D,"]"),A,E);if(a=="{")return u(z("}"),I(H,"}"),A,E);return u()}function C(a){if(a=="var")return u(z("vardef"),K,B(";"),A);if(a=="keyword a")return u(z("form"),D,C,A);if(a=="keyword b")return u(z("form"),C,A);if(a=="{")return u(z("}"),J,A);if(a==";")return u();if(a=="function")return u(Q);if(a=="for")return u(z("form"),B("("),z(")"),M,B(")"),A,C,A);if(a=="variable")return u(z("stat"),F);if(a=="switch")return u(z("form"),D,z("}","switch"),B("{"),J,A,A);if(a=="case")return u(D,B(":"));if(a=="default")return u(B(":"));if(a=="catch")return u(z("form"),x,B("("),R,B(")"),C,A,y);return t(z("stat"),D,B(";"),A)}function B(a){return function(b){return b==a?u():a==";"?t():u(arguments.callee)}}function A(){var a=s.state;a.lexical.prev&&(a.lexical.type==")"&&(a.indented=a.lexical.indented),a.lexical=a.lexical.prev)}function z(a,b){var c=function(){var c=s.state;c.lexical=new p(c.indented,s.stream.column(),a,null,c.lexical,b)};c.lex=!0;return c}function y(){s.state.localVars=s.state.context.vars,s.state.context=s.state.context.prev}function x(){s.state.context||(s.state.localVars=w),s.state.context={prev:s.state.context,vars:s.state.localVars}}function v(a){var b=s.state;if(b.context){s.marked="def";for(var c=b.localVars;c;c=c.next)if(c.name==a)return;b.localVars={name:a,next:b.localVars}}}function u(){t.apply(null,arguments);return!0}function t(){for(var a=arguments.length-1;a>=0;a--)s.cc.push(arguments[a])}function r(a,b,c,e,f){var g=a.cc;s.state=a,s.stream=f,s.marked=null,s.cc=g,a.lexical.hasOwnProperty("align")||(a.lexical.align=!0);for(;;){var h=g.length?g.pop():d?D:C;if(h(c,e)){while(g.length&&g[g.length-1].lex)g.pop()();if(s.marked)return s.marked;if(c=="variable"&&q(a,e))return"variable-2";return b}}}function q(a,b){for(var c=a.localVars;c;c=c.next)if(c.name==b)return!0}function p(a,b,c,d,e,f){this.indented=a,this.column=b,this.type=c,this.prev=e,this.info=f,d!=null&&(this.align=d)}function n(a,b){var c=!1,d;while(d=a.next()){if(d=="/"&&c){b.tokenize=l;break}c=d=="*"}return k("comment","comment")}function m(a){return function(b,c){h(b,a)||(c.tokenize=l);return k("string","string")}}function l(a,b){var c=a.next();if(c=='"'||c=="'")return g(a,b,m(c));if(/[\[\]{}\(\),;\:\.]/.test(c))return k(c);if(c=="0"&&a.eat(/x/i)){a.eatWhile(/[\da-f]/i);return k("number","number")}if(/\d/.test(c)){a.match(/^\d*(?:\.\d*)?(?:e[+\-]?\d+)?/);return k("number","number")}if(c=="/"){if(a.eat("*"))return g(a,b,n);if(a.eat("/")){a.skipToEnd();return k("comment","comment")}if(b.reAllowed){h(a,"/"),a.eatWhile(/[gimy]/);return k("regexp","string")}a.eatWhile(f);return k("operator",null,a.current())}if(f.test(c)){a.eatWhile(f);return k("operator",null,a.current())}a.eatWhile(/[\w\$_]/);var d=a.current(),i=e.propertyIsEnumerable(d)&&e[d];return i?k(i.type,i.style,d):k("variable","variable",d)}function k(a,b,c){i=a,j=c;return b}function h(a,b){var c=!1,d;while((d=a.next())!=null){if(d==b&&!c)return!1;c=!c&&d=="\\"}return c}function g(a,b,c){b.tokenize=c;return c(a,b)}var c=a.indentUnit,d=b.json,e=function(){function a(a){return{type:a,style:"keyword"}}var b=a("keyword a"),c=a("keyword b"),d=a("keyword c"),e=a("operator"),f={type:"atom",style:"atom"};return{"if":b,"while":b,"with":b,"else":c,"do":c,"try":c,"finally":c,"return":d,"break":d,"continue":d,"new":d,"delete":d,"throw":d,"var":a("var"),"function":a("function"),"catch":a("catch"),"for":a("for"),"switch":a("switch"),"case":a("case"),"default":a("default"),"in":e,"typeof":e,"instanceof":e,"true":f,"false":f,"null":f,"undefined":f,NaN:f,Infinity:f}}(),f=/[+\-*&%=<>!?|]/,i,j,o={atom:!0,number:!0,variable:!0,string:!0,regexp:!0},s={state:null,column:null,marked:null,cc:null},w={name:"this",next:{name:"arguments"}};A.lex=!0;return{startState:function(a){return{tokenize:l,reAllowed:!0,cc:[],lexical:new p((a||0)-c,0,"block",!1),localVars:null,context:null,indented:0}},token:function(a,b){a.sol()&&(b.lexical.hasOwnProperty("align")||(b.lexical.align=!1),b.indented=a.indentation());if(a.eatSpace())return null;var c=b.tokenize(a,b);if(i=="comment")return c;b.reAllowed=i=="operator"||i=="keyword c"||i.match(/^[\[{}\(,;:]$/);return r(b,c,i,j,a)},indent:function(a,b){if(a.tokenize!=l)return 0;var d=b&&b.charAt(0),e=a.lexical,f=e.type,g=d==f;return f=="vardef"?e.indented+4:f=="form"&&d=="{"?e.indented:f=="stat"||f=="form"?e.indented+c:e.info=="switch"&&!g?e.indented+(/^(?:case|default)\b/.test(b)?c:2*c):e.align?e.column+(g?0:1):e.indented+(g?0:c)},electricChars:":{}"}}),CodeMirror.defineMIME("text/javascript","javascript"),CodeMirror.defineMIME("application/json",{name:"javascript",json:!0}),CodeMirror.defineMode("xml",function(a,b){function w(a){return a=="string"?o(w):n()}function v(a){if(a=="word"&&d.allowUnquoted){m="string";return o()}if(a=="string")return o(w);return n()}function u(a){if(a=="word"){m="attribute";return o(u)}if(a=="equals")return o(v,u);return n()}function t(a){return function(b){a&&(m="error");if(b=="endTag")return o();return n()}}function s(a){return function(b){if(b=="selfcloseTag"||b=="endTag"&&d.autoSelfClosers.hasOwnProperty(l.tagName.toLowerCase()))return o();if(b=="endTag"){p(l.tagName,a);return o()}return o()}}function r(a){if(a=="openTag"){l.tagName=f;return o(u,s(l.startOfLine))}if(a=="closeTag"){var b=!1;l.context?(b=l.context.tagName!=f,q()):b=!0,b&&(m="error");return o(t(b))}if(a=="string"){(!l.context||l.context.name!="!cdata")&&p("!cdata"),l.tokenize==h&&q();return o()}return o()}function q(){l.context&&(l.context=l.context.prev)}function p(a,b){var c=d.doNotIndent.hasOwnProperty(a)||l.context&&l.context.noIndent;l.context={prev:l.context,tagName:a,indent:l.indented,startOfLine:b,noIndent:c}}function o(){n.apply(null,arguments);return!0}function n(){for(var a=arguments.length-1;a>=0;a--)l.cc.push(arguments[a])}function k(a,b){return function(c,d){while(!c.eol()){if(c.match(b)){d.tokenize=h;break}c.next()}return a}}function j(a){return function(b,c){while(!b.eol())if(b.next()==a){c.tokenize=i;break}return"string"}}function i(a,b){var c=a.next();if(c==">"||c=="/"&&a.eat(">")){b.tokenize=h,g=c==">"?"endTag":"selfcloseTag";return"tag"}if(c=="="){g="equals";return null}if(/[\'\"]/.test(c)){b.tokenize=j(c);return b.tokenize(a,b)}a.eatWhile(/[^\s\u00a0=<>\"\'\/?]/);return"word"}function h(a,b){function c(c){b.tokenize=c;return c(a,b)}var d=a.next();if(d=="<"){if(a.eat("!")){if(a.eat("["))return a.match("CDATA[")?c(k("atom","]]>")):null;if(a.match("--"))return c(k("comment","-->"));if(a.match("DOCTYPE",!0,!0)){a.eatWhile(/[\w\._\-]/);return c(k("meta",">"))}return null}if(a.eat("?")){a.eatWhile(/[\w\._\-]/),b.tokenize=k("meta","?>");return"meta"}g=a.eat("/")?"closeTag":"openTag",a.eatSpace(),f="";var e;while(e=a.eat(/[^\s\u00a0=<>\"\'\/?]/))f+=e;b.tokenize=i;return"tag"}if(d=="&"){a.eatWhile(/[^;]/),a.eat(";");return"atom"}a.eatWhile(/[^&<]/);return null}var c=a.indentUnit,d=b.htmlMode?{autoSelfClosers:{br:!0,img:!0,hr:!0,link:!0,input:!0,meta:!0,col:!0,frame:!0,base:!0,area:!0},doNotIndent:{pre:!0,"!cdata":!0},allowUnquoted:!0}:{autoSelfClosers:{},doNotIndent:{"!cdata":!0},allowUnquoted:!1},e=b.alignCDATA,f,g,l,m;return{startState:function(){return{tokenize:h,cc:[],indented:0,startOfLine:!0,tagName:null,context:null}},token:function(a,b){a.sol()&&(b.startOfLine=!0,b.indented=a.indentation());if(a.eatSpace())return null;m=g=f=null;var c=b.tokenize(a,b);if((c||g)&&c!="comment"){l=b;for(;;){var d=b.cc.pop()||r;if(d(g||c))break}}b.startOfLine=!1;return m||c},indent:function(a,b){var d=a.context;if(d&&d.noIndent)return 0;if(e&&/<!\[CDATA\[/.test(b))return 0;d&&/^<\//.test(b)&&(d=d.prev);while(d&&!d.startOfLine)d=d.prev;return d?d.indent+c:0},compareStates:function(a,b){if(a.indented!=b.indented||a.tagName!=b.tagName)return!1;for(var c=a.context,d=b.context;;c=c.prev,d=d.prev){if(!c||!d)return c==d;if(c.tagName!=d.tagName)return!1}},electricChars:"/"}}),CodeMirror.defineMIME("application/xml","xml"),CodeMirror.defineMIME("text/html",{name:"xml",htmlMode:!0}),CodeMirror.defineMode("css",function(a){function h(a){return function(b,c){var f=!1,g;while((g=b.next())!=null){if(g==a&&!f)break;f=!f&&g=="\\"}f||(c.tokenize=e);return d("string","string")}}function g(a,b){var c=0,f;while((f=a.next())!=null){if(c>=2&&f==">"){b.tokenize=e;break}c=f=="-"?c+1:0}return d("comment","comment")}function f(a,b){var c=!1,f;while((f=a.next())!=null){if(c&&f=="/"){b.tokenize=e;break}c=f=="*"}return d("comment","comment")}function e(a,b){var c=a.next();if(c=="@"){a.eatWhile(/\w/);return d("meta",a.current())}if(c=="/"&&a.eat("*")){b.tokenize=f;return f(a,b)}if(c=="<"&&a.eat("!")){b.tokenize=g;return g(a,b)}if(c=="=")d(null,"compare");else{if(c!="~"&&c!="|"||!a.eat("=")){if(c=='"'||c=="'"){b.tokenize=h(c);return b.tokenize(a,b)}if(c=="#"){a.eatWhile(/\w/);return d("atom","hash")}if(c=="!"){a.match(/^\s*\w*/);return d("keyword","important")}if(/\d/.test(c)){a.eatWhile(/[\w.%]/);return d("number","unit")}if(/[,.+>*\/]/.test(c))return d(null,"select-op");if(/[;{}:\[\]]/.test(c))return d(null,c);a.eatWhile(/[\w\\\-_]/);return d("variable","variable")}return d(null,"compare")}}function d(a,b){c=b;return a}var b=a.indentUnit,c;return{startState:function(a){return{tokenize:e,baseIndent:a||0,stack:[]}},token:function(a,b){if(a.eatSpace())return null;var d=b.tokenize(a,b),e=b.stack[b.stack.length-1];if(c=="hash"&&e=="rule")d="atom";else if(d=="variable")if(e=="rule")d="number";else if(!e||e=="@media{")d="tag";e=="rule"&&/^[\{\};]$/.test(c)&&b.stack.pop(),c=="{"?e=="@media"?b.stack[b.stack.length-1]="@media{":b.stack.push("{"):c=="}"?b.stack.pop():c=="@media"?b.stack.push("@media"):e=="{"&&c!="comment"&&b.stack.push("rule");return d},indent:function(a,c){var d=a.stack.length;/^\}/.test(c)&&(d-=a.stack[a.stack.length-1]=="rule"?2:1);return a.baseIndent+d*b},electricChars:"}"}}),CodeMirror.defineMIME("text/css","css"),CodeMirror.defineMode("htmlmixed",function(a,b){function i(a,b){if(a.match(/^<\/\s*style\s*>/i,!1)){b.token=f,b.localState=null,b.mode="html";return f(a,b)}return g(a,/<\/\s*style\s*>/,e.token(a,b.localState))}function h(a,b){if(a.match(/^<\/\s*script\s*>/i,!1)){b.token=f,b.curState=null,b.mode="html";return f(a,b)}return g(a,/<\/\s*script\s*>/,d.token(a,b.localState))}function g(a,b,c){var d=a.current(),e=d.search(b);e>-1&&a.backUp(d.length-e);return c}function f(a,b){var f=c.token(a,b.htmlState);f=="tag"&&a.current()==">"&&b.htmlState.context&&(/^script$/i.test(b.htmlState.context.tagName)?(b.token=h,b.localState=d.startState(c.indent(b.htmlState,"")),b.mode="javascript"):/^style$/i.test(b.htmlState.context.tagName)&&(b.token=i,b.localState=e.startState(c.indent(b.htmlState,"")),b.mode="css"));return f}var c=CodeMirror.getMode(a,{name:"xml",htmlMode:!0}),d=CodeMirror.getMode(a,"javascript"),e=CodeMirror.getMode(a,"css");return{startState:function(){var a=c.startState();return{token:f,localState:null,mode:"html",htmlState:a}},copyState:function(a){if(a.localState)var b=CodeMirror.copyState(a.token==i?e:d,a.localState);return{token:a.token,localState:b,mode:a.mode,htmlState:CodeMirror.copyState(c,a.htmlState)}},token:function(a,b){return b.token(a,b)},indent:function(a,b){return a.token==f||/^\s*<\//.test(b)?c.indent(a.htmlState,b):a.token==h?d.indent(a.localState,b):e.indent(a.localState,b)},electricChars:"/{}:"}}),CodeMirror.defineMIME("text/html","htmlmixed")
\ No newline at end of file
diff --git a/dist/docs/resources/js/paper.js b/dist/docs/resources/js/paper.js
new file mode 100644
index 00000000..23c5f1a6
--- /dev/null
+++ b/dist/docs/resources/js/paper.js
@@ -0,0 +1,8761 @@
+/*!
+ * Paper.js v0.22
+ *
+ * This file is part of Paper.js, a JavaScript Vector Graphics Library,
+ * based on Scriptographer.org and designed to be largely API compatible.
+ * http://paperjs.org/
+ * http://scriptographer.org/
+ *
+ * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+ * http://lehni.org/ & http://jonathanpuckey.com/
+ *
+ * Distributed under the MIT license. See LICENSE file for details.
+ *
+ * All rights reserved.
+ *
+ * Date: Wed Sep 26 16:04:23 2012 -0400
+ *
+ ***
+ *
+ * Bootstrap.js JavaScript Framework.
+ * http://bootstrapjs.org/
+ *
+ * Copyright (c) 2006 - 2011 Juerg Lehni
+ * http://lehni.org/
+ *
+ * Distributed under the MIT license.
+ *
+ ***
+ *
+ * Parse-js
+ *
+ * A JavaScript tokenizer / parser / generator, originally written in Lisp.
+ * Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
+ * http://marijn.haverbeke.nl/parse-js/
+ *
+ * Ported by to JavaScript by Mihai Bazon
+ * Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
+ * http://mihai.bazon.net/blog/
+ *
+ * Modifications and adaptions to browser (c) 2011, Juerg Lehni
+ * http://lehni.org/
+ *
+ * Distributed under the BSD license.
+ */
+
+var paper = new function() {
+
+var Base = new function() { 
+	var fix = !this.__proto__,
+		hidden = /^(statics|generics|preserve|enumerable|prototype|__proto__|toString|valueOf)$/,
+		proto = Object.prototype,
+		has = fix
+			? function(name) {
+				return name !== '__proto__' && this.hasOwnProperty(name);
+			}
+			: proto.hasOwnProperty,
+		toString = proto.toString,
+		proto = Array.prototype,
+		isArray = Array.isArray = Array.isArray || function(obj) {
+			return toString.call(obj) === '[object Array]';
+		},
+		slice = proto.slice,
+		forEach = proto.forEach || function(iter, bind) {
+			for (var i = 0, l = this.length; i < l; i++)
+				iter.call(bind, this[i], i, this);
+		},
+		forIn = function(iter, bind) {
+			for (var i in this)
+				if (this.hasOwnProperty(i))
+					iter.call(bind, this[i], i, this);
+		},
+		_define = Object.defineProperty,
+		_describe = Object.getOwnPropertyDescriptor;
+
+	function define(obj, name, desc) {
+		if (_define) {
+			try {
+				delete obj[name];
+				return _define(obj, name, desc);
+			} catch (e) {}
+		}
+		if ((desc.get || desc.set) && obj.__defineGetter__) {
+			desc.get && obj.__defineGetter__(name, desc.get);
+			desc.set && obj.__defineSetter__(name, desc.set);
+		} else {
+			obj[name] = desc.value;
+		}
+		return obj;
+	}
+
+	function describe(obj, name) {
+		if (_describe) {
+			try {
+				return _describe(obj, name);
+			} catch (e) {}
+		}
+		var get = obj.__lookupGetter__ && obj.__lookupGetter__(name);
+		return get
+			? { get: get, set: obj.__lookupSetter__(name), enumerable: true,
+					configurable: true }
+			: has.call(obj, name)
+				? { value: obj[name], enumerable: true, configurable: true,
+						writable: true }
+				: null;
+	}
+
+	function inject(dest, src, enumerable, base, preserve, generics) {
+		var beans, bean;
+
+		function field(name, val, dontCheck, generics) {
+			var val = val || (val = describe(src, name))
+					&& (val.get ? val : val.value),
+				func = typeof val === 'function',
+				res = val,
+				prev = preserve || func
+					? (val && val.get ? name in dest : dest[name]) : null;
+			if (generics && func && (!preserve || !generics[name])) {
+				generics[name] = function(bind) {
+					return bind && dest[name].apply(bind,
+							slice.call(arguments, 1));
+				}
+			}
+			if ((dontCheck || val !== undefined && has.call(src, name))
+					&& (!preserve || !prev)) {
+				if (func) {
+					if (prev && /\bthis\.base\b/.test(val)) {
+						var fromBase = base && base[name] == prev;
+						res = function() {
+							var tmp = describe(this, 'base');
+							define(this, 'base', { value: fromBase
+								? base[name] : prev, configurable: true });
+							try {
+								return val.apply(this, arguments);
+							} finally {
+								tmp ? define(this, 'base', tmp)
+									: delete this.base;
+							}
+						};
+						res.toString = function() {
+							return val.toString();
+						}
+						res.valueOf = function() {
+							return val.valueOf();
+						}
+					}
+					if (beans && val.length == 0
+							&& (bean = name.match(/^(get|is)(([A-Z])(.*))$/)))
+						beans.push([ bean[3].toLowerCase() + bean[4], bean[2] ]);
+				}
+				if (!res || func || !res.get)
+					res = { value: res, writable: true };
+				if ((describe(dest, name)
+						|| { configurable: true }).configurable) {
+					res.configurable = true;
+					res.enumerable = enumerable;
+				}
+				define(dest, name, res);
+			}
+		}
+		if (src) {
+			beans = [];
+			for (var name in src)
+				if (has.call(src, name) && !hidden.test(name))
+					field(name, null, true, generics);
+			field('toString');
+			field('valueOf');
+			for (var i = 0, l = beans && beans.length; i < l; i++)
+				try {
+					var bean = beans[i], part = bean[1];
+					field(bean[0], {
+						get: dest['get' + part] || dest['is' + part],
+						set: dest['set' + part]
+					}, true);
+				} catch (e) {}
+		}
+		return dest;
+	}
+
+	function extend(obj) {
+		var ctor = function(dont) {
+			if (fix) define(this, '__proto__', { value: obj });
+			if (this.initialize && dont !== ctor.dont)
+				return this.initialize.apply(this, arguments);
+		}
+		ctor.prototype = obj;
+		ctor.toString = function() {
+			return (this.prototype.initialize || function() {}).toString();
+		}
+		return ctor;
+	}
+
+	function iterator(iter) {
+		return !iter
+			? function(val) { return val }
+			: typeof iter !== 'function'
+				? function(val) { return val == iter }
+				: iter;
+	}
+
+	function each(obj, iter, bind, asArray) {
+		try {
+			if (obj)
+				(asArray || asArray === undefined && isArray(obj)
+					? forEach : forIn).call(obj, iterator(iter),
+						bind = bind || obj);
+		} catch (e) {
+			if (e !== Base.stop) throw e;
+		}
+		return bind;
+	}
+
+	function clone(obj) {
+		return each(obj, function(val, i) {
+			this[i] = val;
+		}, new obj.constructor());
+	}
+
+	return inject(function() {}, {
+		inject: function(src) {
+			if (src) {
+				var proto = this.prototype,
+					base = proto.__proto__ && proto.__proto__.constructor,
+					statics = src.statics == true ? src : src.statics;
+				if (statics != src)
+					inject(proto, src, src.enumerable, base && base.prototype,
+							src.preserve, src.generics && this);
+				inject(this, statics, true, base, src.preserve);
+			}
+			for (var i = 1, l = arguments.length; i < l; i++)
+				this.inject(arguments[i]);
+			return this;
+		},
+
+		extend: function(src) {
+			var proto = new this(this.dont),
+				ctor = extend(proto);
+			define(proto, 'constructor',
+					{ value: ctor, writable: true, configurable: true });
+			ctor.dont = {};
+			inject(ctor, this, true);
+			return arguments.length ? this.inject.apply(ctor, arguments) : ctor;
+		}
+	}, true).inject({
+		has: has,
+		each: each,
+
+		inject: function() {
+			for (var i = 0, l = arguments.length; i < l; i++)
+				inject(this, arguments[i]);
+			return this;
+		},
+
+		extend: function() {
+			var res = new (extend(this));
+			return res.inject.apply(res, arguments);
+		},
+
+		each: function(iter, bind) {
+			return each(this, iter, bind);
+		},
+
+		clone: function() {
+			return clone(this);
+		},
+
+		statics: {
+			each: each,
+			clone: clone,
+			define: define,
+			describe: describe,
+			iterator: iterator,
+
+			has: function(obj, name) {
+				return has.call(obj, name);
+			},
+
+			type: function(obj) {
+				return (obj || obj === 0) && (obj._type || typeof obj) || null;
+			},
+
+			check: function(obj) {
+				return !!(obj || obj === 0);
+			},
+
+			pick: function() {
+				for (var i = 0, l = arguments.length; i < l; i++)
+					if (arguments[i] !== undefined)
+						return arguments[i];
+				return null;
+			},
+
+			stop: {}
+		}
+	});
+}
+
+this.Base = Base.inject({
+	generics: true,
+
+	clone: function() {
+		return new this.constructor(this);
+	},
+
+	toString: function() {
+		return '{ ' + Base.each(this, function(value, key) {
+			if (key.charAt(0) != '_') {
+				var type = typeof value;
+				this.push(key + ': ' + (type === 'number'
+						? Base.formatNumber(value)
+						: type === 'string' ? "'" + value + "'" : value));
+			}
+		}, []).join(', ') + ' }';
+	},
+
+	statics: {
+		read: function(list, start, length) {
+			var start = start || 0,
+				length = length || list.length - start;
+			var obj = list[start];
+			if (obj instanceof this
+					|| this.prototype._readNull && obj == null && length <= 1)
+				return obj;
+			obj = new this(this.dont);
+			return obj.initialize.apply(obj, start > 0 || length < list.length
+				? Array.prototype.slice.call(list, start, start + length)
+				: list) || obj;
+		},
+
+		readAll: function(list, start) {
+			var res = [], entry;
+			for (var i = start || 0, l = list.length; i < l; i++) {
+				res.push(Array.isArray(entry = list[i])
+					? this.read(entry, 0)
+					: this.read(list, i, 1));
+			}
+			return res;
+		},
+
+		splice: function(list, items, index, remove) {
+			var amount = items && items.length,
+				append = index === undefined;
+			index = append ? list.length : index;
+			for (var i = 0; i < amount; i++)
+				items[i]._index = index + i;
+			if (append) {
+				list.push.apply(list, items);
+				return [];
+			} else {
+				var args = [index, remove];
+				if (items)
+					args.push.apply(args, items);
+				var removed = list.splice.apply(list, args);
+				for (var i = 0, l = removed.length; i < l; i++)
+					delete removed[i]._index;
+				for (var i = index + amount, l = list.length; i < l; i++)
+					list[i]._index = i;
+				return removed;
+			}
+		},
+
+		merge: function() {
+			return Base.each(arguments, function(hash) {
+				Base.each(hash, function(value, key) {
+					this[key] = value;
+				}, this);
+			}, new Base(), true); 
+		},
+
+		capitalize: function(str) {
+			return str.replace(/\b[a-z]/g, function(match) {
+				return match.toUpperCase();
+			});
+		},
+
+		camelize: function(str) {
+			return str.replace(/-(\w)/g, function(all, chr) {
+				return chr.toUpperCase();
+			});
+		},
+
+		hyphenate: function(str) {
+			return str.replace(/[a-z][A-Z0-9]|[0-9][a-zA-Z]|[A-Z]{2}[a-z]/g,
+				function(match) {
+					return match.charAt(0) + '-' + match.substring(1);
+				}
+			).toLowerCase();
+		},
+
+		formatNumber: function(num) {
+			return (Math.round(num * 100000) / 100000).toString();
+		}
+	}
+});
+
+var PaperScope = this.PaperScope = Base.extend({
+
+	initialize: function(script) {
+		paper = this;
+		this.project = null;
+		this.projects = [];
+		this.tools = [];
+		this._id = script && (script.getAttribute('id') || script.src)
+				|| ('paperscope-' + (PaperScope._id++));
+		if (script)
+			script.setAttribute('id', this._id);
+		PaperScope._scopes[this._id] = this;
+	},
+
+	version: 0.22,
+
+	getView: function() {
+		return this.project.view;
+	},
+
+	getTool: function() {
+		if (!this._tool)
+			this._tool = new Tool();
+		return this._tool;
+	 },
+
+	evaluate: function(code) {
+		var res = PaperScript.evaluate(code, this);
+		View.updateFocus();
+		return res;
+	},
+
+	install: function(scope) {
+		var that = this;
+		Base.each(['project', 'view', 'tool'], function(key) {
+			Base.define(scope, key, {
+				configurable: true,
+				writable: true,
+				get: function() {
+					return that[key];
+				}
+			});
+		});
+		for (var key in this) {
+			if (!/^(version|_id|load)/.test(key) && !(key in scope))
+				scope[key] = this[key];
+		}
+	},
+
+	setup: function(canvas) {
+		paper = this;
+		this.project = new Project(canvas);
+	},
+
+	clear: function() {
+		for (var i = this.projects.length - 1; i >= 0; i--)
+			this.projects[i].remove();
+		for (var i = this.tools.length - 1; i >= 0; i--)
+			this.tools[i].remove();
+	},
+
+	remove: function() {
+		this.clear();
+		delete PaperScope._scopes[this._id];
+	},
+
+	statics: {
+		_scopes: {},
+		_id: 0,
+
+		get: function(id) {
+			if (typeof id === 'object')
+				id = id.getAttribute('id');
+			return this._scopes[id] || null;
+		}
+	}
+});
+
+var PaperScopeItem = Base.extend({
+
+	initialize: function(activate) {
+		this._scope = paper;
+		this._index = this._scope[this._list].push(this) - 1;
+		if (activate || !this._scope[this._reference])
+			this.activate();
+	},
+
+	activate: function() {
+		if (!this._scope)
+			return false;
+		this._scope[this._reference] = this;
+		return true;
+	},
+
+	remove: function() {
+		if (this._index == null)
+			return false;
+		Base.splice(this._scope[this._list], null, this._index, 1);
+		if (this._scope[this._reference] == this)
+			this._scope[this._reference] = null;
+		this._scope = null;
+		return true;
+	}
+});
+
+var Callback = {
+	attach: function(type, func) {
+		if (typeof type !== 'string') {
+			return Base.each(type, function(value, key) {
+				this.attach(key, value);
+			}, this);
+		}
+		var entry = this._eventTypes[type];
+		if (!entry)
+			return this;
+		var handlers = this._handlers = this._handlers || {};
+		handlers = handlers[type] = handlers[type] || [];
+		if (handlers.indexOf(func) == -1) { 
+			handlers.push(func);
+			if (entry.install && handlers.length == 1)
+				entry.install.call(this, type);
+		}
+		return this;
+	},
+
+	detach: function(type, func) {
+		if (typeof type !== 'string') {
+			return Base.each(type, function(value, key) {
+				this.detach(key, value);
+			}, this);
+		}
+		var entry = this._eventTypes[type],
+			handlers = this._handlers && this._handlers[type],
+			index;
+		if (entry && handlers) {
+			if (!func || (index = handlers.indexOf(func)) != -1
+					&& handlers.length == 1) {
+				if (entry.uninstall)
+					entry.uninstall.call(this, type);
+				delete this._handlers[type];
+			} else if (index != -1) {
+				handlers.splice(index, 1);
+			}
+		}
+		return this;
+	},
+
+	fire: function(type, event) {
+		var handlers = this._handlers && this._handlers[type];
+		if (!handlers)
+			return false;
+		Base.each(handlers, function(func) {
+			if (func.call(this, event) === false && event && event.stop)
+				event.stop();
+		}, this);
+		return true;
+	},
+
+	responds: function(type) {
+		return !!(this._handlers && this._handlers[type]);
+	},
+
+	statics: {
+		inject: function() {
+			for (var i = 0, l = arguments.length; i < l; i++) {
+				var src = arguments[i],
+					events = src._events;
+				if (events) {
+					var types = {};
+					Base.each(events, function(entry, key) {
+						var isString = typeof entry === 'string',
+							name = isString ? entry : key,
+							part = Base.capitalize(name),
+							type = name.substring(2).toLowerCase();
+						types[type] = isString ? {} : entry;
+						name = '_' + name;
+						src['get' + part] = function() {
+							return this[name];
+						};
+						src['set' + part] = function(func) {
+							if (func) {
+								this.attach(type, func);
+							} else if (this[name]) {
+								this.detach(type, this[name]);
+							}
+							this[name] = func;
+						};
+					});
+					src._eventTypes = types;
+				}
+				this.base(src);
+			}
+			return this;
+		}
+	}
+};
+
+var Point = this.Point = Base.extend({
+	initialize: function(arg0, arg1) {
+		if (arg1 !== undefined) {
+			this.x = arg0;
+			this.y = arg1;
+		} else if (arg0 !== undefined) {
+			if (arg0 == null) {
+				this.x = this.y = 0;
+			} else if (arg0.x !== undefined) {
+				this.x = arg0.x;
+				this.y = arg0.y;
+			} else if (arg0.width !== undefined) {
+				this.x = arg0.width;
+				this.y = arg0.height;
+			} else if (Array.isArray(arg0)) {
+				this.x = arg0[0];
+				this.y = arg0.length > 1 ? arg0[1] : arg0[0];
+			} else if (arg0.angle !== undefined) {
+				this.x = arg0.length;
+				this.y = 0;
+				this.setAngle(arg0.angle);
+			} else if (typeof arg0 === 'number') {
+				this.x = this.y = arg0;
+			} else {
+				this.x = this.y = 0;
+			}
+		} else {
+			this.x = this.y = 0;
+		}
+	},
+
+	set: function(x, y) {
+		this.x = x;
+		this.y = y;
+		return this;
+	},
+
+	clone: function() {
+		return Point.create(this.x, this.y);
+	},
+
+	toString: function() {
+		var format = Base.formatNumber;
+		return '{ x: ' + format(this.x) + ', y: ' + format(this.y) + ' }';
+	},
+
+	add: function(point) {
+		point = Point.read(arguments);
+		return Point.create(this.x + point.x, this.y + point.y);
+	},
+
+	subtract: function(point) {
+		point = Point.read(arguments);
+		return Point.create(this.x - point.x, this.y - point.y);
+	},
+
+	multiply: function(point) {
+		point = Point.read(arguments);
+		return Point.create(this.x * point.x, this.y * point.y);
+	},
+
+	divide: function(point) {
+		point = Point.read(arguments);
+		return Point.create(this.x / point.x, this.y / point.y);
+	},
+
+	modulo: function(point) {
+		point = Point.read(arguments);
+		return Point.create(this.x % point.x, this.y % point.y);
+	},
+
+	negate: function() {
+		return Point.create(-this.x, -this.y);
+	},
+
+	transform: function(matrix) {
+		return matrix ? matrix._transformPoint(this) : this;
+	},
+
+	getDistance: function(point, squared) {
+		point = Point.read(arguments);
+		var x = point.x - this.x,
+			y = point.y - this.y,
+			d = x * x + y * y;
+		return squared ? d : Math.sqrt(d);
+	},
+
+	getLength: function() {
+		var l = this.x * this.x + this.y * this.y;
+		return (arguments.length && arguments[0]) ? l : Math.sqrt(l);
+	},
+
+	setLength: function(length) {
+		if (this.isZero()) {
+			var angle = this._angle || 0;
+			this.set(
+				Math.cos(angle) * length,
+				Math.sin(angle) * length
+			);
+		} else {
+			var scale = length / this.getLength();
+			if (scale == 0)
+				this.getAngle();
+			this.set(
+				this.x * scale,
+				this.y * scale
+			);
+		}
+		return this;
+	},
+
+	normalize: function(length) {
+		if (length === undefined)
+			length = 1;
+		var current = this.getLength(),
+			scale = current != 0 ? length / current : 0,
+			point = Point.create(this.x * scale, this.y * scale);
+		point._angle = this._angle;
+		return point;
+	},
+
+	getAngle: function() {
+		return this.getAngleInRadians(arguments[0]) * 180 / Math.PI;
+	},
+
+	setAngle: function(angle) {
+		angle = this._angle = angle * Math.PI / 180;
+		if (!this.isZero()) {
+			var length = this.getLength();
+			this.set(
+				Math.cos(angle) * length,
+				Math.sin(angle) * length
+			);
+		}
+		return this;
+	},
+
+	getAngleInRadians: function() {
+		if (arguments[0] === undefined) {
+			if (this._angle == null)
+				this._angle = Math.atan2(this.y, this.x);
+			return this._angle;
+		} else {
+			var point = Point.read(arguments),
+				div = this.getLength() * point.getLength();
+			if (div == 0) {
+				return NaN;
+			} else {
+				return Math.acos(this.dot(point) / div);
+			}
+		}
+	},
+
+	getAngleInDegrees: function() {
+		return this.getAngle(arguments[0]);
+	},
+
+	getQuadrant: function() {
+		return this.x >= 0 ? this.y >= 0 ? 1 : 4 : this.y >= 0 ? 2 : 3;
+	},
+
+	getDirectedAngle: function(point) {
+		point = Point.read(arguments);
+		return Math.atan2(this.cross(point), this.dot(point)) * 180 / Math.PI;
+	},
+
+	rotate: function(angle, center) {
+		angle = angle * Math.PI / 180;
+		var point = center ? this.subtract(center) : this,
+			s = Math.sin(angle),
+			c = Math.cos(angle);
+		point = Point.create(
+			point.x * c - point.y * s,
+			point.y * c + point.x * s
+		);
+		return center ? point.add(center) : point;
+	},
+
+	equals: function(point) {
+		point = Point.read(arguments);
+		return this.x == point.x && this.y == point.y;
+	},
+
+	isInside: function(rect) {
+		return rect.contains(this);
+	},
+
+	isClose: function(point, tolerance) {
+		return this.getDistance(point) < tolerance;
+	},
+
+	isColinear: function(point) {
+		return this.cross(point) < Numerical.TOLERANCE;
+	},
+
+	isOrthogonal: function(point) {
+		return this.dot(point) < Numerical.TOLERANCE;
+	},
+
+	isZero: function() {
+		return this.x == 0 && this.y == 0;
+	},
+
+	isNaN: function() {
+		return isNaN(this.x) || isNaN(this.y);
+	},
+
+	dot: function(point) {
+		point = Point.read(arguments);
+		return this.x * point.x + this.y * point.y;
+	},
+
+	cross: function(point) {
+		point = Point.read(arguments);
+		return this.x * point.y - this.y * point.x;
+	},
+
+	project: function(point) {
+		point = Point.read(arguments);
+		if (point.isZero()) {
+			return Point.create(0, 0);
+		} else {
+			var scale = this.dot(point) / point.dot(point);
+			return Point.create(
+				point.x * scale,
+				point.y * scale
+			);
+		}
+	},
+
+	statics: {
+		create: function(x, y) {
+			var point = new Point(Point.dont);
+			point.x = x;
+			point.y = y;
+			return point;
+		},
+
+		min: function(point1, point2) {
+			point1 = Point.read(arguments, 0, 1);
+			point2 = Point.read(arguments, 1, 1);
+			return Point.create(
+				Math.min(point1.x, point2.x),
+				Math.min(point1.y, point2.y)
+			);
+		},
+
+		max: function(point1, point2) {
+			point1 = Point.read(arguments, 0, 1);
+			point2 = Point.read(arguments, 1, 1);
+			return Point.create(
+				Math.max(point1.x, point2.x),
+				Math.max(point1.y, point2.y)
+			);
+		},
+
+		random: function() {
+			return Point.create(Math.random(), Math.random());
+		}
+	}
+}, new function() { 
+
+	return Base.each(['round', 'ceil', 'floor', 'abs'], function(name) {
+		var op = Math[name];
+		this[name] = function() {
+			return Point.create(op(this.x), op(this.y));
+		};
+	}, {});
+});
+
+var LinkedPoint = Point.extend({
+	set: function(x, y, dontNotify) {
+		this._x = x;
+		this._y = y;
+		if (!dontNotify)
+			this._owner[this._setter](this);
+		return this;
+	},
+
+	getX: function() {
+		return this._x;
+	},
+
+	setX: function(x) {
+		this._x = x;
+		this._owner[this._setter](this);
+	},
+
+	getY: function() {
+		return this._y;
+	},
+
+	setY: function(y) {
+		this._y = y;
+		this._owner[this._setter](this);
+	},
+
+	statics: {
+		create: function(owner, setter, x, y, dontLink) {
+			if (dontLink)
+				return Point.create(x, y);
+			var point = new LinkedPoint(LinkedPoint.dont);
+			point._x = x;
+			point._y = y;
+			point._owner = owner;
+			point._setter = setter;
+			return point;
+		}
+	}
+});
+
+var Size = this.Size = Base.extend({
+	initialize: function(arg0, arg1) {
+		if (arg1 !== undefined) {
+			this.width = arg0;
+			this.height = arg1;
+		} else if (arg0 !== undefined) {
+			if (arg0 == null) {
+				this.width = this.height = 0;
+			} else if (arg0.width !== undefined) {
+				this.width = arg0.width;
+				this.height = arg0.height;
+			} else if (arg0.x !== undefined) {
+				this.width = arg0.x;
+				this.height = arg0.y;
+			} else if (Array.isArray(arg0)) {
+				this.width = arg0[0];
+				this.height = arg0.length > 1 ? arg0[1] : arg0[0];
+			} else if (typeof arg0 === 'number') {
+				this.width = this.height = arg0;
+			} else {
+				this.width = this.height = 0;
+			}
+		} else {
+			this.width = this.height = 0;
+		}
+	},
+
+	toString: function() {
+		var format = Base.formatNumber;
+		return '{ width: ' + format(this.width)
+				+ ', height: ' + format(this.height) + ' }';
+	},
+
+	set: function(width, height) {
+		this.width = width;
+		this.height = height;
+		return this;
+	},
+
+	clone: function() {
+		return Size.create(this.width, this.height);
+	},
+
+	add: function(size) {
+		size = Size.read(arguments);
+		return Size.create(this.width + size.width, this.height + size.height);
+	},
+
+	subtract: function(size) {
+		size = Size.read(arguments);
+		return Size.create(this.width - size.width, this.height - size.height);
+	},
+
+	multiply: function(size) {
+		size = Size.read(arguments);
+		return Size.create(this.width * size.width, this.height * size.height);
+	},
+
+	divide: function(size) {
+		size = Size.read(arguments);
+		return Size.create(this.width / size.width, this.height / size.height);
+	},
+
+	modulo: function(size) {
+		size = Size.read(arguments);
+		return Size.create(this.width % size.width, this.height % size.height);
+	},
+
+	negate: function() {
+		return Size.create(-this.width, -this.height);
+	},
+
+	equals: function(size) {
+		size = Size.read(arguments);
+		return this.width == size.width && this.height == size.height;
+	},
+
+	isZero: function() {
+		return this.width == 0 && this.height == 0;
+	},
+
+	isNaN: function() {
+		return isNaN(this.width) || isNaN(this.height);
+	},
+
+	statics: {
+		create: function(width, height) {
+			return new Size(Size.dont).set(width, height);
+		},
+
+		min: function(size1, size2) {
+			return Size.create(
+				Math.min(size1.width, size2.width),
+				Math.min(size1.height, size2.height));
+		},
+
+		max: function(size1, size2) {
+			return Size.create(
+				Math.max(size1.width, size2.width),
+				Math.max(size1.height, size2.height));
+		},
+
+		random: function() {
+			return Size.create(Math.random(), Math.random());
+		}
+	}
+}, new function() { 
+
+	return Base.each(['round', 'ceil', 'floor', 'abs'], function(name) {
+		var op = Math[name];
+		this[name] = function() {
+			return Size.create(op(this.width), op(this.height));
+		};
+	}, {});
+});
+
+var LinkedSize = Size.extend({
+	set: function(width, height, dontNotify) {
+		this._width = width;
+		this._height = height;
+		if (!dontNotify)
+			this._owner[this._setter](this);
+		return this;
+	},
+
+	getWidth: function() {
+		return this._width;
+	},
+
+	setWidth: function(width) {
+		this._width = width;
+		this._owner[this._setter](this);
+	},
+
+	getHeight: function() {
+		return this._height;
+	},
+
+	setHeight: function(height) {
+		this._height = height;
+		this._owner[this._setter](this);
+	},
+
+	statics: {
+		create: function(owner, setter, width, height, dontLink) {
+			if (dontLink)
+				return Size.create(width, height);
+			var size = new LinkedSize(LinkedSize.dont);
+			size._width = width;
+			size._height = height;
+			size._owner = owner;
+			size._setter = setter;
+			return size;
+		}
+	}
+});
+
+var Rectangle = this.Rectangle = Base.extend({
+	initialize: function(arg0, arg1, arg2, arg3) {
+		if (arguments.length == 4) {
+			this.x = arg0;
+			this.y = arg1;
+			this.width = arg2;
+			this.height = arg3;
+		} else if (arguments.length == 2) {
+			if (arg1 && arg1.x !== undefined) {
+				var point1 = Point.read(arguments, 0, 1);
+				var point2 = Point.read(arguments, 1, 1);
+				this.x = point1.x;
+				this.y = point1.y;
+				this.width = point2.x - point1.x;
+				this.height = point2.y - point1.y;
+				if (this.width < 0) {
+					this.x = point2.x;
+					this.width = -this.width;
+				}
+				if (this.height < 0) {
+					this.y = point2.y;
+					this.height = -this.height;
+				}
+			} else {
+				var point = Point.read(arguments, 0, 1);
+				var size = Size.read(arguments, 1, 1);
+				this.x = point.x;
+				this.y = point.y;
+				this.width = size.width;
+				this.height = size.height;
+			}
+		} else if (arg0) {
+			this.x = arg0.x || 0;
+			this.y = arg0.y || 0;
+			this.width = arg0.width || 0;
+			this.height = arg0.height || 0;
+		} else {
+			this.x = this.y = this.width = this.height = 0;
+		}
+	},
+
+	set: function(x, y, width, height) {
+		this.x = x;
+		this.y = y;
+		this.width = width;
+		this.height = height;
+		return this;
+	},
+
+	getPoint: function() {
+		return LinkedPoint.create(this, 'setPoint', this.x, this.y,
+				arguments[0]);
+	},
+
+	setPoint: function(point) {
+		point = Point.read(arguments);
+		this.x = point.x;
+		this.y = point.y;
+		return this;
+	},
+
+	getSize: function() {
+		return LinkedSize.create(this, 'setSize', this.width, this.height,
+				arguments[0]);
+	},
+
+	setSize: function(size) {
+		size = Size.read(arguments);
+		this.width = size.width;
+		this.height = size.height;
+		return this;
+	},
+
+	getLeft: function() {
+		return this.x;
+	},
+
+	setLeft: function(left) {
+		this.width -= left - this.x;
+		this.x = left;
+		return this;
+	},
+
+	getTop: function() {
+		return this.y;
+	},
+
+	setTop: function(top) {
+		this.height -= top - this.y;
+		this.y = top;
+		return this;
+	},
+
+	getRight: function() {
+		return this.x + this.width;
+	},
+
+	setRight: function(right) {
+		this.width = right - this.x;
+		return this;
+	},
+
+	getBottom: function() {
+		return this.y + this.height;
+	},
+
+	setBottom: function(bottom) {
+		this.height = bottom - this.y;
+		return this;
+	},
+
+	getCenterX: function() {
+		return this.x + this.width * 0.5;
+	},
+
+	setCenterX: function(x) {
+		this.x = x - this.width * 0.5;
+		return this;
+	},
+
+	getCenterY: function() {
+		return this.y + this.height * 0.5;
+	},
+
+	setCenterY: function(y) {
+		this.y = y - this.height * 0.5;
+		return this;
+	},
+
+	getCenter: function() {
+		return LinkedPoint.create(this, 'setCenter',
+				this.getCenterX(), this.getCenterY(), arguments[0]);
+	},
+
+	setCenter: function(point) {
+		point = Point.read(arguments);
+		return this.setCenterX(point.x).setCenterY(point.y);
+	},
+
+	equals: function(rect) {
+		rect = Rectangle.read(arguments);
+		return this.x == rect.x && this.y == rect.y
+				&& this.width == rect.width && this.height == rect.height;
+	},
+
+	isEmpty: function() {
+		return this.width == 0 || this.height == 0;
+	},
+
+	toString: function() {
+		var format = Base.formatNumber;
+		return '{ x: ' + format(this.x)
+				+ ', y: ' + format(this.y)
+				+ ', width: ' + format(this.width)
+				+ ', height: ' + format(this.height)
+				+ ' }';
+	},
+
+	contains: function(arg) {
+		return arg && arg.width !== undefined
+				|| (Array.isArray(arg) ? arg : arguments).length == 4
+				? this._containsRectangle(Rectangle.read(arguments))
+				: this._containsPoint(Point.read(arguments));
+	},
+
+	_containsPoint: function(point) {
+		var x = point.x,
+			y = point.y;
+		return x >= this.x && y >= this.y
+				&& x <= this.x + this.width
+				&& y <= this.y + this.height;
+	},
+
+	_containsRectangle: function(rect) {
+		var x = rect.x,
+			y = rect.y;
+		return x >= this.x && y >= this.y
+				&& x + rect.width <= this.x + this.width
+				&& y + rect.height <= this.y + this.height;
+	},
+
+	intersects: function(rect) {
+		rect = Rectangle.read(arguments);
+		return rect.x + rect.width > this.x
+				&& rect.y + rect.height > this.y
+				&& rect.x < this.x + this.width
+				&& rect.y < this.y + this.height;
+	},
+
+	intersect: function(rect) {
+		rect = Rectangle.read(arguments);
+		var x1 = Math.max(this.x, rect.x),
+			y1 = Math.max(this.y, rect.y),
+			x2 = Math.min(this.x + this.width, rect.x + rect.width),
+			y2 = Math.min(this.y + this.height, rect.y + rect.height);
+		return Rectangle.create(x1, y1, x2 - x1, y2 - y1);
+	},
+
+	unite: function(rect) {
+		rect = Rectangle.read(arguments);
+		var x1 = Math.min(this.x, rect.x),
+			y1 = Math.min(this.y, rect.y),
+			x2 = Math.max(this.x + this.width, rect.x + rect.width),
+			y2 = Math.max(this.y + this.height, rect.y + rect.height);
+		return Rectangle.create(x1, y1, x2 - x1, y2 - y1);
+	},
+
+	include: function(point) {
+		point = Point.read(arguments);
+		var x1 = Math.min(this.x, point.x),
+			y1 = Math.min(this.y, point.y),
+			x2 = Math.max(this.x + this.width, point.x),
+			y2 = Math.max(this.y + this.height, point.y);
+		return Rectangle.create(x1, y1, x2 - x1, y2 - y1);
+	},
+
+	expand: function(hor, ver) {
+		if (ver === undefined)
+			ver = hor;
+		return Rectangle.create(this.x - hor / 2, this.y - ver / 2,
+				this.width + hor, this.height + ver);
+	},
+
+	scale: function(hor, ver) {
+		return this.expand(this.width * hor - this.width,
+				this.height * (ver === undefined ? hor : ver) - this.height);
+	},
+
+	statics: {
+		create: function(x, y, width, height) {
+			return new Rectangle(Rectangle.dont).set(x, y, width, height);
+		}
+	}
+}, new function() {
+	return Base.each([
+			['Top', 'Left'], ['Top', 'Right'],
+			['Bottom', 'Left'], ['Bottom', 'Right'],
+			['Left', 'Center'], ['Top', 'Center'],
+			['Right', 'Center'], ['Bottom', 'Center']
+		],
+		function(parts, index) {
+			var part = parts.join('');
+			var xFirst = /^[RL]/.test(part);
+			if (index >= 4)
+				parts[1] += xFirst ? 'Y' : 'X';
+			var x = parts[xFirst ? 0 : 1],
+				y = parts[xFirst ? 1 : 0],
+				getX = 'get' + x,
+				getY = 'get' + y,
+				setX = 'set' + x,
+				setY = 'set' + y,
+				get = 'get' + part,
+				set = 'set' + part;
+			this[get] = function() {
+				return LinkedPoint.create(this, set,
+						this[getX](), this[getY](), arguments[0]);
+			};
+			this[set] = function(point) {
+				point = Point.read(arguments);
+				return this[setX](point.x)[setY](point.y);
+			};
+		}, {});
+});
+
+var LinkedRectangle = Rectangle.extend({
+	set: function(x, y, width, height, dontNotify) {
+		this._x = x;
+		this._y = y;
+		this._width = width;
+		this._height = height;
+		if (!dontNotify)
+			this._owner[this._setter](this);
+		return this;
+	},
+
+	statics: {
+		create: function(owner, setter, x, y, width, height) {
+			var rect = new LinkedRectangle(LinkedRectangle.dont).set(
+					x, y, width, height, true);
+			rect._owner = owner;
+			rect._setter = setter;
+			return rect;
+		}
+	}
+}, new function() {
+	var proto = Rectangle.prototype;
+
+	return Base.each(['x', 'y', 'width', 'height'], function(key) {
+		var part = Base.capitalize(key);
+		var internal = '_' + key;
+		this['get' + part] = function() {
+			return this[internal];
+		};
+
+		this['set' + part] = function(value) {
+			this[internal] = value;
+			if (!this._dontNotify)
+				this._owner[this._setter](this);
+		};
+	}, Base.each(['Point', 'Size', 'Center',
+			'Left', 'Top', 'Right', 'Bottom', 'CenterX', 'CenterY',
+			'TopLeft', 'TopRight', 'BottomLeft', 'BottomRight',
+			'LeftCenter', 'TopCenter', 'RightCenter', 'BottomCenter'],
+		function(key) {
+			var name = 'set' + key;
+			this[name] = function(value) {
+				this._dontNotify = true;
+				proto[name].apply(this, arguments);
+				delete this._dontNotify;
+				this._owner[this._setter](this);
+				return this;
+			};
+		}, {})
+	);
+});
+
+var Matrix = this.Matrix = Base.extend({
+	initialize: function(arg) {
+		var count = arguments.length,
+			ok = true;
+		if (count == 6) {
+			this.set.apply(this, arguments);
+		} else if (count == 1) {
+			if (arg instanceof Matrix) {
+				this.set(arg._a, arg._c, arg._b, arg._d, arg._tx, arg._ty);
+			} else if (Array.isArray(arg)) {
+				this.set.apply(this, arg);
+			} else {
+				ok = false;
+			}
+		} else if (count == 0) {
+			this.setIdentity();
+		} else {
+			ok = false;
+		}
+		if (!ok)
+			throw new Error('Unsupported matrix parameters');
+	},
+
+	clone: function() {
+		return Matrix.create(this._a, this._c, this._b, this._d,
+				this._tx, this._ty);
+	},
+
+	set: function(a, c, b, d, tx, ty) {
+		this._a = a;
+		this._c = c;
+		this._b = b;
+		this._d = d;
+		this._tx = tx;
+		this._ty = ty;
+		return this;
+	},
+
+	setIdentity: function() {
+		this._a = this._d = 1;
+		this._c = this._b = this._tx = this._ty = 0;
+		return this;
+	},
+
+	scale: function( hor, ver, center) {
+		if (arguments.length < 2 || typeof ver === 'object') {
+			center = Point.read(arguments, 1);
+			ver = hor;
+		} else {
+			center = Point.read(arguments, 2);
+		}
+		if (center)
+			this.translate(center);
+		this._a *= hor;
+		this._c *= hor;
+		this._b *= ver;
+		this._d *= ver;
+		if (center)
+			this.translate(center.negate());
+		return this;
+	},
+
+	translate: function(point) {
+		point = Point.read(arguments);
+		var x = point.x, y = point.y;
+		this._tx += x * this._a + y * this._b;
+		this._ty += x * this._c + y * this._d;
+		return this;
+	},
+
+	rotate: function(angle, center) {
+		return this.concatenate(
+				Matrix.getRotateInstance.apply(Matrix, arguments));
+	},
+
+	shear: function( hor, ver, center) {
+		if (arguments.length < 2 || typeof ver === 'object') {
+			center = Point.read(arguments, 1);
+			ver = hor;
+		} else {
+			center = Point.read(arguments, 2);
+		}
+		if (center)
+			this.translate(center);
+		var a = this._a,
+			c = this._c;
+		this._a += ver * this._b;
+		this._c += ver * this._d;
+		this._b += hor * a;
+		this._d += hor * c;
+		if (center)
+			this.translate(center.negate());
+		return this;
+	},
+
+	toString: function() {
+		var format = Base.formatNumber;
+		return '[[' + [format(this._a), format(this._b),
+					format(this._tx)].join(', ') + '], ['
+				+ [format(this._c), format(this._d),
+					format(this._ty)].join(', ') + ']]';
+	},
+
+	getValues: function() {
+		return [ this._a, this._c, this._b, this._d, this._tx, this._ty ];
+	},
+
+	concatenate: function(mx) {
+		var a = this._a,
+			b = this._b,
+			c = this._c,
+			d = this._d;
+		this._a = mx._a * a + mx._c * b;
+		this._b = mx._b * a + mx._d * b;
+		this._c = mx._a * c + mx._c * d;
+		this._d = mx._b * c + mx._d * d;
+		this._tx += mx._tx * a + mx._ty * b;
+		this._ty += mx._tx * c + mx._ty * d;
+		return this;
+	},
+
+	preConcatenate: function(mx) {
+		var a = this._a,
+			b = this._b,
+			c = this._c,
+			d = this._d,
+			tx = this._tx,
+			ty = this._ty;
+		this._a = mx._a * a + mx._b * c;
+		this._b = mx._a * b + mx._b * d;
+		this._c = mx._c * a + mx._d * c;
+		this._d = mx._c * b + mx._d * d;
+		this._tx = mx._a * tx + mx._b * ty + mx._tx;
+		this._ty = mx._c * tx + mx._d * ty + mx._ty;
+		return this;
+	},
+
+	transform: function( src, srcOff, dst, dstOff, numPts) {
+		return arguments.length < 5
+			? this._transformPoint(Point.read(arguments))
+			: this._transformCoordinates(src, srcOff, dst, dstOff, numPts);
+	},
+
+	_transformPoint: function(point, dest, dontNotify) {
+		var x = point.x,
+			y = point.y;
+		if (!dest)
+			dest = new Point(Point.dont);
+		return dest.set(
+			x * this._a + y * this._b + this._tx,
+			x * this._c + y * this._d + this._ty,
+			dontNotify
+		);
+	},
+
+	_transformCoordinates: function(src, srcOff, dst, dstOff, numPts) {
+		var i = srcOff, j = dstOff,
+			srcEnd = srcOff + 2 * numPts;
+		while (i < srcEnd) {
+			var x = src[i++];
+			var y = src[i++];
+			dst[j++] = x * this._a + y * this._b + this._tx;
+			dst[j++] = x * this._c + y * this._d + this._ty;
+		}
+		return dst;
+	},
+
+	_transformCorners: function(rect) {
+		var x1 = rect.x,
+			y1 = rect.y,
+			x2 = x1 + rect.width,
+			y2 = y1 + rect.height,
+			coords = [ x1, y1, x2, y1, x2, y2, x1, y2 ];
+		return this._transformCoordinates(coords, 0, coords, 0, 4);
+	},
+
+	_transformBounds: function(bounds, dest, dontNotify) {
+		var coords = this._transformCorners(bounds),
+			min = coords.slice(0, 2),
+			max = coords.slice(0);
+		for (var i = 2; i < 8; i++) {
+			var val = coords[i],
+				j = i & 1;
+			if (val < min[j])
+				min[j] = val;
+			else if (val > max[j])
+				max[j] = val;
+		}
+		if (!dest)
+			dest = new Rectangle(Rectangle.dont);
+		return dest.set(min[0], min[1], max[0] - min[0], max[1] - min[1],
+				dontNotify);
+	},
+
+	inverseTransform: function(point) {
+		return this._inverseTransform(Point.read(arguments));
+	},
+
+	_getDeterminant: function() {
+		var det = this._a * this._d - this._b * this._c;
+		return isFinite(det) && Math.abs(det) > Numerical.EPSILON
+				&& isFinite(this._tx) && isFinite(this._ty)
+				? det : null;
+	},
+
+	_inverseTransform: function(point, dest, dontNotify) {
+		var det = this._getDeterminant();
+		if (!det)
+			return null;
+		var x = point.x - this._tx,
+			y = point.y - this._ty;
+		if (!dest)
+			dest = new Point(Point.dont);
+		return dest.set(
+			(x * this._d - y * this._b) / det,
+			(y * this._a - x * this._c) / det,
+			dontNotify
+		);
+	},
+
+	getTranslation: function() {
+		return Point.create(this._tx, this._ty);
+	},
+
+	getScaling: function() {
+		var hor = Math.sqrt(this._a * this._a + this._c * this._c),
+			ver = Math.sqrt(this._b * this._b + this._d * this._d);
+		return Point.create(this._a < 0 ? -hor : hor, this._b < 0 ? -ver : ver);
+	},
+
+	getRotation: function() {
+		var angle1 = -Math.atan2(this._b, this._d),
+			angle2 = Math.atan2(this._c, this._a);
+		return Math.abs(angle1 - angle2) < Numerical.TOLERANCE
+				? angle1 * 180 / Math.PI : undefined;
+	},
+
+	equals: function(mx) {
+		return this._a == mx._a && this._b == mx._b && this._c == mx._c
+				&& this._d == mx._d && this._tx == mx._tx && this._ty == mx._ty;
+	},
+
+	isIdentity: function() {
+		return this._a == 1 && this._c == 0 && this._b == 0 && this._d == 1
+				&& this._tx == 0 && this._ty == 0;
+	},
+
+	isInvertible: function() {
+		return !!this._getDeterminant();
+	},
+
+	isSingular: function() {
+		return !this._getDeterminant();
+	},
+
+	createInverse: function() {
+		var det = this._getDeterminant();
+		return det && Matrix.create(
+				this._d / det,
+				-this._c / det,
+				-this._b / det,
+				this._a / det,
+				(this._b * this._ty - this._d * this._tx) / det,
+				(this._c * this._tx - this._a * this._ty) / det);
+	},
+
+	createShiftless: function() {
+		return Matrix.create(this._a, this._c, this._b, this._d, 0, 0);
+	},
+
+	setToScale: function(hor, ver) {
+		return this.set(hor, 0, 0, ver, 0, 0);
+	},
+
+	setToTranslation: function(delta) {
+		delta = Point.read(arguments);
+		return this.set(1, 0, 0, 1, delta.x, delta.y);
+	},
+
+	setToShear: function(hor, ver) {
+		return this.set(1, ver, hor, 1, 0, 0);
+	},
+
+	setToRotation: function(angle, center) {
+		center = Point.read(arguments, 1);
+		angle = angle * Math.PI / 180;
+		var x = center.x,
+			y = center.y,
+			cos = Math.cos(angle),
+			sin = Math.sin(angle);
+		return this.set(cos, sin, -sin, cos,
+				x - x * cos + y * sin,
+				y - x * sin - y * cos);
+	},
+
+	applyToContext: function(ctx, reset) {
+		ctx[reset ? 'setTransform' : 'transform'](
+				this._a, this._c, this._b, this._d, this._tx, this._ty);
+		return this;
+	},
+
+	statics: {
+		create: function(a, c, b, d, tx, ty) {
+			return new Matrix(Matrix.dont).set(a, c, b, d, tx, ty);
+		},
+
+		getScaleInstance: function(hor, ver) {
+			var mx = new Matrix();
+			return mx.setToScale.apply(mx, arguments);
+		},
+
+		getTranslateInstance: function(delta) {
+			var mx = new Matrix();
+			return mx.setToTranslation.apply(mx, arguments);
+		},
+
+		getShearInstance: function(hor, ver, center) {
+			var mx = new Matrix();
+			return mx.setToShear.apply(mx, arguments);
+		},
+
+		getRotateInstance: function(angle, center) {
+			var mx = new Matrix();
+			return mx.setToRotation.apply(mx, arguments);
+		}
+	}
+}, new function() {
+	return Base.each({
+		scaleX: '_a',
+		scaleY: '_d',
+		translateX: '_tx',
+		translateY: '_ty',
+		shearX: '_b',
+		shearY: '_c'
+	}, function(prop, name) {
+		name = Base.capitalize(name);
+		this['get' + name] = function() {
+			return this[prop];
+		};
+		this['set' + name] = function(value) {
+			this[prop] = value;
+		};
+	}, {});
+});
+
+var Line = this.Line = Base.extend({
+	initialize: function(point1, point2, infinite) {
+		point1 = Point.read(arguments, 0, 1);
+		point2 = Point.read(arguments, 1, 1);
+		if (arguments.length == 3) {
+			this.point = point1;
+			this.vector = point2.subtract(point1);
+			this.infinite = infinite;
+		} else {
+			this.point = point1;
+			this.vector = point2;
+			this.infinite = true;
+		}
+	},
+
+	intersect: function(line) {
+		var cross = this.vector.cross(line.vector);
+		if (Math.abs(cross) <= Numerical.EPSILON)
+			return null;
+		var v = line.point.subtract(this.point),
+			t1 = v.cross(line.vector) / cross,
+			t2 = v.cross(this.vector) / cross;
+		return (this.infinite || 0 <= t1 && t1 <= 1)
+				&& (line.infinite || 0 <= t2 && t2 <= 1)
+			? this.point.add(this.vector.multiply(t1)) : null;
+	},
+
+	getSide: function(point) {
+		var v1 = this.vector,
+			v2 = point.subtract(this.point),
+			ccw = v2.cross(v1);
+		if (ccw == 0) {
+			ccw = v2.dot(v1);
+			if (ccw > 0) {
+				ccw = v2.subtract(v1).dot(v1);
+				if (ccw < 0)
+				    ccw = 0;
+			}
+		}
+		return ccw < 0 ? -1 : ccw > 0 ? 1 : 0;
+	},
+
+	getDistance: function(point) {
+		var m = this.vector.y / this.vector.x, 
+			b = this.point.y - (m * this.point.x); 
+		var dist = Math.abs(point.y - (m * point.x) - b) / Math.sqrt(m * m + 1);
+		return this.infinite ? dist : Math.min(dist,
+				point.getDistance(this.point),
+				point.getDistance(this.point.add(this.vector)));
+	}
+});
+
+var Project = this.Project = PaperScopeItem.extend({
+	_list: 'projects',
+	_reference: 'project',
+
+	initialize: function(view) {
+		this.base(true);
+		this._currentStyle = new PathStyle();
+		this._selectedItems = {};
+		this._selectedItemCount = 0;
+		this.layers = [];
+		this.symbols = [];
+		this.activeLayer = new Layer();
+		if (view)
+			this.view = view instanceof View ? view : View.create(view);
+	},
+
+	_needsRedraw: function() {
+		if (this.view)
+			this.view._redrawNeeded = true;
+	},
+
+	remove: function() {
+		if (!this.base())
+			return false;
+		if (this.view)
+			this.view.remove();
+		return true;
+	},
+
+	getCurrentStyle: function() {
+		return this._currentStyle;
+	},
+
+	setCurrentStyle: function(style) {
+		this._currentStyle.initialize(style);
+	},
+
+	getIndex: function() {
+		return this._index;
+	},
+
+	getSelectedItems: function() {
+		var items = [];
+		Base.each(this._selectedItems, function(item) {
+			items.push(item);
+		});
+		return items;
+	},
+
+	_updateSelection: function(item) {
+		if (item._selected) {
+			this._selectedItemCount++;
+			this._selectedItems[item._id] = item;
+		} else {
+			this._selectedItemCount--;
+			delete this._selectedItems[item._id];
+		}
+	},
+
+	selectAll: function() {
+		for (var i = 0, l = this.layers.length; i < l; i++)
+			this.layers[i].setSelected(true);
+	},
+
+	deselectAll: function() {
+		for (var i in this._selectedItems)
+			this._selectedItems[i].setSelected(false);
+	},
+
+	hitTest: function(point, options) {
+		options = HitResult.getOptions(point, options);
+		point = options.point;
+		for (var i = this.layers.length - 1; i >= 0; i--) {
+			var res = this.layers[i].hitTest(point, options);
+			if (res) return res;
+		}
+		return null;
+	},
+
+	draw: function(ctx, matrix) {
+		ctx.save();
+		if (!matrix.isIdentity())
+			matrix.applyToContext(ctx);
+		var param = { offset: new Point(0, 0) };
+		for (var i = 0, l = this.layers.length; i < l; i++)
+			Item.draw(this.layers[i], ctx, param);
+		ctx.restore();
+
+		if (this._selectedItemCount > 0) {
+			ctx.save();
+			ctx.strokeWidth = 1;
+			ctx.strokeStyle = ctx.fillStyle = '#009dec';
+			var matrices = {};
+			function getGlobalMatrix(item, mx, cached) {
+				var cache = cached && matrices[item._id];
+				if (cache) {
+					mx.concatenate(cache);
+					return mx;
+				}
+				if (item._parent) {
+					getGlobalMatrix(item._parent, mx, true);
+					if (!item._matrix.isIdentity())
+						mx.concatenate(item._matrix);
+				} else {
+					mx.initialize(item._matrix);
+				}
+				if (cached)
+					matrices[item._id] = mx.clone();
+				return mx;
+			}
+			for (var id in this._selectedItems) {
+				var item = this._selectedItems[id];
+				item.drawSelected(ctx, getGlobalMatrix(item, matrix.clone()));
+			}
+			ctx.restore();
+		}
+	}
+});
+
+var Symbol = this.Symbol = Base.extend({
+	initialize: function(item) {
+		this.project = paper.project;
+		this.project.symbols.push(this);
+		this.setDefinition(item);
+		this._instances = {};
+	},
+
+	_changed: function(flags) {
+		Base.each(this._instances, function(item) {
+			item._changed(flags);
+		});
+	},
+
+	getDefinition: function() {
+		return this._definition;
+	},
+
+	setDefinition: function(item) {
+		if (item._parentSymbol)
+			item = item.clone();
+		if (this._definition)
+			delete this._definition._parentSymbol;
+		this._definition = item;
+		item.remove();
+		item.setPosition(new Point());
+		item._parentSymbol = this;
+		this._changed(Change.GEOMETRY);
+	},
+
+	place: function(position) {
+		return new PlacedSymbol(this, position);
+	},
+
+	clone: function() {
+	 	return new Symbol(this._definition.clone());
+	}
+});
+
+var ChangeFlag = {
+	APPEARANCE: 1,
+	HIERARCHY: 2,
+	GEOMETRY: 4,
+	STROKE: 8,
+	STYLE: 16,
+	ATTRIBUTE: 32,
+	CONTENT: 64,
+	PIXELS: 128,
+	CLIPPING: 256
+};
+
+var Change = {
+	HIERARCHY: ChangeFlag.HIERARCHY | ChangeFlag.APPEARANCE,
+	GEOMETRY: ChangeFlag.GEOMETRY | ChangeFlag.APPEARANCE,
+	STROKE: ChangeFlag.STROKE | ChangeFlag.STYLE | ChangeFlag.APPEARANCE,
+	STYLE: ChangeFlag.STYLE | ChangeFlag.APPEARANCE,
+	ATTRIBUTE: ChangeFlag.ATTRIBUTE | ChangeFlag.APPEARANCE,
+	CONTENT: ChangeFlag.CONTENT | ChangeFlag.APPEARANCE,
+	PIXELS: ChangeFlag.PIXELS | ChangeFlag.APPEARANCE
+};
+
+var Item = this.Item = Base.extend(Callback, {
+	_events: new function() {
+
+		var mouseFlags = {
+			mousedown: {
+				mousedown: 1,
+				mousedrag: 1,
+				click: 1,
+				doubleclick: 1
+			},
+			mouseup: {
+				mouseup: 1,
+				mousedrag: 1,
+				click: 1,
+				doubleclick: 1
+			},
+			mousemove: {
+				mousedrag: 1,
+				mousemove: 1,
+				mouseenter: 1,
+				mouseleave: 1
+			}
+		};
+
+		var mouseEvent = {
+			install: function(type) {
+				var counters = this._project.view._eventCounters;
+				if (counters) {
+					for (var key in mouseFlags) {
+						counters[key] = (counters[key] || 0)
+								+ (mouseFlags[key][type] || 0);
+					}
+				}
+			},
+			uninstall: function(type) {
+				var counters = this._project.view._eventCounters;
+				if (counters) {
+					for (var key in mouseFlags)
+						counters[key] -= mouseFlags[key][type] || 0;
+				}
+			}
+		};
+
+		var onFrameItems = [];
+		function onFrame(event) {
+			for (var i = 0, l = onFrameItems.length; i < l; i++)
+				onFrameItems[i].fire('frame', event);
+		}
+
+		return Base.each(['onMouseDown', 'onMouseUp', 'onMouseDrag', 'onClick',
+			'onDoubleClick', 'onMouseMove', 'onMouseEnter', 'onMouseLeave'],
+			function(name) {
+				this[name] = mouseEvent;
+			}, {
+				onFrame: {
+					install: function() {
+						if (!onFrameItems.length)
+							this._project.view.attach('frame', onFrame);
+						onFrameItems.push(this);
+					},
+					uninstall: function() {
+						onFrameItems.splice(onFrameItems.indexOf(this), 1);
+						if (!onFrameItems.length)
+							this._project.view.detach('frame', onFrame);
+					}
+				}
+			});
+	},
+
+	initialize: function(pointOrMatrix) {
+		this._id = ++Item._id;
+		if (!this._project)
+			paper.project.activeLayer.addChild(this);
+		if (!this._style)
+			this._style = PathStyle.create(this);
+		this.setStyle(this._project.getCurrentStyle());
+		this._matrix = pointOrMatrix !== undefined
+			? pointOrMatrix instanceof Matrix
+				? pointOrMatrix.clone()
+				: new Matrix().translate(Point.read(arguments, 0))
+			: new Matrix();
+	},
+
+	_changed: function(flags) {
+		if (flags & ChangeFlag.GEOMETRY) {
+			delete this._bounds;
+			delete this._position;
+		}
+		if (this._parent
+				&& (flags & (ChangeFlag.GEOMETRY | ChangeFlag.STROKE))) {
+			this._parent._clearBoundsCache();
+		}
+		if (flags & ChangeFlag.HIERARCHY) {
+			this._clearBoundsCache();
+		}
+		if (flags & ChangeFlag.APPEARANCE) {
+			this._project._needsRedraw();
+		}
+		if (this._parentSymbol)
+			this._parentSymbol._changed(flags);
+		if (this._project._changes) {
+			var entry = this._project._changesById[this._id];
+			if (entry) {
+				entry.flags |= flags;
+			} else {
+				entry = { item: this, flags: flags };
+				this._project._changesById[this._id] = entry;
+				this._project._changes.push(entry);
+			}
+		}
+	},
+
+	getId: function() {
+		return this._id;
+	},
+
+	getName: function() {
+		return this._name;
+	},
+
+	setName: function(name) {
+
+		if (this._name)
+			this._removeFromNamed();
+		this._name = name || undefined;
+		if (name && this._parent) {
+			var children = this._parent._children,
+				namedChildren = this._parent._namedChildren;
+			(namedChildren[name] = namedChildren[name] || []).push(this);
+			children[name] = this;
+		}
+		this._changed(ChangeFlag.ATTRIBUTE);
+	},
+
+	statics: {
+		_id: 0
+	}
+}, Base.each(['locked', 'visible', 'blendMode', 'opacity', 'guide'],
+	function(name) {
+		var part = Base.capitalize(name),
+			name = '_' + name;
+		this['get' + part] = function() {
+			return this[name];
+		};
+		this['set' + part] = function(value) {
+			if (value != this[name]) {
+				this[name] = value;
+				this._changed(name === '_locked'
+						? ChangeFlag.ATTRIBUTE : Change.ATTRIBUTE);
+			}
+		};
+}, {}), {
+
+	_locked: false,
+
+	_visible: true,
+
+	_blendMode: 'normal',
+
+	_opacity: 1,
+
+	_guide: false,
+
+	isSelected: function() {
+		if (this._children) {
+			for (var i = 0, l = this._children.length; i < l; i++)
+				if (this._children[i].isSelected())
+					return true;
+		}
+		return this._selected;
+	},
+
+	setSelected: function(selected ) {
+		if (this._children && !arguments[1]) {
+			for (var i = 0, l = this._children.length; i < l; i++)
+				this._children[i].setSelected(selected);
+		} else if ((selected = !!selected) != this._selected) {
+			this._selected = selected;
+			this._project._updateSelection(this);
+			this._changed(Change.ATTRIBUTE);
+		}
+	},
+
+	_selected: false,
+
+	isFullySelected: function() {
+		if (this._children && this._selected) {
+			for (var i = 0, l = this._children.length; i < l; i++)
+				if (!this._children[i].isFullySelected())
+					return false;
+			return true;
+		}
+		return this._selected;
+	},
+
+	setFullySelected: function(selected) {
+		if (this._children) {
+			for (var i = 0, l = this._children.length; i < l; i++)
+				this._children[i].setFullySelected(selected);
+		}
+		this.setSelected(selected, true);
+	},
+
+	isClipMask: function() {
+		return this._clipMask;
+	},
+
+	setClipMask: function(clipMask) {
+		if (this._clipMask != (clipMask = !!clipMask)) {
+			this._clipMask = clipMask;
+			if (clipMask) {
+				this.setFillColor(null);
+				this.setStrokeColor(null);
+			}
+			this._changed(Change.ATTRIBUTE);
+			if (this._parent)
+				this._parent._changed(ChangeFlag.CLIPPING);
+		}
+	},
+
+	_clipMask: false,
+
+	getPosition: function() {
+		var pos = this._position
+				|| (this._position = this.getBounds().getCenter(true));
+		return arguments[0] ? pos
+				: LinkedPoint.create(this, 'setPosition', pos.x, pos.y);
+	},
+
+	setPosition: function(point) {
+		this.translate(Point.read(arguments).subtract(this.getPosition(true)));
+	},
+
+	getMatrix: function() {
+		return this._matrix;
+	},
+
+	setMatrix: function(matrix) {
+		this._matrix.initialize(matrix);
+		this._changed(Change.GEOMETRY);
+	}
+}, Base.each(['bounds', 'strokeBounds', 'handleBounds', 'roughBounds'],
+function(name) {
+	this['get' + Base.capitalize(name)] = function() {
+		var type = this._boundsType,
+			bounds = this._getCachedBounds(
+				typeof type == 'string' ? type : type && type[name] || name,
+				arguments[0]);
+		return name == 'bounds' ? LinkedRectangle.create(this, 'setBounds',
+				bounds.x, bounds.y, bounds.width, bounds.height) : bounds;
+	};
+}, {
+	_getCachedBounds: function(type, matrix, cacheItem) {
+		var cache = (!matrix || matrix.equals(this._matrix)) && type;
+		if (cacheItem && this._parent) {
+			var id = cacheItem._id,
+				ref = this._parent._boundsCache
+					= this._parent._boundsCache || {
+				ids: {},
+				list: []
+			};
+			if (!ref.ids[id]) {
+				ref.list.push(cacheItem);
+				ref.ids[id] = cacheItem;
+			}
+		}
+		if (cache && this._bounds && this._bounds[cache])
+			return this._bounds[cache];
+		var identity = this._matrix.isIdentity();
+		matrix = !matrix || matrix.isIdentity()
+				? identity ? null : this._matrix
+				: identity ? matrix : matrix.clone().concatenate(this._matrix);
+		var bounds = this._getBounds(type, matrix, cache ? this : cacheItem);
+		if (cache) {
+			if (!this._bounds)
+				this._bounds = {};
+			this._bounds[cache] = bounds.clone();
+		}
+		return bounds;
+	},
+
+	_clearBoundsCache: function() {
+		if (this._boundsCache) {
+			for (var i = 0, list = this._boundsCache.list, l = list.length;
+					i < l; i++) {
+				var item = list[i];
+				delete item._bounds;
+				if (item != this && item._boundsCache)
+					item._clearBoundsCache();
+			}
+			delete this._boundsCache;
+		}
+	},
+
+	_getBounds: function(type, matrix, cacheItem) {
+		var children = this._children;
+		if (!children || children.length == 0)
+			return new Rectangle();
+		var x1 = Infinity,
+			x2 = -x1,
+			y1 = x1,
+			y2 = x2;
+		for (var i = 0, l = children.length; i < l; i++) {
+			var child = children[i];
+			if (child._visible) {
+				var rect = child._getCachedBounds(type, matrix, cacheItem);
+				x1 = Math.min(rect.x, x1);
+				y1 = Math.min(rect.y, y1);
+				x2 = Math.max(rect.x + rect.width, x2);
+				y2 = Math.max(rect.y + rect.height, y2);
+			}
+		}
+		return Rectangle.create(x1, y1, x2 - x1, y2 - y1);
+	},
+
+	setBounds: function(rect) {
+		rect = Rectangle.read(arguments);
+		var bounds = this.getBounds(),
+			matrix = new Matrix(),
+			center = rect.getCenter();
+		matrix.translate(center);
+		if (rect.width != bounds.width || rect.height != bounds.height) {
+			matrix.scale(
+					bounds.width != 0 ? rect.width / bounds.width : 1,
+					bounds.height != 0 ? rect.height / bounds.height : 1);
+		}
+		center = bounds.getCenter();
+		matrix.translate(-center.x, -center.y);
+		this.transform(matrix);
+	}
+
+}), {
+	getProject: function() {
+		return this._project;
+	},
+
+	_setProject: function(project) {
+		if (this._project != project) {
+			this._project = project;
+			if (this._children) {
+				for (var i = 0, l = this._children.length; i < l; i++) {
+					this._children[i]._setProject(project);
+				}
+			}
+		}
+	},
+
+	getLayer: function() {
+		var parent = this;
+		while (parent = parent._parent) {
+			if (parent instanceof Layer)
+				return parent;
+		}
+		return null;
+	},
+
+	getParent: function() {
+		return this._parent;
+	},
+
+	getChildren: function() {
+		return this._children;
+	},
+
+	setChildren: function(items) {
+		this.removeChildren();
+		this.addChildren(items);
+	},
+
+	getFirstChild: function() {
+		return this._children && this._children[0] || null;
+	},
+
+	getLastChild: function() {
+		return this._children && this._children[this._children.length - 1]
+				|| null;
+	},
+
+	getNextSibling: function() {
+		return this._parent && this._parent._children[this._index + 1] || null;
+	},
+
+	getPreviousSibling: function() {
+		return this._parent && this._parent._children[this._index - 1] || null;
+	},
+
+	getIndex: function() {
+		return this._index;
+	},
+
+	clone: function() {
+		return this._clone(new this.constructor());
+	},
+
+	_clone: function(copy) {
+		copy.setStyle(this._style);
+		if (this._children) {
+			for (var i = 0, l = this._children.length; i < l; i++)
+				copy.addChild(this._children[i].clone());
+		}
+		var keys = ['_locked', '_visible', '_blendMode', '_opacity',
+				'_clipMask', '_guide'];
+		for (var i = 0, l = keys.length; i < l; i++) {
+			var key = keys[i];
+			if (this.hasOwnProperty(key))
+				copy[key] = this[key];
+		}
+		copy._matrix.initialize(this._matrix);
+		copy.setSelected(this._selected);
+		if (this._name)
+			copy.setName(this._name);
+		return copy;
+	},
+
+	copyTo: function(itemOrProject) {
+		var copy = this.clone();
+		if (itemOrProject.layers) {
+			itemOrProject.activeLayer.addChild(copy);
+		} else {
+			itemOrProject.addChild(copy);
+		}
+		return copy;
+	},
+
+	rasterize: function(resolution) {
+		var bounds = this.getStrokeBounds(),
+			scale = (resolution || 72) / 72,
+			canvas = CanvasProvider.getCanvas(bounds.getSize().multiply(scale)),
+			ctx = canvas.getContext('2d'),
+			matrix = new Matrix().scale(scale).translate(-bounds.x, -bounds.y);
+		matrix.applyToContext(ctx);
+		this.draw(ctx, {});
+		var raster = new Raster(canvas);
+		raster.setBounds(bounds);
+		return raster;
+	},
+
+	hitTest: function(point, options) {
+		options = HitResult.getOptions(point, options);
+		point = options.point = this._matrix._inverseTransform(options.point);
+		if (!this._children && !this.getRoughBounds()
+				.expand(options.tolerance)._containsPoint(point))
+			return null;
+		if ((options.center || options.bounds) &&
+				!(this instanceof Layer && !this._parent)) {
+			var bounds = this.getBounds(),
+				that = this,
+				points = ['TopLeft', 'TopRight', 'BottomLeft', 'BottomRight',
+				'LeftCenter', 'TopCenter', 'RightCenter', 'BottomCenter'],
+				res;
+			function checkBounds(type, part) {
+				var pt = bounds['get' + part]();
+				if (point.getDistance(pt) < options.tolerance)
+					return new HitResult(type, that,
+							{ name: Base.hyphenate(part), point: pt });
+			}
+			if (options.center && (res = checkBounds('center', 'Center')))
+				return res;
+			if (options.bounds) {
+				for (var i = 0; i < 8; i++)
+					if (res = checkBounds('bounds', points[i]))
+						return res;
+			}
+		}
+
+		return this._children || !(options.guides && !this._guide
+				|| options.selected && !this._selected)
+					? this._hitTest(point, options) : null;
+	},
+
+	_hitTest: function(point, options) {
+		if (this._children) {
+			for (var i = this._children.length - 1; i >= 0; i--) {
+				var res = this._children[i].hitTest(point, options);
+				if (res) return res;
+			}
+		}
+	},
+
+	addChild: function(item) {
+		return this.insertChild(undefined, item);
+	},
+
+	insertChild: function(index, item) {
+		if (this._children) {
+			item._remove(false, true);
+			Base.splice(this._children, [item], index, 0);
+			item._parent = this;
+			item._setProject(this._project);
+			if (item._name)
+				item.setName(item._name);
+			this._changed(Change.HIERARCHY);
+			return true;
+		}
+		return false;
+	},
+
+	addChildren: function(items) {
+		for (var i = 0, l = items && items.length; i < l; i++)
+			this.insertChild(undefined, items[i]);
+	},
+
+	insertChildren: function(index, items) {
+		for (var i = 0, l = items && items.length; i < l; i++) {
+			if (this.insertChild(index, items[i]))
+				index++;
+		}
+	},
+
+	insertAbove: function(item) {
+		var index = item._index;
+		if (item._parent == this._parent && index < this._index)
+			 index++;
+		return item._parent.insertChild(index, this);
+	},
+
+	insertBelow: function(item) {
+		var index = item._index;
+		if (item._parent == this._parent && index > this._index)
+			 index--;
+		return item._parent.insertChild(index, this);
+	},
+
+	appendTop: function(item) {
+		return this.addChild(item);
+	},
+
+	appendBottom: function(item) {
+		return this.insertChild(0, item);
+	},
+
+	moveAbove: function(item) {
+		return this.insertAbove(item);
+	},
+
+	moveBelow: function(item) {
+		return this.insertBelow(item);
+	},
+
+	_removeFromNamed: function() {
+		var children = this._parent._children,
+			namedChildren = this._parent._namedChildren,
+			name = this._name,
+			namedArray = namedChildren[name],
+			index = namedArray ? namedArray.indexOf(this) : -1;
+		if (index == -1)
+			return;
+		if (children[name] == this)
+			delete children[name];
+		namedArray.splice(index, 1);
+		if (namedArray.length) {
+			children[name] = namedArray[namedArray.length - 1];
+		} else {
+			delete namedChildren[name];
+		}
+	},
+
+	_remove: function(deselect, notify) {
+		if (this._parent) {
+			if (deselect)
+				this.setSelected(false);
+			if (this._name)
+				this._removeFromNamed();
+			if (this._index != null)
+				Base.splice(this._parent._children, null, this._index, 1);
+			if (notify)
+				this._parent._changed(Change.HIERARCHY);
+			this._parent = null;
+			return true;
+		}
+		return false;
+	},
+
+	remove: function() {
+		return this._remove(true, true);
+	},
+
+	removeChildren: function(from, to) {
+		if (!this._children)
+			return null;
+		from = from || 0;
+		to = Base.pick(to, this._children.length);
+		var removed = Base.splice(this._children, null, from, to - from);
+		for (var i = removed.length - 1; i >= 0; i--)
+			removed[i]._remove(true, false);
+		if (removed.length > 0)
+			this._changed(Change.HIERARCHY);
+		return removed;
+	},
+
+	reverseChildren: function() {
+		if (this._children) {
+			this._children.reverse();
+			for (var i = 0, l = this._children.length; i < l; i++)
+				this._children[i]._index = i;
+			this._changed(Change.HIERARCHY);
+		}
+	},
+
+	isEditable: function() {
+		var item = this;
+		while (item) {
+			if (!item._visible || item._locked)
+				return false;
+			item = item._parent;
+		}
+		return true;
+	},
+
+	_getOrder: function(item) {
+		function getList(item) {
+			var list = [];
+			do {
+				list.unshift(item);
+			} while (item = item._parent)
+			return list;
+		}
+		var list1 = getList(this),
+			list2 = getList(item);
+		for (var i = 0, l = Math.min(list1.length, list2.length); i < l; i++) {
+			if (list1[i] != list2[i]) {
+				return list1[i]._index < list2[i]._index ? 1 : -1;
+			}
+		}
+		return 0;
+	},
+
+	hasChildren: function() {
+		return this._children && this._children.length > 0;
+	},
+
+	isAbove: function(item) {
+		return this._getOrder(item) == -1;
+	},
+
+	isBelow: function(item) {
+		return this._getOrder(item) == 1;
+	},
+
+	isParent: function(item) {
+		return this._parent == item;
+	},
+
+	isChild: function(item) {
+		return item && item._parent == this;
+	},
+
+	isDescendant: function(item) {
+		var parent = this;
+		while (parent = parent._parent) {
+			if (parent == item)
+				return true;
+		}
+		return false;
+	},
+
+	isAncestor: function(item) {
+		return item ? item.isDescendant(this) : false;
+	},
+
+	isGroupedWith: function(item) {
+		var parent = this._parent;
+		while (parent) {
+			if (parent._parent
+				&& (parent instanceof Group || parent instanceof CompoundPath)
+				&& item.isDescendant(parent))
+					return true;
+			parent = parent._parent;
+		}
+		return false;
+	},
+
+	scale: function(hor, ver , center, apply) {
+		if (arguments.length < 2 || typeof ver === 'object') {
+			apply = center;
+			center = ver;
+			ver = hor;
+		}
+		return this.transform(new Matrix().scale(hor, ver,
+				center || this.getPosition(true)), apply);
+	},
+
+	translate: function(delta, apply) {
+		var mx = new Matrix();
+		return this.transform(mx.translate.apply(mx, arguments), apply);
+	},
+
+	rotate: function(angle, center, apply) {
+		return this.transform(new Matrix().rotate(angle,
+				center || this.getPosition(true)), apply);
+	},
+
+	shear: function(hor, ver, center, apply) {
+		if (arguments.length < 2 || typeof ver === 'object') {
+			apply = center;
+			center = ver;
+			ver = hor;
+		}
+		return this.transform(new Matrix().shear(hor, ver,
+				center || this.getPosition(true)), apply);
+	},
+
+	transform: function(matrix, apply) {
+		var bounds = this._bounds,
+			position = this._position;
+		this._matrix.preConcatenate(matrix);
+		if (this._transform)
+			this._transform(matrix);
+		if (apply)
+			this.apply();
+		this._changed(Change.GEOMETRY);
+		if (bounds && matrix.getRotation() % 90 === 0) {
+			for (var key in bounds) {
+				var rect = bounds[key];
+				matrix._transformBounds(rect, rect);
+			}
+			var type = this._boundsType,
+				rect = bounds[type && type.bounds || 'bounds'];
+			if (rect)
+				this._position = rect.getCenter(true);
+			this._bounds = bounds;
+		} else if (position) {
+			this._position = matrix._transformPoint(position, position);
+		}
+		return this;
+	},
+
+	apply: function() {
+		if (this._apply(this._matrix)) {
+			this._matrix.setIdentity();
+		}
+	},
+
+	_apply: function(matrix) {
+		if (this._children) {
+			for (var i = 0, l = this._children.length; i < l; i++) {
+				var child = this._children[i];
+				child.transform(matrix);
+				child.apply();
+			}
+			return true;
+		}
+	},
+
+	fitBounds: function(rectangle, fill) {
+		rectangle = Rectangle.read(arguments);
+		var bounds = this.getBounds(),
+			itemRatio = bounds.height / bounds.width,
+			rectRatio = rectangle.height / rectangle.width,
+			scale = (fill ? itemRatio > rectRatio : itemRatio < rectRatio)
+					? rectangle.width / bounds.width
+					: rectangle.height / bounds.height,
+			newBounds = new Rectangle(new Point(),
+					Size.create(bounds.width * scale, bounds.height * scale));
+		newBounds.setCenter(rectangle.getCenter());
+		this.setBounds(newBounds);
+	},
+
+	toString: function() {
+		return (this.constructor._name || 'Item') + (this._name
+				? " '" + this._name + "'"
+				: ' @' + this._id);
+	},
+
+	_setStyles: function(ctx) {
+		var style = this._style,
+			width = style._strokeWidth,
+			join = style._strokeJoin,
+			cap = style._strokeCap,
+			limit = style._miterLimit,
+			fillColor = style._fillColor,
+			strokeColor = style._strokeColor;
+		if (width != null) ctx.lineWidth = width;
+		if (join) ctx.lineJoin = join;
+		if (cap) ctx.lineCap = cap;
+		if (limit) ctx.miterLimit = limit;
+		if (fillColor) ctx.fillStyle = fillColor.getCanvasStyle(ctx);
+		if (strokeColor) ctx.strokeStyle = strokeColor.getCanvasStyle(ctx);
+		if (!fillColor || !strokeColor)
+			ctx.globalAlpha = this._opacity;
+	},
+
+	statics: {
+		drawSelectedBounds: function(bounds, ctx, matrix) {
+			var coords = matrix._transformCorners(bounds);
+			ctx.beginPath();
+			for (var i = 0; i < 8; i++)
+				ctx[i == 0 ? 'moveTo' : 'lineTo'](coords[i], coords[++i]);
+			ctx.closePath();
+			ctx.stroke();
+			for (var i = 0; i < 8; i++) {
+				ctx.beginPath();
+				ctx.rect(coords[i] - 2, coords[++i] - 2, 4, 4);
+				ctx.fill();
+			}
+		},
+
+		draw: function(item, ctx, param) {
+			if (!item._visible || item._opacity == 0)
+				return;
+			var tempCanvas, parentCtx,
+			 	itemOffset, prevOffset;
+			if (item._blendMode !== 'normal' || item._opacity < 1
+					&& !(item._segments
+						&& (!item.getFillColor() || !item.getStrokeColor()))) {
+				var bounds = item.getStrokeBounds();
+				if (!bounds.width || !bounds.height)
+					return;
+				prevOffset = param.offset;
+				parentCtx = ctx;
+				itemOffset = param.offset = bounds.getTopLeft().floor();
+				tempCanvas = CanvasProvider.getCanvas(
+						bounds.getSize().ceil().add(Size.create(1, 1)));
+				ctx = tempCanvas.getContext('2d');
+			}
+			if (!param.clipping)
+				ctx.save();
+			if (tempCanvas)
+				ctx.translate(-itemOffset.x, -itemOffset.y);
+			item._matrix.applyToContext(ctx);
+			item.draw(ctx, param);
+			if (!param.clipping)
+				ctx.restore();
+			if (tempCanvas) {
+				param.offset = prevOffset;
+				if (item._blendMode !== 'normal') {
+					BlendMode.process(item._blendMode, ctx, parentCtx,
+						item._opacity, itemOffset.subtract(prevOffset));
+				} else {
+					parentCtx.save();
+					parentCtx.globalAlpha = item._opacity;
+					parentCtx.drawImage(tempCanvas, itemOffset.x, itemOffset.y);
+					parentCtx.restore();
+				}
+				CanvasProvider.returnCanvas(tempCanvas);
+			}
+		}
+	}
+}, Base.each(['down', 'drag', 'up', 'move'], function(name) {
+	this['removeOn' + Base.capitalize(name)] = function() {
+		var hash = {};
+		hash[name] = true;
+		return this.removeOn(hash);
+	};
+}, {
+
+	removeOn: function(obj) {
+		for (var name in obj) {
+			if (obj[name]) {
+				var key = 'mouse' + name,
+					sets = Tool._removeSets = Tool._removeSets || {};
+				sets[key] = sets[key] || {};
+				sets[key][this._id] = this;
+			}
+		}
+		return this;
+	}
+}));
+
+var Group = this.Group = Item.extend({
+	initialize: function(items) {
+		this.base();
+		this._children = [];
+		this._namedChildren = {};
+		this.addChildren(!items || !Array.isArray(items)
+				|| typeof items[0] !== 'object' ? arguments : items);
+	},
+
+	_changed: function(flags) {
+		Item.prototype._changed.call(this, flags);
+		if (flags & (ChangeFlag.HIERARCHY | ChangeFlag.CLIPPING)) {
+			delete this._clipItem;
+		}
+	},
+
+	_getClipItem: function() {
+		if (this._clipItem !== undefined)
+			return this._clipItem;
+		for (var i = 0, l = this._children.length; i < l; i++) {
+			var child = this._children[i];
+			if (child._clipMask)
+				return this._clipItem = child;
+		}
+		return this._clipItem = null;
+	},
+
+	isClipped: function() {
+		return !!this._getClipItem();
+	},
+
+	setClipped: function(clipped) {
+		var child = this.getFirstChild();
+		if (child)
+			child.setClipMask(clipped);
+		return this;
+	},
+
+	draw: function(ctx, param) {
+		var clipItem = this._getClipItem();
+		if (clipItem) {
+			param.clipping = true;
+			Item.draw(clipItem, ctx, param);
+			delete param.clipping;
+		}
+		for (var i = 0, l = this._children.length; i < l; i++) {
+			var item = this._children[i];
+			if (item != clipItem)
+				Item.draw(item, ctx, param);
+		}
+	}
+});
+
+var Layer = this.Layer = Group.extend({
+	initialize: function(items) {
+		this._project = paper.project;
+		this._index = this._project.layers.push(this) - 1;
+		this.base.apply(this, arguments);
+		this.activate();
+	},
+
+	_remove: function(deselect, notify) {
+		if (this._parent)
+			return this.base(deselect, notify);
+		if (this._index != null) {
+			if (deselect)
+				this.setSelected(false);
+			Base.splice(this._project.layers, null, this._index, 1);
+			this._project._needsRedraw();
+			return true;
+		}
+		return false;
+	},
+
+	getNextSibling: function() {
+		return this._parent ? this.base()
+				: this._project.layers[this._index + 1] || null;
+	},
+
+	getPreviousSibling: function() {
+		return this._parent ? this.base()
+				: this._project.layers[this._index - 1] || null;
+	},
+
+	activate: function() {
+		this._project.activeLayer = this;
+	}
+}, new function () {
+	function insert(above) {
+		return function(item) {
+			if (item instanceof Layer && !item._parent
+						&& this._remove(false, true)) {
+				Base.splice(item._project.layers, [this],
+						item._index + (above ? 1 : -1), 0);
+				this._setProject(item._project);
+				return true;
+			}
+			return this.base(item);
+		};
+	}
+
+	return {
+		insertAbove: insert(true),
+
+		insertBelow: insert(false)
+	};
+});
+
+var PlacedItem = this.PlacedItem = Item.extend({
+	_boundsType: { bounds: 'strokeBounds' }
+});
+
+var Raster = this.Raster = PlacedItem.extend({
+	_boundsType: 'bounds',
+
+	initialize: function(object, pointOrMatrix) {
+		this.base(pointOrMatrix);
+		if (object.getContext) {
+			this.setCanvas(object);
+		} else {
+			if (typeof object === 'string')
+				object = document.getElementById(object);
+			this.setImage(object);
+		}
+	},
+
+	clone: function() {
+		var image = this._image;
+		if (!image) {
+			image = CanvasProvider.getCanvas(this._size);
+			image.getContext('2d').drawImage(this._canvas, 0, 0);
+		}
+		var copy = new Raster(image);
+		return this._clone(copy);
+	},
+
+	getSize: function() {
+		return this._size;
+	},
+
+	setSize: function() {
+		var size = Size.read(arguments),
+			image = this.getImage();
+		this.setCanvas(CanvasProvider.getCanvas(size));
+		this.getContext(true).drawImage(image, 0, 0, size.width, size.height);
+	},
+
+	getWidth: function() {
+		return this._size.width;
+	},
+
+	getHeight: function() {
+		return this._size.height;
+	},
+
+	getPpi: function() {
+		var matrix = this._matrix,
+			orig = new Point(0, 0).transform(matrix),
+			u = new Point(1, 0).transform(matrix).subtract(orig),
+			v = new Point(0, 1).transform(matrix).subtract(orig);
+		return Size.create(
+			72 / u.getLength(),
+			72 / v.getLength()
+		);
+	},
+
+	getContext: function() {
+		if (!this._context)
+			this._context = this.getCanvas().getContext('2d');
+		if (arguments[0])
+			this._changed(Change.PIXELS);
+		return this._context;
+	},
+
+	setContext: function(context) {
+		this._context = context;
+	},
+
+	getCanvas: function() {
+		if (!this._canvas) {
+			this._canvas = CanvasProvider.getCanvas(this._size);
+			if (this._image)
+				this.getContext(true).drawImage(this._image, 0, 0);
+		}
+		return this._canvas;
+	},
+
+	setCanvas: function(canvas) {
+		if (this._canvas)
+			CanvasProvider.returnCanvas(this._canvas);
+		this._canvas = canvas;
+		this._size = Size.create(canvas.width, canvas.height);
+		this._image = null;
+		this._context = null;
+		this._changed(Change.GEOMETRY | Change.PIXELS);
+	},
+
+	getImage: function() {
+		return this._image || this.getCanvas();
+	},
+
+	setImage: function(image) {
+		if (this._canvas)
+			CanvasProvider.returnCanvas(this._canvas);
+		this._image = image;
+		this._size = Size.create(image.naturalWidth, image.naturalHeight);
+		this._canvas = null;
+		this._context = null;
+		this._changed(Change.GEOMETRY);
+	},
+
+	getSubImage: function(rect) {
+		rect = Rectangle.read(arguments);
+		var canvas = CanvasProvider.getCanvas(rect.getSize());
+		canvas.getContext('2d').drawImage(this.getCanvas(), rect.x, rect.y,
+				canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
+		return canvas;
+	},
+
+	drawImage: function(image, point) {
+		point = Point.read(arguments, 1);
+		this.getContext(true).drawImage(image, point.x, point.y);
+	},
+
+	getAverageColor: function(object) {
+		var bounds, path;
+		if (!object) {
+			bounds = this.getBounds();
+		} else if (object instanceof PathItem) {
+			path = object;
+			bounds = object.getBounds();
+		} else if (object.width) {
+			bounds = new Rectangle(object);
+		} else if (object.x) {
+			bounds = Rectangle.create(object.x - 0.5, object.y - 0.5, 1, 1);
+		}
+		var sampleSize = 32,
+			width = Math.min(bounds.width, sampleSize),
+			height = Math.min(bounds.height, sampleSize);
+		var ctx = Raster._sampleContext;
+		if (!ctx) {
+			ctx = Raster._sampleContext = CanvasProvider.getCanvas(
+					new Size(sampleSize)).getContext('2d');
+		} else {
+			ctx.clearRect(0, 0, sampleSize, sampleSize);
+		}
+		ctx.save();
+		ctx.scale(width / bounds.width, height / bounds.height);
+		ctx.translate(-bounds.x, -bounds.y);
+		if (path)
+			path.draw(ctx, { clip: true });
+		this._matrix.applyToContext(ctx);
+		ctx.drawImage(this._canvas || this._image,
+				-this._size.width / 2, -this._size.height / 2);
+		ctx.restore();
+		var pixels = ctx.getImageData(0.5, 0.5, Math.ceil(width),
+				Math.ceil(height)).data,
+			channels = [0, 0, 0],
+			total = 0;
+		for (var i = 0, l = pixels.length; i < l; i += 4) {
+			var alpha = pixels[i + 3];
+			total += alpha;
+			alpha /= 255;
+			channels[0] += pixels[i] * alpha;
+			channels[1] += pixels[i + 1] * alpha;
+			channels[2] += pixels[i + 2] * alpha;
+		}
+		for (var i = 0; i < 3; i++)
+			channels[i] /= total;
+		return total ? Color.read(channels) : null;
+	},
+
+	getPixel: function(point) {
+		point = Point.read(arguments);
+		var pixels = this.getContext().getImageData(point.x, point.y, 1, 1).data,
+			channels = new Array(4);
+		for (var i = 0; i < 4; i++)
+			channels[i] = pixels[i] / 255;
+		return RgbColor.read(channels);
+	},
+
+	setPixel: function(point, color) {
+		var hasPoint = arguments.length == 2;
+		point = Point.read(arguments, 0, hasPoint ? 1 : 2);
+		color = Color.read(arguments, hasPoint ? 1 : 2);
+		var ctx = this.getContext(true),
+			imageData = ctx.createImageData(1, 1),
+			alpha = color.getAlpha();
+		imageData.data[0] = color.getRed() * 255;
+		imageData.data[1] = color.getGreen() * 255;
+		imageData.data[2] = color.getBlue() * 255;
+		imageData.data[3] = alpha != null ? alpha * 255 : 255;
+		ctx.putImageData(imageData, point.x, point.y);
+	},
+
+	createData: function(size) {
+		size = Size.read(arguments);
+		return this.getContext().createImageData(size.width, size.height);
+	},
+
+	getData: function(rect) {
+		rect = Rectangle.read(arguments);
+		if (rect.isEmpty())
+			rect = new Rectangle(this.getSize());
+		return this.getContext().getImageData(rect.x, rect.y,
+				rect.width, rect.height);
+	},
+
+	setData: function(data, point) {
+		point = Point.read(arguments, 1);
+		this.getContext(true).putImageData(data, point.x, point.y);
+	},
+
+	_getBounds: function(type, matrix) {
+		var rect = new Rectangle(this._size).setCenter(0, 0);
+		return matrix ? matrix._transformBounds(rect) : rect;
+	},
+
+	_hitTest: function(point, options) {
+		if (point.isInside(this._getBounds())) {
+			var that = this;
+			return new HitResult('pixel', that, {
+				offset: point.add(that._size.divide(2)).round(),
+				getColor: function() {
+					return that.getPixel(this.offset);
+				}
+			});
+		}
+	},
+
+	draw: function(ctx, param) {
+		ctx.drawImage(this._canvas || this._image,
+				-this._size.width / 2, -this._size.height / 2);
+	},
+
+	drawSelected: function(ctx, matrix) {
+		Item.drawSelectedBounds(new Rectangle(this._size).setCenter(0, 0), ctx,
+				matrix);
+	}
+});
+
+var PlacedSymbol = this.PlacedSymbol = PlacedItem.extend({
+	initialize: function(symbol, pointOrMatrix) {
+		this.base(pointOrMatrix);
+		this.setSymbol(symbol instanceof Symbol ? symbol : new Symbol(symbol));
+	},
+
+	getSymbol: function() {
+		return this._symbol;
+	},
+
+	setSymbol: function(symbol) {
+		if (this._symbol)
+			delete this._symbol._instances[this._id];
+		this._symbol = symbol;
+		symbol._instances[this._id] = this;
+	},
+
+	clone: function() {
+		return this._clone(new PlacedSymbol(this.symbol, this._matrix.clone()));
+	},
+
+	_getBounds: function(type, matrix) {
+		return this.symbol._definition._getCachedBounds(type, matrix);
+	},
+
+	draw: function(ctx, param) {
+		Item.draw(this.symbol._definition, ctx, param);
+	},
+
+	drawSelected: function(ctx, matrix) {
+		Item.drawSelectedBounds(this.symbol._definition.getBounds(), ctx,
+				matrix);
+	}
+
+});
+
+HitResult = Base.extend({
+	initialize: function(type, item, values) {
+		this.type = type;
+		this.item = item;
+		if (values)
+			this.inject(values);
+	},
+
+	statics: {
+		getOptions: function(point, options) {
+			return options && options._merged ? options : Base.merge({
+				point: Point.read(arguments, 0, 1),
+				type: null,
+				tolerance: 2,
+				fill: !options,
+				stroke: !options,
+				segments: !options,
+				handles: false,
+				ends: false,
+				center: false,
+				bounds: false,
+				guides: false,
+				selected: false,
+				_merged: true
+			}, options);
+		}
+	}
+});
+
+var Segment = this.Segment = Base.extend({
+	initialize: function(arg0, arg1, arg2, arg3, arg4, arg5) {
+		var count = arguments.length,
+			createPoint = SegmentPoint.create,
+			point, handleIn, handleOut;
+		if (count == 0) {
+		} else if (count == 1) {
+			if (arg0.point) {
+				point = arg0.point;
+				handleIn = arg0.handleIn;
+				handleOut = arg0.handleOut;
+			} else {
+				point = arg0;
+			}
+		} else if (count < 6) {
+			if (count == 2 && arg1.x === undefined) {
+				point = [ arg0, arg1 ];
+			} else {
+				point = arg0;
+				handleIn = arg1;
+				handleOut = arg2;
+			}
+		} else if (count == 6) {
+			point = [ arg0, arg1 ];
+			handleIn = [ arg2, arg3 ];
+			handleOut = [ arg4, arg5 ];
+		}
+		createPoint(this, '_point', point);
+		createPoint(this, '_handleIn', handleIn);
+		createPoint(this, '_handleOut', handleOut);
+	},
+
+	_changed: function(point) {
+		if (!this._path)
+			return;
+		var curve = this._path._curves && this.getCurve(), other;
+		if (curve) {
+			curve._changed();
+			if (other = (curve[point == this._point
+					|| point == this._handleIn && curve._segment1 == this
+					? 'getPrevious' : 'getNext']())) {
+				other._changed();
+			}
+		}
+		this._path._changed(Change.GEOMETRY);
+	},
+
+	getPoint: function() {
+		return this._point;
+	},
+
+	setPoint: function(point) {
+		point = Point.read(arguments);
+		this._point.set(point.x, point.y);
+	},
+
+	getHandleIn: function() {
+		return this._handleIn;
+	},
+
+	setHandleIn: function(point) {
+		point = Point.read(arguments);
+		this._handleIn.set(point.x, point.y);
+	},
+
+	getHandleOut: function() {
+		return this._handleOut;
+	},
+
+	setHandleOut: function(point) {
+		point = Point.read(arguments);
+		this._handleOut.set(point.x, point.y);
+	},
+
+	_isSelected: function(point) {
+		var state = this._selectionState;
+		return point == this._point ? !!(state & SelectionState.POINT)
+			: point == this._handleIn ? !!(state & SelectionState.HANDLE_IN)
+			: point == this._handleOut ? !!(state & SelectionState.HANDLE_OUT)
+			: false;
+	},
+
+	_setSelected: function(point, selected) {
+		var path = this._path,
+			selected = !!selected, 
+			state = this._selectionState || 0,
+			selection = [
+				!!(state & SelectionState.POINT),
+				!!(state & SelectionState.HANDLE_IN),
+				!!(state & SelectionState.HANDLE_OUT)
+			];
+		if (point == this._point) {
+			if (selected) {
+				selection[1] = selection[2] = false;
+			} else {
+				var previous = this.getPrevious(),
+					next = this.getNext();
+				selection[1] = previous && (previous._point.isSelected()
+						|| previous._handleOut.isSelected());
+				selection[2] = next && (next._point.isSelected()
+						|| next._handleIn.isSelected());
+			}
+			selection[0] = selected;
+		} else {
+			var index = point == this._handleIn ? 1 : 2;
+			if (selection[index] != selected) {
+				if (selected)
+					selection[0] = false;
+				selection[index] = selected;
+				path._changed(Change.ATTRIBUTE);
+			}
+		}
+		this._selectionState = (selection[0] ? SelectionState.POINT : 0)
+				| (selection[1] ? SelectionState.HANDLE_IN : 0)
+				| (selection[2] ? SelectionState.HANDLE_OUT : 0);
+		if (path && state != this._selectionState)
+			path._updateSelection(this, state, this._selectionState);
+	},
+
+	isSelected: function() {
+		return this._isSelected(this._point);
+	},
+
+	setSelected: function(selected) {
+		this._setSelected(this._point, selected);
+	},
+
+	getIndex: function() {
+		return this._index !== undefined ? this._index : null;
+	},
+
+	getPath: function() {
+		return this._path || null;
+	},
+
+	getCurve: function() {
+		if (this._path) {
+			var index = this._index;
+			if (!this._path._closed && index == this._path._segments.length - 1)
+				index--;
+			return this._path.getCurves()[index] || null;
+		}
+		return null;
+	},
+
+	getNext: function() {
+		var segments = this._path && this._path._segments;
+		return segments && (segments[this._index + 1]
+				|| this._path._closed && segments[0]) || null;
+	},
+
+	getPrevious: function() {
+		var segments = this._path && this._path._segments;
+		return segments && (segments[this._index - 1]
+				|| this._path._closed && segments[segments.length - 1]) || null;
+	},
+
+	reverse: function() {
+		return new Segment(this._point, this._handleOut, this._handleIn);
+	},
+
+	remove: function() {
+		return this._path ? !!this._path.removeSegment(this._index) : false;
+	},
+
+	clone: function() {
+		return new Segment(this._point, this._handleIn, this._handleOut);
+	},
+
+	equals: function(segment) {
+		return segment == this || segment
+				&& this._point.equals(segment._point)
+				&& this._handleIn.equals(segment._handleIn)
+				&& this._handleOut.equals(segment._handleOut);
+	},
+
+	toString: function() {
+		var parts = [ 'point: ' + this._point ];
+		if (!this._handleIn.isZero())
+			parts.push('handleIn: ' + this._handleIn);
+		if (!this._handleOut.isZero())
+			parts.push('handleOut: ' + this._handleOut);
+		return '{ ' + parts.join(', ') + ' }';
+	},
+
+	_transformCoordinates: function(matrix, coords, change) {
+		var point = this._point,
+			handleIn =  !change || !this._handleIn.isZero()
+					? this._handleIn : null,
+			handleOut = !change || !this._handleOut.isZero()
+					? this._handleOut : null,
+			x = point._x,
+			y = point._y,
+			i = 2;
+		coords[0] = x;
+		coords[1] = y;
+		if (handleIn) {
+			coords[i++] = handleIn._x + x;
+			coords[i++] = handleIn._y + y;
+		}
+		if (handleOut) {
+			coords[i++] = handleOut._x + x;
+			coords[i++] = handleOut._y + y;
+		}
+		if (!matrix)
+			return;
+		matrix._transformCoordinates(coords, 0, coords, 0, i / 2);
+		x = coords[0];
+		y = coords[1];
+		if (change) {
+			point._x = x;
+			point._y = y;
+			i  = 2;
+			if (handleIn) {
+				handleIn._x = coords[i++] - x;
+				handleIn._y = coords[i++] - y;
+			}
+			if (handleOut) {
+				handleOut._x = coords[i++] - x;
+				handleOut._y = coords[i++] - y;
+			}
+		} else {
+			if (!handleIn) {
+				coords[i++] = x;
+				coords[i++] = y;
+			}
+			if (!handleOut) {
+				coords[i++] = x;
+				coords[i++] = y;
+			}
+		}
+	}
+});
+
+var SegmentPoint = Point.extend({
+	set: function(x, y) {
+		this._x = x;
+		this._y = y;
+		this._owner._changed(this);
+		return this;
+	},
+
+	getX: function() {
+		return this._x;
+	},
+
+	setX: function(x) {
+		this._x = x;
+		this._owner._changed(this);
+	},
+
+	getY: function() {
+		return this._y;
+	},
+
+	setY: function(y) {
+		this._y = y;
+		this._owner._changed(this);
+	},
+
+	isZero: function() {
+		return this._x == 0 && this._y == 0;
+	},
+
+	setSelected: function(selected) {
+		this._owner._setSelected(this, selected);
+	},
+
+	isSelected: function() {
+		return this._owner._isSelected(this);
+	},
+
+	statics: {
+		create: function(segment, key, pt) {
+			var point = new SegmentPoint(SegmentPoint.dont),
+				x, y, selected;
+			if (!pt) {
+				x = y = 0;
+			} else if ((x = pt[0]) !== undefined) { 
+				y = pt[1];
+			} else {
+				if ((x = pt.x) === undefined) {
+					pt = Point.read(arguments, 2, 1);
+					x = pt.x;
+				}
+				y = pt.y;
+				selected = pt.selected;
+			}
+			point._x = x;
+			point._y = y;
+			point._owner = segment;
+			segment[key] = point;
+			if (selected)
+				point.setSelected(true);
+			return point;
+		}
+	}
+});
+
+var SelectionState = {
+	HANDLE_IN: 1,
+	HANDLE_OUT: 2,
+	POINT: 4
+};
+
+var Curve = this.Curve = Base.extend({
+	initialize: function(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7) {
+		var count = arguments.length;
+		if (count == 0) {
+			this._segment1 = new Segment();
+			this._segment2 = new Segment();
+		} else if (count == 1) {
+			this._segment1 = new Segment(arg0.segment1);
+			this._segment2 = new Segment(arg0.segment2);
+		} else if (count == 2) {
+			this._segment1 = new Segment(arg0);
+			this._segment2 = new Segment(arg1);
+		} else if (count == 4) {
+			this._segment1 = new Segment(arg0, null, arg1);
+			this._segment2 = new Segment(arg3, arg2, null);
+		} else if (count == 8) {
+			var p1 = Point.create(arg0, arg1),
+				p2 = Point.create(arg6, arg7);
+			this._segment1 = new Segment(p1, null,
+					Point.create(arg2, arg3).subtract(p1));
+			this._segment2 = new Segment(p2,
+					Point.create(arg4, arg5).subtract(p2), null);
+		}
+	},
+
+	_changed: function() {
+		delete this._length;
+	},
+
+	getPoint1: function() {
+		return this._segment1._point;
+	},
+
+	setPoint1: function(point) {
+		point = Point.read(arguments);
+		this._segment1._point.set(point.x, point.y);
+	},
+
+	getPoint2: function() {
+		return this._segment2._point;
+	},
+
+	setPoint2: function(point) {
+		point = Point.read(arguments);
+		this._segment2._point.set(point.x, point.y);
+	},
+
+	getHandle1: function() {
+		return this._segment1._handleOut;
+	},
+
+	setHandle1: function(point) {
+		point = Point.read(arguments);
+		this._segment1._handleOut.set(point.x, point.y);
+	},
+
+	getHandle2: function() {
+		return this._segment2._handleIn;
+	},
+
+	setHandle2: function(point) {
+		point = Point.read(arguments);
+		this._segment2._handleIn.set(point.x, point.y);
+	},
+
+	getSegment1: function() {
+		return this._segment1;
+	},
+
+	getSegment2: function() {
+		return this._segment2;
+	},
+
+	getPath: function() {
+		return this._path;
+	},
+
+	getIndex: function() {
+		return this._segment1._index;
+	},
+
+	getNext: function() {
+		var curves = this._path && this._path._curves;
+		return curves && (curves[this._segment1._index + 1]
+				|| this._path._closed && curves[0]) || null;
+	},
+
+	getPrevious: function() {
+		var curves = this._path && this._path._curves;
+		return curves && (curves[this._segment1._index - 1]
+				|| this._path._closed && curves[curves.length - 1]) || null;
+	},
+
+	isSelected: function() {
+		return this.getHandle1().isSelected() && this.getHandle2().isSelected();
+	},
+
+	setSelected: function(selected) {
+		this.getHandle1().setSelected(selected);
+		this.getHandle2().setSelected(selected);
+	},
+
+	getValues: function() {
+		return Curve.getValues(this._segment1, this._segment2);
+	},
+
+	getPoints: function() {
+		var coords = this.getValues(),
+			points = [];
+		for (var i = 0; i < 8; i += 2)
+			points.push(Point.create(coords[i], coords[i + 1]));
+		return points;
+	},
+
+	getLength: function() {
+		var from = arguments[0],
+			to = arguments[1];
+			fullLength = arguments.length == 0 || from == 0 && to == 1;
+		if (fullLength && this._length != null)
+			return this._length;
+		var length = Curve.getLength(this.getValues(), from, to);
+		if (fullLength)
+			this._length = length;
+		return length;
+	},
+
+	getPart: function(from, to) {
+		return new Curve(Curve.getPart(this.getValues(), from, to));
+	},
+
+	isLinear: function() {
+		return this._segment1._handleOut.isZero()
+				&& this._segment2._handleIn.isZero();
+	},
+
+	getParameterAt: function(offset, start) {
+		return Curve.getParameterAt(this.getValues(), offset,
+				start !== undefined ? start : offset < 0 ? 1 : 0);
+	},
+
+	getPoint: function(parameter) {
+		return Curve.evaluate(this.getValues(), parameter, 0);
+	},
+
+	getTangent: function(parameter) {
+		return Curve.evaluate(this.getValues(), parameter, 1);
+	},
+
+	getNormal: function(parameter) {
+		return Curve.evaluate(this.getValues(), parameter, 2);
+	},
+
+	getParameter: function(point) {
+		point = Point.read(point);
+		return Curve.getParameter(this.getValues(), point.x, point.y);
+	},
+
+	getCrossings: function(point, roots) {
+		var vals = this.getValues(),
+			num = Curve.solveCubic(vals, 1, point.y, roots),
+			crossings = 0;
+		for (var i = 0; i < num; i++) {
+			var t = roots[i];
+			if (t >= 0 && t < 1 && Curve.evaluate(vals, t, 0).x > point.x) {
+				if (t < Numerical.TOLERANCE && Curve.evaluate(
+							this.getPrevious().getValues(), 1, 1).y
+						* Curve.evaluate(vals, t, 1).y >= 0)
+					continue;
+				crossings++;
+			}
+		}
+		return crossings;
+	},
+
+	reverse: function() {
+		return new Curve(this._segment2.reverse(), this._segment1.reverse());
+	},
+
+	clone: function() {
+		return new Curve(this._segment1, this._segment2);
+	},
+
+	toString: function() {
+		var parts = [ 'point1: ' + this._segment1._point ];
+		if (!this._segment1._handleOut.isZero())
+			parts.push('handle1: ' + this._segment1._handleOut);
+		if (!this._segment2._handleIn.isZero())
+			parts.push('handle2: ' + this._segment2._handleIn);
+		parts.push('point2: ' + this._segment2._point);
+		return '{ ' + parts.join(', ') + ' }';
+	},
+
+	statics: {
+		create: function(path, segment1, segment2) {
+			var curve = new Curve(Curve.dont);
+			curve._path = path;
+			curve._segment1 = segment1;
+			curve._segment2 = segment2;
+			return curve;
+		},
+
+		getValues: function(segment1, segment2) {
+			var p1 = segment1._point,
+				h1 = segment1._handleOut,
+				h2 = segment2._handleIn,
+				p2 = segment2._point;
+    		return [
+    			p1._x, p1._y,
+    			p1._x + h1._x, p1._y + h1._y,
+    			p2._x + h2._x, p2._y + h2._y,
+    			p2._x, p2._y
+    		];
+		},
+
+		evaluate: function(v, t, type) {
+			var p1x = v[0], p1y = v[1],
+				c1x = v[2], c1y = v[3],
+				c2x = v[4], c2y = v[5],
+				p2x = v[6], p2y = v[7],
+				x, y;
+
+			if (type == 0 && (t == 0 || t == 1)) {
+				x = t == 0 ? p1x : p2x;
+				y = t == 0 ? p1y : p2y;
+			} else {
+				var tMin = Numerical.TOLERANCE;
+				if (t < tMin && c1x == p1x && c1y == p1y)
+					t = tMin;
+				else if (t > 1 - tMin && c2x == p2x && c2y == p2y)
+					t = 1 - tMin;
+				var cx = 3 * (c1x - p1x),
+					bx = 3 * (c2x - c1x) - cx,
+					ax = p2x - p1x - cx - bx,
+
+					cy = 3 * (c1y - p1y),
+					by = 3 * (c2y - c1y) - cy,
+					ay = p2y - p1y - cy - by;
+
+				switch (type) {
+				case 0: 
+					x = ((ax * t + bx) * t + cx) * t + p1x;
+					y = ((ay * t + by) * t + cy) * t + p1y;
+					break;
+				case 1: 
+				case 2: 
+					x = (3 * ax * t + 2 * bx) * t + cx;
+					y = (3 * ay * t + 2 * by) * t + cy;
+					break;
+				}
+			}
+			return type == 2 ? new Point(y, -x) : new Point(x, y);
+		},
+
+		subdivide: function(v, t) {
+			var p1x = v[0], p1y = v[1],
+				c1x = v[2], c1y = v[3],
+				c2x = v[4], c2y = v[5],
+				p2x = v[6], p2y = v[7];
+			if (t === undefined)
+				t = 0.5;
+			var u = 1 - t,
+				p3x = u * p1x + t * c1x, p3y = u * p1y + t * c1y,
+				p4x = u * c1x + t * c2x, p4y = u * c1y + t * c2y,
+				p5x = u * c2x + t * p2x, p5y = u * c2y + t * p2y,
+				p6x = u * p3x + t * p4x, p6y = u * p3y + t * p4y,
+				p7x = u * p4x + t * p5x, p7y = u * p4y + t * p5y,
+				p8x = u * p6x + t * p7x, p8y = u * p6y + t * p7y;
+			return [
+				[p1x, p1y, p3x, p3y, p6x, p6y, p8x, p8y], 
+				[p8x, p8y, p7x, p7y, p5x, p5y, p2x, p2y] 
+			];
+		},
+
+		solveCubic: function (v, coord, val, roots) {
+			var p1 = v[coord],
+				c1 = v[coord + 2],
+				c2 = v[coord + 4],
+				p2 = v[coord + 6],
+				c = 3 * (c1 - p1),
+				b = 3 * (c2 - c1) - c,
+				a = p2 - p1 - c - b;
+			return Numerical.solveCubic(a, b, c, p1 - val, roots,
+					Numerical.TOLERANCE);
+		},
+
+		getParameter: function(v, x, y) {
+			var txs = [],
+				tys = [],
+				sx = Curve.solveCubic(v, 0, x, txs),
+				sy = Curve.solveCubic(v, 1, y, tys),
+				tx, ty;
+			for (var cx = 0;  sx == -1 || cx < sx;) {
+				if (sx == -1 || (tx = txs[cx++]) >= 0 && tx <= 1) {
+					for (var cy = 0; sy == -1 || cy < sy;) {
+						if (sy == -1 || (ty = tys[cy++]) >= 0 && ty <= 1) {
+							if (sx == -1) tx = ty;
+							else if (sy == -1) ty = tx;
+							if (Math.abs(tx - ty) < Numerical.TOLERANCE)
+								return (tx + ty) * 0.5;
+						}
+					}
+					if (sx == -1)
+						break;
+				}
+			}
+			return null;
+		},
+
+		getPart: function(v, from, to) {
+			if (from > 0)
+				v = Curve.subdivide(v, from)[1]; 
+			if (to < 1)
+				v = Curve.subdivide(v, (to - from) / (1 - from))[0]; 
+			return v;
+		},
+
+		isFlatEnough: function(v) {
+			var p1x = v[0], p1y = v[1],
+				c1x = v[2], c1y = v[3],
+				c2x = v[4], c2y = v[5],
+				p2x = v[6], p2y = v[7],
+				ux = 3 * c1x - 2 * p1x - p2x,
+				uy = 3 * c1y - 2 * p1y - p2y,
+				vx = 3 * c2x - 2 * p2x - p1x,
+				vy = 3 * c2y - 2 * p2y - p1y;
+			return Math.max(ux * ux, vx * vx) + Math.max(uy * uy, vy * vy) < 1;
+		}
+	}
+}, new function() { 
+
+	function getLengthIntegrand(v) {
+		var p1x = v[0], p1y = v[1],
+			c1x = v[2], c1y = v[3],
+			c2x = v[4], c2y = v[5],
+			p2x = v[6], p2y = v[7],
+
+			ax = 9 * (c1x - c2x) + 3 * (p2x - p1x),
+			bx = 6 * (p1x + c2x) - 12 * c1x,
+			cx = 3 * (c1x - p1x),
+
+			ay = 9 * (c1y - c2y) + 3 * (p2y - p1y),
+			by = 6 * (p1y + c2y) - 12 * c1y,
+			cy = 3 * (c1y - p1y);
+
+		return function(t) {
+			var dx = (ax * t + bx) * t + cx,
+				dy = (ay * t + by) * t + cy;
+			return Math.sqrt(dx * dx + dy * dy);
+		};
+	}
+
+	function getIterations(a, b) {
+		return Math.max(2, Math.min(16, Math.ceil(Math.abs(b - a) * 32)));
+	}
+
+	return {
+		statics: true,
+
+		getLength: function(v, a, b) {
+			if (a === undefined)
+				a = 0;
+			if (b === undefined)
+				b = 1;
+			if (v[0] == v[2] && v[1] == v[3] && v[6] == v[4] && v[7] == v[5]) {
+				var dx = v[6] - v[0], 
+					dy = v[7] - v[1]; 
+				return (b - a) * Math.sqrt(dx * dx + dy * dy);
+			}
+			var ds = getLengthIntegrand(v);
+			return Numerical.integrate(ds, a, b, getIterations(a, b));
+		},
+
+		getParameterAt: function(v, offset, start) {
+			if (offset == 0)
+				return start;
+			var forward = offset > 0,
+				a = forward ? start : 0,
+				b = forward ? 1 : start,
+				offset = Math.abs(offset),
+				ds = getLengthIntegrand(v),
+				rangeLength = Numerical.integrate(ds, a, b,
+						getIterations(a, b));
+			if (offset >= rangeLength)
+				return forward ? b : a;
+			var guess = offset / rangeLength,
+				length = 0;
+			function f(t) {
+				var count = getIterations(start, t);
+				length += start < t
+						? Numerical.integrate(ds, start, t, count)
+						: -Numerical.integrate(ds, t, start, count);
+				start = t;
+				return length - offset;
+			}
+			return Numerical.findRoot(f, ds,
+					forward ? a + guess : b - guess, 
+					a, b, 16, Numerical.TOLERANCE);
+		}
+	};
+}, new function() { 
+
+	var maxDepth = 32,
+		epsilon = Math.pow(2, -maxDepth - 1);
+
+	var zCubic = [
+		[1.0, 0.6, 0.3, 0.1],
+		[0.4, 0.6, 0.6, 0.4],
+		[0.1, 0.3, 0.6, 1.0]
+	];
+
+	var xAxis = new Line(new Point(0, 0), new Point(1, 0));
+
+	function toBezierForm(v, point) {
+		var n = 3, 
+	 		degree = 5, 
+			c = [],
+			d = [],
+			cd = [],
+			w = [];
+		for(var i = 0; i <= n; i++) {
+			c[i] = v[i].subtract(point);
+			if (i < n)
+				d[i] = v[i + 1].subtract(v[i]).multiply(n);
+		}
+
+		for (var row = 0; row < n; row++) {
+			cd[row] = [];
+			for (var column = 0; column <= n; column++)
+				cd[row][column] = d[row].dot(c[column]);
+		}
+
+		for (var i = 0; i <= degree; i++)
+			w[i] = new Point(i / degree, 0);
+
+		for (k = 0; k <= degree; k++) {
+			var lb = Math.max(0, k - n + 1),
+				ub = Math.min(k, n);
+			for (var i = lb; i <= ub; i++) {
+				var j = k - i;
+				w[k].y += cd[j][i] * zCubic[j][i];
+			}
+		}
+
+		return w;
+	}
+
+	function findRoots(w, depth) {
+		switch (countCrossings(w)) {
+		case 0:
+			return [];
+		case 1:
+			if (depth >= maxDepth)
+				return [0.5 * (w[0].x + w[5].x)];
+			if (isFlatEnough(w)) {
+				var line = new Line(w[0], w[5], true);
+				return [ line.vector.getLength(true) <= Numerical.EPSILON
+						? line.point.x
+						: xAxis.intersect(line).x ];
+			}
+		}
+
+		var p = [[]],
+			left = [],
+			right = [];
+		for (var j = 0; j <= 5; j++)
+		 	p[0][j] = new Point(w[j]);
+
+		for (var i = 1; i <= 5; i++) {
+			p[i] = [];
+			for (var j = 0 ; j <= 5 - i; j++)
+				p[i][j] = p[i - 1][j].add(p[i - 1][j + 1]).multiply(0.5);
+		}
+		for (var j = 0; j <= 5; j++) {
+			left[j]  = p[j][0];
+			right[j] = p[5 - j][j];
+		}
+
+		return findRoots(left, depth + 1).concat(findRoots(right, depth + 1));
+	}
+
+	function countCrossings(v) {
+		var crossings = 0,
+			prevSign = null;
+		for (var i = 0, l = v.length; i < l; i++)  {
+			var sign = v[i].y < 0 ? -1 : 1;
+			if (prevSign != null && sign != prevSign)
+				crossings++;
+			prevSign = sign;
+		}
+		return crossings;
+	}
+
+	function isFlatEnough(v) {
+
+		var n = v.length - 1,
+			a = v[0].y - v[n].y,
+			b = v[n].x - v[0].x,
+			c = v[0].x * v[n].y - v[n].x * v[0].y,
+			maxAbove = 0,
+			maxBelow = 0;
+		for (var i = 1; i < n; i++) {
+			var val = a * v[i].x + b * v[i].y + c,
+				dist = val * val;
+			if (val < 0 && dist > maxBelow) {
+				maxBelow = dist;
+			} else if (dist > maxAbove) {
+				maxAbove = dist;
+			}
+		}
+		return Math.abs((maxAbove + maxBelow) / (2 * a * (a * a + b * b)))
+				< epsilon;
+	}
+
+	return {
+		getNearestLocation: function(point) {
+			var w = toBezierForm(this.getPoints(), point);
+			var roots = findRoots(w, 0).concat([0, 1]);
+			var minDist = Infinity,
+				minT,
+				minPoint;
+			for (var i = 0; i < roots.length; i++) {
+				var pt = this.getPoint(roots[i]),
+					dist = point.getDistance(pt, true);
+				if (dist < minDist) {
+					minDist = dist;
+					minT = roots[i];
+					minPoint = pt;
+				}
+			}
+			return new CurveLocation(this, minT, minPoint, Math.sqrt(minDist));
+		},
+
+		getNearestPoint: function(point) {
+			return this.getNearestLocation(point).getPoint();
+		}
+	};
+});
+
+CurveLocation = Base.extend({
+	initialize: function(curve, parameter, point, distance) {
+		this._curve = curve;
+		this._parameter = parameter;
+		this._point = point;
+		this._distance = distance;
+	},
+
+	getSegment: function() {
+		if (!this._segment) {
+			var curve = this._curve,
+				parameter = this.getParameter();
+			if (parameter == 0) {
+				this._segment = curve._segment1;
+			} else if (parameter == 1) {
+				this._segment = curve._segment2;
+			} else if (parameter == null) {
+				return null;
+			} else {
+				this._segment = curve.getLength(0, parameter)
+					< curve.getLength(parameter, 1)
+						? curve._segment1
+						: curve._segment2;
+			}
+		}
+		return this._segment;
+	},
+
+	getCurve: function() {
+		return this._curve;
+	},
+
+	getPath: function() {
+		return this._curve && this._curve._path;
+	},
+
+	getIndex: function() {
+		return this._curve && this._curve.getIndex();
+	},
+
+	getOffset: function() {
+		var path = this._curve && this._curve._path;
+		return path && path._getOffset(this);
+	},
+
+	getCurveOffset: function() {
+		var parameter = this.getParameter();
+		return parameter != null && this._curve
+				&& this._curve.getLength(0, parameter);
+	},
+
+	getParameter: function() {
+		if (this._parameter == null && this._curve && this._point)
+			this._parameter = this._curve.getParameterAt(this._point);
+		return this._parameter;
+	},
+
+	getPoint: function() {
+		if (!this._point && this._curve && this._parameter != null)
+			this._point = this._curve.getPoint(this._parameter);
+		return this._point;
+	},
+
+	getTangent: function() {
+		var parameter = this.getParameter();
+		return parameter != null && this._curve
+				&& this._curve.getTangent(parameter);
+	},
+
+	getNormal: function() {
+		var parameter = this.getParameter();
+		return parameter != null && this._curve
+				&& this._curve.getNormal(parameter);
+	},
+
+	getDistance: function() {
+		return this._distance;
+	},
+
+	toString: function() {
+		var parts = [],
+			point = this.getPoint();
+		if (point)
+			parts.push('point: ' + point);
+		var index = this.getIndex();
+		if (index != null)
+			parts.push('index: ' + index);
+		var parameter = this.getParameter();
+		if (parameter != null)
+			parts.push('parameter: ' + Base.formatNumber(parameter));
+		if (this._distance != null)
+			parts.push('distance: ' + Base.formatNumber(this._distance));
+		return '{ ' + parts.join(', ') + ' }';
+	}
+});
+
+var PathItem = this.PathItem = Item.extend({
+
+});
+
+var Path = this.Path = PathItem.extend({
+	initialize: function(segments) {
+		this.base();
+		this._closed = false;
+		this._selectedSegmentState = 0;
+		this.setSegments(!segments || !Array.isArray(segments)
+				|| typeof segments[0] !== 'object' ? arguments : segments);
+	},
+
+	clone: function() {
+		var copy = this._clone(new Path(this._segments));
+		copy._closed = this._closed;
+		if (this._clockwise !== undefined)
+			copy._clockwise = this._clockwise;
+		return copy;
+	},
+
+	_changed: function(flags) {
+		Item.prototype._changed.call(this, flags);
+		if (flags & ChangeFlag.GEOMETRY) {
+			delete this._length;
+			delete this._clockwise;
+			if (this._curves != null) {
+				for (var i = 0, l = this._curves.length; i < l; i++) {
+					this._curves[i]._changed(Change.GEOMETRY);
+				}
+			}
+		} else if (flags & ChangeFlag.STROKE) {
+			delete this._bounds;
+		}
+	},
+
+	getSegments: function() {
+		return this._segments;
+	},
+
+	setSegments: function(segments) {
+		if (!this._segments) {
+			this._segments = [];
+		} else {
+			this._selectedSegmentState = 0;
+			this._segments.length = 0;
+			if (this._curves)
+				delete this._curves;
+		}
+		this._add(Segment.readAll(segments));
+	},
+
+	getFirstSegment: function() {
+		return this._segments[0];
+	},
+
+	getLastSegment: function() {
+		return this._segments[this._segments.length - 1];
+	},
+
+	getCurves: function() {
+		if (!this._curves) {
+			var segments = this._segments,
+				length = segments.length;
+			if (!this._closed && length > 0)
+				length--;
+			this._curves = new Array(length);
+			for (var i = 0; i < length; i++)
+				this._curves[i] = Curve.create(this, segments[i],
+					segments[i + 1] || segments[0]);
+		}
+		return this._curves;
+	},
+
+	getFirstCurve: function() {
+		return this.getCurves()[0];
+	},
+
+	getLastCurve: function() {
+		var curves = this.getCurves();
+		return curves[curves.length - 1];
+	},
+
+	getClosed: function() {
+		return this._closed;
+	},
+
+	setClosed: function(closed) {
+		if (this._closed != (closed = !!closed)) {
+			this._closed = closed;
+			if (this._curves) {
+				var length = this._segments.length,
+					i;
+				if (!closed && length > 0)
+					length--;
+				this._curves.length = length;
+				if (closed)
+					this._curves[i = length - 1] = Curve.create(this,
+						this._segments[i], this._segments[0]);
+			}
+			this._changed(Change.GEOMETRY);
+		}
+	},
+
+	transform: function(matrix) {
+		return this.base(matrix, true);
+	},
+
+	getMatrix: function() {
+		return null;
+	},
+
+	setMatrix: function(matrix) {
+	},
+
+	_apply: function(matrix) {
+		var coords = new Array(6);
+		for (var i = 0, l = this._segments.length; i < l; i++) {
+			this._segments[i]._transformCoordinates(matrix, coords, true);
+		}
+		var style = this._style,
+			fillColor = style._fillColor,
+			strokeColor = style._strokeColor;
+		if (fillColor && fillColor.transform)
+			fillColor.transform(matrix);
+		if (strokeColor && strokeColor.transform)
+			strokeColor.transform(matrix);
+		return true;
+	},
+
+	_add: function(segs, index) {
+		var segments = this._segments,
+			curves = this._curves,
+			amount = segs.length,
+			append = index == null,
+			index = append ? segments.length : index,
+			fullySelected = this.isFullySelected();
+		for (var i = 0; i < amount; i++) {
+			var segment = segs[i];
+			if (segment._path) {
+				segment = segs[i] = new Segment(segment);
+			}
+			segment._path = this;
+			segment._index = index + i;
+			if (fullySelected)
+				segment._selectionState = SelectionState.POINT;
+			if (segment._selectionState)
+				this._updateSelection(segment, 0, segment._selectionState);
+		}
+		if (append) {
+			segments.push.apply(segments, segs);
+		} else {
+			segments.splice.apply(segments, [index, 0].concat(segs));
+			for (var i = index + amount, l = segments.length; i < l; i++) {
+				segments[i]._index = i;
+			}
+		}
+		if (curves && --index >= 0) {
+			curves.splice(index, 0, Curve.create(this, segments[index],
+				segments[index + 1]));
+			var curve = curves[index + amount];
+			if (curve) {
+				curve._segment1 = segments[index + amount];
+			}
+		}
+		this._changed(Change.GEOMETRY);
+		return segs;
+	},
+
+	add: function(segment1 ) {
+		return arguments.length > 1 && typeof segment1 !== 'number'
+			? this._add(Segment.readAll(arguments))
+			: this._add([ Segment.read(arguments) ])[0];
+	},
+
+	insert: function(index, segment1 ) {
+		return arguments.length > 2 && typeof segment1 !== 'number'
+			? this._add(Segment.readAll(arguments, 1), index)
+			: this._add([ Segment.read(arguments, 1) ], index)[0];
+	},
+
+	addSegment: function(segment) {
+		return this._add([ Segment.read(arguments) ])[0];
+	},
+
+	insertSegment: function(index, segment) {
+		return this._add([ Segment.read(arguments, 1) ], index)[0];
+	},
+
+	addSegments: function(segments) {
+		return this._add(Segment.readAll(segments));
+	},
+
+	insertSegments: function(index, segments) {
+		return this._add(Segment.readAll(segments), index);
+	},
+
+	removeSegment: function(index) {
+		var segments = this.removeSegments(index, index + 1);
+		return segments[0] || null;
+	},
+
+	removeSegments: function(from, to) {
+		from = from || 0;
+	 	to = Base.pick(to, this._segments.length);
+		var segments = this._segments,
+			curves = this._curves,
+			last = to >= segments.length,
+			removed = segments.splice(from, to - from),
+			amount = removed.length;
+		if (!amount)
+			return removed;
+		for (var i = 0; i < amount; i++) {
+			var segment = removed[i];
+			if (segment._selectionState)
+				this._updateSelection(segment, segment._selectionState, 0);
+			removed._index = removed._path = undefined;
+		}
+		for (var i = from, l = segments.length; i < l; i++)
+			segments[i]._index = i;
+		if (curves) {
+			curves.splice(from, amount);
+			var curve;
+			if (curve = curves[from - 1])
+				curve._segment2 = segments[from];
+			if (curve = curves[from])
+				curve._segment1 = segments[from];
+			if (last && this._closed && (curve = curves[curves.length - 1]))
+				curve._segment2 = segments[0];
+		}
+		this._changed(Change.GEOMETRY);
+		return removed;
+	},
+
+	isFullySelected: function() {
+		return this._selected && this._selectedSegmentState
+				== this._segments.length * SelectionState.POINT;
+	},
+
+	setFullySelected: function(selected) {
+		var length = this._segments.length;
+		this._selectedSegmentState = selected
+				? length * SelectionState.POINT : 0;
+		for (var i = 0; i < length; i++)
+			this._segments[i]._selectionState = selected
+					? SelectionState.POINT : 0;
+		this.setSelected(selected);
+	},
+
+	_updateSelection: function(segment, oldState, newState) {
+		segment._selectionState = newState;
+		var total = this._selectedSegmentState += newState - oldState;
+		if (total > 0)
+			this.setSelected(true);
+	},
+
+	flatten: function(maxDistance) {
+		var flattener = new PathFlattener(this),
+			pos = 0,
+			step = flattener.length / Math.ceil(flattener.length / maxDistance),
+			end = flattener.length + (this._closed ? -step : step) / 2;
+		var segments = [];
+		while (pos <= end) {
+			segments.push(new Segment(flattener.evaluate(pos, 0)));
+			pos += step;
+		}
+		this.setSegments(segments);
+	},
+
+	simplify: function(tolerance) {
+		if (this._segments.length > 2) {
+			var fitter = new PathFitter(this, tolerance || 2.5);
+			this.setSegments(fitter.fit());
+		}
+	},
+
+	isClockwise: function() {
+		if (this._clockwise !== undefined)
+			return this._clockwise;
+		var sum = 0,
+			xPre, yPre;
+		function edge(x, y) {
+			if (xPre !== undefined)
+				sum += (xPre - x) * (y + yPre);
+			xPre = x;
+			yPre = y;
+		}
+		for (var i = 0, l = this._segments.length; i < l; i++) {
+			var seg1 = this._segments[i],
+				seg2 = this._segments[i + 1 < l ? i + 1 : 0],
+				point1 = seg1._point,
+				handle1 = seg1._handleOut,
+				handle2 = seg2._handleIn,
+				point2 = seg2._point;
+			edge(point1._x, point1._y);
+			edge(point1._x + handle1._x, point1._y + handle1._y);
+			edge(point2._x + handle2._x, point2._y + handle2._y);
+			edge(point2._x, point2._y);
+		}
+		return sum > 0;
+	},
+
+	setClockwise: function(clockwise) {
+		if (this.isClockwise() != (clockwise = !!clockwise)) {
+			this.reverse();
+			this._clockwise = clockwise;
+		}
+	},
+
+	reverse: function() {
+		this._segments.reverse();
+		for (var i = 0, l = this._segments.length; i < l; i++) {
+			var segment = this._segments[i];
+			var handleIn = segment._handleIn;
+			segment._handleIn = segment._handleOut;
+			segment._handleOut = handleIn;
+			segment._index = i;
+		}
+		if (this._clockwise !== undefined)
+			this._clockwise = !this._clockwise;
+	},
+
+	join: function(path) {
+		if (path) {
+			var segments = path._segments,
+				last1 = this.getLastSegment(),
+				last2 = path.getLastSegment();
+			if (last1._point.equals(last2._point))
+				path.reverse();
+			var first2 = path.getFirstSegment();
+			if (last1._point.equals(first2._point)) {
+				last1.setHandleOut(first2._handleOut);
+				this._add(segments.slice(1));
+			} else {
+				var first1 = this.getFirstSegment();
+				if (first1._point.equals(first2._point))
+					path.reverse();
+				last2 = path.getLastSegment();
+				if (first1._point.equals(last2._point)) {
+					first1.setHandleIn(last2._handleIn);
+					this._add(segments.slice(0, segments.length - 1), 0);
+				} else {
+					this._add(segments.slice(0));
+				}
+			}
+			path.remove();
+			var first1 = this.getFirstSegment();
+			last1 = this.getLastSegment();
+			if (last1._point.equals(first1._point)) {
+				first1.setHandleIn(last1._handleIn);
+				last1.remove();
+				this.setClosed(true);
+			}
+			this._changed(Change.GEOMETRY);
+			return true;
+		}
+		return false;
+	},
+
+	getLength: function() {
+		if (this._length == null) {
+			var curves = this.getCurves();
+			this._length = 0;
+			for (var i = 0, l = curves.length; i < l; i++)
+				this._length += curves[i].getLength();
+		}
+		return this._length;
+	},
+
+	_getOffset: function(location) {
+		var index = location && location.getIndex();
+		if (index != null) {
+			var curves = this.getCurves(),
+				offset = 0;
+			for (var i = 0; i < index; i++)
+				offset += curves[i].getLength();
+			var curve = curves[index];
+			return offset + curve.getLength(0, location.getParameter());
+		}
+		return null;
+	},
+
+	getLocation: function(point) {
+		var curves = this.getCurves();
+		for (var i = 0, l = curves.length; i < l; i++) {
+			var curve = curves[i];
+			var t = curve.getParameter(point);
+			if (t != null)
+				return new CurveLocation(curve, t);
+		}
+		return null;
+	},
+
+	getLocationAt: function(offset, isParameter) {
+		var curves = this.getCurves(),
+			length = 0;
+		if (isParameter) {
+			var index = ~~offset; 
+			return new CurveLocation(curves[index], offset - index);
+		}
+		for (var i = 0, l = curves.length; i < l; i++) {
+			var start = length,
+				curve = curves[i];
+			length += curve.getLength();
+			if (length >= offset) {
+				return new CurveLocation(curve,
+						curve.getParameterAt(offset - start));
+			}
+		}
+		if (offset <= this.getLength())
+			return new CurveLocation(curves[curves.length - 1], 1);
+		return null;
+	},
+
+	getPointAt: function(offset, isParameter) {
+		var loc = this.getLocationAt(offset, isParameter);
+		return loc && loc.getPoint();
+	},
+
+	getTangentAt: function(offset, isParameter) {
+		var loc = this.getLocationAt(offset, isParameter);
+		return loc && loc.getTangent();
+	},
+
+	getNormalAt: function(offset, isParameter) {
+		var loc = this.getLocationAt(offset, isParameter);
+		return loc && loc.getNormal();
+	},
+
+	getNearestLocation: function(point) {
+		var curves = this.getCurves(),
+			minDist = Infinity,
+			minLoc = null;
+		for (var i = 0, l = curves.length; i < l; i++) {
+			var loc = curves[i].getNearestLocation(point);
+			if (loc._distance < minDist) {
+				minDist = loc._distance;
+				minLoc = loc;
+			}
+		}
+		return minLoc;
+	},
+
+	getNearestPoint: function(point) {
+		return this.getNearestLocation(point).getPoint();
+	},
+
+	contains: function(point) {
+		point = Point.read(arguments);
+		if (!this._closed || !this.getRoughBounds()._containsPoint(point))
+			return false;
+		var curves = this.getCurves(),
+			crossings = 0,
+			roots = [];
+		for (var i = 0, l = curves.length; i < l; i++)
+			crossings += curves[i].getCrossings(point, roots);
+		return (crossings & 1) == 1;
+	},
+
+	_hitTest: function(point, options) {
+		var style = this._style,
+			tolerance = options.tolerance || 0,
+			radius = (options.stroke && style._strokeColor
+					? style._strokeWidth / 2 : 0) + tolerance,
+			loc,
+			res;
+		var coords = [],
+			that = this;
+		function checkPoint(seg, pt, name) {
+			if (point.getDistance(pt) < tolerance)
+				return new HitResult(name, that, { segment: seg, point: pt });
+		}
+		function checkSegment(seg, ends) {
+			var point = seg._point;
+			return (ends || options.segments)
+					&& checkPoint(seg, point, 'segment')
+				|| (!ends && options.handles) && (
+					checkPoint(seg, point.add(seg._handleIn), 'handle-in') ||
+					checkPoint(seg, point.add(seg._handleOut), 'handle-out'));
+		}
+		if (options.ends && !options.segments && !this._closed) {
+			if (res = checkSegment(this.getFirstSegment(), true)
+					|| checkSegment(this.getLastSegment(), true))
+				return res;
+		} else if (options.segments || options.handles) {
+			for (var i = 0, l = this._segments.length; i < l; i++) {
+				if (res = checkSegment(this._segments[i]))
+					return res;
+			}
+		}
+		if (options.stroke && radius > 0)
+			loc = this.getNearestLocation(point);
+		if (!(loc && loc._distance <= radius) && options.fill
+				&& style._fillColor && this.contains(point))
+			return new HitResult('fill', this);
+		if (!loc && options.stroke && radius > 0)
+			loc = this.getNearestLocation(point);
+		if (loc && loc._distance <= radius)
+			return options.stroke
+					? new HitResult('stroke', this, { location: loc })
+					: new HitResult('fill', this);
+	}
+
+}, new function() { 
+
+	function drawHandles(ctx, segments, matrix) {
+		var coords = new Array(6);
+		for (var i = 0, l = segments.length; i < l; i++) {
+			var segment = segments[i];
+			segment._transformCoordinates(matrix, coords, false);
+			var state = segment._selectionState,
+				selected = state & SelectionState.POINT,
+				pX = coords[0],
+				pY = coords[1];
+
+			function drawHandle(index) {
+				var hX = coords[index],
+					hY = coords[index + 1];
+				if (pX != hX || pY != hY) {
+					ctx.beginPath();
+					ctx.moveTo(pX, pY);
+					ctx.lineTo(hX, hY);
+					ctx.stroke();
+					ctx.beginPath();
+					ctx.arc(hX, hY, 1.75, 0, Math.PI * 2, true);
+					ctx.fill();
+				}
+			}
+
+			if (selected || (state & SelectionState.HANDLE_IN))
+				drawHandle(2);
+			if (selected || (state & SelectionState.HANDLE_OUT))
+				drawHandle(4);
+			ctx.save();
+			ctx.beginPath();
+			ctx.rect(pX - 2, pY - 2, 4, 4);
+			ctx.fill();
+			if (!selected) {
+				ctx.beginPath();
+				ctx.rect(pX - 1, pY - 1, 2, 2);
+				ctx.fillStyle = '#ffffff';
+				ctx.fill();
+			}
+			ctx.restore();
+		}
+	}
+
+	function drawSegments(ctx, path, matrix) {
+		var segments = path._segments,
+			length = segments.length,
+			coords = new Array(6),
+			first = true,
+			pX, pY,
+			inX, inY,
+			outX, outY;
+
+		function drawSegment(i) {
+			var segment = segments[i];
+			if (matrix) {
+				segment._transformCoordinates(matrix, coords, false);
+				pX = coords[0];
+				pY = coords[1];
+			} else {
+				var point = segment._point;
+				pX = point._x;
+				pY = point._y;
+			}
+			if (first) {
+				ctx.moveTo(pX, pY);
+				first = false;
+			} else {
+				if (matrix) {
+					inX = coords[2];
+					inY = coords[3];
+				} else {
+					var handle = segment._handleIn;
+					inX = pX + handle._x;
+					inY = pY + handle._y;
+				}
+				if (inX == pX && inY == pY && outX == pX && outY == pY) {
+					ctx.lineTo(pX, pY);
+				} else {
+					ctx.bezierCurveTo(outX, outY, inX, inY, pX, pY);
+				}
+			}
+			if (matrix) {
+				outX = coords[4];
+				outY = coords[5];
+			} else {
+				var handle = segment._handleOut;
+				outX = pX + handle._x;
+				outY = pY + handle._y;
+			}
+		}
+
+		for (var i = 0; i < length; i++)
+			drawSegment(i);
+		if (path._closed && length > 1)
+			drawSegment(0);
+	}
+
+	return {
+		draw: function(ctx, param) {
+			if (!param.compound)
+				ctx.beginPath();
+
+			var style = this._style,
+				fillColor = style._fillColor,
+				strokeColor = style._strokeColor,
+				dashArray = style._dashArray,
+				hasDash = strokeColor && dashArray && dashArray.length;
+
+			if (param.compound || this._clipMask || fillColor
+					|| strokeColor && !hasDash) {
+				drawSegments(ctx, this);
+			}
+
+			if (this._closed)
+				ctx.closePath();
+
+			if (this._clipMask) {
+				ctx.clip();
+			} else if (!param.compound && (fillColor || strokeColor)) {
+				ctx.save();
+				this._setStyles(ctx);
+				if (fillColor)
+					ctx.fill();
+				if (strokeColor) {
+					if (hasDash) {
+						ctx.beginPath();
+						var flattener = new PathFlattener(this),
+							from = style._dashOffset, to,
+							i = 0;
+						while (from < flattener.length) {
+							to = from + dashArray[(i++) % dashArray.length];
+							flattener.drawPart(ctx, from, to);
+							from = to + dashArray[(i++) % dashArray.length];
+						}
+					}
+					ctx.stroke();
+				}
+				ctx.restore();
+			}
+		},
+
+		drawSelected: function(ctx, matrix) {
+			ctx.beginPath();
+			drawSegments(ctx, this, matrix);
+			ctx.stroke();
+			drawHandles(ctx, this._segments, matrix);
+		}
+	};
+}, new function() { 
+
+	function getFirstControlPoints(rhs) {
+		var n = rhs.length,
+			x = [], 
+			tmp = [], 
+			b = 2;
+		x[0] = rhs[0] / b;
+		for (var i = 1; i < n; i++) {
+			tmp[i] = 1 / b;
+			b = (i < n - 1 ? 4 : 2) - tmp[i];
+			x[i] = (rhs[i] - x[i - 1]) / b;
+		}
+		for (var i = 1; i < n; i++) {
+			x[n - i - 1] -= tmp[n - i] * x[n - i];
+		}
+		return x;
+	};
+
+	return {
+		smooth: function() {
+			var segments = this._segments,
+				size = segments.length,
+				n = size,
+				overlap;
+
+			if (size <= 2)
+				return;
+
+			if (this._closed) {
+				overlap = Math.min(size, 4);
+				n += Math.min(size, overlap) * 2;
+			} else {
+				overlap = 0;
+			}
+			var knots = [];
+			for (var i = 0; i < size; i++)
+				knots[i + overlap] = segments[i]._point;
+			if (this._closed) {
+				for (var i = 0; i < overlap; i++) {
+					knots[i] = segments[i + size - overlap]._point;
+					knots[i + size + overlap] = segments[i]._point;
+				}
+			} else {
+				n--;
+			}
+			var rhs = [];
+
+			for (var i = 1; i < n - 1; i++)
+				rhs[i] = 4 * knots[i]._x + 2 * knots[i + 1]._x;
+			rhs[0] = knots[0]._x + 2 * knots[1]._x;
+			rhs[n - 1] = 3 * knots[n - 1]._x;
+			var x = getFirstControlPoints(rhs);
+
+			for (var i = 1; i < n - 1; i++)
+				rhs[i] = 4 * knots[i]._y + 2 * knots[i + 1]._y;
+			rhs[0] = knots[0]._y + 2 * knots[1]._y;
+			rhs[n - 1] = 3 * knots[n - 1]._y;
+			var y = getFirstControlPoints(rhs);
+
+			if (this._closed) {
+				for (var i = 0, j = size; i < overlap; i++, j++) {
+					var f1 = (i / overlap);
+					var f2 = 1 - f1;
+					x[j] = x[i] * f1 + x[j] * f2;
+					y[j] = y[i] * f1 + y[j] * f2;
+					var ie = i + overlap, je = j + overlap;
+					x[je] = x[ie] * f2 + x[je] * f1;
+					y[je] = y[ie] * f2 + y[je] * f1;
+				}
+				n--;
+			}
+			var handleIn = null;
+			for (var i = overlap; i <= n - overlap; i++) {
+				var segment = segments[i - overlap];
+				if (handleIn)
+					segment.setHandleIn(handleIn.subtract(segment._point));
+				if (i < n) {
+					segment.setHandleOut(
+							Point.create(x[i], y[i]).subtract(segment._point));
+					if (i < n - 1)
+						handleIn = Point.create(
+								2 * knots[i + 1]._x - x[i + 1],
+								2 * knots[i + 1]._y - y[i + 1]);
+					else
+						handleIn = Point.create(
+								(knots[n]._x + x[n - 1]) / 2,
+								(knots[n]._y + y[n - 1]) / 2);
+				}
+			}
+			if (this._closed && handleIn) {
+				var segment = this._segments[0];
+				segment.setHandleIn(handleIn.subtract(segment._point));
+			}
+		}
+	};
+}, new function() { 
+	function getCurrentSegment(that) {
+		var segments = that._segments;
+		if (segments.length == 0)
+			throw new Error('Use a moveTo() command first');
+		return segments[segments.length - 1];
+	}
+
+	return {
+		moveTo: function(point) {
+			if (!this._segments.length)
+				this._add([ new Segment(Point.read(arguments)) ]);
+		},
+
+		moveBy: function(point) {
+			throw new Error('moveBy() is unsupported on Path items.');
+		},
+
+		lineTo: function(point) {
+			this._add([ new Segment(Point.read(arguments)) ]);
+		},
+
+		cubicCurveTo: function(handle1, handle2, to) {
+			handle1 = Point.read(arguments, 0, 1);
+			handle2 = Point.read(arguments, 1, 1);
+			to = Point.read(arguments, 2, 1);
+			var current = getCurrentSegment(this);
+			current.setHandleOut(handle1.subtract(current._point));
+			this._add([ new Segment(to, handle2.subtract(to)) ]);
+		},
+
+		quadraticCurveTo: function(handle, to) {
+			handle = Point.read(arguments, 0, 1);
+			to = Point.read(arguments, 1, 1);
+			var current = getCurrentSegment(this)._point;
+			this.cubicCurveTo(
+				handle.add(current.subtract(handle).multiply(1/3)),
+				handle.add(to.subtract(handle).multiply(1/3)),
+				to
+			);
+		},
+
+		curveTo: function(through, to, parameter) {
+			through = Point.read(arguments, 0, 1);
+			to = Point.read(arguments, 1, 1);
+			var t = Base.pick(parameter, 0.5),
+				t1 = 1 - t,
+				current = getCurrentSegment(this)._point,
+				handle = through.subtract(current.multiply(t1 * t1))
+					.subtract(to.multiply(t * t)).divide(2 * t * t1);
+			if (handle.isNaN())
+				throw new Error(
+					'Cannot put a curve through points with parameter = ' + t);
+			this.quadraticCurveTo(handle, to);
+		},
+
+		arcTo: function(to, clockwise ) {
+			var current = getCurrentSegment(this),
+				from = current._point,
+				through;
+			if (clockwise === undefined)
+				clockwise = true;
+			if (typeof clockwise === 'boolean') {
+				to = Point.read(arguments, 0, 1);
+				var middle = from.add(to).divide(2),
+				through = middle.add(middle.subtract(from).rotate(
+						clockwise ? -90 : 90));
+			} else {
+				through = Point.read(arguments, 0, 1);
+				to = Point.read(arguments, 1, 1);
+			}
+			var l1 = new Line(from.add(through).divide(2),
+					through.subtract(from).rotate(90)),
+			 	l2 = new Line(through.add(to).divide(2),
+					to.subtract(through).rotate(90)),
+				center = l1.intersect(l2),
+				line = new Line(from, to, true),
+				throughSide = line.getSide(through);
+			if (!center) {
+				if (!throughSide)
+					return this.lineTo(to);
+				throw new Error("Cannot put an arc through the given points: "
+					+ [from, through, to]);
+			}
+			var vector = from.subtract(center),
+				radius = vector.getLength(),
+				extent = vector.getDirectedAngle(to.subtract(center)),
+				centerSide = line.getSide(center);
+			if (centerSide == 0) {
+				extent = throughSide * Math.abs(extent);
+			} else if (throughSide == centerSide) {
+				extent -= 360 * (extent < 0 ? -1 : 1);
+			}
+			var ext = Math.abs(extent),
+				count =  ext >= 360 ? 4 : Math.ceil(ext / 90),
+				inc = extent / count,
+				half = inc * Math.PI / 360,
+				z = 4 / 3 * Math.sin(half) / (1 + Math.cos(half)),
+				segments = [];
+			for (var i = 0; i <= count; i++) {
+				var pt = i < count ? center.add(vector) : to;
+				var out = i < count ? vector.rotate(90).multiply(z) : null;
+				if (i == 0) {
+					current.setHandleOut(out);
+				} else {
+					segments.push(
+						new Segment(pt, vector.rotate(-90).multiply(z), out));
+				}
+				vector = vector.rotate(inc);
+			}
+			this._add(segments);
+		},
+
+		lineBy: function(vector) {
+			vector = Point.read(arguments);
+			var current = getCurrentSegment(this);
+			this.lineTo(current._point.add(vector));
+		},
+
+		curveBy: function(throughVector, toVector, parameter) {
+			throughVector = Point.read(throughVector);
+			toVector = Point.read(toVector);
+			var current = getCurrentSegment(this)._point;
+			this.curveTo(current.add(throughVector), current.add(toVector),
+					parameter);
+		},
+
+		arcBy: function(throughVector, toVector) {
+			throughVector = Point.read(throughVector);
+			toVector = Point.read(toVector);
+			var current = getCurrentSegment(this)._point;
+			this.arcBy(current.add(throughVector), current.add(toVector));
+		},
+
+		closePath: function() {
+			this.setClosed(true);
+		}
+	};
+}, new function() { 
+	function getBounds(matrix, strokePadding) {
+		var segments = this._segments,
+			first = segments[0];
+		if (!first)
+			return null;
+		var coords = new Array(6),
+			prevCoords = new Array(6);
+		first._transformCoordinates(matrix, prevCoords, false);
+		var min = prevCoords.slice(0, 2),
+			max = min.slice(0), 
+			tMin = Numerical.TOLERANCE,
+			tMax = 1 - tMin;
+		function processSegment(segment) {
+			segment._transformCoordinates(matrix, coords, false);
+
+			for (var i = 0; i < 2; i++) {
+				var v0 = prevCoords[i], 
+					v1 = prevCoords[i + 4], 
+					v2 = coords[i + 2], 
+					v3 = coords[i]; 
+
+				function add(value, t) {
+					var padding = 0;
+					if (value == null) {
+						var u = 1 - t;
+						value = u * u * u * v0
+								+ 3 * u * u * t * v1
+								+ 3 * u * t * t * v2
+								+ t * t * t * v3;
+						padding = strokePadding ? strokePadding[i] : 0;
+					}
+					var left = value - padding,
+						right = value + padding;
+					if (left < min[i])
+						min[i] = left;
+					if (right > max[i])
+						max[i] = right;
+
+				}
+				add(v3, null);
+
+				var a = 3 * (v1 - v2) - v0 + v3,
+					b = 2 * (v0 + v2) - 4 * v1,
+					c = v1 - v0;
+
+				if (a == 0) {
+					if (b == 0)
+					    continue;
+					var t = -c / b;
+					if (tMin < t && t < tMax)
+						add(null, t);
+					continue;
+				}
+
+				var q = b * b - 4 * a * c;
+				if (q < 0)
+					continue;
+				var sqrt = Math.sqrt(q),
+					f = -0.5 / a,
+				 	t1 = (b - sqrt) * f,
+					t2 = (b + sqrt) * f;
+				if (tMin < t1 && t1 < tMax)
+					add(null, t1);
+				if (tMin < t2 && t2 < tMax)
+					add(null, t2);
+			}
+			var tmp = prevCoords;
+			prevCoords = coords;
+			coords = tmp;
+		}
+		for (var i = 1, l = segments.length; i < l; i++)
+			processSegment(segments[i]);
+		if (this._closed)
+			processSegment(first);
+		return Rectangle.create(min[0], min[1],
+					max[0] - min[0], max[1] - min[1]);
+	}
+
+	function getPenPadding(radius, matrix) {
+		if (!matrix)
+			return [radius, radius];
+		var mx = matrix.createShiftless(),
+			hor = mx.transform(Point.create(radius, 0)),
+			ver = mx.transform(Point.create(0, radius)),
+			phi = hor.getAngleInRadians(),
+			a = hor.getLength(),
+			b = ver.getLength();
+		var sin = Math.sin(phi),
+			cos = Math.cos(phi),
+			tan = Math.tan(phi),
+			tx = -Math.atan(b * tan / a),
+			ty = Math.atan(b / (tan * a));
+		return [Math.abs(a * Math.cos(tx) * cos - b * Math.sin(tx) * sin),
+				Math.abs(b * Math.sin(ty) * cos + a * Math.cos(ty) * sin)];
+	}
+
+	function getStrokeBounds(matrix) {
+		var style = this._style;
+		if (!style._strokeColor || !style._strokeWidth)
+			return getBounds.call(this, matrix);
+		var width = style._strokeWidth,
+			radius = width / 2,
+			padding = getPenPadding(radius, matrix),
+			join = style._strokeJoin,
+			cap = style._strokeCap,
+			miter = style._miterLimit * width / 2,
+			segments = this._segments,
+			length = segments.length,
+			bounds = getBounds.call(this, matrix, padding);
+		var joinBounds = new Rectangle(new Size(padding).multiply(2));
+
+		function add(point) {
+			bounds = bounds.include(matrix
+				? matrix._transformPoint(point, point) : point);
+		}
+
+		function addBevelJoin(curve, t) {
+			var point = curve.getPoint(t),
+				normal = curve.getNormal(t).normalize(radius);
+			add(point.add(normal));
+			add(point.subtract(normal));
+		}
+
+		function addJoin(segment, join) {
+			if (join === 'round' || !segment._handleIn.isZero()
+					&& !segment._handleOut.isZero()) {
+				bounds = bounds.unite(joinBounds.setCenter(matrix
+					? matrix._transformPoint(segment._point) : segment._point));
+			} else if (join == 'bevel') {
+				var curve = segment.getCurve();
+				addBevelJoin(curve, 0);
+				addBevelJoin(curve.getPrevious(), 1);
+			} else if (join == 'miter') {
+				var curve2 = segment.getCurve(),
+					curve1 = curve2.getPrevious(),
+					point = curve2.getPoint(0),
+					normal1 = curve1.getNormal(1).normalize(radius),
+					normal2 = curve2.getNormal(0).normalize(radius),
+					line1 = new Line(point.subtract(normal1),
+							Point.create(-normal1.y, normal1.x)),
+					line2 = new Line(point.subtract(normal2),
+							Point.create(-normal2.y, normal2.x)),
+					corner = line1.intersect(line2);
+				if (!corner || point.getDistance(corner) > miter) {
+					addJoin(segment, 'bevel');
+				} else {
+					add(corner);
+				}
+			}
+		}
+
+		function addCap(segment, cap, t) {
+			switch (cap) {
+			case 'round':
+				return addJoin(segment, cap);
+			case 'butt':
+			case 'square':
+				var curve = segment.getCurve(),
+					point = curve.getPoint(t),
+					normal = curve.getNormal(t).normalize(radius);
+				if (cap === 'square')
+					point = point.add(normal.rotate(t == 0 ? -90 : 90));
+				add(point.add(normal));
+				add(point.subtract(normal));
+				break;
+			}
+		}
+
+		for (var i = 1, l = length - (this._closed ? 0 : 1); i < l; i++) {
+			addJoin(segments[i], join);
+		}
+		if (this._closed) {
+			addJoin(segments[0], join);
+		} else {
+			addCap(segments[0], cap, 0);
+			addCap(segments[length - 1], cap, 1);
+		}
+		return bounds;
+	}
+
+	function getHandleBounds(matrix, stroke, join) {
+		var coords = new Array(6),
+			x1 = Infinity,
+			x2 = -x1,
+			y1 = x1,
+			y2 = x2;
+		stroke = stroke / 2 || 0; 
+		join = join / 2 || 0; 
+		for (var i = 0, l = this._segments.length; i < l; i++) {
+			var segment = this._segments[i];
+			segment._transformCoordinates(matrix, coords, false);
+			for (var j = 0; j < 6; j += 2) {
+				var padding = j == 0 ? join : stroke,
+					x = coords[j],
+					y = coords[j + 1],
+					xn = x - padding,
+					xx = x + padding,
+					yn = y - padding,
+					yx = y + padding;
+				if (xn < x1) x1 = xn;
+				if (xx > x2) x2 = xx;
+				if (yn < y1) y1 = yn;
+				if (yx > y2) y2 = yx;
+			}
+		}
+		return Rectangle.create(x1, y1, x2 - x1, y2 - y1);
+	}
+
+	function getRoughBounds(matrix) {
+		var style = this._style,
+			width = style._strokeWidth;
+		return getHandleBounds.call(this, matrix, width,
+				style._strokeJoin == 'miter'
+					? width * style._miterLimit
+					: width);
+	}
+
+	var get = {
+		bounds: getBounds,
+		strokeBounds: getStrokeBounds,
+		handleBounds: getHandleBounds,
+		roughBounds: getRoughBounds
+	};
+
+	return {
+		_getBounds: function(type, matrix) {
+			return get[type].call(this, matrix);
+		}
+	};
+});
+
+Path.inject({ statics: new function() {
+	var kappa = 2 / 3 * (Math.sqrt(2) - 1);
+
+	var ovalSegments = [
+		new Segment([0, 0.5], [0, kappa ], [0, -kappa]),
+		new Segment([0.5, 0], [-kappa, 0], [kappa, 0 ]),
+		new Segment([1, 0.5], [0, -kappa], [0, kappa ]),
+		new Segment([0.5, 1], [kappa, 0 ], [-kappa, 0])
+	];
+
+	return {
+		Line: function() {
+			var step = Math.floor(arguments.length / 2);
+			return new Path(
+				Segment.read(arguments, 0, step),
+				Segment.read(arguments, step, step)
+			);
+		},
+
+		Rectangle: function(rect) {
+			rect = Rectangle.read(arguments);
+			var left = rect.x,
+				top = rect.y,
+				right = left + rect.width,
+				bottom = top + rect.height,
+				path = new Path();
+			path._add([
+				new Segment(Point.create(left, bottom)),
+				new Segment(Point.create(left, top)),
+				new Segment(Point.create(right, top)),
+				new Segment(Point.create(right, bottom))
+			]);
+			path._closed = true;
+			return path;
+		},
+
+		RoundRectangle: function(rect, size) {
+			if (arguments.length == 2) {
+				rect = Rectangle.read(arguments, 0, 1);
+				size = Size.read(arguments, 1, 1);
+			} else if (arguments.length == 6) {
+				rect = Rectangle.read(arguments, 0, 4);
+				size = Size.read(arguments, 4, 2);
+			}
+			size = Size.min(size, rect.getSize(true).divide(2));
+			var path = new Path(),
+				uSize = size.multiply(kappa * 2),
+				bl = rect.getBottomLeft(true),
+				tl = rect.getTopLeft(true),
+				tr = rect.getTopRight(true),
+				br = rect.getBottomRight(true);
+			path._add([
+				new Segment(bl.add(size.width, 0), null, [-uSize.width, 0]),
+				new Segment(bl.subtract(0, size.height), [0, uSize.height], null),
+
+				new Segment(tl.add(0, size.height), null, [0, -uSize.height]),
+				new Segment(tl.add(size.width, 0), [-uSize.width, 0], null),
+
+				new Segment(tr.subtract(size.width, 0), null, [uSize.width, 0]),
+				new Segment(tr.add(0, size.height), [0, -uSize.height], null),
+
+				new Segment(br.subtract(0, size.height), null, [0, uSize.height]),
+				new Segment(br.subtract(size.width, 0), [uSize.width, 0], null)
+			]);
+			path._closed = true;
+			return path;
+		},
+
+		Oval: function(rect) {
+			rect = Rectangle.read(arguments);
+			var path = new Path(),
+				point = rect.getPoint(true),
+				size = rect.getSize(true),
+				segments = new Array(4);
+			for (var i = 0; i < 4; i++) {
+				var segment = ovalSegments[i];
+				segments[i] = new Segment(
+					segment._point.multiply(size).add(point),
+					segment._handleIn.multiply(size),
+					segment._handleOut.multiply(size)
+				);
+			}
+			path._add(segments);
+			path._closed = true;
+			return path;
+		},
+
+		Circle: function(center, radius) {
+			if (arguments.length == 3) {
+				center = Point.read(arguments, 0, 2);
+				radius = arguments[2];
+			} else {
+				center = Point.read(arguments, 0, 1);
+			}
+			return Path.Oval(new Rectangle(center.subtract(radius),
+					Size.create(radius * 2, radius * 2)));
+		},
+
+		Arc: function(from, through, to) {
+			var path = new Path();
+			path.moveTo(from);
+			path.arcTo(through, to);
+			return path;
+		},
+
+		RegularPolygon: function(center, numSides, radius) {
+			center = Point.read(arguments, 0, 1);
+			var path = new Path(),
+				step = 360 / numSides,
+				three = !(numSides % 3),
+				vector = new Point(0, three ? -radius : radius),
+				offset = three ? -1 : 0.5,
+				segments = new Array(numSides);
+			for (var i = 0; i < numSides; i++) {
+				segments[i] = new Segment(center.add(
+					vector.rotate((i + offset) * step)));
+			}
+			path._add(segments);
+			path._closed = true;
+			return path;
+		},
+
+		Star: function(center, numPoints, radius1, radius2) {
+			center = Point.read(arguments, 0, 1);
+			numPoints *= 2;
+			var path = new Path(),
+				step = 360 / numPoints,
+				vector = new Point(0, -1),
+				segments = new Array(numPoints);
+			for (var i = 0; i < numPoints; i++) {
+				segments[i] = new Segment(center.add(
+					vector.rotate(step * i).multiply(i % 2 ? radius2 : radius1)));
+			}
+			path._add(segments);
+			path._closed = true;
+			return path;
+		}
+	};
+}});
+
+var CompoundPath = this.CompoundPath = PathItem.extend({
+	initialize: function(paths) {
+		this.base();
+		this._children = [];
+		this._namedChildren = {};
+		var items = !paths || !Array.isArray(paths)
+				|| typeof paths[0] !== 'object' ? arguments : paths;
+		this.addChildren(items);
+	},
+
+	insertChild: function(index, item) {
+		this.base(index, item);
+		if (item._clockwise === undefined)
+			item.setClockwise(item._index == 0);
+	},
+
+	simplify: function() {
+		if (this._children.length == 1) {
+			var child = this._children[0];
+			child.insertAbove(this);
+			this.remove();
+			return child;
+		}
+		return this;
+	},
+
+	smooth: function() {
+		for (var i = 0, l = this._children.length; i < l; i++)
+			this._children[i].smooth();
+	},
+
+	draw: function(ctx, param) {
+		var children = this._children;
+		if (children.length == 0)
+			return;
+		var firstChild = children[0],
+			style = firstChild._style;
+		ctx.beginPath();
+		param.compound = true;
+		for (var i = 0, l = children.length; i < l; i++)
+			Item.draw(children[i], ctx, param);
+		firstChild._setStyles(ctx);
+		if (style._fillColor)
+			ctx.fill();
+		if (style._strokeColor)
+			ctx.stroke();
+		param.compound = false;
+	}
+}, new function() { 
+	function getCurrentPath(that) {
+		if (!that._children.length)
+			throw new Error('Use a moveTo() command first');
+		return that._children[that._children.length - 1];
+	}
+
+	var fields = {
+		moveTo: function(point) {
+			var path = new Path();
+			this.addChild(path);
+			path.moveTo.apply(path, arguments);
+		},
+
+		moveBy: function(point) {
+			this.moveTo(getCurrentPath(this).getLastSegment()._point.add(
+					Point.read(arguments)));
+		},
+
+		closePath: function() {
+			getCurrentPath(this).setClosed(true);
+		}
+	};
+
+	Base.each(['lineTo', 'cubicCurveTo', 'quadraticCurveTo', 'curveTo',
+			'arcTo', 'lineBy', 'curveBy', 'arcBy'], function(key) {
+		fields[key] = function() {
+			var path = getCurrentPath(this);
+			path[key].apply(path, arguments);
+		};
+	});
+
+	return fields;
+});
+
+var PathFlattener = Base.extend({
+	initialize: function(path) {
+		this.curves = []; 
+		this.parts = []; 
+		this.length = 0; 
+		this.index = 0;
+
+		var segments = path._segments,
+			segment1 = segments[0],
+			segment2,
+			that = this;
+
+		function addCurve(segment1, segment2) {
+			var curve = Curve.getValues(segment1, segment2);
+			that.curves.push(curve);
+			that._computeParts(curve, segment1._index, 0, 1);
+		}
+
+		for (var i = 1, l = segments.length; i < l; i++) {
+			segment2 = segments[i];
+			addCurve(segment1, segment2);
+			segment1 = segment2;
+		}
+		if (path._closed)
+			addCurve(segment2, segments[0]);
+	},
+
+	_computeParts: function(curve, index, minT, maxT) {
+		if ((maxT - minT) > 1 / 32 && !Curve.isFlatEnough(curve)) {
+			var curves = Curve.subdivide(curve);
+			var halfT = (minT + maxT) / 2;
+			this._computeParts(curves[0], index, minT, halfT);
+			this._computeParts(curves[1], index, halfT, maxT);
+		} else {
+			var x = curve[6] - curve[0],
+				y = curve[7] - curve[1],
+				dist = Math.sqrt(x * x + y * y);
+			if (dist > Numerical.TOLERANCE) {
+				this.length += dist;
+				this.parts.push({
+					offset: this.length,
+					value: maxT,
+					index: index
+				});
+			}
+		}
+	},
+
+	getParameterAt: function(offset) {
+		var i, j = this.index;
+		for (;;) {
+			i = j;
+			if (j == 0 || this.parts[--j].offset < offset)
+				break;
+		}
+		for (var l = this.parts.length; i < l; i++) {
+			var part = this.parts[i];
+			if (part.offset >= offset) {
+				this.index = i;
+				var prev = this.parts[i - 1];
+				var prevVal = prev && prev.index == part.index ? prev.value : 0,
+					prevLen = prev ? prev.offset : 0;
+				return {
+					value: prevVal + (part.value - prevVal)
+						* (offset - prevLen) /  (part.offset - prevLen),
+					index: part.index
+				};
+			}
+		}
+		var part = this.parts[this.parts.length - 1];
+		return {
+			value: 1,
+			index: part.index
+		};
+	},
+
+	evaluate: function(offset, type) {
+		var param = this.getParameterAt(offset);
+		return Curve.evaluate(this.curves[param.index], param.value, type);
+	},
+
+	drawPart: function(ctx, from, to) {
+		from = this.getParameterAt(from);
+		to = this.getParameterAt(to);
+		for (var i = from.index; i <= to.index; i++) {
+			var curve = Curve.getPart(this.curves[i],
+					i == from.index ? from.value : 0,
+					i == to.index ? to.value : 1);
+			if (i == from.index)
+				ctx.moveTo(curve[0], curve[1]);
+			ctx.bezierCurveTo.apply(ctx, curve.slice(2));
+		}
+	}
+});
+
+var PathFitter = Base.extend({
+	initialize: function(path, error) {
+		this.points = [];
+		var segments = path._segments,
+			prev;
+		for (var i = 0, l = segments.length; i < l; i++) {
+			var point = segments[i].point.clone();
+			if (!prev || !prev.equals(point)) {
+				this.points.push(point);
+				prev = point;
+			}
+		}
+		this.error = error;
+	},
+
+	fit: function() {
+		this.segments = [new Segment(this.points[0])];
+		this.fitCubic(0, this.points.length - 1,
+				this.points[1].subtract(this.points[0]).normalize(),
+				this.points[this.points.length - 2].subtract(
+					this.points[this.points.length - 1]).normalize());
+		return this.segments;
+	},
+
+	fitCubic: function(first, last, tan1, tan2) {
+		if (last - first == 1) {
+			var pt1 = this.points[first],
+				pt2 = this.points[last],
+				dist = pt1.getDistance(pt2) / 3;
+			this.addCurve([pt1, pt1.add(tan1.normalize(dist)),
+					pt2.add(tan2.normalize(dist)), pt2]);
+			return;
+		}
+		var uPrime = this.chordLengthParameterize(first, last),
+			maxError = Math.max(this.error, this.error * this.error),
+			error,
+			split;
+		for (var i = 0; i <= 4; i++) {
+			var curve = this.generateBezier(first, last, uPrime, tan1, tan2);
+			var max = this.findMaxError(first, last, curve, uPrime);
+			if (max.error < this.error) {
+				this.addCurve(curve);
+				return;
+			}
+			split = max.index;
+			if (max.error >= maxError)
+				break;
+			this.reparameterize(first, last, uPrime, curve);
+			maxError = max.error;
+		}
+		var V1 = this.points[split - 1].subtract(this.points[split]),
+			V2 = this.points[split].subtract(this.points[split + 1]),
+			tanCenter = V1.add(V2).divide(2).normalize();
+		this.fitCubic(first, split, tan1, tanCenter);
+		this.fitCubic(split, last, tanCenter.negate(), tan2);
+	},
+
+	addCurve: function(curve) {
+		var prev = this.segments[this.segments.length - 1];
+		prev.setHandleOut(curve[1].subtract(curve[0]));
+		this.segments.push(
+				new Segment(curve[3], curve[2].subtract(curve[3])));
+	},
+
+	generateBezier: function(first, last, uPrime, tan1, tan2) {
+		var epsilon = Numerical.EPSILON,
+			pt1 = this.points[first],
+			pt2 = this.points[last],
+		 	C = [[0, 0], [0, 0]],
+			X = [0, 0];
+
+		for (var i = 0, l = last - first + 1; i < l; i++) {
+			var u = uPrime[i],
+				t = 1 - u,
+				b = 3 * u * t,
+				b0 = t * t * t,
+				b1 = b * t,
+				b2 = b * u,
+				b3 = u * u * u,
+				a1 = tan1.normalize(b1),
+				a2 = tan2.normalize(b2),
+				tmp = this.points[first + i]
+					.subtract(pt1.multiply(b0 + b1))
+					.subtract(pt2.multiply(b2 + b3));
+			C[0][0] += a1.dot(a1);
+			C[0][1] += a1.dot(a2);
+			C[1][0] = C[0][1];
+			C[1][1] += a2.dot(a2);
+			X[0] += a1.dot(tmp);
+			X[1] += a2.dot(tmp);
+		}
+
+		var detC0C1 = C[0][0] * C[1][1] - C[1][0] * C[0][1],
+			alpha1, alpha2;
+		if (Math.abs(detC0C1) > epsilon) {
+			var detC0X  = C[0][0] * X[1]    - C[1][0] * X[0],
+				detXC1  = X[0]    * C[1][1] - X[1]    * C[0][1];
+			alpha1 = detXC1 / detC0C1;
+			alpha2 = detC0X / detC0C1;
+		} else {
+			var c0 = C[0][0] + C[0][1],
+				c1 = C[1][0] + C[1][1];
+			if (Math.abs(c0) > epsilon) {
+				alpha1 = alpha2 = X[0] / c0;
+			} else if (Math.abs(c1) > epsilon) {
+				alpha1 = alpha2 = X[1] / c1;
+			} else {
+				alpha1 = alpha2 = 0.;
+			}
+		}
+
+		var segLength = pt2.getDistance(pt1);
+		epsilon *= segLength;
+		if (alpha1 < epsilon || alpha2 < epsilon) {
+			alpha1 = alpha2 = segLength / 3;
+		}
+
+		return [pt1, pt1.add(tan1.normalize(alpha1)),
+				pt2.add(tan2.normalize(alpha2)), pt2];
+	},
+
+	reparameterize: function(first, last, u, curve) {
+		for (var i = first; i <= last; i++) {
+			u[i - first] = this.findRoot(curve, this.points[i], u[i - first]);
+		}
+	},
+
+	findRoot: function(curve, point, u) {
+		var curve1 = [],
+			curve2 = [];
+		for (var i = 0; i <= 2; i++) {
+			curve1[i] = curve[i + 1].subtract(curve[i]).multiply(3);
+		}
+		for (var i = 0; i <= 1; i++) {
+			curve2[i] = curve1[i + 1].subtract(curve1[i]).multiply(2);
+		}
+		var pt = this.evaluate(3, curve, u),
+		 	pt1 = this.evaluate(2, curve1, u),
+		 	pt2 = this.evaluate(1, curve2, u),
+		 	diff = pt.subtract(point),
+			df = pt1.dot(pt1) + diff.dot(pt2);
+		if (Math.abs(df) < Numerical.TOLERANCE)
+			return u;
+		return u - diff.dot(pt1) / df;
+	},
+
+	evaluate: function(degree, curve, t) {
+		var tmp = curve.slice();
+		for (var i = 1; i <= degree; i++) {
+			for (var j = 0; j <= degree - i; j++) {
+				tmp[j] = tmp[j].multiply(1 - t).add(tmp[j + 1].multiply(t));
+			}
+		}
+		return tmp[0];
+	},
+
+	chordLengthParameterize: function(first, last) {
+		var u = [0];
+		for (var i = first + 1; i <= last; i++) {
+			u[i - first] = u[i - first - 1]
+					+ this.points[i].getDistance(this.points[i - 1]);
+		}
+		for (var i = 1, m = last - first; i <= m; i++) {
+			u[i] /= u[m];
+		}
+		return u;
+	},
+
+	findMaxError: function(first, last, curve, u) {
+		var index = Math.floor((last - first + 1) / 2),
+			maxDist = 0;
+		for (var i = first + 1; i < last; i++) {
+			var P = this.evaluate(3, curve, u[i - first]);
+			var v = P.subtract(this.points[i]);
+			var dist = v.x * v.x + v.y * v.y; 
+			if (dist >= maxDist) {
+				maxDist = dist;
+				index = i;
+			}
+		}
+		return {
+			error: maxDist,
+			index: index
+		};
+	}
+});
+
+var TextItem = this.TextItem = Item.extend({
+	_boundsType: 'bounds',
+
+	initialize: function(pointOrMatrix) {
+		this._style = CharacterStyle.create(this);
+		this._paragraphStyle = ParagraphStyle.create(this);
+		this.base(pointOrMatrix);
+		this.setParagraphStyle();
+		this._content = '';
+		this._lines = [];
+	},
+
+	_clone: function(copy) {
+		copy.setContent(this._content);
+		copy.setParagraphStyle(this._paragraphStyle);
+		return this.base(copy);
+	},
+
+	getContent: function() {
+		return this._content;
+	},
+
+	setContent: function(content) {
+		this._content = '' + content;
+		this._lines = this._content.split(/\r\n|\n|\r/mg);
+		this._changed(Change.CONTENT);
+	},
+
+	getCharacterStyle: function() {
+		return this.getStyle();
+	},
+
+	setCharacterStyle: function(style) {
+		this.setStyle(style);
+	}
+
+});
+
+var PointText = this.PointText = TextItem.extend({
+	initialize: function(pointOrMatrix) {
+		this.base(pointOrMatrix);
+		this._point = this._matrix.getTranslation();
+	},
+
+	clone: function() {
+		return this._clone(new PointText(this._matrix));
+	},
+
+	getPoint: function() {
+		return LinkedPoint.create(this, 'setPoint',
+				this._point.x, this._point.y);
+	},
+
+	setPoint: function(point) {
+		this.translate(Point.read(arguments).subtract(this._point));
+	},
+
+	_transform: function(matrix) {
+		matrix._transformPoint(this._point, this._point);
+	},
+
+	draw: function(ctx) {
+		if (!this._content)
+			return;
+		this._setStyles(ctx);
+		var style = this._style,
+			leading = this.getLeading(),
+			lines = this._lines;
+		ctx.font = style.getFontStyle();
+		ctx.textAlign = this.getJustification();
+		for (var i = 0, l = lines.length; i < l; i++) {
+			var line = lines[i];
+			if (style._fillColor)
+				ctx.fillText(line, 0, 0);
+			if (style._strokeColor)
+				ctx.strokeText(line, 0, 0);
+			ctx.translate(0, leading);
+		}
+	}
+}, new function() {
+	var context = null;
+
+	return {
+		_getBounds: function(type, matrix) {
+			if (!context)
+				context = CanvasProvider.getCanvas(
+						Size.create(1, 1)).getContext('2d');
+			var justification = this.getJustification(),
+				x = 0;
+			context.font = this._style.getFontStyle();
+			var width = 0;
+			for (var i = 0, l = this._lines.length; i < l; i++)
+				width = Math.max(width, context.measureText(
+						this._lines[i]).width);
+			if (justification !== 'left')
+				x -= width / (justification === 'center' ? 2: 1);
+			var leading = this.getLeading(),
+				count = this._lines.length,
+				bounds = Rectangle.create(x,
+						count ? leading / 4 + (count - 1) * leading : 0,
+						width, -count * leading);
+			return matrix ? matrix._transformBounds(bounds, bounds) : bounds;
+		}
+	};
+});
+
+var ExportSVG = this.ExportSVG = Base.extend({
+	initialize: function() {
+		this.NS = 'http://www.w3.org/2000/svg';
+		this.svgObj = document.createElementNS(this.NS, 'svg');
+	},
+
+	exportProject: function(project) {
+		var layerArray = project.layers;
+		var layer;
+		for (var i = 0; i < layerArray.length; ++i) {
+			layer = layerArray[i];
+			this.svgObj.appendChild(this.exportLayer(layer));
+		}
+		return this.svgObj;
+	},
+
+	exportLayer: function(layer) {
+		return this.exportGroup(layer);
+	},
+
+	exportGroup: function(group) {
+		var svgG = document.createElementNS(this.NS, 'g');
+		var curChild;
+
+		for (var i in group.children) {
+			curChild = group.children[i];
+			if (curChild.children) {
+				svgG.appendChild(this.exportGroup(curChild));
+			} else {
+				svgG.appendChild(this.exportPath(curChild));
+			}
+		}
+
+		return svgG;
+	},
+
+	exportPath: function(path) {
+		var svgEle;
+
+		var segArray = path.getSegments();
+		var pointArray = new Array();
+		var handleInArray = new Array();
+		var handleOutArray = new Array();
+		for (i = 0; i < segArray.length; i++) {	
+			console.log(segArray[i].toString());
+			pointArray[i] = segArray[i].getPoint();
+			handleInArray[i] = segArray[i].getHandleIn();
+			handleOutArray[i] = segArray[i].getHandleOut();
+		}
+		if(path.content){
+			type = 'text';
+		} else {
+			var type = this._checkType(path, segArray, pointArray, handleInArray, handleOutArray);
+		}
+		switch (type) {
+			case 'rect':
+				svgEle = document.createElementNS(this.NS, 'rect');
+				svgEle.setAttribute('x', pointArray[1].getX());
+				svgEle.setAttribute('y', pointArray[1].getY());
+				svgEle.setAttribute('width', pointArray[1].getDistance(pointArray[2], true));
+				svgEle.setAttribute('height', pointArray[0].getDistance(pointArray[1], true));
+				break;
+			case 'roundRect':
+				var rx = pointArray[4].getX() - pointArray[3].getX();
+				var ry = pointArray[3].getY() - pointArray[4].getY();
+				svgEle = document.createElementNS(this.NS, 'rect');
+				svgEle.setAttribute('x', pointArray[3].getX());
+				svgEle.setAttribute('y', pointArray[4].getY());
+				svgEle.setAttribute('rx', rx);
+				svgEle.setAttribute('ry', ry);
+				svgEle.setAttribute('width', pointArray[1].getDistance(pointArray[6], true));
+				svgEle.setAttribute('height',pointArray[0].getDistance(pointArray[3], true));
+				break;
+			case'line':
+				svgEle = document.createElementNS(this.NS, 'line');
+				svgEle.setAttribute('x1', pointArray[0].getX());
+				svgEle.setAttribute('y1', pointArray[0].getY());
+				svgEle.setAttribute('x2', pointArray[pointArray.length - 1].getX());
+				svgEle.setAttribute('y2', pointArray[pointArray.length - 1].getY());
+				break;
+			case 'circle':
+				svgEle = document.createElementNS(this.NS, 'circle');
+				var radius = (pointArray[2].getX() - pointArray[0].getX()) /2;
+				var cx = pointArray[0].getX() + radius;
+				svgEle.setAttribute('cx', cx);
+				svgEle.setAttribute('cy', pointArray[0].getY());
+				svgEle.setAttribute('r', radius);
+				break;
+			case 'ellipse':
+				svgEle = document.createElementNS(this.NS, 'ellipse');
+				var radiusX = (pointArray[2].getX() - pointArray[0].getX()) / 2;
+				var radiusY = (pointArray[3].getY() - pointArray[1].getY()) /2;
+				var cx = pointArray[0].getX() + radiusX;
+				svgEle.setAttribute('cx', cx);
+				svgEle.setAttribute('cy', pointArray[0].getY());
+				svgEle.setAttribute('rx', radiusX);
+				svgEle.setAttribute('ry', radiusY);
+				break;
+			case 'polyline':
+				svgEle = document.createElementNS(this.NS, 'polyline');
+				var pointString;
+				for(i = 0; i < pointArray.length; ++i) {
+					pointString += pointArray[i].getX() + ", " + pointArray[i].getY();
+				}
+				svgEle.setAttribute('points', pointString);
+				break;
+			case 'polygon':
+				svgEle = document.createElementNS(this.NS, 'polygon');
+				var pointString;
+				for(i = 0; i < pointArray.length; ++i) {
+					pointString += pointArray[i].getX() + ", " + pointArray[i].getY();
+				}
+				svgEle.setAttribute('points', pointString);
+				break;
+			case 'text':
+				svgEle = document.createElementNS(this.NS, 'text');
+				svgEle.setAttribute('x', path.getPosition().getX());
+				svgEle.setAttribute('y', path.getPosition().getY());
+				svgEle.appendChild(path.getContent());
+			default:
+				svgEle = document.createElementNS(this.NS, 'path');
+				svgEle = this.pathSetup(path);
+				break;
+		}
+
+		if (path.strokeColor != undefined) {
+			svgEle.setAttribute('stroke', path.strokeColor.toCssString());
+		}
+
+		if (path.fillColor != undefined) {
+			svgEle.setAttribute('fill', path.fillColor.toCssString());
+		}
+
+		if(path.strokeWidth != undefined){
+			svgEle.setAttribute('stroke-width', path.strokeWidth);
+		}
+
+		if(path.name != undefined) {
+			svgEle.setAttribute('name', path.name);
+		}
+		return svgEle;
+	},
+
+		pathSetup: function(path) {
+			var svgPath = document.createElementNS(this.NS, 'path');
+			var segArray = path.getSegments();
+			var pointArray = new Array();
+			var hIArray = new Array();
+			var hOArray = new Array();
+			for (i = 0; i < segArray.length; i++) {
+				pointArray[i] = segArray[i].getPoint();
+				hIArray[i] = segArray[i].getHandleIn();
+				hOArray[i] = segArray[i].getHandleOut();
+			}
+			var pointString = '';
+			var x1;
+			var x2;
+			var y1;
+			var y2;
+			var handleOut1;
+			var handleIn2;
+			pointString += 'M' + pointArray[0].getX() + ',' + pointArray[0].getY();
+			for (i = 0; i < pointArray.length-1; i++) {
+				console.log(pointArray[i].getX());
+				console.log(pointArray[i].getY());
+				x1 = pointArray[i].getX();
+				y1 = pointArray[i].getY();
+				x2 = pointArray[i + 1].getX();
+				y2 = pointArray[i + 1].getY();
+				handleOut1 = hOArray[i];
+				handleIn2 = hIArray[i+1];
+				if(handleOut1.getX() == 0 && handleOut1.getY() == 0 && handleIn2.getX() == 0 && handleIn2.getY() ==0) {
+						pointString+= 'L' + x2 + ',' + y2 + ' ';
+				} else {
+					pointString+= 'c' + (handleOut1.getX())  + ',' + (handleOut1.getY()) + ' ';
+					pointString+= (x2 - x1 + handleIn2.getX()) + ',' + (y2 - y1 + handleIn2.getY()) + ' ';
+					pointString+= (x2 - x1) + ',' + (y2-y1) +  ' ';
+			}
+		}
+			if (path.getClosed())
+			{
+				pointString += 'z';
+			}
+			svgPath.setAttribute('d',pointString);
+			return svgPath;
+	},	
+
+	_checkType: function(path, segArray, pointArray, handleInArray, handleOutArray) {
+		var type;
+		var dPoint12;
+		var dPoint34;
+		var curves = false;	
+		var segHandleIn;
+		var segHandleOut;
+		for( var i in segArray){
+			segHandleIn = segArray[i].getHandleIn();
+			segHandleOut = segArray[i].getHandleOut();
+			curves = segHandleIn.getX() != 0 || segHandleIn.getY() != 0 ? true : curves;
+			curves = segHandleOut.getX() != 0 || segHandleOut.getY() != 0 ? true : curves;			
+		}
+		if(curves){
+			dPoint12 = pointArray[0].getDistance(pointArray[3], true);
+			dPoint34 = pointArray[4].getDistance(pointArray[7], true);
+			if(segArray.length == 8 && dPoint12 === dPoint34) {
+				type = 'roundRect';
+			} else if(segArray.length == 4) {
+				var checkPointValues = true;
+				for(i = 0; i < pointArray.length && checkPointValues == true; i++) {
+					if(handleInArray[i].getX() != 0 || handleInArray[i].getY() != 0 && Math.abs(handleInArray[i].getX()) === Math.abs(handleOutArray[i].getX()) && Math.abs(handleInArray[i].getY()) === Math.abs(handleOutArray[i].getY())) {
+						checkPointValues = true;
+					} else {
+						checkPointValues = false;
+					}	
+				}	
+				if(checkPointValues == true && handleInArray[3].getY() === handleOutArray[0].getX() && handleOutArray[3].getY() === handleInArray[0].getX()) {
+						type = 'circle';
+					} else {
+						type = 'ellipse';
+					}
+			} 
+		} else if(!curves) {
+			dPoint12 = pointArray[0].getDistance(pointArray[1], true);
+			dPoint34 = pointArray[2].getDistance(pointArray[3], true);
+			if(segArray.length == 4 && dPoint12 == dPoint34) {
+				type = 'rect';
+			} else if(segArray.length >= 3) {
+				if(path.getClosed()) {
+					type = 'polygon';
+				} else {
+					type = 'polyline';
+				}
+			} else {
+				type = 'line';
+			}
+		} else {
+			type = 'NULL";
+		}
+	}
+});
+
+/**
+ *  Imports svg into items with groups
+ *  Stetson Alpha - Paper.js
+ *
+ */
+
+var ImportSVG = this.ImportSVG = Base.extend({
+	/**
+	 * Takes the svg dom obj and parses the data
+	 * to create a layer with groups (if needed) with
+	 * items inside. Should support nested groups.
+	 *
+	 * takes in a svg object (xml dom)
+	 * returns Paper.js Layer
+	 */
+	importSVG: function(svg)
+	{
+		var layer = new Layer();
+		groups = this.importGroup(svg);
+		layer.addChild(groups);
+
+		return layer;
+	},
+
+	/**
+	 * Creates a Paper.js Group by parsing
+	 * a specific svg g node
+	 *
+	 * takes in a svg object (xml dom)
+	 * returns Paper.js Group
+	 */
+	importGroup: function(svg)
+	{
+		var group = new Group();
+		var child;
+		for (var i in svg.childNodes) {
+			child = svg.childNodes[i];
+			if (child.nodeType != 1) {
+				continue;
+			}
+			item = this.importPath(child);
+			group.addChild(item);
+		}
+		return group;
+	},
+
+	/**
+	 * Creates a Paper.js Path by parsing
+	 * a specific svg node (rect, path, circle, polygon, etc)
+	 * and creating the right path object based on the svg type.
+	 *
+	 * takes in a svg object (xml dom)
+	 * returns Paper.js Item
+	 */
+	importPath: function(svg)
+	{
+		switch (svg.nodeName.toLowerCase()) {
+			case 'line':
+				item = this._importLine(svg);
+				break;
+			case 'rect':
+				item = this._importRectangle(svg);
+				break;
+			case 'ellipse':
+				item = this._importOval(svg);
+				break;
+			case 'g':
+				item = this.importGroup(svg);
+				break;
+			case 'text':
+				item = this._importText(svg);
+				break;
+			default:
+			break;
+		}
+		return item;
+	},
+
+	/**
+	 * Creates a Path.Circle Paper.js item
+	 *
+	 * takes a svg circle node (xml dom)
+	 * returns Paper.js Path.Circle item
+	 */
+	_importCircle: function(svgCircle)
+	{
+		var cx		= svgCircle.cx.baseVal.value || 0;
+		var cy		= svgCircle.cy.baseVal.value || 0;
+		var r		= svgCircle.r.baseVal.value || 0;
+		var center	= new Point(cx, cy);
+		var circle	= new Path.Circle(center, r);
+
+		return circle;
+	},
+
+	/**
+	 * Creates a Path.Oval Paper.js item
+	 *
+	 * takes a svg ellipse node (xml dom)
+	 * returns Paper.js Path.Oval item
+	 */
+	_importOval: function(svgOval)
+	{
+		var cx			= svgOval.cx.baseVal.value || 0;
+		var cy			= svgOval.cy.baseVal.value || 0;
+		var rx			= svgOval.rx.baseVal.value || 0;
+		var ry			= svgOval.ry.baseVal.value || 0;
+
+		var center		= new Point(cx, cy);
+		var offset		= new Point(rx, ry);
+		var topLeft		= center.subtract(offset);
+		var bottomRight	= center.add(offset);
+
+		var rect		= new Rectangle(topLeft, bottomRight);
+		var oval		= new Path.Oval(rect);
+
+		return oval;
+	},
+
+	/**
+	 * Creates a "rectangle" Paper.js item
+	 *
+	 * takes a svg rect node (xml dom)
+	 * returns either a
+	 *   - Path.Rectangle item
+	 *   - Path.RoundRectangle item (if the rectangle has rounded corners)
+	 */
+	_importRectangle: function(svgRectangle)
+	{
+		var x			= svgRectangle.x.baseVal.value || 0;
+		var y			= svgRectangle.y.baseVal.value || 0;
+		var rx			= svgRectangle.rx.baseVal.value || 0;
+		var ry			= svgRectangle.ry.baseVal.value || 0;
+		var width		= svgRectangle.width.baseVal.value || 0;
+		var height		= svgRectangle.height.baseVal.value || 0;
+
+		var topLeft		= new Point(x, y);
+		var size		= new Size(width, height);
+		var rectangle	= new Rectangle(topLeft, size);
+
+		if (rx > 0 || ry > 0) {
+			var cornerSize = new Size(rx, ry);
+			rectangle = new Path.RoundRectangle(rectangle, cornerSize);
+		} else {
+			rectangle = new Path.Rectangle(rectangle);
+		}
+
+		return rectangle;
+	},
+
+	/**
+	 * Creates a Path.Line Paper.js item
+	 *
+	 * takes a svg line node (xml dom)
+	 * returns a Path.Line item
+	 */
+	_importLine: function(svgLine)
+	{
+		var x1		= svgLine.x1.baseVal.value || 0;
+		var y1		= svgLine.y1.baseVal.value || 0;
+		var x2		= svgLine.x2.baseVal.value || 0;
+		var y2		= svgLine.y2.baseVal.value || 0;
+
+		var from	= new Point(x1, y1);
+		var to		= new Point(x2, y2);
+		var line	= new Path.Line(from, to);
+
+		return line;
+	},
+
+	/**
+	 * Creates a PointText Paper.js item
+	 *
+	 * takes a svg text node (xml dom)
+	 * returns a PointText item
+	 */
+	_importText: function(svgText)
+	{
+		//TODO: Extend this for multiple values
+		var x	= svgText.x.baseVal.getItem(0).value || 0;
+		var y	= svgText.y.baseVal.getItem(0).value || 0;
+		//END:Todo
+		var dx; //character kerning
+		var dy; //character baseline
+		var rotate; //character rotation
+		var textLength; //the width of the containing box
+		var lengthAdjust; //
+		var textContent = svgText.textContent || "";
+		var topLeft = new Point(x, y);
+		var text = new PointText(topLeft);
+		text.content = textContent;
+		return text;
+	}
+});
+
+/*
+ * Paper.js
+ *
+ * This file is part of Paper.js, a JavaScript Vector Graphics Library,
+ * based on Scriptographer.org and designed to be largely API compatible.
+ * http://paperjs.org/
+ * http://scriptographer.org/
+ *
+ * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+ * http://lehni.org/ & http://jonathanpuckey.com/
+ *
+ * Distributed under the MIT license. See LICENSE file for details.
+ *
+ * All rights reserved.
+ */
+
+/**
+ * @name Style
+ *
+ * @class Internal base-class for all style objects, e.g. PathStyle,
+ * CharacterStyle, PargraphStyle.
+ *
+ * @private
+ */
+var Style = Item.extend({
+	initialize: function(style) {
+		// If the passed style object is also a Style, clone its clonable
+		// fields rather than simply copying them.
+		var clone = style instanceof Style;
+		// Note: This relies on bean getters and setters that get implicetly
+		// called when getting from style[key] and setting on this[key].
+		return Base.each(this._defaults, function(value, key) {
+			value = style && style[key] || value;
+			this[key] = value && clone && value.clone
+					? value.clone() : value;
+		}, this);
+	},
+
+	statics: {
+		create: function(item) {
+			var style = new this(this.dont);
+			style._item = item;
+			return style;
+		},
+
+		extend: function(src) {
+			// Inject style getters and setters into the 'owning' class, which
+			// redirect calls to the linked style objects through their internal
+			// property on the instances of that class, as defined by _style.
+			var styleKey = '_' + src._style,
+				stylePart = Base.capitalize(src._style),
+				flags = src._flags || {},
+				owner = {};
+
+			// Define accessor on owner class for this style:
+			owner['get' + stylePart] = function() {
+				return this[styleKey];
+			};
+
+			owner['set' + stylePart] = function(style) {
+				this[styleKey].initialize(style);
+			};
+
+			Base.each(src._defaults, function(value, key) {
+				var isColor = !!key.match(/Color$/),
+					part = Base.capitalize(key),
+					set = 'set' + part,
+					get = 'get' + part;
+				// Simply extend src with these getters and setters, to be
+				// injected into this class using this.base() further down.
+				src[set] = function(value) {
+					var children = this._item && this._item._children;
+					value = isColor ? Color.read(arguments) : value;
+					if (children) {
+						for (var i = 0, l = children.length; i < l; i++)
+							children[i][styleKey][set](value);
+					} else {
+						var old = this['_' + key];
+						if (old != value && !(old && old.equals
+									&& old.equals(value))) {
+							this['_' + key] = value;
+							if (isColor) {
+								if (old)
+									old._removeOwner(this._item);
+								if (value)
+									value._addOwner(this._item);
+							}
+							// Notify the item of the style change STYLE is
+							// always set, additional flags come from _flags,
+							// as used for STROKE:
+							if (this._item)
+								this._item._changed(flags[key] || Change.STYLE);
+						}
+					}
+					return this;
+				};
+				src[get] = function() {
+					var children = this._item && this._item._children,
+						style;
+					// If this item has children, walk through all of them and
+					// see if they all have the same style.
+					if (!children)
+						return this['_' + key];
+					for (var i = 0, l = children.length; i < l; i++) {
+						var childStyle = children[i][styleKey][get]();
+						if (!style) {
+							style = childStyle;
+						} else if (style != childStyle && !(style
+								&& style.equals && style.equals(childStyle))) {
+							// If there is another item with a different
+							// style, the style is not defined:
+							// PORT: Change this in Scriptographer
+							// (currently returns null)
+							return undefined;
+						}
+					}
+					return style;
+				};
+				// Style-getters and setters for owner class:
+				owner[set] = function(value) {
+					this[styleKey][set](value);
+					return this;
+				};
+				owner[get] = function() {
+					return this[styleKey][get]();
+				};
+			});
+			src._owner.inject(owner);
+			// Pass on to base()
+			return this.base.apply(this, arguments);
+		}
+	}
+});
+
+/*
+ * Paper.js
+ *
+ * This file is part of Paper.js, a JavaScript Vector Graphics Library,
+ * based on Scriptographer.org and designed to be largely API compatible.
+ * http://paperjs.org/
+ * http://scriptographer.org/
+ *
+ * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+ * http://lehni.org/ & http://jonathanpuckey.com/
+ *
+ * Distributed under the MIT license. See LICENSE file for details.
+ *
+ * All rights reserved.
+ */
+
+/**
+ * @name PathStyle
+ *
+ * @class PathStyle is used for changing the visual styles of items
+ * contained within a Paper.js project and is returned by
+ * {@link Item#style} and {@link Project#currentStyle}.
+ *
+ * All properties of PathStyle are also reflected directly in {@link Item},
+ * i.e.: {@link Item#fillColor}.
+ *
+ * To set multiple style properties in one go, you can pass an object to
+ * {@link Item#style}. This is a convenient way to define a style once and
+ * apply it to a series of items:
+ *
+ * @classexample {@paperscript}
+ * var circleStyle = {
+ * 	fillColor: new RgbColor(1, 0, 0),
+ * 	strokeColor: 'black',
+ * 	strokeWidth: 5
+ * };
+ *
+ * var path = new Path.Circle(new Point(80, 50), 30);
+ * path.style = circleStyle;
+ */
+var PathStyle = this.PathStyle = Style.extend(/** @lends PathStyle# */{
+	_owner: Item,
+	_style: 'style',
+	// windingRule / resolution / fillOverprint / strokeOverprint are currently
+	// not supported.
+	_defaults: {
+		fillColor: undefined,
+		strokeColor: undefined,
+		strokeWidth: 1,
+		strokeCap: 'butt',
+		strokeJoin: 'miter',
+		miterLimit: 10,
+		dashOffset: 0,
+		dashArray: []
+	},
+	_flags: {
+		strokeWidth: Change.STROKE,
+		strokeCap: Change.STROKE,
+		strokeJoin: Change.STROKE,
+		miterLimit: Change.STROKE
+	}
+
+	// DOCS: why isn't the example code showing up?
+
+});
+
+var ParagraphStyle = this.ParagraphStyle = Style.extend({
+	_owner: TextItem,
+	_style: 'paragraphStyle',
+	_defaults: {
+		justification: 'left'
+	},
+	_flags: {
+		justification: Change.GEOMETRY
+	}
+
+});
+
+var CharacterStyle = this.CharacterStyle = PathStyle.extend({
+	_owner: TextItem,
+	_style: 'style',
+	_defaults: Base.merge(PathStyle.prototype._defaults, {
+		fillColor: 'black',
+		fontSize: 12,
+		leading: null,
+		font: 'sans-serif'
+	}),
+	_flags: {
+		fontSize: Change.GEOMETRY,
+		leading: Change.GEOMETRY,
+		font: Change.GEOMETRY
+	}
+
+}, {
+	getLeading: function() {
+		var leading = this.base();
+		return leading != null ? leading : this.getFontSize() * 1.2;
+	},
+
+	getFontStyle: function() {
+		return this._fontSize + 'px ' + this._font;
+	}
+});
+
+var Color = this.Color = Base.extend(new function() {
+
+	var components = {
+		gray: ['gray'],
+		rgb: ['red', 'green', 'blue'],
+		hsb: ['hue', 'saturation', 'brightness'],
+		hsl: ['hue', 'saturation', 'lightness']
+	};
+
+	var colorCache = {},
+		colorContext;
+
+	function nameToRgbColor(name) {
+		var color = colorCache[name];
+		if (color)
+			return color.clone();
+		if (!colorContext) {
+			var canvas = CanvasProvider.getCanvas(Size.create(1, 1));
+			colorContext = canvas.getContext('2d');
+			colorContext.globalCompositeOperation = 'copy';
+		}
+		colorContext.fillStyle = 'rgba(0,0,0,0)';
+		colorContext.fillStyle = name;
+		colorContext.fillRect(0, 0, 1, 1);
+		var data = colorContext.getImageData(0, 0, 1, 1).data,
+			rgb = [data[0] / 255, data[1] / 255, data[2] / 255];
+		return (colorCache[name] = RgbColor.read(rgb)).clone();
+	}
+
+	function hexToRgbColor(string) {
+		var hex = string.match(/^#?(\w{1,2})(\w{1,2})(\w{1,2})$/);
+		if (hex.length >= 4) {
+			var rgb = new Array(3);
+			for (var i = 0; i < 3; i++) {
+				var channel = hex[i + 1];
+				rgb[i] = parseInt(channel.length == 1
+						? channel + channel : channel, 16) / 255;
+			}
+			return RgbColor.read(rgb);
+		}
+	}
+
+	var hsbIndices = [
+		[0, 3, 1], 
+		[2, 0, 1], 
+		[1, 0, 3], 
+		[1, 2, 0], 
+		[3, 1, 0], 
+		[0, 1, 2]  
+	];
+
+	var converters = {
+		'rgb-hsb': function(color) {
+			var r = color._red,
+				g = color._green,
+				b = color._blue,
+				max = Math.max(r, g, b),
+				min = Math.min(r, g, b),
+				delta = max - min,
+				h = delta == 0 ? 0
+					:   ( max == r ? (g - b) / delta + (g < b ? 6 : 0)
+						: max == g ? (b - r) / delta + 2
+						:            (r - g) / delta + 4) * 60, 
+				s = max == 0 ? 0 : delta / max,
+				v = max; 
+			return new HsbColor(h, s, v, color._alpha);
+		},
+
+		'hsb-rgb': function(color) {
+			var h = (color._hue / 60) % 6, 
+				s = color._saturation,
+				b = color._brightness,
+				i = Math.floor(h), 
+				f = h - i,
+				i = hsbIndices[i],
+				v = [
+					b,						
+					b * (1 - s),			
+					b * (1 - s * f),		
+					b * (1 - s * (1 - f))	
+				];
+			return new RgbColor(v[i[0]], v[i[1]], v[i[2]], color._alpha);
+		},
+
+		'rgb-hsl': function(color) {
+			var r = color._red,
+				g = color._green,
+				b = color._blue,
+				max = Math.max(r, g, b),
+				min = Math.min(r, g, b),
+				delta = max - min,
+				achromatic = delta == 0,
+				h = achromatic ? 0
+					:   ( max == r ? (g - b) / delta + (g < b ? 6 : 0)
+						: max == g ? (b - r) / delta + 2
+						:            (r - g) / delta + 4) * 60, 
+				l = (max + min) / 2,
+				s = achromatic ? 0 : l < 0.5
+						? delta / (max + min)
+						: delta / (2 - max - min);
+			return new HslColor(h, s, l, color._alpha);
+		},
+
+		'hsl-rgb': function(color) {
+			var s = color._saturation,
+				h = color._hue / 360,
+				l = color._lightness,
+				t1, t2, c;
+			if (s == 0)
+				return new RgbColor(l, l, l, color._alpha);
+			var t3s = [ h + 1 / 3, h, h - 1 / 3 ],
+				t2 = l < 0.5 ? l * (1 + s) : l + s - l * s,
+				t1 = 2 * l - t2,
+				c = [];
+			for (var i = 0; i < 3; i++) {
+				var t3 = t3s[i];
+				if (t3 < 0) t3 += 1;
+				if (t3 > 1) t3 -= 1;
+				c[i] = 6 * t3 < 1
+					? t1 + (t2 - t1) * 6 * t3
+					: 2 * t3 < 1
+						? t2
+						: 3 * t3 < 2
+							? t1 + (t2 - t1) * ((2 / 3) - t3) * 6
+							: t1;
+			}
+			return new RgbColor(c[0], c[1], c[2], color._alpha);
+		},
+
+		'rgb-gray': function(color) {
+			return new GrayColor(1 - (color._red * 0.2989 + color._green * 0.587
+					+ color._blue * 0.114), color._alpha);
+		},
+
+		'gray-rgb': function(color) {
+			var comp = 1 - color._gray;
+			return new RgbColor(comp, comp, comp, color._alpha);
+		},
+
+		'gray-hsb': function(color) {
+			return new HsbColor(0, 0, 1 - color._gray, color._alpha);
+		},
+
+		'gray-hsl': function(color) {
+			return new HslColor(0, 0, 1 - color._gray, color._alpha);
+		}
+	};
+
+	var fields = {
+		_readNull: true,
+
+		initialize: function(arg) {
+			var isArray = Array.isArray(arg),
+				type = this._colorType;
+			if (typeof arg === 'object' && !isArray) {
+				if (!type) {
+					return arg.red !== undefined
+						? new RgbColor(arg.red, arg.green, arg.blue, arg.alpha)
+						: arg.gray !== undefined
+						? new GrayColor(arg.gray, arg.alpha)
+						: arg.lightness !== undefined
+						? new HslColor(arg.hue, arg.saturation, arg.lightness,
+								arg.alpha)
+						: arg.hue !== undefined
+						? new HsbColor(arg.hue, arg.saturation, arg.brightness,
+								arg.alpha)
+						: new RgbColor(); 
+				} else {
+					return Color.read(arguments).convert(type);
+				}
+			} else if (typeof arg === 'string') {
+				var rgbColor = arg.match(/^#[0-9a-f]{3,6}$/i)
+						? hexToRgbColor(arg)
+						: nameToRgbColor(arg);
+				return type
+						? rgbColor.convert(type)
+						: rgbColor;
+			} else {
+				var components = isArray ? arg
+						: Array.prototype.slice.call(arguments);
+				if (!type) {
+					if (components.length >= 3)
+						return new RgbColor(components);
+					return new GrayColor(components);
+				} else {
+					Base.each(this._components,
+						function(name, i) {
+							var value = components[i];
+							this['_' + name] = value !== undefined
+									? value : null;
+						},
+					this);
+				}
+			}
+		},
+
+		clone: function() {
+			var ctor = this.constructor,
+				copy = new ctor(ctor.dont),
+				components = this._components;
+			for (var i = 0, l = components.length; i < l; i++) {
+				var key = '_' + components[i];
+				copy[key] = this[key];
+			}
+			return copy;
+		},
+
+		convert: function(type) {
+			var converter;
+			return this._colorType == type
+					? this.clone()
+					: (converter = converters[this._colorType + '-' + type])
+						? converter(this)
+						: converters['rgb-' + type](
+								converters[this._colorType + '-rgb'](this));
+		},
+
+		statics: {
+			extend: function(src) {
+				if (src._colorType) {
+					var comps = components[src._colorType];
+					src._components = comps.concat(['alpha']);
+					Base.each(comps, function(name) {
+						var isHue = name === 'hue',
+							part = Base.capitalize(name),
+							name = '_' + name;
+						this['get' + part] = function() {
+							return this[name];
+						};
+						this['set' + part] = function(value) {
+							this[name] = isHue
+								? ((value % 360) + 360) % 360
+								: Math.min(Math.max(value, 0), 1);
+							this._changed();
+							return this;
+						};
+					}, src);
+				}
+				return this.base(src);
+			}
+		}
+	};
+
+	Base.each(components, function(comps, type) {
+		Base.each(comps, function(component) {
+			var part = Base.capitalize(component);
+			fields['get' + part] = function() {
+				return this.convert(type)[component];
+			};
+			fields['set' + part] = function(value) {
+				var color = this.convert(type);
+				color[component] = value;
+				color = color.convert(this._colorType);
+				for (var i = 0, l = this._components.length; i < l; i++) {
+					var key = this._components[i];
+					this[key] = color[key];
+				}
+			};
+		});
+	});
+
+	return fields;
+}, {
+
+	_changed: function() {
+		this._cssString = null;
+		for (var i = 0, l = this._owners && this._owners.length; i < l; i++)
+			this._owners[i]._changed(Change.STYLE);
+	},
+
+	_addOwner: function(item) {
+		if (!this._owners)
+			this._owners = [];
+		this._owners.push(item);
+	},
+
+	_removeOwner: function(item) {
+		var index = this._owners ? this._owners.indexOf(item) : -1;
+		if (index != -1) {
+			this._owners.splice(index, 1);
+			if (this._owners.length == 0)
+				delete this._owners;
+		}
+	},
+
+	getType: function() {
+		return this._colorType;
+	},
+
+	getComponents: function() {
+		var length = this._components.length;
+		var comps = new Array(length);
+		for (var i = 0; i < length; i++)
+			comps[i] = this['_' + this._components[i]];
+		return comps;
+	},
+
+	getAlpha: function() {
+		return this._alpha != null ? this._alpha : 1;
+	},
+
+	setAlpha: function(alpha) {
+		this._alpha = alpha == null ? null : Math.min(Math.max(alpha, 0), 1);
+		this._changed();
+		return this;
+	},
+
+	hasAlpha: function() {
+		return this._alpha != null;
+	},
+
+	equals: function(color) {
+		if (color && color._colorType === this._colorType) {
+			for (var i = 0, l = this._components.length; i < l; i++) {
+				var component = '_' + this._components[i];
+				if (this[component] !== color[component])
+					return false;
+			}
+			return true;
+		}
+		return false;
+	},
+
+	toString: function() {
+		var parts = [],
+			format = Base.formatNumber;
+		for (var i = 0, l = this._components.length; i < l; i++) {
+			var component = this._components[i],
+				value = this['_' + component];
+			if (component === 'alpha' && value == null)
+				value = 1;
+			parts.push(component + ': ' + format(value));
+		}
+		return '{ ' + parts.join(', ') + ' }';
+	},
+
+	toCssString: function() {
+		if (!this._cssString) {
+			var color = this.convert('rgb'),
+				alpha = color.getAlpha(),
+				components = [
+					Math.round(color._red * 255),
+					Math.round(color._green * 255),
+					Math.round(color._blue * 255),
+					alpha != null ? alpha : 1
+				];
+			this._cssString = 'rgba(' + components.join(', ') + ')';
+		}
+		return this._cssString;
+	},
+
+	getCanvasStyle: function() {
+		return this.toCssString();
+	}
+
+});
+
+var GrayColor = this.GrayColor = Color.extend({
+
+	_colorType: 'gray'
+});
+
+var RgbColor = this.RgbColor = this.RGBColor = Color.extend({
+
+	_colorType: 'rgb'
+});
+
+var HsbColor = this.HsbColor = this.HSBColor = Color.extend({
+
+	_colorType: 'hsb'
+});
+
+var HslColor = this.HslColor = this.HSLColor = Color.extend({
+
+	_colorType: 'hsl'
+});
+
+var GradientColor = this.GradientColor = Color.extend({
+
+	initialize: function(gradient, origin, destination, hilite) {
+		this.gradient = gradient || new Gradient();
+		this.gradient._addOwner(this);
+		this.setOrigin(origin);
+		this.setDestination(destination);
+		if (hilite)
+			this.setHilite(hilite);
+	},
+
+	clone: function() {
+		return new GradientColor(this.gradient, this._origin, this._destination,
+				this._hilite);
+	},
+
+	getOrigin: function() {
+		return this._origin;
+	},
+
+	setOrigin: function(origin) {
+		origin = Point.read(arguments).clone();
+		this._origin = origin;
+		if (this._destination)
+			this._radius = this._destination.getDistance(this._origin);
+		this._changed();
+		return this;
+	},
+
+	getDestination: function() {
+		return this._destination;
+	},
+
+	setDestination: function(destination) {
+		destination = Point.read(arguments).clone();
+		this._destination = destination;
+		this._radius = this._destination.getDistance(this._origin);
+		this._changed();
+		return this;
+	},
+
+	getHilite: function() {
+		return this._hilite;
+	},
+
+	setHilite: function(hilite) {
+		hilite = Point.read(arguments).clone();
+		var vector = hilite.subtract(this._origin);
+		if (vector.getLength() > this._radius) {
+			this._hilite = this._origin.add(
+					vector.normalize(this._radius - 0.1));
+		} else {
+			this._hilite = hilite;
+		}
+		this._changed();
+		return this;
+	},
+
+	getCanvasStyle: function(ctx) {
+		var gradient;
+		if (this.gradient.type === 'linear') {
+			gradient = ctx.createLinearGradient(this._origin.x, this._origin.y,
+					this._destination.x, this._destination.y);
+		} else {
+			var origin = this._hilite || this._origin;
+			gradient = ctx.createRadialGradient(origin.x, origin.y,
+					0, this._origin.x, this._origin.y, this._radius);
+		}
+		for (var i = 0, l = this.gradient._stops.length; i < l; i++) {
+			var stop = this.gradient._stops[i];
+			gradient.addColorStop(stop._rampPoint, stop._color.toCssString());
+		}
+		return gradient;
+	},
+
+	equals: function(color) {
+		return color == this || color && color._colorType === this._colorType
+				&& this.gradient.equals(color.gradient)
+				&& this._origin.equals(color._origin)
+				&& this._destination.equals(color._destination);
+	},
+
+	transform: function(matrix) {
+		matrix._transformPoint(this._origin, this._origin, true);
+		matrix._transformPoint(this._destination, this._destination, true);
+		if (this._hilite)
+			matrix._transformPoint(this._hilite, this._hilite, true);
+		this._radius = this._destination.getDistance(this._origin);
+	}
+});
+
+var Gradient = this.Gradient = Base.extend({
+	initialize: function(stops, type) {
+		this.setStops(stops || ['white', 'black']);
+		this.type = type || 'linear';
+	},
+
+	_changed: function() {
+		for (var i = 0, l = this._owners && this._owners.length; i < l; i++)
+			this._owners[i]._changed();
+	},
+
+	_addOwner: function(color) {
+		if (!this._owners)
+			this._owners = [];
+		this._owners.push(color);
+	},
+
+	_removeOwner: function(color) {
+		var index = this._owners ? this._owners.indexOf(color) : -1;
+		if (index != -1) {
+			this._owners.splice(index, 1);
+			if (this._owners.length == 0)
+				delete this._owners;
+		}
+	},
+
+	clone: function() {
+		var stops = [];
+		for (var i = 0, l = this._stops.length; i < l; i++)
+			stops[i] = this._stops[i].clone();
+		return new Gradient(stops, this.type);
+	},
+
+	getStops: function() {
+		return this._stops;
+	},
+
+	setStops: function(stops) {
+		if (this.stops) {
+			for (var i = 0, l = this._stops.length; i < l; i++) {
+				this._stops[i]._removeOwner(this);
+			}
+		}
+		if (stops.length < 2)
+			throw new Error(
+					'Gradient stop list needs to contain at least two stops.');
+		this._stops = GradientStop.readAll(stops);
+		for (var i = 0, l = this._stops.length; i < l; i++) {
+			var stop = this._stops[i];
+			stop._addOwner(this);
+			if (stop._defaultRamp)
+				stop.setRampPoint(i / (l - 1));
+		}
+		this._changed();
+	},
+
+	equals: function(gradient) {
+		if (gradient.type != this.type)
+			return false;
+		if (this._stops.length == gradient._stops.length) {
+			for (var i = 0, l = this._stops.length; i < l; i++) {
+				if (!this._stops[i].equals(gradient._stops[i]))
+					return false;
+			}
+			return true;
+		}
+		return false;
+	}
+});
+
+var GradientStop = this.GradientStop = Base.extend({
+	initialize: function(arg0, arg1) {
+		if (arg1 === undefined && Array.isArray(arg0)) {
+			this.setColor(arg0[0]);
+			this.setRampPoint(arg0[1]);
+		} else if (arg0.color) {
+			this.setColor(arg0.color);
+			this.setRampPoint(arg0.rampPoint);
+		} else {
+			this.setColor(arg0);
+			this.setRampPoint(arg1);
+		}
+	},
+
+	clone: function() {
+		return new GradientStop(this._color.clone(), this._rampPoint);
+	},
+
+	_changed: function() {
+		for (var i = 0, l = this._owners && this._owners.length; i < l; i++)
+			this._owners[i]._changed(Change.STYLE);
+	},
+
+	_addOwner: function(gradient) {
+		if (!this._owners)
+			this._owners = [];
+		this._owners.push(gradient);
+	},
+
+	_removeOwner: function(gradient) {
+		var index = this._owners ? this._owners.indexOf(gradient) : -1;
+		if (index != -1) {
+			this._owners.splice(index, 1);
+			if (this._owners.length == 0)
+				delete this._owners;
+		}
+	},
+
+	getRampPoint: function() {
+		return this._rampPoint;
+	},
+
+	setRampPoint: function(rampPoint) {
+		this._defaultRamp = rampPoint == null;
+		this._rampPoint = rampPoint || 0;
+		this._changed();
+	},
+
+	getColor: function() {
+		return this._color;
+	},
+
+	setColor: function(color) {
+		if (this._color)
+			this._color._removeOwner(this);
+		this._color = Color.read(arguments);
+		this._color._addOwner(this);
+		this._changed();
+	},
+
+	equals: function(stop) {
+		return stop == this || stop instanceof GradientStop
+				&& this._color.equals(stop._color)
+				&& this._rampPoint == stop._rampPoint;
+	}
+});
+
+var DomElement = {
+	getBounds: function(el, viewport) {
+		var rect = el.getBoundingClientRect(),
+			doc = el.ownerDocument,
+			body = doc.body,
+			docEl = doc.documentElement,
+			x = rect.left - (docEl.clientLeft || body.clientLeft || 0),
+			y = rect.top - (docEl.clientTop  || body.clientTop  || 0);
+		if (!viewport) {
+			var win = DomElement.getViewport(doc);
+			x += win.pageXOffset || docEl.scrollLeft || body.scrollLeft;
+			y += win.pageYOffset || docEl.scrollTop || body.scrollTop;
+		}
+		return new Rectangle(x, y, rect.width, rect.height);
+	},
+
+	getOffset: function(el, viewport) {
+		return this.getBounds(el, viewport).getPoint();
+	},
+
+	getSize: function(el) {
+		return this.getBounds(el, true).getSize();
+	},
+
+	isInvisible: function(el) {
+		return this.getSize(el).equals([0, 0]);
+	},
+
+	isVisible: function(el) {
+		return !this.isInvisible(el) && this.getViewportBounds(el).intersects(
+				this.getBounds(el, true));
+	},
+
+	getViewport: function(doc) {
+		return doc.defaultView || doc.parentWindow;
+	},
+
+	getViewportBounds: function(el) {
+		var doc = el.ownerDocument,
+			view = this.getViewport(doc),
+			body = doc.getElementsByTagName(
+				doc.compatMode === 'CSS1Compat' ? 'html' : 'body')[0];
+		return Rectangle.create(0, 0, 
+			view.innerWidth || body.clientWidth,
+			view.innerHeight || body.clientHeight
+		);
+	},
+
+	getComputedStyle: function(el, name) {
+		if (el.currentStyle)
+			return el.currentStyle[Base.camelize(name)];
+		var style = this.getViewport(el.ownerDocument)
+				.getComputedStyle(el, null);
+		return style ? style.getPropertyValue(Base.hyphenate(name)) : null;
+	}
+};
+
+var DomEvent = {
+	add: function(el, events) {
+		for (var type in events) {
+			var func = events[type];
+			if (el.addEventListener) {
+				el.addEventListener(type, func, false);
+			} else if (el.attachEvent) {
+				el.attachEvent('on' + type, func.bound = function() {
+					func.call(el, window.event);
+				});
+			}
+		}
+	},
+
+	remove: function(el, events) {
+		for (var type in events) {
+			var func = events[type];
+			if (el.removeEventListener) {
+				el.removeEventListener(type, func, false);
+			} else if (el.detachEvent) {
+				el.detachEvent('on' + type, func.bound);
+			}
+		}
+	},
+
+	getPoint: function(event) {
+		var pos = event.targetTouches
+				? event.targetTouches.length
+					? event.targetTouches[0]
+					: event.changedTouches[0]
+				: event;
+		return Point.create(
+			pos.pageX || pos.clientX + document.documentElement.scrollLeft,
+			pos.pageY || pos.clientY + document.documentElement.scrollTop
+		);
+	},
+
+	getTarget: function(event) {
+		return event.target || event.srcElement;
+	},
+
+	getOffset: function(event, target) {
+		return DomEvent.getPoint(event).subtract(DomElement.getOffset(
+				target || DomEvent.getTarget(event)));
+	},
+
+	preventDefault: function(event) {
+		if (event.preventDefault) {
+			event.preventDefault();
+		} else {
+			event.returnValue = false;
+		}
+	},
+
+	stopPropagation: function(event) {
+		if (event.stopPropagation) {
+			event.stopPropagation();
+		} else {
+			event.cancelBubble = true;
+		}
+	},
+
+	stop: function(event) {
+		DomEvent.stopPropagation(event);
+		DomEvent.preventDefault(event);
+	}
+};
+
+DomEvent.requestAnimationFrame = new function() {
+	var part = 'equestAnimationFrame',
+		request = window['r' + part] || window['webkitR' + part]
+			|| window['mozR' + part] || window['oR' + part]
+			|| window['msR' + part];
+	if (request) {
+		request(function(time) {
+			if (time == undefined)
+				request = null;
+		});
+	}
+
+	var callbacks = [],
+		focused = true,
+		timer;
+
+	DomEvent.add(window, {
+		focus: function() {
+			focused = true;
+		},
+		blur: function() {
+			focused = false;
+		}
+	});
+
+	return function(callback, element) {
+		if (request)
+			return request(callback, element);
+		callbacks.push([callback, element]);
+		if (timer)
+			return;
+		timer = window.setInterval(function() {
+			for (var i = callbacks.length - 1; i >= 0; i--) {
+				var entry = callbacks[i],
+					func = entry[0],
+					el = entry[1];
+				if (!el || (PaperScript.getAttribute(el, 'keepalive') == 'true'
+						|| focused) && DomElement.isVisible(el)) {
+					callbacks.splice(i, 1);
+					func(Date.now());
+				}
+			}
+		}, 1000 / 60);
+	};
+};
+
+var View = this.View = Base.extend(Callback, {
+	_events: {
+		onFrame: {
+			install: function() {
+				var that = this,
+					requested = false,
+					before,
+					time = 0,
+					count = 0;
+				this._onFrameCallback = function(param, dontRequest) {
+					requested = false;
+					if (!that._onFrameCallback)
+						return;
+					paper = that._scope;
+					if (!dontRequest) {
+						requested = true;
+						DomEvent.requestAnimationFrame(that._onFrameCallback,
+								that._element);
+					}
+					var now = Date.now() / 1000,
+					 	delta = before ? now - before : 0;
+					that.fire('frame', Base.merge({
+						delta: delta,
+						time: time += delta,
+						count: count++
+					}));
+					before = now;
+					if (that._stats)
+						that._stats.update();
+					that.draw(true);
+				};
+				if (!requested)
+					this._onFrameCallback();
+			},
+
+			uninstall: function() {
+				delete this._onFrameCallback;
+			}
+		},
+
+		onResize: {}
+	},
+
+	initialize: function(element) {
+		this._scope = paper;
+		this._project = paper.project;
+		this._element = element;
+		var size;
+		this._id = element.getAttribute('id');
+		if (this._id == null)
+			element.setAttribute('id', this._id = 'view-' + View._id++);
+		DomEvent.add(element, this._handlers);
+		if (PaperScript.hasAttribute(element, 'resize')) {
+			var offset = DomElement.getOffset(element, true),
+				that = this;
+			size = DomElement.getViewportBounds(element)
+					.getSize().subtract(offset);
+			element.width = size.width;
+			element.height = size.height;
+			DomEvent.add(window, {
+				resize: function(event) {
+					if (!DomElement.isInvisible(element))
+						offset = DomElement.getOffset(element, true);
+					that.setViewSize(DomElement.getViewportBounds(element)
+							.getSize().subtract(offset));
+				}
+			});
+		} else {
+			size = DomElement.isInvisible(element)
+				? Size.create(parseInt(element.getAttribute('width')),
+						parseInt(element.getAttribute('height')))
+				: DomElement.getSize(element);
+		}
+		if (PaperScript.hasAttribute(element, 'stats')) {
+			this._stats = new Stats();
+			var stats = this._stats.domElement,
+				style = stats.style,
+				offset = DomElement.getOffset(element);
+			style.position = 'absolute';
+			style.left = offset.x + 'px';
+			style.top = offset.y + 'px';
+			document.body.appendChild(stats);
+		}
+		View._views.push(this);
+		View._viewsById[this._id] = this;
+		this._viewSize = LinkedSize.create(this, 'setViewSize',
+				size.width, size.height);
+		this._matrix = new Matrix();
+		this._zoom = 1;
+		if (!View._focused)
+			View._focused = this;
+	},
+
+	remove: function() {
+		if (!this._project)
+			return false;
+		if (View._focused == this)
+			View._focused = null;
+		View._views.splice(View._views.indexOf(this), 1);
+		delete View._viewsById[this._id];
+		if (this._project.view == this)
+			this._project.view = null;
+		DomEvent.remove(this._element, this._handlers);
+		this._element = this._project = null;
+		this.detach('frame');
+		return true;
+	},
+
+	_redraw: function() {
+		this._redrawNeeded = true;
+		if (this._onFrameCallback) {
+			this._onFrameCallback(0, true);
+		} else {
+			this.draw();
+		}
+	},
+
+	_transform: function(matrix) {
+		this._matrix.preConcatenate(matrix);
+		this._bounds = null;
+		this._inverse = null;
+		this._redraw();
+	},
+
+	getElement: function() {
+		return this._element;
+	},
+
+	getViewSize: function() {
+		return this._viewSize;
+	},
+
+	setViewSize: function(size) {
+		size = Size.read(arguments);
+		var delta = size.subtract(this._viewSize);
+		if (delta.isZero())
+			return;
+		this._element.width = size.width;
+		this._element.height = size.height;
+		this._viewSize.set(size.width, size.height, true);
+		this._bounds = null;
+		this._redrawNeeded = true;
+		this.fire('resize', {
+			size: size,
+			delta: delta
+		});
+		this._redraw();
+	},
+
+	getBounds: function() {
+		if (!this._bounds)
+			this._bounds = this._getInverse()._transformBounds(
+					new Rectangle(new Point(), this._viewSize));
+		return this._bounds;
+	},
+
+	getSize: function() {
+		return this.getBounds().getSize();
+	},
+
+	getCenter: function() {
+		return this.getBounds().getCenter();
+	},
+
+	setCenter: function(center) {
+		this.scrollBy(Point.read(arguments).subtract(this.getCenter()));
+	},
+
+	getZoom: function() {
+		return this._zoom;
+	},
+
+	setZoom: function(zoom) {
+		this._transform(new Matrix().scale(zoom / this._zoom,
+			this.getCenter()));
+		this._zoom = zoom;
+	},
+
+	isVisible: function() {
+		return DomElement.isVisible(this._element);
+	},
+
+	scrollBy: function(point) {
+		this._transform(new Matrix().translate(Point.read(arguments).negate()));
+	},
+
+	projectToView: function(point) {
+		return this._matrix._transformPoint(Point.read(arguments));
+	},
+
+	viewToProject: function(point) {
+		return this._getInverse()._transformPoint(Point.read(arguments));
+	},
+
+	_getInverse: function() {
+		if (!this._inverse)
+			this._inverse = this._matrix.createInverse();
+		return this._inverse;
+	}
+
+}, {
+	statics: {
+		_views: [],
+		_viewsById: {},
+		_id: 0,
+
+		create: function(element) {
+			if (typeof element === 'string')
+				element = document.getElementById(element);
+			return new CanvasView(element);
+		}
+	}
+}, new function() {
+	var tool,
+		curPoint,
+		tempFocus,
+		dragging = false;
+
+	function getView(event) {
+		return View._viewsById[DomEvent.getTarget(event).getAttribute('id')];
+	}
+
+	function viewToProject(view, event) {
+		return view.viewToProject(DomEvent.getOffset(event, view._element));
+	}
+
+	function updateFocus() {
+		if (!View._focused || !View._focused.isVisible()) {
+			for (var i = 0, l = View._views.length; i < l; i++) {
+				var view = View._views[i];
+				if (view && view.isVisible()) {
+					View._focused = tempFocus = view;
+					break;
+				}
+			}
+		}
+	}
+
+	function mousedown(event) {
+		var view = View._focused = getView(event);
+		curPoint = viewToProject(view, event);
+		dragging = true;
+		if (view._onMouseDown)
+			view._onMouseDown(event, curPoint);
+		if (tool = view._scope.tool)
+			tool._onHandleEvent('mousedown', curPoint, event);
+		view.draw(true);
+	}
+
+	function mousemove(event) {
+		var view;
+		if (!dragging) {
+			view = getView(event);
+			if (view) {
+				View._focused = tempFocus = view;
+			} else if (tempFocus && tempFocus == View._focused) {
+				View._focused = null;
+				updateFocus();
+			}
+		}
+		if (!(view = view || View._focused))
+			return;
+		var point = event && viewToProject(view, event);
+		if (view._onMouseMove)
+			view._onMouseMove(event, point);
+		if (tool = view._scope.tool) {
+			var onlyMove = !!(!tool.onMouseDrag && tool.onMouseMove);
+			if (dragging && !onlyMove) {
+				if ((curPoint = point || curPoint) 
+						&& tool._onHandleEvent('mousedrag', curPoint, event))
+					DomEvent.stop(event);
+			} else if ((!dragging || onlyMove)
+					&& tool._onHandleEvent('mousemove', point, event)) {
+				DomEvent.stop(event);
+			}
+		}
+		view.draw(true);
+	}
+
+	function mouseup(event) {
+		var view = View._focused;
+		if (!view || !dragging)
+			return;
+		var point = viewToProject(view, event);
+		curPoint = null;
+		dragging = false;
+		if (view._onMouseUp)
+			view._onMouseUp(event, point);
+		if (tool && tool._onHandleEvent('mouseup', point, event))
+			DomEvent.stop(event);
+		view.draw(true);
+	}
+
+	function selectstart(event) {
+		if (dragging)
+			DomEvent.stop(event);
+	}
+
+	DomEvent.add(document, {
+		mousemove: mousemove,
+		mouseup: mouseup,
+		touchmove: mousemove,
+		touchend: mouseup,
+		selectstart: selectstart,
+		scroll: updateFocus
+	});
+
+	DomEvent.add(window, {
+		load: updateFocus
+	});
+
+	return {
+		_handlers: {
+			mousedown: mousedown,
+			touchstart: mousedown,
+			selectstart: selectstart
+		},
+
+		statics: {
+			updateFocus: updateFocus
+		}
+	};
+});
+
+var CanvasView = View.extend({
+	initialize: function(canvas) {
+		if (!(canvas instanceof HTMLCanvasElement)) {
+			var size = Size.read(arguments, 1);
+			if (size.isZero())
+				size = Size.create(1024, 768);
+			canvas = CanvasProvider.getCanvas(size);
+		}
+		this._context = canvas.getContext('2d');
+		this._eventCounters = {};
+		this.base(canvas);
+	},
+
+	draw: function(checkRedraw) {
+		if (checkRedraw && !this._redrawNeeded)
+			return false;
+		var ctx = this._context,
+			size = this._viewSize;
+		ctx.clearRect(0, 0, size._width + 1, size._height + 1);
+		this._project.draw(ctx, this._matrix);
+		this._redrawNeeded = false;
+		return true;
+	}
+}, new function() { 
+
+	var hitOptions = {
+		fill: true,
+		stroke: true,
+		tolerance: 0
+	};
+
+	var downPoint,
+		lastPoint,
+		overPoint,
+		downItem,
+		overItem,
+		hasDrag,
+		doubleClick,
+		clickTime;
+
+	function callEvent(type, event, point, target, lastPoint, bubble) {
+		var item = target,
+			mouseEvent,
+			called = false;
+		while (item) {
+			if (item.responds(type)) {
+				if (!mouseEvent)
+					mouseEvent = new MouseEvent(type, event, point, target,
+							lastPoint ? point.subtract(lastPoint) : null);
+				called = item.fire(type, mouseEvent) || called;
+				if (called && (!bubble || mouseEvent._stopped))
+					break;
+			}
+			item = item.getParent();
+		}
+		return called;
+	}
+
+	function handleEvent(view, type, event, point, lastPoint) {
+		if (view._eventCounters[type]) {
+			var hit = view._project.hitTest(point, hitOptions),
+				item = hit && hit.item;
+			if (item) {
+				if (type == 'mousemove' && item != overItem)
+					lastPoint = point;
+				if (type != 'mousemove' || !hasDrag)
+					callEvent(type, event, point, item, lastPoint);
+				return item;
+			}
+		}
+	}
+
+	return {
+		_onMouseDown: function(event, point) {
+			var item = handleEvent(this, 'mousedown', event, point);
+			doubleClick = downItem == item && Date.now() - clickTime < 300;
+			downItem = item;
+			downPoint = lastPoint = overPoint = point;
+			hasDrag = downItem && downItem.responds('mousedrag');
+		},
+
+		_onMouseUp: function(event, point) {
+			var item = handleEvent(this, 'mouseup', event, point);
+			if (hasDrag) {
+				if (lastPoint && !lastPoint.equals(point))
+					callEvent('mousedrag', event, point, downItem, lastPoint);
+				if (item != downItem) {
+					overPoint = point;
+					callEvent('mousemove', event, point, item, overPoint);
+				}
+			}
+			if (item == downItem) {
+				clickTime = Date.now();
+				callEvent(doubleClick ? 'doubleclick' : 'click', event,
+						downPoint, overItem);
+				doubleClick = false;
+			}
+			downItem = null;
+			hasDrag = false;
+		},
+
+		_onMouseMove: function(event, point) {
+			if (downItem)
+				callEvent('mousedrag', event, point, downItem, lastPoint);
+			var item = handleEvent(this, 'mousemove', event, point, overPoint);
+			lastPoint = overPoint = point;
+			if (item != overItem) {
+				callEvent('mouseleave', event, point, overItem);
+				overItem = item;
+				callEvent('mouseenter', event, point, item);
+			}
+		}
+	};
+});
+
+var Event = this.Event = Base.extend({
+	initialize: function(event) {
+		this.event = event;
+	},
+
+	preventDefault: function() {
+		this._prevented = true;
+		DomEvent.preventDefault(this.event);
+		return this;
+	},
+
+	stopPropagation: function() {
+		this._stopped = true;
+		DomEvent.stopPropagation(this.event);
+		return this;
+	},
+
+	stop: function() {
+		return this.stopPropagation().preventDefault();
+	},
+
+	getModifiers: function() {
+		return Key.modifiers;
+	}
+});
+
+var KeyEvent = this.KeyEvent = Event.extend({
+	initialize: function(down, key, character, event) {
+		this.base(event);
+		this.type = down ? 'keydown' : 'keyup';
+		this.key = key;
+		this.character = character;
+	},
+
+	toString: function() {
+		return '{ type: ' + this.type
+				+ ', key: ' + this.key
+				+ ', character: ' + this.character
+				+ ', modifiers: ' + this.getModifiers()
+				+ ' }';
+	}
+});
+
+var Key = this.Key = new function() {
+
+	var keys = {
+		8: 'backspace',
+		13: 'enter',
+		16: 'shift',
+		17: 'control',
+		18: 'option',
+		19: 'pause',
+		20: 'caps-lock',
+		27: 'escape',
+		32: 'space',
+		35: 'end',
+		36: 'home',
+		37: 'left',
+		38: 'up',
+		39: 'right',
+		40: 'down',
+		46: 'delete',
+		91: 'command',
+		93: 'command', 
+		224: 'command'  
+	},
+
+	modifiers = Base.merge({
+		shift: false,
+		control: false,
+		option: false,
+		command: false,
+		capsLock: false
+	}),
+
+	charCodeMap = {}, 
+	keyMap = {}, 
+	downCode; 
+
+	function handleKey(down, keyCode, charCode, event) {
+		var character = String.fromCharCode(charCode),
+			key = keys[keyCode] || character.toLowerCase(),
+			type = down ? 'keydown' : 'keyup',
+			view = View._focused,
+			scope = view && view.isVisible() && view._scope,
+			tool = scope && scope.tool;
+		keyMap[key] = down;
+		if (tool && tool.responds(type)) {
+			tool.fire(type, new KeyEvent(down, key, character, event));
+			if (view)
+				view.draw(true);
+		}
+	}
+
+	DomEvent.add(document, {
+		keydown: function(event) {
+			var code = event.which || event.keyCode;
+			var key = keys[code], name;
+			if (key) {
+				if ((name = Base.camelize(key)) in modifiers)
+					modifiers[name] = true;
+				charCodeMap[code] = 0;
+				handleKey(true, code, null, event);
+			} else {
+				downCode = code;
+			}
+		},
+
+		keypress: function(event) {
+			if (downCode != null) {
+				var code = event.which || event.keyCode;
+				charCodeMap[downCode] = code;
+				handleKey(true, downCode, code, event);
+				downCode = null;
+			}
+		},
+
+		keyup: function(event) {
+			var code = event.which || event.keyCode,
+				key = keys[code], name;
+			if (key && (name = Base.camelize(key)) in modifiers)
+				modifiers[name] = false;
+			if (charCodeMap[code] != null) {
+				handleKey(false, code, charCodeMap[code], event);
+				delete charCodeMap[code];
+			}
+		}
+	});
+
+	return {
+		modifiers: modifiers,
+
+		isDown: function(key) {
+			return !!keyMap[key];
+		}
+	};
+};
+
+var MouseEvent = this.MouseEvent = Event.extend({
+	initialize: function(type, event, point, target, delta) {
+		this.base(event);
+		this.type = type;
+		this.point = point;
+		this.target = target;
+		this.delta = delta;
+	},
+
+	toString: function() {
+		return '{ type: ' + this.type
+				+ ', point: ' + this.point
+				+ ', target: ' + this.target
+				+ (this.delta ? ', delta: ' + this.delta : '')
+				+ ', modifiers: ' + this.getModifiers()
+				+ ' }';
+	}
+});
+
+var ToolEvent = this.ToolEvent = Event.extend({
+	initialize: function(tool, type, event) {
+		this.tool = tool;
+		this.type = type;
+		this.event = event;
+	},
+
+	_choosePoint: function(point, toolPoint) {
+		return point ? point : toolPoint ? toolPoint.clone() : null;
+	},
+
+	getPoint: function() {
+		return this._choosePoint(this._point, this.tool._point);
+	},
+
+	setPoint: function(point) {
+		this._point = point;
+	},
+
+	getLastPoint: function() {
+		return this._choosePoint(this._lastPoint, this.tool._lastPoint);
+	},
+
+	setLastPoint: function(lastPoint) {
+		this._lastPoint = lastPoint;
+	},
+
+	getDownPoint: function() {
+		return this._choosePoint(this._downPoint, this.tool._downPoint);
+	},
+
+	setDownPoint: function(downPoint) {
+		this._downPoint = downPoint;
+	},
+
+	getMiddlePoint: function() {
+		if (!this._middlePoint && this.tool._lastPoint) {
+			return this.tool._point.add(this.tool._lastPoint).divide(2);
+		}
+		return this.middlePoint;
+	},
+
+	setMiddlePoint: function(middlePoint) {
+		this._middlePoint = middlePoint;
+	},
+
+	getDelta: function() {
+		return !this._delta && this.tool._lastPoint
+		 		? this.tool._point.subtract(this.tool._lastPoint)
+				: this._delta;
+	},
+
+	setDelta: function(delta) {
+		this._delta = delta;
+	},
+
+	getCount: function() {
+		return /^mouse(down|up)$/.test(this.type)
+				? this.tool._downCount
+				: this.tool._count;
+	},
+
+	setCount: function(count) {
+		this.tool[/^mouse(down|up)$/.test(this.type) ? 'downCount' : 'count']
+			= count;
+	},
+
+	getItem: function() {
+		if (!this._item) {
+			var result = this.tool._scope.project.hitTest(this.getPoint());
+			if (result) {
+				var item = result.item,
+					parent = item._parent;
+				while ((parent instanceof Group && !(parent instanceof Layer))
+						|| parent instanceof CompoundPath) {
+					item = parent;
+					parent = parent._parent;
+				}
+				this._item = item;
+			}
+		}
+		return this._item;
+	},
+	setItem: function(item) {
+		this._item = item;
+	},
+
+	toString: function() {
+		return '{ type: ' + this.type
+				+ ', point: ' + this.getPoint()
+				+ ', count: ' + this.getCount()
+				+ ', modifiers: ' + this.getModifiers()
+				+ ' }';
+	}
+});
+
+var Tool = this.Tool = PaperScopeItem.extend(Callback, {
+	_list: 'tools',
+	_reference: '_tool', 
+	_events: [ 'onEditOptions', 'onSelect', 'onDeselect', 'onReselect',
+			'onMouseDown', 'onMouseUp', 'onMouseDrag', 'onMouseMove',
+			'onKeyDown', 'onKeyUp' ],
+
+	initialize: function() {
+		this.base();
+		this._firstMove = true;
+		this._count = 0;
+		this._downCount = 0;
+	},
+
+	getMinDistance: function() {
+		return this._minDistance;
+	},
+
+	setMinDistance: function(minDistance) {
+		this._minDistance = minDistance;
+		if (this._minDistance != null && this._maxDistance != null
+				&& this._minDistance > this._maxDistance) {
+			this._maxDistance = this._minDistance;
+		}
+	},
+
+	getMaxDistance: function() {
+		return this._maxDistance;
+	},
+
+	setMaxDistance: function(maxDistance) {
+		this._maxDistance = maxDistance;
+		if (this._minDistance != null && this._maxDistance != null
+				&& this._maxDistance < this._minDistance) {
+			this._minDistance = maxDistance;
+		}
+	},
+
+	getFixedDistance: function() {
+		return this._minDistance == this._maxDistance
+			? this._minDistance : null;
+	},
+
+	setFixedDistance: function(distance) {
+		this._minDistance = distance;
+		this._maxDistance = distance;
+	},
+
+	_updateEvent: function(type, pt, minDistance, maxDistance, start,
+			needsChange, matchMaxDistance) {
+		if (!start) {
+			if (minDistance != null || maxDistance != null) {
+				var minDist = minDistance != null ? minDistance : 0;
+				var vector = pt.subtract(this._point);
+				var distance = vector.getLength();
+				if (distance < minDist)
+					return false;
+				var maxDist = maxDistance != null ? maxDistance : 0;
+				if (maxDist != 0) {
+					if (distance > maxDist) {
+						pt = this._point.add(vector.normalize(maxDist));
+					} else if (matchMaxDistance) {
+						return false;
+					}
+				}
+			}
+			if (needsChange && pt.equals(this._point))
+				return false;
+		}
+		this._lastPoint = start && type == 'mousemove' ? pt : this._point;
+		this._point = pt;
+		switch (type) {
+		case 'mousedown':
+			this._lastPoint = this._downPoint;
+			this._downPoint = this._point;
+			this._downCount++;
+			break;
+		case 'mouseup':
+			this._lastPoint = this._downPoint;
+			break;
+		}
+		this._count = start ? 0 : this._count + 1;
+		return true;
+	},
+
+	_onHandleEvent: function(type, pt, event) {
+		paper = this._scope;
+		var sets = Tool._removeSets;
+		if (sets) {
+			if (type === 'mouseup')
+				sets.mousedrag = null;
+			var set = sets[type];
+			if (set) {
+				for (var id in set) {
+					var item = set[id];
+					for (var key in sets) {
+						var other = sets[key];
+						if (other && other != set && other[item._id])
+							delete other[item._id];
+					}
+					item.remove();
+				}
+				sets[type] = null;
+			}
+		}
+		var called = false;
+		switch (type) {
+		case 'mousedown':
+			this._updateEvent(type, pt, null, null, true, false, false);
+			if (this.responds(type))
+				called = this.fire(type, new ToolEvent(this, type, event));
+			break;
+		case 'mousedrag':
+			var needsChange = false,
+				matchMaxDistance = false;
+			while (this._updateEvent(type, pt, this.minDistance,
+					this.maxDistance, false, needsChange, matchMaxDistance)) {
+				if (this.responds(type))
+					called = this.fire(type, new ToolEvent(this, type, event));
+				needsChange = true;
+				matchMaxDistance = true;
+			}
+			break;
+		case 'mouseup':
+			if ((this._point.x != pt.x || this._point.y != pt.y)
+					&& this._updateEvent('mousedrag', pt, this.minDistance,
+							this.maxDistance, false, false, false)) {
+				if (this.responds('mousedrag'))
+					called = this.fire('mousedrag',
+							new ToolEvent(this, type, event));
+			}
+			this._updateEvent(type, pt, null, this.maxDistance, false,
+					false, false);
+			if (this.responds(type))
+				called = this.fire(type, new ToolEvent(this, type, event));
+			this._updateEvent(type, pt, null, null, true, false, false);
+			this._firstMove = true;
+			break;
+		case 'mousemove':
+			while (this._updateEvent(type, pt, this.minDistance,
+					this.maxDistance, this._firstMove, true, false)) {
+				if (this.responds(type))
+					called = this.fire(type, new ToolEvent(this, type, event));
+				this._firstMove = false;
+			}
+			break;
+		}
+		return called;
+	}
+
+});
+
+var CanvasProvider = {
+	canvases: [],
+	getCanvas: function(size) {
+		if (this.canvases.length) {
+			var canvas = this.canvases.pop();
+			if ((canvas.width != size.width)
+					|| (canvas.height != size.height)) {
+				canvas.width = size.width;
+				canvas.height = size.height;
+			} else {
+				canvas.getContext('2d').clearRect(0, 0,
+						size.width + 1, size.height + 1);
+			}
+			return canvas;
+		} else {
+			var canvas = document.createElement('canvas');
+			canvas.width = size.width;
+			canvas.height = size.height;
+			return canvas;
+		}
+	},
+
+	returnCanvas: function(canvas) {
+		this.canvases.push(canvas);
+	}
+};
+
+var Numerical = new function() {
+
+	var abscissas = [
+		[  0.5773502691896257645091488],
+		[0,0.7745966692414833770358531],
+		[  0.3399810435848562648026658,0.8611363115940525752239465],
+		[0,0.5384693101056830910363144,0.9061798459386639927976269],
+		[  0.2386191860831969086305017,0.6612093864662645136613996,0.9324695142031520278123016],
+		[0,0.4058451513773971669066064,0.7415311855993944398638648,0.9491079123427585245261897],
+		[  0.1834346424956498049394761,0.5255324099163289858177390,0.7966664774136267395915539,0.9602898564975362316835609],
+		[0,0.3242534234038089290385380,0.6133714327005903973087020,0.8360311073266357942994298,0.9681602395076260898355762],
+		[  0.1488743389816312108848260,0.4333953941292471907992659,0.6794095682990244062343274,0.8650633666889845107320967,0.9739065285171717200779640],
+		[0,0.2695431559523449723315320,0.5190961292068118159257257,0.7301520055740493240934163,0.8870625997680952990751578,0.9782286581460569928039380],
+		[  0.1252334085114689154724414,0.3678314989981801937526915,0.5873179542866174472967024,0.7699026741943046870368938,0.9041172563704748566784659,0.9815606342467192506905491],
+		[0,0.2304583159551347940655281,0.4484927510364468528779129,0.6423493394403402206439846,0.8015780907333099127942065,0.9175983992229779652065478,0.9841830547185881494728294],
+		[  0.1080549487073436620662447,0.3191123689278897604356718,0.5152486363581540919652907,0.6872929048116854701480198,0.8272013150697649931897947,0.9284348836635735173363911,0.9862838086968123388415973],
+		[0,0.2011940939974345223006283,0.3941513470775633698972074,0.5709721726085388475372267,0.7244177313601700474161861,0.8482065834104272162006483,0.9372733924007059043077589,0.9879925180204854284895657],
+		[  0.0950125098376374401853193,0.2816035507792589132304605,0.4580167776572273863424194,0.6178762444026437484466718,0.7554044083550030338951012,0.8656312023878317438804679,0.9445750230732325760779884,0.9894009349916499325961542]
+	];
+
+	var weights = [
+		[1],
+		[0.8888888888888888888888889,0.5555555555555555555555556],
+		[0.6521451548625461426269361,0.3478548451374538573730639],
+		[0.5688888888888888888888889,0.4786286704993664680412915,0.2369268850561890875142640],
+		[0.4679139345726910473898703,0.3607615730481386075698335,0.1713244923791703450402961],
+		[0.4179591836734693877551020,0.3818300505051189449503698,0.2797053914892766679014678,0.1294849661688696932706114],
+		[0.3626837833783619829651504,0.3137066458778872873379622,0.2223810344533744705443560,0.1012285362903762591525314],
+		[0.3302393550012597631645251,0.3123470770400028400686304,0.2606106964029354623187429,0.1806481606948574040584720,0.0812743883615744119718922],
+		[0.2955242247147528701738930,0.2692667193099963550912269,0.2190863625159820439955349,0.1494513491505805931457763,0.0666713443086881375935688],
+		[0.2729250867779006307144835,0.2628045445102466621806889,0.2331937645919904799185237,0.1862902109277342514260976,0.1255803694649046246346943,0.0556685671161736664827537],
+		[0.2491470458134027850005624,0.2334925365383548087608499,0.2031674267230659217490645,0.1600783285433462263346525,0.1069393259953184309602547,0.0471753363865118271946160],
+		[0.2325515532308739101945895,0.2262831802628972384120902,0.2078160475368885023125232,0.1781459807619457382800467,0.1388735102197872384636018,0.0921214998377284479144218,0.0404840047653158795200216],
+		[0.2152638534631577901958764,0.2051984637212956039659241,0.1855383974779378137417166,0.1572031671581935345696019,0.1215185706879031846894148,0.0801580871597602098056333,0.0351194603317518630318329],
+		[0.2025782419255612728806202,0.1984314853271115764561183,0.1861610000155622110268006,0.1662692058169939335532009,0.1395706779261543144478048,0.1071592204671719350118695,0.0703660474881081247092674,0.0307532419961172683546284],
+		[0.1894506104550684962853967,0.1826034150449235888667637,0.1691565193950025381893121,0.1495959888165767320815017,0.1246289712555338720524763,0.0951585116824927848099251,0.0622535239386478928628438,0.0271524594117540948517806]
+	];
+
+	var abs = Math.abs,
+		sqrt = Math.sqrt,
+		cos = Math.cos,
+		PI = Math.PI;
+
+	return {
+		TOLERANCE: 10e-6,
+		EPSILON: 10e-12,
+
+		integrate: function(f, a, b, n) {
+			var x = abscissas[n - 2],
+				w = weights[n - 2],
+				A = 0.5 * (b - a),
+				B = A + a,
+				i = 0,
+				m = (n + 1) >> 1,
+				sum = n & 1 ? w[i++] * f(B) : 0; 
+			while (i < m) {
+				var Ax = A * x[i];
+				sum += w[i++] * (f(B + Ax) + f(B - Ax));
+			}
+			return A * sum;
+		},
+
+		findRoot: function(f, df, x, a, b, n, tolerance) {
+			for (var i = 0; i < n; i++) {
+				var fx = f(x),
+					dx = fx / df(x);
+				if (abs(dx) < tolerance)
+					return x;
+				var nx = x - dx;
+				if (fx > 0) {
+					b = x;
+					x = nx <= a ? 0.5 * (a + b) : nx;
+				} else {
+					a = x;
+					x = nx >= b ? 0.5 * (a + b) : nx;
+				}
+			}
+		},
+
+		solveQuadratic: function(a, b, c, roots, tolerance) {
+			if (abs(a) < tolerance) {
+				if (abs(b) >= tolerance) {
+					roots[0] = -c / b;
+					return 1;
+				}
+				if (abs(c) < tolerance)
+					return -1; 
+				return 0; 
+			}
+			var q = b * b - 4 * a * c;
+			if (q < 0)
+				return 0; 
+			q = sqrt(q);
+			if (b < 0)
+				q = -q;
+			q = (b + q) * -0.5;
+			var n = 0;
+			if (abs(q) >= tolerance)
+				roots[n++] = c / q;
+			if (abs(a) >= tolerance)
+				roots[n++] = q / a;
+			return n; 
+		},
+
+		solveCubic: function(a, b, c, d, roots, tolerance) {
+			if (abs(a) < tolerance)
+				return Numerical.solveQuadratic(b, c, d, roots, tolerance);
+			b /= a;
+			c /= a;
+			d /= a;
+			var Q = (b * b - 3 * c) / 9,
+				R = (2 * b * b * b - 9 * b * c + 27 * d) / 54,
+				Q3 = Q * Q * Q,
+				R2 = R * R;
+			b /= 3; 
+			if (R2 < Q3) { 
+				var theta = Math.acos(R / sqrt(Q3)),
+					q = -2 * sqrt(Q);
+				roots[0] = q * cos(theta / 3) - b;
+				roots[1] = q * cos((theta + 2 * PI) / 3) - b;
+				roots[2] = q * cos((theta - 2 * PI) / 3) - b;
+				return 3;
+			} else { 
+				var A = -Math.pow(abs(R) + sqrt(R2 - Q3), 1 / 3);
+				if (R < 0) A = -A;
+				var B = (abs(A) < tolerance) ? 0 : Q / A;
+				roots[0] = (A + B) - b;
+				return 1;
+			}
+			return 0;
+		}
+	};
+};
+
+var BlendMode = {
+	process: function(blendMode, srcContext, dstContext, alpha, offset) {
+		var srcCanvas = srcContext.canvas,
+			dstData = dstContext.getImageData(offset.x, offset.y,
+					srcCanvas.width, srcCanvas.height),
+			dst  = dstData.data,
+			src  = srcContext.getImageData(0, 0,
+					srcCanvas.width, srcCanvas.height).data,
+			min = Math.min,
+			max = Math.max,
+			abs = Math.abs,
+			sr, sg, sb, sa, 
+			br, bg, bb, ba, 
+			dr, dg, db;     
+
+		function getLum(r, g, b) {
+			return 0.2989 * r + 0.587 * g + 0.114 * b;
+		}
+
+		function setLum(r, g, b, l) {
+			var d = l - getLum(r, g, b);
+			dr = r + d;
+			dg = g + d;
+			db = b + d;
+			var l = getLum(dr, dg, db),
+				mn = min(dr, dg, db),
+				mx = max(dr, dg, db);
+			if (mn < 0) {
+				var lmn = l - mn;
+				dr = l + (dr - l) * l / lmn;
+				dg = l + (dg - l) * l / lmn;
+				db = l + (db - l) * l / lmn;
+			}
+			if (mx > 255) {
+				var ln = 255 - l, mxl = mx - l;
+				dr = l + (dr - l) * ln / mxl;
+				dg = l + (dg - l) * ln / mxl;
+				db = l + (db - l) * ln / mxl;
+			}
+		}
+
+		function getSat(r, g, b) {
+			return max(r, g, b) - min(r, g, b);
+		}
+
+		function setSat(r, g, b, s) {
+			var col = [r, g, b],
+				mx = max(r, g, b), 
+				mn = min(r, g, b), 
+				md; 
+			mn = mn == r ? 0 : mn == g ? 1 : 2;
+			mx = mx == r ? 0 : mx == g ? 1 : 2;
+			md = min(mn, mx) == 0 ? max(mn, mx) == 1 ? 2 : 1 : 0;
+			if (col[mx] > col[mn]) {
+				col[md] = (col[md] - col[mn]) * s / (col[mx] - col[mn]);
+				col[mx] = s;
+			} else {
+				col[md] = col[mx] = 0;
+			}
+			col[mn] = 0;
+			dr = col[0];
+			dg = col[1];
+			db = col[2];
+		}
+
+		var modes = {
+			multiply: function() {
+				dr = br * sr / 255;
+				dg = bg * sg / 255;
+				db = bb * sb / 255;
+			},
+
+			screen: function() {
+				dr = 255 - (255 - br) * (255 - sr) / 255;
+				dg = 255 - (255 - bg) * (255 - sg) / 255;
+				db = 255 - (255 - bb) * (255 - sb) / 255;
+			},
+
+			overlay: function() {
+				dr = br < 128 ? 2 * br * sr / 255 : 255 - 2 * (255 - br) * (255 - sr) / 255;
+				dg = bg < 128 ? 2 * bg * sg / 255 : 255 - 2 * (255 - bg) * (255 - sg) / 255;
+				db = bb < 128 ? 2 * bb * sb / 255 : 255 - 2 * (255 - bb) * (255 - sb) / 255;
+			},
+
+			'soft-light': function() {
+				var t = sr * br / 255;
+				dr = t + br * (255 - (255 - br) * (255 - sr) / 255 - t) / 255;
+				t = sg * bg / 255;
+				dg = t + bg * (255 - (255 - bg) * (255 - sg) / 255 - t) / 255;
+				t = sb * bb / 255;
+				db = t + bb * (255 - (255 - bb) * (255 - sb) / 255 - t) / 255;
+			},
+
+			'hard-light': function() {
+				dr = sr < 128 ? 2 * sr * br / 255 : 255 - 2 * (255 - sr) * (255 - br) / 255;
+				dg = sg < 128 ? 2 * sg * bg / 255 : 255 - 2 * (255 - sg) * (255 - bg) / 255;
+				db = sb < 128 ? 2 * sb * bb / 255 : 255 - 2 * (255 - sb) * (255 - bb) / 255;
+			},
+
+			'color-dodge': function() {
+				dr = sr == 255 ? sr : min(255, br * 255 / (255 - sr));
+				dg = sg == 255 ? sg : min(255, bg * 255 / (255 - sg));
+				db = sb == 255 ? sb : min(255, bb * 255 / (255 - sb));
+			},
+
+			'color-burn': function() {
+				dr = sr == 0 ? 0 : max(255 - ((255 - br) * 255) / sr, 0);
+				dg = sg == 0 ? 0 : max(255 - ((255 - bg) * 255) / sg, 0);
+				db = sb == 0 ? 0 : max(255 - ((255 - bb) * 255) / sb, 0);
+			},
+
+			darken: function() {
+				dr = br < sr ? br : sr;
+				dg = bg < sg ? bg : sg;
+				db = bb < sb ? bb : sb;
+			},
+
+			lighten: function() {
+				dr = br > sr ? br : sr;
+				dg = bg > sg ? bg : sg;
+				db = bb > sb ? bb : sb;
+			},
+
+			difference: function() {
+				dr = br - sr;
+				if (dr < 0)
+					dr = -dr;
+				dg = bg - sg;
+				if (dg < 0)
+					dg = -dg;
+				db = bb - sb;
+				if (db < 0)
+					db = -db;
+			},
+
+			exclusion: function() {
+				dr = br + sr * (255 - br - br) / 255;
+				dg = bg + sg * (255 - bg - bg) / 255;
+				db = bb + sb * (255 - bb - bb) / 255;
+			},
+
+			hue: function() {
+				setSat(sr, sg, sb, getSat(br, bg, bb));
+				setLum(dr, dg, db, getLum(br, bg, bb));
+			},
+
+			saturation: function() {
+				setSat(br, bg, bb, getSat(sr, sg, sb));
+				setLum(dr, dg, db, getLum(br, bg, bb));
+			},
+
+			luminosity: function() {
+				setLum(br, bg, bb, getLum(sr, sg, sb));
+			},
+
+			color: function() {
+				setLum(sr, sg, sb, getLum(br, bg, bb));
+			},
+
+			add: function() {
+				dr = min(br + sr, 255);
+				dg = min(bg + sg, 255);
+				db = min(bb + sb, 255);
+			},
+
+			subtract: function() {
+				dr = max(br - sr, 0);
+				dg = max(bg - sg, 0);
+				db = max(bb - sb, 0);
+			},
+
+			average: function() {
+				dr = (br + sr) / 2;
+				dg = (bg + sg) / 2;
+				db = (bb + sb) / 2;
+			},
+
+			negation: function() {
+				dr = 255 - abs(255 - sr - br);
+				dg = 255 - abs(255 - sg - bg);
+				db = 255 - abs(255 - sb - bb);
+			}
+		};
+
+		var process = modes[blendMode];
+		if (!process)
+			return;
+
+		for (var i = 0, l = dst.length; i < l; i += 4) {
+			sr = src[i];
+			br = dst[i];
+			sg = src[i + 1];
+			bg = dst[i + 1];
+			sb = src[i + 2];
+			bb = dst[i + 2];
+			sa = src[i + 3];
+			ba = dst[i + 3];
+			process();
+			var a1 = sa * alpha / 255,
+				a2 = 1 - a1;
+			dst[i] = a1 * dr + a2 * br;
+			dst[i + 1] = a1 * dg + a2 * bg;
+			dst[i + 2] = a1 * db + a2 * bb;
+			dst[i + 3] = sa * alpha + a2 * ba;
+		}
+		dstContext.putImageData(dstData, offset.x, offset.y);
+	}
+};
+
+var PaperScript = this.PaperScript = new function() {
+var parse_js=new function(){function W(a,b,c){var d=[];for(var e=0;e<a.length;++e)d.push(b.call(c,a[e],e));return d}function V(c){return/^[a-z_$][a-z0-9_$]*$/i.test(c)&&c!="this"&&!M(d,c)&&!M(b,c)&&!M(a,c)}function U(a,b){var c={};a===!0&&(a={});for(var d in b)M(b,d)&&(c[d]=a&&M(a,d)?a[d]:b[d]);return c}function T(a,b){return b<1?"":Array(b+1).join(a)}function S(a,b){function z(a){var b=a[0],c=r[b];if(!c)throw new Error("Can't find generator for \""+b+'"');y.push(a);var d=c.apply(b,a.slice(1));y.pop();return d}function x(a){var b=a[0],c=a[1];c!=null&&(b=k([g(b),"=",m(c,"seq")]));return b}function w(a){return a?a.length==0?"{}":"{"+e+j(function(){return u(a).join(e)})+e+h("}"):";"}function v(a){var b=a.length;return b==0?"{}":"{"+e+W(a,function(a,d){var f=a[1].length>0,g=j(function(){return h(a[0]?k(["case",z(a[0])+":"]):"default:")},.5)+(f?e+j(function(){return u(a[1]).join(e)}):"");!c&&f&&d<b-1&&(g+=";");return g}).join(e)+e+h("}")}function u(a,b){for(var d=[],e=a.length-1,f=0;f<=e;++f){var g=a[f],i=z(g);i!=";"&&(!c&&f==e&&(g[0]=="while"&&O(g[2])||L(g[0],["for","for-in"])&&O(g[4])||g[0]=="if"&&O(g[2])&&!g[3]||g[0]=="if"&&g[3]&&O(g[3])?i=i.replace(/;*\s*$/,";"):i=i.replace(/;+\s*$/,"")),d.push(i))}return b?d:W(d,h)}function t(a,b,c,d){var e=d||"function";a&&(e+=" "+g(a)),e+="("+l(W(b,g))+")";return k([e,w(c)])}function s(a){if(a[0]=="do")return z(["block",[a]]);var b=a;for(;;){var c=b[0];if(c=="if"){if(!b[3])return z(["block",[a]]);b=b[3]}else if(c=="while"||c=="do")b=b[2];else if(c=="for"||c=="for-in")b=b[4];else break}return z(a)}function q(a){var b=a.toString(10),c=[b.replace(/^0\./,".")],d;Math.floor(a)===a?(c.push("0x"+a.toString(16).toLowerCase(),"0"+a.toString(8)),(d=/^(.*?)(0+)$/.exec(a))&&c.push(d[1]+"e"+d[2].length)):(d=/^0?\.(0+)(.*)$/.exec(a))&&c.push(d[2]+"e-"+(d[1].length+d[2].length),b.substr(b.indexOf(".")));return n(c)}function o(a){if(a[0]=="function"||a[0]=="object"){var b=J(y),c=b.pop(),d=b.pop();while(d){if(d[0]=="stat")return!0;if((d[0]=="seq"||d[0]=="call"||d[0]=="dot"||d[0]=="sub"||d[0]=="conditional")&&d[1]===c||(d[0]=="binary"||d[0]=="assign"||d[0]=="unary-postfix")&&d[2]===c)c=d,d=b.pop();else return!1}}return!M(P,a[0])}function n(a){if(a.length==1)return a[0];if(a.length==2){var b=a[1];a=a[0];return a.length<=b.length?a:b}return n([a[0],n(a.slice(1))])}function m(a){var b=z(a);for(var c=1;c<arguments.length;++c){var d=arguments[c];if(d instanceof Function&&d(a)||a[0]==d)return"("+b+")"}return b}function l(a){return a.join(","+f)}function k(a){if(c)return a.join(" ");var b=[];for(var d=0;d<a.length;++d){var e=a[d+1];b.push(a[d]),e&&(/[a-z0-9_\x24]$/i.test(a[d].toString())&&/^[a-z0-9_\x24]/i.test(e.toString())||/[\+\-]$/.test(a[d].toString())&&/^[\+\-]/.test(e.toString()))&&b.push(" ")}return b.join("")}function j(a,b){b==null&&(b=1),d+=b;try{return a.apply(null,J(arguments,1))}finally{d-=b}}function h(a){a==null&&(a=""),c&&(a=T(" ",b.indent_start+d*b.indent_level)+a);return a}function g(a){return a.toString()}b=U(b,{indent_start:0,indent_level:4,quote_keys:!1,space_colon:!1,beautify:!1});var c=!!b.beautify,d=0,e=c?"\n":"",f=c?" ":"",r={string:Q,num:q,name:g,toplevel:function(a){return u(a).join(e)},splice:function(a){var b=y[y.length-2][0];return M(R,b)?w.apply(this,arguments):W(u(a,!0),function(a,b){return b>0?h(a):a}).join(e)},block:w,"var":function(a){return"var "+l(W(a,x))+";"},"const":function(a){return"const "+l(W(a,x))+";"},"try":function(a,b,c){var d=["try",w(a)];b&&d.push("catch","("+b[0]+")",w(b[1])),c&&d.push("finally",w(c));return k(d)},"throw":function(a){return k(["throw",z(a)])+";"},"new":function(a,b){b=b.length>0?"("+l(W(b,z))+")":"";return k(["new",m(a,"seq","binary","conditional","assign",function(a){var b=N(),c={};try{b.with_walkers({call:function(){throw c},"function":function(){return this}},function(){b.walk(a)})}catch(d){if(d===c)return!0;throw d}})+b])},"switch":function(a,b){return k(["switch","("+z(a)+")",v(b)])},"break":function(a){var b="break";a!=null&&(b+=" "+g(a));return b+";"},"continue":function(a){var b="continue";a!=null&&(b+=" "+g(a));return b+";"},conditional:function(a,b,c){return k([m(a,"assign","seq","conditional"),"?",m(b,"seq"),":",m(c,"seq")])},assign:function(a,b,c){a&&a!==!0?a+="=":a="=";return k([z(b),a,m(c,"seq")])},dot:function(a){var b=z(a),c=1;a[0]=="num"?/\./.test(a[1])||(b+="."):o(a)&&(b="("+b+")");while(c<arguments.length)b+="."+g(arguments[c++]);return b},call:function(a,b){var c=z(a);o(a)&&(c="("+c+")");return c+"("+l(W(b,function(a){return m(a,"seq")}))+")"},"function":t,defun:t,"if":function(a,b,c){var d=["if","("+z(a)+")",c?s(b):z(b)];c&&d.push("else",z(c));return k(d)},"for":function(a,b,c,d){var e=["for"];a=(a!=null?z(a):"").replace(/;*\s*$/,";"+f),b=(b!=null?z(b):"").replace(/;*\s*$/,";"+f),c=(c!=null?z(c):"").replace(/;*\s*$/,"");var g=a+b+c;g=="; ; "&&(g=";;"),e.push("("+g+")",z(d));return k(e)},"for-in":function(a,b,c,d){return k(["for","("+(a?z(a).replace(/;+$/,""):z(b)),"in",z(c)+")",z(d)])},"while":function(a,b){return k(["while","("+z(a)+")",z(b)])},"do":function(a,b){return k(["do",z(b),"while","("+z(a)+")"])+";"},"return":function(a){var b=["return"];a!=null&&b.push(z(a));return k(b)+";"},binary:function(a,b,c){var d=z(b),e=z(c);if(L(b[0],["assign","conditional","seq"])||b[0]=="binary"&&B[a]>B[b[1]])d="("+d+")";if(L(c[0],["assign","conditional","seq"])||c[0]=="binary"&&B[a]>=B[c[1]]&&(c[1]!=a||!L(a,["&&","||","*"])))e="("+e+")";return k([d,a,e])},"unary-prefix":function(a,b){var c=z(b);b[0]=="num"||b[0]=="unary-prefix"&&!M(i,a+b[1])||!o(b)||(c="("+c+")");return a+(p(a.charAt(0))?" ":"")+c},"unary-postfix":function(a,b){var c=z(b);b[0]=="num"||b[0]=="unary-postfix"&&!M(i,a+b[1])||!o(b)||(c="("+c+")");return c+a},sub:function(a,b){var c=z(a);o(a)&&(c="("+c+")");return c+"["+z(b)+"]"},object:function(a){return a.length==0?"{}":"{"+e+j(function(){return W(a,function(a){if(a.length==3)return h(t(a[0],a[1][2],a[1][3],a[2]));var d=a[0],e=z(a[1]);b.quote_keys?d=Q(d):(typeof d=="number"||!c&&+d+""==d)&&parseFloat(d)>=0?d=q(+d):V(d)||(d=Q(d));return h(k(c&&b.space_colon?[d,":",e]:[d+":",e]))}).join(","+e)})+e+h("}")},regexp:function(a,b){return"/"+a+"/"+b},array:function(a){return a.length==0?"[]":k(["[",l(W(a,function(a){return!c&&a[0]=="atom"&&a[1]=="undefined"?"":m(a,"seq")})),"]"])},stat:function(a){return z(a).replace(/;*\s*$/,";")},seq:function(){return l(W(J(arguments),z))},label:function(a,b){return k([g(a),":",z(b)])},"with":function(a,b){return k(["with","("+z(a)+")",z(b)])},atom:function(a){return g(a)}},y=[];return z(a)}function Q(a){var b=0,c=0;a=a.replace(/[\\\b\f\n\r\t\x22\x27]/g,function(a){switch(a){case"\\":return"\\\\";case"\b":return"\\b";case"\f":return"\\f";case"\n":return"\\n";case"\r":return"\\r";case"\t":return"\\t";case'"':++b;return'"';case"'":++c;return"'"}return a});return b>c?"'"+a.replace(/\x27/g,"\\'")+"'":'"'+a.replace(/\x22/g,'\\"')+'"'}function O(a){return!a||a[0]=="block"&&(!a[1]||a[1].length==0)}function N(){function g(a,b){var c={},e;for(e in a)M(a,e)&&(c[e]=d[e],d[e]=a[e]);var f=b();for(e in c)M(c,e)&&(c[e]?d[e]=c[e]:delete d[e]);return f}function f(a){if(a==null)return null;try{e.push(a);var b=a[0],f=d[b];if(f){var g=f.apply(a,a.slice(1));if(g!=null)return g}f=c[b];return f.apply(a,a.slice(1))}finally{e.pop()}}function b(a){var b=[this[0]];a!=null&&b.push(W(a,f));return b}function a(a){return[this[0],W(a,function(a){var b=[a[0]];a.length>1&&(b[1]=f(a[1]));return b})]}var c={string:function(a){return[this[0],a]},num:function(a){return[this[0],a]},name:function(a){return[this[0],a]},toplevel:function(a){return[this[0],W(a,f)]},block:b,splice:b,"var":a,"const":a,"try":function(a,b,c){return[this[0],W(a,f),b!=null?[b[0],W(b[1],f)]:null,c!=null?W(c,f):null]},"throw":function(a){return[this[0],f(a)]},"new":function(a,b){return[this[0],f(a),W(b,f)]},"switch":function(a,b){return[this[0],f(a),W(b,function(a){return[a[0]?f(a[0]):null,W(a[1],f)]})]},"break":function(a){return[this[0],a]},"continue":function(a){return[this[0],a]},conditional:function(a,b,c){return[this[0],f(a),f(b),f(c)]},assign:function(a,b,c){return[this[0],a,f(b),f(c)]},dot:function(a){return[this[0],f(a)].concat(J(arguments,1))},call:function(a,b){return[this[0],f(a),W(b,f)]},"function":function(a,b,c){return[this[0],a,b.slice(),W(c,f)]},defun:function(a,b,c){return[this[0],a,b.slice(),W(c,f)]},"if":function(a,b,c){return[this[0],f(a),f(b),f(c)]},"for":function(a,b,c,d){return[this[0],f(a),f(b),f(c),f(d)]},"for-in":function(a,b,c,d){return[this[0],f(a),f(b),f(c),f(d)]},"while":function(a,b){return[this[0],f(a),f(b)]},"do":function(a,b){return[this[0],f(a),f(b)]},"return":function(a){return[this[0],f(a)]},binary:function(a,b,c){return[this[0],a,f(b),f(c)]},"unary-prefix":function(a,b){return[this[0],a,f(b)]},"unary-postfix":function(a,b){return[this[0],a,f(b)]},sub:function(a,b){return[this[0],f(a),f(b)]},object:function(a){return[this[0],W(a,function(a){return a.length==2?[a[0],f(a[1])]:[a[0],f(a[1]),a[2]]})]},regexp:function(a,b){return[this[0],a,b]},array:function(a){return[this[0],W(a,f)]},stat:function(a){return[this[0],f(a)]},seq:function(){return[this[0]].concat(W(J(arguments),f))},label:function(a,b){return[this[0],a,f(b)]},"with":function(a,b){return[this[0],f(a),f(b)]},atom:function(a){return[this[0],a]}},d={},e=[];return{walk:f,with_walkers:g,parent:function(){return e[e.length-2]},stack:function(){return e}}}function M(a,b){return Object.prototype.hasOwnProperty.call(a,b)}function L(a,b){for(var c=b.length;--c>=0;)if(b[c]===a)return!0;return!1}function K(a){return a.split("")}function J(a,b){return Array.prototype.slice.call(a,b||0)}function I(a){var b={};for(var c=0;c<a.length;++c)b[a[c]]=!0;return b}function H(a){a instanceof Function&&(a=a());for(var b=1,c=arguments.length;--c>0;++b)arguments[b]();return a}function G(a){var b=J(arguments,1);return function(){return a.apply(this,b.concat(J(arguments)))}}function F(a,b,c){function bk(a){try{++d.in_loop;return a()}finally{--d.in_loop}}function bi(a){var b=bg(a),c=d.token.value;if(e("operator")&&M(A,c)){if(bh(b)){g();return p("assign",A[c],b,bi(a))}i("Invalid assignment")}return b}function bh(a){if(!b)return!0;switch(a[0]){case"dot":case"sub":case"new":case"call":return!0;case"name":return a[1]!="this"}}function bg(a){var b=bf(a);if(e("operator","?")){g();var c=bj(!1);m(":");return p("conditional",b,c,bj(!1,a))}return b}function bf(a){return be(Y(!0),0,a)}function be(a,b,c){var f=e("operator")?d.token.value:null;f&&f=="in"&&c&&(f=null);var h=f!=null?B[f]:null;if(h!=null&&h>b){g();var i=be(Y(!0),h,c);return be(p("binary",f,a,i),b,c)}return a}function bd(a,b,c){(b=="++"||b=="--")&&!bh(c)&&i("Invalid use of "+b+" operator");return p(a,b,c)}function bc(a,b){if(e("punc",".")){g();return bc(p("dot",a,bb()),b)}if(e("punc","[")){g();return bc(p("sub",a,H(bj,G(m,"]"))),b)}if(b&&e("punc","(")){g();return bc(p("call",a,Z(")")),!0)}return b&&e("operator")&&M(z,d.token.value)?H(G(bd,"unary-postfix",d.token.value,a),g):a}function bb(){switch(d.token.type){case"name":case"operator":case"keyword":case"atom":return H(d.token.value,g);default:k()}}function ba(){switch(d.token.type){case"num":case"string":return H(d.token.value,g)}return bb()}function _(){var a=!0,c=[];while(!e("punc","}")){a?a=!1:m(",");if(!b&&e("punc","}"))break;var f=d.token.type,h=ba();f!="name"||h!="get"&&h!="set"||!!e("punc",":")?(m(":"),c.push([h,bj(!1)])):c.push([bb(),P(!1),h])}g();return p("object",c)}function $(){return p("array",Z("]",!b,!0))}function Z(a,b,c){var d=!0,f=[];while(!e("punc",a)){d?d=!1:m(",");if(b&&e("punc",a))break;e("punc",",")&&c?f.push(["atom","undefined"]):f.push(bj(!1))}g();return f}function X(){var a=Y(!1),b;e("punc","(")?(g(),b=Z(")")):b=[];return bc(p("new",a,b),!0)}function W(){return p("const",U())}function V(a){return p("var",U(a))}function U(a){var b=[];for(;;){e("name")||k();var c=d.token.value;g(),e("operator","=")?(g(),b.push([c,bj(!1,a)])):b.push([c]);if(!e("punc",","))break;g()}return b}function T(){var a=R(),b,c;if(e("keyword","catch")){g(),m("("),e("name")||i("Name expected");var f=d.token.value;g(),m(")"),b=[f,R()]}e("keyword","finally")&&(g(),c=R()),!b&&!c&&i("Missing catch/finally blocks");return p("try",a,b,c)}function R(){m("{");var a=[];while(!e("punc","}"))e("eof")&&k(),a.push(t());g();return a}function Q(){var a=q(),b=t(),c;e("keyword","else")&&(g(),c=t());return p("if",a,b,c)}function O(a){var b=a[0]=="var"?p("name",a[1][0]):a;g();var c=bj();m(")");return p("for-in",a,b,c,bk(t))}function N(a){m(";");var b=e("punc",";")?null:bj();m(";");var c=e("punc",")")?null:bj();m(")");return p("for",a,b,c,bk(t))}function K(){m("(");var a=null;if(!e("punc",";")){a=e("keyword","var")?(g(),V(!0)):bj(!0,!0);if(e("operator","in"))return O(a)}return N(a)}function I(a){var b;n()||(b=e("name")?d.token.value:null),b!=null?(g(),L(b,d.labels)||i("Label "+b+" without matching loop or statement")):d.in_loop==0&&i(a+" not inside a loop or switch"),o();return p(a,b)}function F(){return p("stat",H(bj,o))}function w(a){d.labels.push(a);var c=d.token,e=t();b&&!M(C,e[0])&&k(c),d.labels.pop();return p("label",a,e)}function s(a){return c?function(){var b=d.token,c=a.apply(this,arguments);c[0]=r(c[0],b,h());return c}:a}function r(a,b,c){return a instanceof E?a:new E(a,b,c)}function q(){m("(");var a=bj();m(")");return a}function p(){return J(arguments)}function o(){e("punc",";")?g():n()||k()}function n(){return!b&&(d.token.nlb||e("eof")||e("punc","}"))}function m(a){return l("punc",a)}function l(a,b){if(e(a,b))return g();j(d.token,"Unexpected token "+d.token.type+", expected "+a)}function k(a){a==null&&(a=d.token),j(a,"Unexpected token: "+a.type+" ("+a.value+")")}function j(a,b){i(b,a.line,a.col)}function i(a,b,c,e){var f=d.input.context();u(a,b!=null?b:f.tokline,c!=null?c:f.tokcol,e!=null?e:f.tokpos)}function h(){return d.prev}function g(){d.prev=d.token,d.peeked?(d.token=d.peeked,d.peeked=null):d.token=d.input();return d.token}function f(){return d.peeked||(d.peeked=d.input())}function e(a,b){return v(d.token,a,b)}var d={input:typeof a=="string"?x(a,!0):a,token:null,prev:null,peeked:null,in_function:0,in_loop:0,labels:[]};d.token=g();var t=s(function(){e("operator","/")&&(d.peeked=null,d.token=d.input(!0));switch(d.token.type){case"num":case"string":case"regexp":case"operator":case"atom":return F();case"name":return v(f(),"punc",":")?w(H(d.token.value,g,g)):F();case"punc":switch(d.token.value){case"{":return p("block",R());case"[":case"(":return F();case";":g();return p("block");default:k()};case"keyword":switch(H(d.token.value,g)){case"break":return I("break");case"continue":return I("continue");case"debugger":o();return p("debugger");case"do":return function(a){l("keyword","while");return p("do",H(q,o),a)}(bk(t));case"for":return K();case"function":return P(!0);case"if":return Q();case"return":d.in_function==0&&i("'return' outside of function");return p("return",e("punc",";")?(g(),null):n()?null:H(bj,o));case"switch":return p("switch",q(),S());case"throw":return p("throw",H(bj,o));case"try":return T();case"var":return H(V,o);case"const":return H(W,o);case"while":return p("while",q(),bk(t));case"with":return p("with",q(),t());default:k()}}}),P=s(function(a){var b=e("name")?H(d.token.value,g):null;a&&!b&&k(),m("(");return p(a?"defun":"function",b,function(a,b){while(!e("punc",")"))a?a=!1:m(","),e("name")||k(),b.push(d.token.value),g();g();return b}(!0,[]),function(){++d.in_function;var a=d.in_loop;d.in_loop=0;var b=R();--d.in_function,d.in_loop=a;return b}())}),S=G(bk,function(){m("{");var a=[],b=null;while(!e("punc","}"))e("eof")&&k(),e("keyword","case")?(g(),b=[],a.push([bj(),b]),m(":")):e("keyword","default")?(g(),m(":"),b=[],a.push([null,b])):(b||k(),b.push(t()));g();return a}),Y=s(function(a){if(e("operator","new")){g();return X()}if(e("operator")&&M(y,d.token.value))return bd("unary-prefix",H(d.token.value,g),Y(a));if(e("punc")){switch(d.token.value){case"(":g();return bc(H(bj,G(m,")")),a);case"[":g();return bc($(),a);case"{":g();return bc(_(),a)}k()}if(e("keyword","function")){g();return bc(P(!1),a)}if(M(D,d.token.type)){var b=d.token.type=="regexp"?p("regexp",d.token.value[0],d.token.value[1]):p(d.token.type,d.token.value);return bc(H(b,g),a)}k()}),bj=s(function(a,b){arguments.length==0&&(a=!0);var c=bi(b);if(a&&e("punc",",")){g();return p("seq",c,bj(!0,b))}return c});return p("toplevel",function(a){while(!e("eof"))a.push(t());return a}([]))}function E(a,b,c){this.name=a,this.start=b,this.end=c}function x(b){function P(a){if(a)return I();y(),v();var b=g();if(!b)return x("eof");if(o(b))return C();if(b=='"'||b=="'")return F();if(M(l,b))return x("punc",h());if(b==".")return L();if(b=="/")return K();if(M(e,b))return J();if(b=="\\"||q(b))return N();B("Unexpected character '"+b+"'")}function O(a,b){try{return b()}catch(c){if(c===w)B(a);else throw c}}function N(){var b=A(r);return M(a,b)?M(i,b)?x("operator",b):M(d,b)?x("atom",b):x("keyword",b):x("name",b)}function L(){h();return o(g())?C("."):x("punc",".")}function K(){h();var a=f.regex_allowed;switch(g()){case"/":f.comments_before.push(G()),f.regex_allowed=a;return P();case"*":f.comments_before.push(H()),f.regex_allowed=a;return P()}return f.regex_allowed?I():J("/")}function J(a){function b(a){if(!g())return a;var c=a+g();if(M(i,c)){h();return b(c)}return a}return x("operator",b(a||h()))}function I(){return O("Unterminated regular expression",function(){var a=!1,b="",c,d=!1;while(c=h(!0))if(a)b+="\\"+c,a=!1;else if(c=="[")d=!0,b+=c;else if(c=="]"&&d)d=!1,b+=c;else{if(c=="/"&&!d)break;c=="\\"?a=!0:b+=c}var e=A(function(a){return M(m,a)});return x("regexp",[b,e])})}function H(){h();return O("Unterminated multiline comment",function(){var a=t("*/",!0),b=f.text.substring(f.pos,a),c=x("comment2",b,!0);f.pos=a+2,f.line+=b.split("\n").length-1,f.newline_before=b.indexOf("\n")>=0;return c})}function G(){h();var a=t("\n"),b;a==-1?(b=f.text.substr(f.pos),f.pos=f.text.length):(b=f.text.substring(f.pos,a),f.pos=a);return x("comment1",b,!0)}function F(){return O("Unterminated string constant",function(){var a=h(),b="";for(;;){var c=h(!0);if(c=="\\")c=D();else if(c==a)break;b+=c}return x("string",b)})}function E(a){var b=0;for(;a>0;--a){var c=parseInt(h(!0),16);isNaN(c)&&B("Invalid hex-character pattern in string"),b=b<<4|c}return b}function D(){var a=h(!0);switch(a){case"n":return"\n";case"r":return"\r";case"t":return"\t";case"b":return"\b";case"v":return"";case"f":return"\f";case"0":return"";case"x":return String.fromCharCode(E(2));case"u":return String.fromCharCode(E(4));case"\n":return"";default:return a}}function C(a){var b=!1,c=!1,d=!1,e=a==".",f=A(function(f,g){if(f=="x"||f=="X")return d?!1:d=!0;if(!d&&(f=="E"||f=="e"))return b?!1:b=c=!0;if(f=="-")return c||g==0&&!a?!0:!1;if(f=="+")return c;c=!1;if(f==".")return!e&&!d?e=!0:!1;return p(f)});a&&(f=a+f);var g=s(f);if(!isNaN(g))return x("num",g);B("Invalid syntax: "+f)}function B(a){u(a,f.tokline,f.tokcol,f.tokpos)}function A(a){var b="",c=g(),d=0;while(c&&a(c,d++))b+=h(),c=g();return b}function y(){while(M(j,g()))h()}function x(a,b,d){f.regex_allowed=a=="operator"&&!M(z,b)||a=="keyword"&&M(c,b)||a=="punc"&&M(k,b);var e={type:a,value:b,line:f.tokline,col:f.tokcol,pos:f.tokpos,nlb:f.newline_before};d||(e.comments_before=f.comments_before,f.comments_before=[]),f.newline_before=!1;return e}function v(){f.tokline=f.line,f.tokcol=f.col,f.tokpos=f.pos}function t(a,b){var c=f.text.indexOf(a,f.pos);if(b&&c==-1)throw w;return c}function n(){return!f.peek()}function h(a){var b=f.text.charAt(f.pos++);if(a&&!b)throw w;b=="\n"?(f.newline_before=!0,++f.line,f.col=0):++f.col;return b}function g(){return f.text.charAt(f.pos)}var f={text:b.replace(/\r\n?|[\n\u2028\u2029]/g,"\n").replace(/^\uFEFF/,""),pos:0,tokpos:0,line:0,tokline:0,col:0,tokcol:0,newline_before:!1,regex_allowed:!1,comments_before:[]};P.context=function(a){a&&(f=a);return f};return P}function v(a,b,c){return a.type==b&&(c==null||a.value==c)}function u(a,b,c,d){throw new t(a,b,c,d)}function t(a,b,c,d){this.message=a,this.line=b,this.col=c,this.pos=d}function s(a){if(f.test(a))return parseInt(a.substr(2),16);if(g.test(a))return parseInt(a.substr(1),8);if(h.test(a))return parseFloat(a)}function r(a){return q(a)||o(a)}function q(a){return a=="$"||a=="_"||n(a)}function p(a){return o(a)||n(a)}function o(a){a=a.charCodeAt(0);return a>=48&&a<=57}function n(a){a=a.charCodeAt(0);return a>=65&&a<=90||a>=97&&a<=122}var a=I(["break","case","catch","const","continue","default","delete","do","else","finally","for","function","if","in","instanceof","new","return","switch","throw","try","typeof","var","void","while","with"]),b=I(["abstract","boolean","byte","char","class","debugger","double","enum","export","extends","final","float","goto","implements","import","int","interface","long","native","package","private","protected","public","short","static","super","synchronized","throws","transient","volatile"]),c=I(["return","new","delete","throw","else","case"]),d=I(["false","null","true","undefined"]),e=I(K("+-*&%=<>!?|~^")),f=/^0x[0-9a-f]+$/i,g=/^0[0-7]+$/,h=/^\d*\.?\d*(?:e[+-]?\d*(?:\d\.?|\.?\d)\d*)?$/i,i=I(["in","instanceof","typeof","new","void","delete","++","--","+","-","!","~","&","|","^","*","/","%",">>","<<",">>>","<",">","<=",">=","==","===","!=","!==","?","=","+=","-=","/=","*=","%=",">>=","<<=",">>>=","|=","^=","&=","&&","||"]),j=I(K(" \n\r\t")),k=I(K("[{}(,.;:")),l=I(K("[]{}(),;:")),m=I(K("gmsiy"));t.prototype.toString=function(){return this.message+" (line: "+this.line+", col: "+this.col+", pos: "+this.pos+")"};var w={},y=I(["typeof","void","delete","--","++","!","~","-","+"]),z=I(["--","++"]),A=function(a,b,c){while(c<a.length)b[a[c]]=a[c].substr(0,a[c].length-1),c++;return b}(["+=","-=","/=","*=","%=",">>=","<<=",">>>=","|=","^=","&="],{"=":!0},0),B=function(a,b){for(var c=0,d=1;c<a.length;++c,++d){var e=a[c];for(var f=0;f<e.length;++f)b[e[f]]=d}return b}([["||"],["&&"],["|"],["^"],["&"],["==","===","!=","!=="],["<",">","<=",">=","in","instanceof"],[">>","<<",">>>"],["+","-"],["*","/","%"]],{}),C=I(["for","do","while","switch"]),D=I(["atom","num","string","regexp","name"]);E.prototype.toString=function(){return this.name};var P=I(["name","array","object","string","dot","sub","call","regexp"]),R=I(["if","while","do","for","for-in","with"]);return{parse:F,gen_code:S,tokenizer:x,ast_walker:N}}
+
+	// Math Operators
+
+	var operators = {
+		'+': 'add',
+		'-': 'subtract',
+		'*': 'multiply',
+		'/': 'divide',
+		'%': 'modulo',
+		'==': 'equals',
+		'!=': 'equals'
+	};
+
+	function $eval(left, operator, right) {
+		var handler = operators[operator];
+		if (left && left[handler]) {
+			var res = left[handler](right);
+			return operator == '!=' ? !res : res;
+		}
+		switch (operator) {
+		case '+': return left + right;
+		case '-': return left - right;
+		case '*': return left * right;
+		case '/': return left / right;
+		case '%': return left % right;
+		case '==': return left == right;
+		case '!=': return left != right;
+		default:
+			throw new Error('Implement Operator: ' + operator);
+		}
+	};
+
+	// Sign Operators
+
+	var signOperators = {
+		'-': 'negate'
+	};
+
+	function $sign(operator, value) {
+		var handler = signOperators[operator];
+		if (value && value[handler]) {
+			return value[handler]();
+		}
+		switch (operator) {
+		case '+': return +value;
+		case '-': return -value;
+		default:
+			throw new Error('Implement Sign Operator: ' + operator);
+		}
+	}
+
+	// AST Helpers
+
+	function isDynamic(exp) {
+		var type = exp[0];
+		return type != 'num' && type != 'string';
+	}
+
+	function handleOperator(operator, left, right) {
+		// Only replace operators with calls to $operator if the left hand side
+		// is potentially an object.
+		if (operators[operator] && isDynamic(left)) {
+			// Replace with call to $operator(left, operator, right):
+			return ['call', ['name', '$eval'],
+					[left, ['string', operator], right]];
+		}
+	}
+
+	/**
+	 * Compiles PaperScript code into JavaScript code.
+	 *
+	 * @name PaperScript.compile
+	 * @function
+	 * @param {String} code The PaperScript code.
+	 * @return {String} The compiled PaperScript as JavaScript code.
+	 */
+	function compile(code) {
+		// Use parse-js to translate the code into a AST structure which is then
+		// walked and parsed for operators to overload. The resulting AST is
+		// translated back to code and evaluated.
+		var ast = parse_js.parse(code),
+			walker = parse_js.ast_walker(),
+			walk = walker.walk;
+
+		ast = walker.with_walkers({
+			'binary': function(operator, left, right) {
+				// Handle simple mathematical operators here:
+				return handleOperator(operator, left = walk(left),
+						right = walk(right))
+						// Always return something since we're walking left and
+						|| [this[0], operator, left, right];
+			},
+
+			'assign': function(operator, left, right) {
+				var res = handleOperator(operator, left = walk(left),
+						right = walk(right));
+				if (res)
+					return [this[0], true, left, res];
+				return [this[0], operator, left, right];
+			},
+
+			'unary-prefix': function(operator, exp) {
+				if (signOperators[operator] && isDynamic(exp)) {
+					return ['call', ['name', '$sign'],
+							[['string', operator], walk(exp)]];
+				}
+			}
+		}, function() {
+			return walk(ast);
+		});
+
+		return parse_js.gen_code(ast, {
+			beautify: true
+		});
+	}
+
+	function evaluate(code, scope) {
+		paper = scope;
+		var view = scope.project && scope.project.view,
+			res;
+		with (scope) {
+			(function() {
+				var onEditOptions, onSelect, onDeselect, onReselect,
+					onMouseDown, onMouseUp, onMouseDrag, onMouseMove,
+					onKeyDown, onKeyUp, onFrame, onResize;
+				res = eval(compile(code));
+				if (/on(?:Key|Mouse)(?:Up|Down|Move|Drag)/.test(code)) {
+					Base.each(Tool.prototype._events, function(key) {
+						var value = eval(key);
+						if (value) {
+							scope.getTool()[key] = value;
+						}
+					});
+				}
+				if (view) {
+					view.setOnResize(onResize);
+					view.fire('resize', {
+						size: view.size,
+						delta: new Point()
+					});
+					view.setOnFrame(onFrame);
+					view.draw();
+				}
+			}).call(scope);
+		}
+		return res;
+	}
+
+	function request(url, scope) {
+		var xhr = new (window.ActiveXObject || XMLHttpRequest)(
+				'Microsoft.XMLHTTP');
+		xhr.open('GET', url, true);
+		if (xhr.overrideMimeType) {
+			xhr.overrideMimeType('text/plain');
+		}
+		xhr.onreadystatechange = function() {
+			if (xhr.readyState === 4) {
+				return evaluate(xhr.responseText, scope);
+			}
+		};
+		return xhr.send(null);
+	}
+
+	function load() {
+		var scripts = document.getElementsByTagName('script');
+		for (var i = 0, l = scripts.length; i < l; i++) {
+			var script = scripts[i];
+			if (/^text\/(?:x-|)paperscript$/.test(script.type)
+					&& !script.getAttribute('data-paper-loaded')) {
+				var scope = new PaperScope(script);
+				scope.setup(PaperScript.getAttribute(script, 'canvas'));
+				if (script.src) {
+					request(script.src, scope);
+				} else {
+					evaluate(script.innerHTML, scope);
+				}
+				script.setAttribute('data-paper-loaded', true);
+			}
+		}
+	}
+
+	DomEvent.add(window, { load: load });
+
+	function handleAttribute(name) {
+		name += 'Attribute';
+		return function(el, attr) {
+			return el[name](attr) || el[name]('data-paper-' + attr);
+		};
+	}
+
+	return {
+		compile: compile,
+		evaluate: evaluate,
+		load: load,
+		getAttribute: handleAttribute('get'),
+		hasAttribute: handleAttribute('has')
+	};
+
+};
+
+this.load = PaperScript.load;
+
+Base.each(this, function(val, key) {
+	if (val && val.prototype instanceof Base) {
+		val._name = key;
+	}
+});
+
+this.enumerable = true;
+return new (PaperScope.inject(this));
+};
diff --git a/dist/docs/resources/js/reference.js b/dist/docs/resources/js/reference.js
new file mode 100644
index 00000000..b39ee690
--- /dev/null
+++ b/dist/docs/resources/js/reference.js
@@ -0,0 +1,258 @@
+ContentEnd = HtmlElement.extend({
+	_class: 'content-end',
+
+	initialize: function() {
+		var anchor = $$('a[name]').getLast(),
+			that = this;
+		if (anchor) {
+			function resize() {
+				var bottom = $window.getScrollSize().height
+					- anchor.getOffset().y - $window.getSize().height;
+				that.setHeight(that.getHeight() - bottom);
+			}
+			$window.addEvents({
+				load: resize,
+				resize: resize
+			});
+			// Not sure why these are required twice, in addition to load()..
+			resize();
+			resize();
+		}
+	}
+});
+
+function createCodeMirror(place, options, source) {
+	return new CodeMirror(place, Hash.create({}, {
+		lineNumbers: true,
+		matchBrackets: true,
+		indentUnit: 4,
+		tabMode: 'shift',
+		value: source.getText().replace(/\t/gi, '    ').match(
+			// Remove first & last empty line
+			/^\s*?[\n\r]?([\u0000-\uffff]*?)[\n\r]?\s*?$/)[1]
+	}, options));
+}
+
+Code = HtmlElement.extend({
+	_class: 'code',
+
+	initialize: function() {
+		// Only format this element if it is visible, otherwise wait until
+		// it is made visible and then call initialize() manually.
+		if (this.initialized || this.getBounds().height == 0)
+			return;
+		var that = this;
+		var start = this.getProperty('start');
+		var highlight = this.getProperty('highlight');
+		var editor = createCodeMirror(function(el) {
+			that.replaceWith(el);
+		}, {
+			lineNumbers: !this.hasParent('.resource-text'),
+			firstLineNumber: (start || 1).toInt(),
+			readOnly: true
+		}, this);
+		if (highlight) {
+			var highlights = highlight.split(',');
+			for (var i = 0, l = highlights.length; i < l; i++) {
+				var highlight = highlights[i].split('-');
+				var hlStart = highlight[0].toInt() - 1;
+				var hlEnd = highlight.length == 2
+						? highlight[1].toInt() - 1 : hlStart;
+				if (start) {
+					hlStart -= start - 1;
+					hlEnd -= start - 1;
+				}
+				for (var j = hlStart; j <= hlEnd; j++) {
+					editor.setLineClass(j, 'highlight');
+				}
+			}
+		}
+		this.initialized = true;
+	}
+});
+
+PaperScript = HtmlElement.extend({
+	_class: 'paperscript',
+
+	initialize: function() {
+		// Only format this element if it is visible, otherwise wait until
+		// it is made visible and then call initialize() manually.
+		if (this.initialized || this.getBounds().height == 0)
+			return;
+		var script = $('script', this),
+			button = $('.button', this);
+		if (!script || !button)
+			return;
+		var source = button.injectAfter('div', {
+			className: 'source hidden'
+		});
+		var that = this,
+			canvas = $('canvas', this),
+			hasResize = canvas.getProperty('resize'),
+			showSplit = this.hasClass('split'),
+			sourceFirst = this.hasClass('source'),
+			width, height,
+			editor = null,
+			hasBorders = true;
+
+		function showSource(show) {
+			source.modifyClass('hidden', !show);
+			button.setText(show ? 'Run' : 'Source');
+			if (show && !editor) {
+				editor = createCodeMirror(source.$, {
+					/*
+					onKeyEvent: function(editor, event) {
+						event = new DomEvent(event);
+						if (event.type == 'keydown') {
+							var pos = editor.getCursor();
+							pos.ch += 4;
+							editor.setCursor(pos);
+							event.stop();
+						}
+					},
+					*/
+				}, script);
+			}
+		}
+
+		function runScript() {
+			var scope = paper.PaperScope.get(script.$);
+			if (scope) {
+				// Update script to edited version
+				var code = editor.getValue();
+				script.setText(code);
+				// Keep a reference to the used canvas, since we're going to
+				// fully clear the scope and initialize again with this canvas.
+				var canvas = scope.view.canvas;
+				// Clear scope first, then evaluate a new script.
+				scope.clear();
+				scope.initialize(canvas);
+				scope.evaluate(code);
+			}
+		}
+
+		function resize() {
+			if (!canvas.hasClass('hidden')) {
+				width = canvas.getWidth();
+				height = canvas.getHeight();
+			} else if (hasResize) {
+				// Can't get correct dimensions from hidden canvas,
+				// so calculate again.
+				var size = $window.getScrollSize();
+				var offset = source.getOffset();
+				width = size.width - offset.x;
+				height = size.height - offset.y;
+			}
+			// Resize the main element as well, so that the float:right button
+			// is always positioned correctly.
+			that.set({ width: width, height: height });
+			source.set({
+				width: width - (hasBorders ? 2 : 1),
+				height: height - (hasBorders ? 2 : 0)
+			});
+		}
+
+		function toggleView() {
+			var show = source.hasClass('hidden');
+			resize();
+			canvas.modifyClass('hidden', show);
+			showSource(show);
+			if (!show)
+				runScript();
+			// Remove padding
+			button.setStyle('right',
+				$('.CodeMirror', source).getScrollSize().height > height
+					? 24 : 8);
+		}
+
+		if (hasResize) {
+			// Delay the installing of the resize event, so paper.js installs
+			// its own before us.
+			(function() {
+				$window.addEvents({
+					resize: resize
+				});
+			}).delay(1);
+			hasBorders = false;
+			source.setStyles({
+				borderWidth: '0 0 0 1px'
+			});
+		}
+
+		if (showSplit) {
+			showSource(true);
+		} else if (sourceFirst) {
+			toggleView();
+		}
+
+		button.addEvents({
+			click: function(event) {
+				if (showSplit) {
+					runScript();
+				} else {
+					toggleView();
+				}
+				event.stop();
+			},
+
+			mousedown: function(event) {
+				event.stop();
+			}
+		});
+		this.initialized = true;
+	}
+});
+
+var lastMemberId = null;
+function toggleMember(id, scrollTo, dontScroll) {
+	var link = $('#' + id + '-link');
+	if (!link)
+		return true;
+	var desc = $('#' + id + '-description');
+	var v = !link.hasClass('hidden');
+	// Retrieve y-offset before any changes, so we can correct scrolling after
+	var offset = (v ? link : desc).getOffset().y;
+	if (lastMemberId && lastMemberId != id) {
+		var prevId = lastMemberId;
+		lastMemberId = null;
+		toggleMember(prevId, false, true);
+	}
+	lastMemberId = v && id;
+	link.modifyClass('hidden', v);
+	desc.modifyClass('hidden', !v);
+	if (!dontScroll) {
+		// Correct scrolling relatively to where we are, by checking the amount
+		// the element has shifted due to the above toggleMember call, and
+		// correcting by 11px offset, caused by 1px border and 10px padding.
+		var scroll = $window.getScrollOffset();
+		$window.setScrollOffset(scroll.x, scroll.y
+				+ (v ? desc : link).getOffset().y - offset + 11 * (v ? 1 : -1));
+	}
+	if (!desc.editor && v) {
+		desc.editor = $$('pre.code, .paperscript', desc).each(function(code) {
+			code.initialize();
+		});
+	}
+	if (scrollTo)
+		scrollToMember(id);
+	return false;
+}
+
+function scrollToElement(id) {
+	var e = $('#' + id + '-member');
+	if (e) {
+		if (e.hasClass('member'))
+			toggleMember(id);
+		var offs = e.getOffset();
+		$window.setScrollOffset(offs);
+	} else {
+		window.location.hash = id;
+	}
+}
+
+$document.addEvent('domready', function() {
+	var h = unescape(window.location.hash);
+	if (h) scrollToElement(h.substring(1));
+	if (window.paper)
+		paper.load();
+});
diff --git a/dist/paper.js b/dist/paper.js
new file mode 100644
index 00000000..7b2639d8
--- /dev/null
+++ b/dist/paper.js
@@ -0,0 +1,3 @@
+// Paper.js loader for development, as produced by the build/load.sh script
+document.write('<script type="text/javascript" src="../../lib/prepro.js"></script>');
+document.write('<script type="text/javascript" src="../../src/load.js"></script>');
diff --git a/lib/bootstrap.js b/lib/bootstrap.js
new file mode 100644
index 00000000..aaed4e9f
--- /dev/null
+++ b/lib/bootstrap.js
@@ -0,0 +1,411 @@
+/**
+ * Bootstrap JavaScript Library
+ * (c) 2006 - 2011 Juerg Lehni, http://lehni.org/
+ *
+ * Bootstrap is released under the MIT license
+ * http://bootstrapjs.org/
+ *
+ * Inspirations:
+ * http://dean.edwards.name/weblog/2006/03/base/
+ * http://dev.helma.org/Wiki/JavaScript+Inheritance+Sugar/
+ * http://prototypejs.org/
+ */
+
+var Base = new function() { // Bootstrap scope
+	// Fix __proto__ for browsers where it is not implemented (IE and Opera).
+	var fix = !this.__proto__,
+		hidden = /^(statics|generics|preserve|enumerable|prototype|__proto__|toString|valueOf)$/,
+		proto = Object.prototype,
+		/**
+		 * Private function that checks if an object contains a given property.
+		 * Naming it 'has' causes problems on Opera when defining
+		 * Object.prototype.has, as the local version then seems to be overriden
+		 * by that. Giving it a idfferent name fixes it.
+		 */
+		has = fix
+			? function(name) {
+				return name !== '__proto__' && this.hasOwnProperty(name);
+			}
+			: proto.hasOwnProperty,
+		toString = proto.toString,
+		proto = Array.prototype,
+		isArray = Array.isArray = Array.isArray || function(obj) {
+			return toString.call(obj) === '[object Array]';
+		},
+		slice = proto.slice,
+		forEach = proto.forEach || function(iter, bind) {
+			for (var i = 0, l = this.length; i < l; i++)
+				iter.call(bind, this[i], i, this);
+		},
+		forIn = function(iter, bind) {
+			// Do not use Object.keys for iteration as iterators might modify
+			// the object we're iterating over, making the hasOwnProperty still
+			// necessary.
+			for (var i in this)
+				if (this.hasOwnProperty(i))
+					iter.call(bind, this[i], i, this);
+		},
+		_define = Object.defineProperty,
+		_describe = Object.getOwnPropertyDescriptor;
+
+	// Support a mixed environment of some ECMAScript 5 features present,
+	// along with __defineGetter/Setter__ functions, as found in browsers today.
+	function define(obj, name, desc) {
+		// Unfortunately Safari seems to ignore configurable: true and
+		// does not override existing properties, so we need to delete
+		// first:
+		if (_define) {
+			try {
+				delete obj[name];
+				return _define(obj, name, desc);
+			} catch (e) {}
+		}
+		if ((desc.get || desc.set) && obj.__defineGetter__) {
+			desc.get && obj.__defineGetter__(name, desc.get);
+			desc.set && obj.__defineSetter__(name, desc.set);
+		} else {
+			obj[name] = desc.value;
+		}
+		return obj;
+	}
+
+	function describe(obj, name) {
+		if (_describe) {
+			try {
+				return _describe(obj, name);
+			} catch (e) {}
+		}
+		var get = obj.__lookupGetter__ && obj.__lookupGetter__(name);
+		return get
+			? { get: get, set: obj.__lookupSetter__(name), enumerable: true,
+					configurable: true }
+			: has.call(obj, name)
+				? { value: obj[name], enumerable: true, configurable: true,
+						writable: true }
+				: null;
+	}
+
+	/**
+	 * Private function that injects functions from src into dest, overriding
+	 * (and inherinting from) base.
+	 */
+	function inject(dest, src, enumerable, base, preserve, generics) {
+		var beans, bean;
+
+		/**
+		 * Private function that injects one field with given name and checks if
+		 * the field is a function that needs to be wrapped for calls of base().
+		 * This is only needed if the function in base is different from the one
+		 * in src, and if the one in src is actually calling base through base.
+		 * The string of the function is parsed for this.base to detect calls.
+		 */
+		function field(name, val, dontCheck, generics) {
+			// This does even work for prop: 0, as it will just be looked up
+			// again through describe.
+			var val = val || (val = describe(src, name))
+					&& (val.get ? val : val.value),
+				func = typeof val === 'function',
+				res = val,
+				// Only lookup previous value if we preserve or define a
+				// function that might need it for this.base(). If we're
+				// defining a getter, don't lookup previous value, but look if
+				// the property exists (name in dest) and store result in prev
+				prev = preserve || func
+					? (val && val.get ? name in dest : dest[name]) : null;
+			// Make generics first, as we might jump out bellow in the
+			// val !== (src.__proto__ || Object.prototype)[name] check,
+			// e.g. when explicitely reinjecting Array.prototype methods
+			// to produce generics of them.
+			if (generics && func && (!preserve || !generics[name])) {
+				generics[name] = function(bind) {
+					// Do not call Array.slice generic here, as on Safari,
+					// this seems to confuse scopes (calling another
+					// generic from generic-producing code).
+					return bind && dest[name].apply(bind,
+							slice.call(arguments, 1));
+				}
+			}
+			if ((dontCheck || val !== undefined && has.call(src, name))
+					&& (!preserve || !prev)) {
+				if (func) {
+					if (prev && /\bthis\.base\b/.test(val)) {
+						var fromBase = base && base[name] == prev;
+						res = function() {
+							// Look up the base function each time if we can,
+							// to reflect changes to the base class after
+							// inheritance.
+							var tmp = describe(this, 'base');
+							define(this, 'base', { value: fromBase
+								? base[name] : prev, configurable: true });
+							try {
+								return val.apply(this, arguments);
+							} finally {
+								tmp ? define(this, 'base', tmp)
+									: delete this.base;
+							}
+						};
+						// Make wrapping closure pretend to be the original
+						// function on inspection
+						res.toString = function() {
+							return val.toString();
+						}
+						res.valueOf = function() {
+							return val.valueOf();
+						}
+					}
+					// Produce bean properties if getters are specified. This
+					// does not produce properties for setter-only properties.
+					// Just collect beans for now, and look them up in dest at
+					// the end of fields injection. This ensures this.base()
+					// works in beans too, and inherits setters for redefined
+					// getters in subclasses. Only add getter beans if they do
+					// not expect arguments. Functions that should function both
+					// with optional arguments and as beans should not declare
+					// the parameters and use the arguments array internally
+					// instead.
+					if (beans && val.length == 0
+							&& (bean = name.match(/^(get|is)(([A-Z])(.*))$/)))
+						beans.push([ bean[3].toLowerCase() + bean[4], bean[2] ]);
+				}
+				// No need to look up getter if this is a function already.
+				if (!res || func || !res.get)
+					res = { value: res, writable: true };
+				// Only set/change configurable and enumerable if this field is
+				// configurable
+				if ((describe(dest, name)
+						|| { configurable: true }).configurable) {
+					res.configurable = true;
+					res.enumerable = enumerable;
+				}
+				define(dest, name, res);
+			}
+		}
+		// Iterate through all definitions in src now and call field() for each.
+		if (src) {
+			beans = [];
+			for (var name in src)
+				if (has.call(src, name) && !hidden.test(name))
+					field(name, null, true, generics);
+			// IE (and some other browsers?) never enumerate these, even  if
+			// they are simply set on an object. Force their creation. Do not
+			// create generics for these, and check them for not being defined
+			// (by passing undefined for dontCheck).
+			field('toString');
+			field('valueOf');
+			// Now finally define beans as well. Look up methods on dest, for
+			// support of this.base() (See above).
+			for (var i = 0, l = beans && beans.length; i < l; i++)
+				try {
+					var bean = beans[i], part = bean[1];
+					field(bean[0], {
+						get: dest['get' + part] || dest['is' + part],
+						set: dest['set' + part]
+					}, true);
+				} catch (e) {}
+		}
+		return dest;
+	}
+
+	/**
+	 * Private function that creates a constructor to extend the given object.
+	 * When this constructor is called through new, a new object is craeted
+	 * that inherits all from obj.
+	 */
+	function extend(obj) {
+		// Create the constructor for the new prototype that calls initialize
+		// if it is defined.
+		var ctor = function(dont) {
+			// Fix __proto__
+			if (fix) define(this, '__proto__', { value: obj });
+			// Call the constructor function, if defined and we are not
+			// inheriting, in which case ctor.dont would be set, see bellow.
+			if (this.initialize && dont !== ctor.dont)
+				return this.initialize.apply(this, arguments);
+		}
+		ctor.prototype = obj;
+		// Add a toString function that delegates to initialize if possible
+		ctor.toString = function() {
+			return (this.prototype.initialize || function() {}).toString();
+		}
+		return ctor;
+	}
+
+	/**
+	 * Converts the argument to an iterator function. If none is specified, the
+	 * identity function is returned.
+	 * This supports normal functions, which are returned unmodified, and values
+	 * to compare to. Wherever this function is used in the Enumerable
+	 * functions, a value, a Function or null may be passed.
+	 */
+	function iterator(iter) {
+		return !iter
+			? function(val) { return val }
+			: typeof iter !== 'function'
+				? function(val) { return val == iter }
+				: iter;
+	}
+
+	function each(obj, iter, bind, asArray) {
+		try {
+			if (obj)
+				(asArray || asArray === undefined && isArray(obj)
+					? forEach : forIn).call(obj, iterator(iter),
+						bind = bind || obj);
+		} catch (e) {
+			if (e !== Base.stop) throw e;
+		}
+		return bind;
+	}
+
+	function clone(obj) {
+		return each(obj, function(val, i) {
+			this[i] = val;
+		}, new obj.constructor());
+	}
+
+	// Inject into new ctor object that's passed to inject(), and then returned
+	return inject(function() {}, {
+		inject: function(src/*, ... */) {
+			if (src) {
+				var proto = this.prototype,
+					base = proto.__proto__ && proto.__proto__.constructor,
+					// Allow the whole scope to just define statics by defining
+					// statics: true.
+					statics = src.statics == true ? src : src.statics;
+				if (statics != src)
+					inject(proto, src, src.enumerable, base && base.prototype,
+							src.preserve, src.generics && this);
+				// Define new static fields as enumerable, and inherit from
+				// base. enumerable is necessary so they can be copied over from
+				// base, and it does not harm to have enumerable properties in
+				// the constructor. Use the preserve setting in src.preserve for
+				// statics too, not their own.
+				inject(this, statics, true, base, src.preserve);
+			}
+			// If there are more than one argument, loop through them and call
+			// inject again. Do not simple inline the above code in one loop,
+			// since each of the passed objects might override this.inject.
+			for (var i = 1, l = arguments.length; i < l; i++)
+				this.inject(arguments[i]);
+			return this;
+		},
+
+		extend: function(src/* , ... */) {
+			// The new prototype extends the constructor on which extend is
+			// called. Fix constructor.
+			// TODO: Consider using Object.create instead of using this.dont if
+			// available?
+			var proto = new this(this.dont),
+				ctor = extend(proto);
+			define(proto, 'constructor',
+					{ value: ctor, writable: true, configurable: true });
+			// Define an object to be passed as the first parameter in
+			// constructors when initialize should not be called.
+			ctor.dont = {};
+			// Copy over static fields, as prototype-like inheritance
+			// is not possible for static fields. Mark them as enumerable
+			// so they can be copied over again.
+			inject(ctor, this, true);
+			// Inject all the definitions in src. Use the new inject instead of
+			// the one in ctor, in case it was overriden. this is needed when
+			// overriding the static .inject(). But only inject if there's
+			// something to actually inject.
+			return arguments.length ? this.inject.apply(ctor, arguments) : ctor;
+		}
+		// Pass true for enumerable, so inject() and extend() can be passed on
+		// to subclasses of Base through Base.inject() / extend().
+	}, true).inject({
+		/**
+		 * Returns true if the object contains a property with the given name,
+		 * false otherwise.
+		 * Just like in .each, objects only contained in the prototype(s) are
+		 * filtered.
+		 */
+		has: has,
+		each: each,
+
+		/**
+		 * Injects the fields from the given object, adding this.base()
+		 * functionality
+		 */
+		inject: function(/* src, ... */) {
+			for (var i = 0, l = arguments.length; i < l; i++)
+				inject(this, arguments[i]);
+			return this;
+		},
+
+		/**
+		 * Returns a new object that inherits all properties from "this",
+		 * through proper JS inheritance, not copying.
+		 * Optionally, src and hide parameters can be passed to fill in the
+		 * newly created object just like in inject(), to copy the behavior
+		 * of Function.prototype.extend.
+		 */
+		extend: function(/* src, ... */) {
+			// Notice the "new" here: the private extend returns a constructor
+			// as it's used for Function.prototype.extend as well. But when
+			// extending objects, we want to return a new object that inherits
+			// from "this". In that case, the constructor is never used again,
+			// its just created to create a new object with the proper
+			// inheritance set and is garbage collected right after.
+			var res = new (extend(this));
+			return res.inject.apply(res, arguments);
+		},
+
+		each: function(iter, bind) {
+			return each(this, iter, bind);
+		},
+
+		/**
+		 * Creates a new object of the same type and copies over all
+		 * name / value pairs from this object.
+		 */
+		clone: function() {
+			return clone(this);
+		},
+
+		statics: {
+			// Expose some local privates as Base generics.
+			each: each,
+			clone: clone,
+			define: define,
+			describe: describe,
+			iterator: iterator,
+
+			has: function(obj, name) {
+				return has.call(obj, name);
+			},
+
+			type: function(obj) {
+				return (obj || obj === 0) && (obj._type || typeof obj) || null;
+			},
+
+			check: function(obj) {
+				return !!(obj || obj === 0);
+			},
+
+			/**
+			 * Returns the first argument that is defined.
+			 * Null is counted as defined too, since !== undefined is used for
+			 * comparisons. In this it differs from Mootools!
+			 */
+			pick: function() {
+				for (var i = 0, l = arguments.length; i < l; i++)
+					if (arguments[i] !== undefined)
+						return arguments[i];
+				return null;
+			},
+
+			/**
+			 * A special constant, to be thrown by closures passed to each()
+			 *
+			 * $continue / Base.next is not implemented, as the same
+			 * functionality can achieved by using return in the closure.
+			 * In prototype, the implementation of $continue also leads to a
+			 * huge speed decrease, as the closure is wrapped in another closure
+			 * that does nothing else than handling $continue.
+			 */
+			stop: {}
+		}
+	});
+}
diff --git a/lib/parse-js-min.js b/lib/parse-js-min.js
new file mode 100644
index 00000000..c0bdddac
--- /dev/null
+++ b/lib/parse-js-min.js
@@ -0,0 +1,14 @@
+/**
+ * A JavaScript tokenizer / parser / generator, originally written in Lisp.
+ * Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
+ * http://marijn.haverbeke.nl/parse-js/
+ *
+ * Ported by to JavaScript by Mihai Bazon
+ * Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
+ * http://mihai.bazon.net/blog/
+ *
+ * Modifications and adaptions to browser (c) 2011, Juerg Lehni
+ * http://lehni.org/
+ *
+ * Distributed under the BSD license.
+ */var parse_js=new function(){function W(a,b,c){var d=[];for(var e=0;e<a.length;++e)d.push(b.call(c,a[e],e));return d}function V(c){return/^[a-z_$][a-z0-9_$]*$/i.test(c)&&c!="this"&&!M(d,c)&&!M(b,c)&&!M(a,c)}function U(a,b){var c={};a===!0&&(a={});for(var d in b)M(b,d)&&(c[d]=a&&M(a,d)?a[d]:b[d]);return c}function T(a,b){return b<1?"":Array(b+1).join(a)}function S(a,b){function z(a){var b=a[0],c=r[b];if(!c)throw new Error("Can't find generator for \""+b+'"');y.push(a);var d=c.apply(b,a.slice(1));y.pop();return d}function x(a){var b=a[0],c=a[1];c!=null&&(b=k([g(b),"=",m(c,"seq")]));return b}function w(a){return a?a.length==0?"{}":"{"+e+j(function(){return u(a).join(e)})+e+h("}"):";"}function v(a){var b=a.length;return b==0?"{}":"{"+e+W(a,function(a,d){var f=a[1].length>0,g=j(function(){return h(a[0]?k(["case",z(a[0])+":"]):"default:")},.5)+(f?e+j(function(){return u(a[1]).join(e)}):"");!c&&f&&d<b-1&&(g+=";");return g}).join(e)+e+h("}")}function u(a,b){for(var d=[],e=a.length-1,f=0;f<=e;++f){var g=a[f],i=z(g);i!=";"&&(!c&&f==e&&(g[0]=="while"&&O(g[2])||L(g[0],["for","for-in"])&&O(g[4])||g[0]=="if"&&O(g[2])&&!g[3]||g[0]=="if"&&g[3]&&O(g[3])?i=i.replace(/;*\s*$/,";"):i=i.replace(/;+\s*$/,"")),d.push(i))}return b?d:W(d,h)}function t(a,b,c,d){var e=d||"function";a&&(e+=" "+g(a)),e+="("+l(W(b,g))+")";return k([e,w(c)])}function s(a){if(a[0]=="do")return z(["block",[a]]);var b=a;for(;;){var c=b[0];if(c=="if"){if(!b[3])return z(["block",[a]]);b=b[3]}else if(c=="while"||c=="do")b=b[2];else if(c=="for"||c=="for-in")b=b[4];else break}return z(a)}function q(a){var b=a.toString(10),c=[b.replace(/^0\./,".")],d;Math.floor(a)===a?(c.push("0x"+a.toString(16).toLowerCase(),"0"+a.toString(8)),(d=/^(.*?)(0+)$/.exec(a))&&c.push(d[1]+"e"+d[2].length)):(d=/^0?\.(0+)(.*)$/.exec(a))&&c.push(d[2]+"e-"+(d[1].length+d[2].length),b.substr(b.indexOf(".")));return n(c)}function o(a){if(a[0]=="function"||a[0]=="object"){var b=J(y),c=b.pop(),d=b.pop();while(d){if(d[0]=="stat")return!0;if((d[0]=="seq"||d[0]=="call"||d[0]=="dot"||d[0]=="sub"||d[0]=="conditional")&&d[1]===c||(d[0]=="binary"||d[0]=="assign"||d[0]=="unary-postfix")&&d[2]===c)c=d,d=b.pop();else return!1}}return!M(P,a[0])}function n(a){if(a.length==1)return a[0];if(a.length==2){var b=a[1];a=a[0];return a.length<=b.length?a:b}return n([a[0],n(a.slice(1))])}function m(a){var b=z(a);for(var c=1;c<arguments.length;++c){var d=arguments[c];if(d instanceof Function&&d(a)||a[0]==d)return"("+b+")"}return b}function l(a){return a.join(","+f)}function k(a){if(c)return a.join(" ");var b=[];for(var d=0;d<a.length;++d){var e=a[d+1];b.push(a[d]),e&&(/[a-z0-9_\x24]$/i.test(a[d].toString())&&/^[a-z0-9_\x24]/i.test(e.toString())||/[\+\-]$/.test(a[d].toString())&&/^[\+\-]/.test(e.toString()))&&b.push(" ")}return b.join("")}function j(a,b){b==null&&(b=1),d+=b;try{return a.apply(null,J(arguments,1))}finally{d-=b}}function h(a){a==null&&(a=""),c&&(a=T(" ",b.indent_start+d*b.indent_level)+a);return a}function g(a){return a.toString()}b=U(b,{indent_start:0,indent_level:4,quote_keys:!1,space_colon:!1,beautify:!1});var c=!!b.beautify,d=0,e=c?"\n":"",f=c?" ":"",r={string:Q,num:q,name:g,toplevel:function(a){return u(a).join(e)},splice:function(a){var b=y[y.length-2][0];return M(R,b)?w.apply(this,arguments):W(u(a,!0),function(a,b){return b>0?h(a):a}).join(e)},block:w,"var":function(a){return"var "+l(W(a,x))+";"},"const":function(a){return"const "+l(W(a,x))+";"},"try":function(a,b,c){var d=["try",w(a)];b&&d.push("catch","("+b[0]+")",w(b[1])),c&&d.push("finally",w(c));return k(d)},"throw":function(a){return k(["throw",z(a)])+";"},"new":function(a,b){b=b.length>0?"("+l(W(b,z))+")":"";return k(["new",m(a,"seq","binary","conditional","assign",function(a){var b=N(),c={};try{b.with_walkers({call:function(){throw c},"function":function(){return this}},function(){b.walk(a)})}catch(d){if(d===c)return!0;throw d}})+b])},"switch":function(a,b){return k(["switch","("+z(a)+")",v(b)])},"break":function(a){var b="break";a!=null&&(b+=" "+g(a));return b+";"},"continue":function(a){var b="continue";a!=null&&(b+=" "+g(a));return b+";"},conditional:function(a,b,c){return k([m(a,"assign","seq","conditional"),"?",m(b,"seq"),":",m(c,"seq")])},assign:function(a,b,c){a&&a!==!0?a+="=":a="=";return k([z(b),a,m(c,"seq")])},dot:function(a){var b=z(a),c=1;a[0]=="num"?/\./.test(a[1])||(b+="."):o(a)&&(b="("+b+")");while(c<arguments.length)b+="."+g(arguments[c++]);return b},call:function(a,b){var c=z(a);o(a)&&(c="("+c+")");return c+"("+l(W(b,function(a){return m(a,"seq")}))+")"},"function":t,defun:t,"if":function(a,b,c){var d=["if","("+z(a)+")",c?s(b):z(b)];c&&d.push("else",z(c));return k(d)},"for":function(a,b,c,d){var e=["for"];a=(a!=null?z(a):"").replace(/;*\s*$/,";"+f),b=(b!=null?z(b):"").replace(/;*\s*$/,";"+f),c=(c!=null?z(c):"").replace(/;*\s*$/,"");var g=a+b+c;g=="; ; "&&(g=";;"),e.push("("+g+")",z(d));return k(e)},"for-in":function(a,b,c,d){return k(["for","("+(a?z(a).replace(/;+$/,""):z(b)),"in",z(c)+")",z(d)])},"while":function(a,b){return k(["while","("+z(a)+")",z(b)])},"do":function(a,b){return k(["do",z(b),"while","("+z(a)+")"])+";"},"return":function(a){var b=["return"];a!=null&&b.push(z(a));return k(b)+";"},binary:function(a,b,c){var d=z(b),e=z(c);if(L(b[0],["assign","conditional","seq"])||b[0]=="binary"&&B[a]>B[b[1]])d="("+d+")";if(L(c[0],["assign","conditional","seq"])||c[0]=="binary"&&B[a]>=B[c[1]]&&(c[1]!=a||!L(a,["&&","||","*"])))e="("+e+")";return k([d,a,e])},"unary-prefix":function(a,b){var c=z(b);b[0]=="num"||b[0]=="unary-prefix"&&!M(i,a+b[1])||!o(b)||(c="("+c+")");return a+(p(a.charAt(0))?" ":"")+c},"unary-postfix":function(a,b){var c=z(b);b[0]=="num"||b[0]=="unary-postfix"&&!M(i,a+b[1])||!o(b)||(c="("+c+")");return c+a},sub:function(a,b){var c=z(a);o(a)&&(c="("+c+")");return c+"["+z(b)+"]"},object:function(a){return a.length==0?"{}":"{"+e+j(function(){return W(a,function(a){if(a.length==3)return h(t(a[0],a[1][2],a[1][3],a[2]));var d=a[0],e=z(a[1]);b.quote_keys?d=Q(d):(typeof d=="number"||!c&&+d+""==d)&&parseFloat(d)>=0?d=q(+d):V(d)||(d=Q(d));return h(k(c&&b.space_colon?[d,":",e]:[d+":",e]))}).join(","+e)})+e+h("}")},regexp:function(a,b){return"/"+a+"/"+b},array:function(a){return a.length==0?"[]":k(["[",l(W(a,function(a){return!c&&a[0]=="atom"&&a[1]=="undefined"?"":m(a,"seq")})),"]"])},stat:function(a){return z(a).replace(/;*\s*$/,";")},seq:function(){return l(W(J(arguments),z))},label:function(a,b){return k([g(a),":",z(b)])},"with":function(a,b){return k(["with","("+z(a)+")",z(b)])},atom:function(a){return g(a)}},y=[];return z(a)}function Q(a){var b=0,c=0;a=a.replace(/[\\\b\f\n\r\t\x22\x27]/g,function(a){switch(a){case"\\":return"\\\\";case"\b":return"\\b";case"\f":return"\\f";case"\n":return"\\n";case"\r":return"\\r";case"\t":return"\\t";case'"':++b;return'"';case"'":++c;return"'"}return a});return b>c?"'"+a.replace(/\x27/g,"\\'")+"'":'"'+a.replace(/\x22/g,'\\"')+'"'}function O(a){return!a||a[0]=="block"&&(!a[1]||a[1].length==0)}function N(){function g(a,b){var c={},e;for(e in a)M(a,e)&&(c[e]=d[e],d[e]=a[e]);var f=b();for(e in c)M(c,e)&&(c[e]?d[e]=c[e]:delete d[e]);return f}function f(a){if(a==null)return null;try{e.push(a);var b=a[0],f=d[b];if(f){var g=f.apply(a,a.slice(1));if(g!=null)return g}f=c[b];return f.apply(a,a.slice(1))}finally{e.pop()}}function b(a){var b=[this[0]];a!=null&&b.push(W(a,f));return b}function a(a){return[this[0],W(a,function(a){var b=[a[0]];a.length>1&&(b[1]=f(a[1]));return b})]}var c={string:function(a){return[this[0],a]},num:function(a){return[this[0],a]},name:function(a){return[this[0],a]},toplevel:function(a){return[this[0],W(a,f)]},block:b,splice:b,"var":a,"const":a,"try":function(a,b,c){return[this[0],W(a,f),b!=null?[b[0],W(b[1],f)]:null,c!=null?W(c,f):null]},"throw":function(a){return[this[0],f(a)]},"new":function(a,b){return[this[0],f(a),W(b,f)]},"switch":function(a,b){return[this[0],f(a),W(b,function(a){return[a[0]?f(a[0]):null,W(a[1],f)]})]},"break":function(a){return[this[0],a]},"continue":function(a){return[this[0],a]},conditional:function(a,b,c){return[this[0],f(a),f(b),f(c)]},assign:function(a,b,c){return[this[0],a,f(b),f(c)]},dot:function(a){return[this[0],f(a)].concat(J(arguments,1))},call:function(a,b){return[this[0],f(a),W(b,f)]},"function":function(a,b,c){return[this[0],a,b.slice(),W(c,f)]},defun:function(a,b,c){return[this[0],a,b.slice(),W(c,f)]},"if":function(a,b,c){return[this[0],f(a),f(b),f(c)]},"for":function(a,b,c,d){return[this[0],f(a),f(b),f(c),f(d)]},"for-in":function(a,b,c,d){return[this[0],f(a),f(b),f(c),f(d)]},"while":function(a,b){return[this[0],f(a),f(b)]},"do":function(a,b){return[this[0],f(a),f(b)]},"return":function(a){return[this[0],f(a)]},binary:function(a,b,c){return[this[0],a,f(b),f(c)]},"unary-prefix":function(a,b){return[this[0],a,f(b)]},"unary-postfix":function(a,b){return[this[0],a,f(b)]},sub:function(a,b){return[this[0],f(a),f(b)]},object:function(a){return[this[0],W(a,function(a){return a.length==2?[a[0],f(a[1])]:[a[0],f(a[1]),a[2]]})]},regexp:function(a,b){return[this[0],a,b]},array:function(a){return[this[0],W(a,f)]},stat:function(a){return[this[0],f(a)]},seq:function(){return[this[0]].concat(W(J(arguments),f))},label:function(a,b){return[this[0],a,f(b)]},"with":function(a,b){return[this[0],f(a),f(b)]},atom:function(a){return[this[0],a]}},d={},e=[];return{walk:f,with_walkers:g,parent:function(){return e[e.length-2]},stack:function(){return e}}}function M(a,b){return Object.prototype.hasOwnProperty.call(a,b)}function L(a,b){for(var c=b.length;--c>=0;)if(b[c]===a)return!0;return!1}function K(a){return a.split("")}function J(a,b){return Array.prototype.slice.call(a,b||0)}function I(a){var b={};for(var c=0;c<a.length;++c)b[a[c]]=!0;return b}function H(a){a instanceof Function&&(a=a());for(var b=1,c=arguments.length;--c>0;++b)arguments[b]();return a}function G(a){var b=J(arguments,1);return function(){return a.apply(this,b.concat(J(arguments)))}}function F(a,b,c){function bk(a){try{++d.in_loop;return a()}finally{--d.in_loop}}function bi(a){var b=bg(a),c=d.token.value;if(e("operator")&&M(A,c)){if(bh(b)){g();return p("assign",A[c],b,bi(a))}i("Invalid assignment")}return b}function bh(a){if(!b)return!0;switch(a[0]){case"dot":case"sub":case"new":case"call":return!0;case"name":return a[1]!="this"}}function bg(a){var b=bf(a);if(e("operator","?")){g();var c=bj(!1);m(":");return p("conditional",b,c,bj(!1,a))}return b}function bf(a){return be(Y(!0),0,a)}function be(a,b,c){var f=e("operator")?d.token.value:null;f&&f=="in"&&c&&(f=null);var h=f!=null?B[f]:null;if(h!=null&&h>b){g();var i=be(Y(!0),h,c);return be(p("binary",f,a,i),b,c)}return a}function bd(a,b,c){(b=="++"||b=="--")&&!bh(c)&&i("Invalid use of "+b+" operator");return p(a,b,c)}function bc(a,b){if(e("punc",".")){g();return bc(p("dot",a,bb()),b)}if(e("punc","[")){g();return bc(p("sub",a,H(bj,G(m,"]"))),b)}if(b&&e("punc","(")){g();return bc(p("call",a,Z(")")),!0)}return b&&e("operator")&&M(z,d.token.value)?H(G(bd,"unary-postfix",d.token.value,a),g):a}function bb(){switch(d.token.type){case"name":case"operator":case"keyword":case"atom":return H(d.token.value,g);default:k()}}function ba(){switch(d.token.type){case"num":case"string":return H(d.token.value,g)}return bb()}function _(){var a=!0,c=[];while(!e("punc","}")){a?a=!1:m(",");if(!b&&e("punc","}"))break;var f=d.token.type,h=ba();f!="name"||h!="get"&&h!="set"||!!e("punc",":")?(m(":"),c.push([h,bj(!1)])):c.push([bb(),P(!1),h])}g();return p("object",c)}function $(){return p("array",Z("]",!b,!0))}function Z(a,b,c){var d=!0,f=[];while(!e("punc",a)){d?d=!1:m(",");if(b&&e("punc",a))break;e("punc",",")&&c?f.push(["atom","undefined"]):f.push(bj(!1))}g();return f}function X(){var a=Y(!1),b;e("punc","(")?(g(),b=Z(")")):b=[];return bc(p("new",a,b),!0)}function W(){return p("const",U())}function V(a){return p("var",U(a))}function U(a){var b=[];for(;;){e("name")||k();var c=d.token.value;g(),e("operator","=")?(g(),b.push([c,bj(!1,a)])):b.push([c]);if(!e("punc",","))break;g()}return b}function T(){var a=R(),b,c;if(e("keyword","catch")){g(),m("("),e("name")||i("Name expected");var f=d.token.value;g(),m(")"),b=[f,R()]}e("keyword","finally")&&(g(),c=R()),!b&&!c&&i("Missing catch/finally blocks");return p("try",a,b,c)}function R(){m("{");var a=[];while(!e("punc","}"))e("eof")&&k(),a.push(t());g();return a}function Q(){var a=q(),b=t(),c;e("keyword","else")&&(g(),c=t());return p("if",a,b,c)}function O(a){var b=a[0]=="var"?p("name",a[1][0]):a;g();var c=bj();m(")");return p("for-in",a,b,c,bk(t))}function N(a){m(";");var b=e("punc",";")?null:bj();m(";");var c=e("punc",")")?null:bj();m(")");return p("for",a,b,c,bk(t))}function K(){m("(");var a=null;if(!e("punc",";")){a=e("keyword","var")?(g(),V(!0)):bj(!0,!0);if(e("operator","in"))return O(a)}return N(a)}function I(a){var b;n()||(b=e("name")?d.token.value:null),b!=null?(g(),L(b,d.labels)||i("Label "+b+" without matching loop or statement")):d.in_loop==0&&i(a+" not inside a loop or switch"),o();return p(a,b)}function F(){return p("stat",H(bj,o))}function w(a){d.labels.push(a);var c=d.token,e=t();b&&!M(C,e[0])&&k(c),d.labels.pop();return p("label",a,e)}function s(a){return c?function(){var b=d.token,c=a.apply(this,arguments);c[0]=r(c[0],b,h());return c}:a}function r(a,b,c){return a instanceof E?a:new E(a,b,c)}function q(){m("(");var a=bj();m(")");return a}function p(){return J(arguments)}function o(){e("punc",";")?g():n()||k()}function n(){return!b&&(d.token.nlb||e("eof")||e("punc","}"))}function m(a){return l("punc",a)}function l(a,b){if(e(a,b))return g();j(d.token,"Unexpected token "+d.token.type+", expected "+a)}function k(a){a==null&&(a=d.token),j(a,"Unexpected token: "+a.type+" ("+a.value+")")}function j(a,b){i(b,a.line,a.col)}function i(a,b,c,e){var f=d.input.context();u(a,b!=null?b:f.tokline,c!=null?c:f.tokcol,e!=null?e:f.tokpos)}function h(){return d.prev}function g(){d.prev=d.token,d.peeked?(d.token=d.peeked,d.peeked=null):d.token=d.input();return d.token}function f(){return d.peeked||(d.peeked=d.input())}function e(a,b){return v(d.token,a,b)}var d={input:typeof a=="string"?x(a,!0):a,token:null,prev:null,peeked:null,in_function:0,in_loop:0,labels:[]};d.token=g();var t=s(function(){e("operator","/")&&(d.peeked=null,d.token=d.input(!0));switch(d.token.type){case"num":case"string":case"regexp":case"operator":case"atom":return F();case"name":return v(f(),"punc",":")?w(H(d.token.value,g,g)):F();case"punc":switch(d.token.value){case"{":return p("block",R());case"[":case"(":return F();case";":g();return p("block");default:k()};case"keyword":switch(H(d.token.value,g)){case"break":return I("break");case"continue":return I("continue");case"debugger":o();return p("debugger");case"do":return function(a){l("keyword","while");return p("do",H(q,o),a)}(bk(t));case"for":return K();case"function":return P(!0);case"if":return Q();case"return":d.in_function==0&&i("'return' outside of function");return p("return",e("punc",";")?(g(),null):n()?null:H(bj,o));case"switch":return p("switch",q(),S());case"throw":return p("throw",H(bj,o));case"try":return T();case"var":return H(V,o);case"const":return H(W,o);case"while":return p("while",q(),bk(t));case"with":return p("with",q(),t());default:k()}}}),P=s(function(a){var b=e("name")?H(d.token.value,g):null;a&&!b&&k(),m("(");return p(a?"defun":"function",b,function(a,b){while(!e("punc",")"))a?a=!1:m(","),e("name")||k(),b.push(d.token.value),g();g();return b}(!0,[]),function(){++d.in_function;var a=d.in_loop;d.in_loop=0;var b=R();--d.in_function,d.in_loop=a;return b}())}),S=G(bk,function(){m("{");var a=[],b=null;while(!e("punc","}"))e("eof")&&k(),e("keyword","case")?(g(),b=[],a.push([bj(),b]),m(":")):e("keyword","default")?(g(),m(":"),b=[],a.push([null,b])):(b||k(),b.push(t()));g();return a}),Y=s(function(a){if(e("operator","new")){g();return X()}if(e("operator")&&M(y,d.token.value))return bd("unary-prefix",H(d.token.value,g),Y(a));if(e("punc")){switch(d.token.value){case"(":g();return bc(H(bj,G(m,")")),a);case"[":g();return bc($(),a);case"{":g();return bc(_(),a)}k()}if(e("keyword","function")){g();return bc(P(!1),a)}if(M(D,d.token.type)){var b=d.token.type=="regexp"?p("regexp",d.token.value[0],d.token.value[1]):p(d.token.type,d.token.value);return bc(H(b,g),a)}k()}),bj=s(function(a,b){arguments.length==0&&(a=!0);var c=bi(b);if(a&&e("punc",",")){g();return p("seq",c,bj(!0,b))}return c});return p("toplevel",function(a){while(!e("eof"))a.push(t());return a}([]))}function E(a,b,c){this.name=a,this.start=b,this.end=c}function x(b){function P(a){if(a)return I();y(),v();var b=g();if(!b)return x("eof");if(o(b))return C();if(b=='"'||b=="'")return F();if(M(l,b))return x("punc",h());if(b==".")return L();if(b=="/")return K();if(M(e,b))return J();if(b=="\\"||q(b))return N();B("Unexpected character '"+b+"'")}function O(a,b){try{return b()}catch(c){if(c===w)B(a);else throw c}}function N(){var b=A(r);return M(a,b)?M(i,b)?x("operator",b):M(d,b)?x("atom",b):x("keyword",b):x("name",b)}function L(){h();return o(g())?C("."):x("punc",".")}function K(){h();var a=f.regex_allowed;switch(g()){case"/":f.comments_before.push(G()),f.regex_allowed=a;return P();case"*":f.comments_before.push(H()),f.regex_allowed=a;return P()}return f.regex_allowed?I():J("/")}function J(a){function b(a){if(!g())return a;var c=a+g();if(M(i,c)){h();return b(c)}return a}return x("operator",b(a||h()))}function I(){return O("Unterminated regular expression",function(){var a=!1,b="",c,d=!1;while(c=h(!0))if(a)b+="\\"+c,a=!1;else if(c=="[")d=!0,b+=c;else if(c=="]"&&d)d=!1,b+=c;else{if(c=="/"&&!d)break;c=="\\"?a=!0:b+=c}var e=A(function(a){return M(m,a)});return x("regexp",[b,e])})}function H(){h();return O("Unterminated multiline comment",function(){var a=t("*/",!0),b=f.text.substring(f.pos,a),c=x("comment2",b,!0);f.pos=a+2,f.line+=b.split("\n").length-1,f.newline_before=b.indexOf("\n")>=0;return c})}function G(){h();var a=t("\n"),b;a==-1?(b=f.text.substr(f.pos),f.pos=f.text.length):(b=f.text.substring(f.pos,a),f.pos=a);return x("comment1",b,!0)}function F(){return O("Unterminated string constant",function(){var a=h(),b="";for(;;){var c=h(!0);if(c=="\\")c=D();else if(c==a)break;b+=c}return x("string",b)})}function E(a){var b=0;for(;a>0;--a){var c=parseInt(h(!0),16);isNaN(c)&&B("Invalid hex-character pattern in string"),b=b<<4|c}return b}function D(){var a=h(!0);switch(a){case"n":return"\n";case"r":return"\r";case"t":return"\t";case"b":return"\b";case"v":return"";case"f":return"\f";case"0":return"";case"x":return String.fromCharCode(E(2));case"u":return String.fromCharCode(E(4));case"\n":return"";default:return a}}function C(a){var b=!1,c=!1,d=!1,e=a==".",f=A(function(f,g){if(f=="x"||f=="X")return d?!1:d=!0;if(!d&&(f=="E"||f=="e"))return b?!1:b=c=!0;if(f=="-")return c||g==0&&!a?!0:!1;if(f=="+")return c;c=!1;if(f==".")return!e&&!d?e=!0:!1;return p(f)});a&&(f=a+f);var g=s(f);if(!isNaN(g))return x("num",g);B("Invalid syntax: "+f)}function B(a){u(a,f.tokline,f.tokcol,f.tokpos)}function A(a){var b="",c=g(),d=0;while(c&&a(c,d++))b+=h(),c=g();return b}function y(){while(M(j,g()))h()}function x(a,b,d){f.regex_allowed=a=="operator"&&!M(z,b)||a=="keyword"&&M(c,b)||a=="punc"&&M(k,b);var e={type:a,value:b,line:f.tokline,col:f.tokcol,pos:f.tokpos,nlb:f.newline_before};d||(e.comments_before=f.comments_before,f.comments_before=[]),f.newline_before=!1;return e}function v(){f.tokline=f.line,f.tokcol=f.col,f.tokpos=f.pos}function t(a,b){var c=f.text.indexOf(a,f.pos);if(b&&c==-1)throw w;return c}function n(){return!f.peek()}function h(a){var b=f.text.charAt(f.pos++);if(a&&!b)throw w;b=="\n"?(f.newline_before=!0,++f.line,f.col=0):++f.col;return b}function g(){return f.text.charAt(f.pos)}var f={text:b.replace(/\r\n?|[\n\u2028\u2029]/g,"\n").replace(/^\uFEFF/,""),pos:0,tokpos:0,line:0,tokline:0,col:0,tokcol:0,newline_before:!1,regex_allowed:!1,comments_before:[]};P.context=function(a){a&&(f=a);return f};return P}function v(a,b,c){return a.type==b&&(c==null||a.value==c)}function u(a,b,c,d){throw new t(a,b,c,d)}function t(a,b,c,d){this.message=a,this.line=b,this.col=c,this.pos=d}function s(a){if(f.test(a))return parseInt(a.substr(2),16);if(g.test(a))return parseInt(a.substr(1),8);if(h.test(a))return parseFloat(a)}function r(a){return q(a)||o(a)}function q(a){return a=="$"||a=="_"||n(a)}function p(a){return o(a)||n(a)}function o(a){a=a.charCodeAt(0);return a>=48&&a<=57}function n(a){a=a.charCodeAt(0);return a>=65&&a<=90||a>=97&&a<=122}var a=I(["break","case","catch","const","continue","default","delete","do","else","finally","for","function","if","in","instanceof","new","return","switch","throw","try","typeof","var","void","while","with"]),b=I(["abstract","boolean","byte","char","class","debugger","double","enum","export","extends","final","float","goto","implements","import","int","interface","long","native","package","private","protected","public","short","static","super","synchronized","throws","transient","volatile"]),c=I(["return","new","delete","throw","else","case"]),d=I(["false","null","true","undefined"]),e=I(K("+-*&%=<>!?|~^")),f=/^0x[0-9a-f]+$/i,g=/^0[0-7]+$/,h=/^\d*\.?\d*(?:e[+-]?\d*(?:\d\.?|\.?\d)\d*)?$/i,i=I(["in","instanceof","typeof","new","void","delete","++","--","+","-","!","~","&","|","^","*","/","%",">>","<<",">>>","<",">","<=",">=","==","===","!=","!==","?","=","+=","-=","/=","*=","%=",">>=","<<=",">>>=","|=","^=","&=","&&","||"]),j=I(K(" \n\r\t")),k=I(K("[{}(,.;:")),l=I(K("[]{}(),;:")),m=I(K("gmsiy"));t.prototype.toString=function(){return this.message+" (line: "+this.line+", col: "+this.col+", pos: "+this.pos+")"};var w={},y=I(["typeof","void","delete","--","++","!","~","-","+"]),z=I(["--","++"]),A=function(a,b,c){while(c<a.length)b[a[c]]=a[c].substr(0,a[c].length-1),c++;return b}(["+=","-=","/=","*=","%=",">>=","<<=",">>>=","|=","^=","&="],{"=":!0},0),B=function(a,b){for(var c=0,d=1;c<a.length;++c,++d){var e=a[c];for(var f=0;f<e.length;++f)b[e[f]]=d}return b}([["||"],["&&"],["|"],["^"],["&"],["==","===","!=","!=="],["<",">","<=",">=","in","instanceof"],[">>","<<",">>>"],["+","-"],["*","/","%"]],{}),C=I(["for","do","while","switch"]),D=I(["atom","num","string","regexp","name"]);E.prototype.toString=function(){return this.name};var P=I(["name","array","object","string","dot","sub","call","regexp"]),R=I(["if","while","do","for","for-in","with"]);return{parse:F,gen_code:S,tokenizer:x,ast_walker:N}}
\ No newline at end of file
diff --git a/lib/parse-js-unicode.js b/lib/parse-js-unicode.js
new file mode 100644
index 00000000..6baa67f3
--- /dev/null
+++ b/lib/parse-js-unicode.js
@@ -0,0 +1,1997 @@
+/**
+ * A JavaScript tokenizer / parser / generator, originally written in Lisp.
+ * Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
+ * http://marijn.haverbeke.nl/parse-js/
+ *
+ * Ported by to JavaScript by Mihai Bazon
+ * Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
+ * http://mihai.bazon.net/blog/
+ *
+ * Modifications and adaptions to browser (c) 2011, Juerg Lehni
+ * http://lehni.org/
+ *
+ * Distributed under the BSD license.
+ */
+
+var parse_js = new function() {
+
+/* -----[ Tokenizer (constants) ]----- */
+
+var KEYWORDS = array_to_hash([
+	"break",
+	"case",
+	"catch",
+	"const",
+	"continue",
+	"default",
+	"delete",
+	"do",
+	"else",
+	"finally",
+	"for",
+	"function",
+	"if",
+	"in",
+	"instanceof",
+	"new",
+	"return",
+	"switch",
+	"throw",
+	"try",
+	"typeof",
+	"var",
+	"void",
+	"while",
+	"with"
+]);
+
+var RESERVED_WORDS = array_to_hash([
+	"abstract",
+	"boolean",
+	"byte",
+	"char",
+	"class",
+	"debugger",
+	"double",
+	"enum",
+	"export",
+	"extends",
+	"final",
+	"float",
+	"goto",
+	"implements",
+	"import",
+	"int",
+	"interface",
+	"long",
+	"native",
+	"package",
+	"private",
+	"protected",
+	"public",
+	"short",
+	"static",
+	"super",
+	"synchronized",
+	"throws",
+	"transient",
+	"volatile"
+]);
+
+var KEYWORDS_BEFORE_EXPRESSION = array_to_hash([
+	"return",
+	"new",
+	"delete",
+	"throw",
+	"else",
+	"case"
+]);
+
+var KEYWORDS_ATOM = array_to_hash([
+	"false",
+	"null",
+	"true",
+	"undefined"
+]);
+
+var OPERATOR_CHARS = array_to_hash(characters("+-*&%=<>!?|~^"));
+
+var RE_HEX_NUMBER = /^0x[0-9a-f]+$/i;
+var RE_OCT_NUMBER = /^0[0-7]+$/;
+var RE_DEC_NUMBER = /^\d*\.?\d*(?:e[+-]?\d*(?:\d\.?|\.?\d)\d*)?$/i;
+
+var OPERATORS = array_to_hash([
+	"in",
+	"instanceof",
+	"typeof",
+	"new",
+	"void",
+	"delete",
+	"++",
+	"--",
+	"+",
+	"-",
+	"!",
+	"~",
+	"&",
+	"|",
+	"^",
+	"*",
+	"/",
+	"%",
+	">>",
+	"<<",
+	">>>",
+	"<",
+	">",
+	"<=",
+	">=",
+	"==",
+	"===",
+	"!=",
+	"!==",
+	"?",
+	"=",
+	"+=",
+	"-=",
+	"/=",
+	"*=",
+	"%=",
+	">>=",
+	"<<=",
+	">>>=",
+	"|=",
+	"^=",
+	"&=",
+	"&&",
+	"||"
+]);
+
+var WHITESPACE_CHARS = array_to_hash(characters(" \u00a0\n\r\t\f\v\u200b"));
+
+var PUNC_BEFORE_EXPRESSION = array_to_hash(characters("[{}(,.;:"));
+
+var PUNC_CHARS = array_to_hash(characters("[]{}(),;:"));
+
+var REGEXP_MODIFIERS = array_to_hash(characters("gmsiy"));
+
+/* -----[ Tokenizer ]----- */
+
+// regexps adapted from http://xregexp.com/plugins/#unicode
+var UNICODE = {
+	letter: new RegExp("[\\u0041-\\u005A\\u0061-\\u007A\\u00AA\\u00B5\\u00BA\\u00C0-\\u00D6\\u00D8-\\u00F6\\u00F8-\\u02C1\\u02C6-\\u02D1\\u02E0-\\u02E4\\u02EC\\u02EE\\u0370-\\u0374\\u0376\\u0377\\u037A-\\u037D\\u0386\\u0388-\\u038A\\u038C\\u038E-\\u03A1\\u03A3-\\u03F5\\u03F7-\\u0481\\u048A-\\u0523\\u0531-\\u0556\\u0559\\u0561-\\u0587\\u05D0-\\u05EA\\u05F0-\\u05F2\\u0621-\\u064A\\u066E\\u066F\\u0671-\\u06D3\\u06D5\\u06E5\\u06E6\\u06EE\\u06EF\\u06FA-\\u06FC\\u06FF\\u0710\\u0712-\\u072F\\u074D-\\u07A5\\u07B1\\u07CA-\\u07EA\\u07F4\\u07F5\\u07FA\\u0904-\\u0939\\u093D\\u0950\\u0958-\\u0961\\u0971\\u0972\\u097B-\\u097F\\u0985-\\u098C\\u098F\\u0990\\u0993-\\u09A8\\u09AA-\\u09B0\\u09B2\\u09B6-\\u09B9\\u09BD\\u09CE\\u09DC\\u09DD\\u09DF-\\u09E1\\u09F0\\u09F1\\u0A05-\\u0A0A\\u0A0F\\u0A10\\u0A13-\\u0A28\\u0A2A-\\u0A30\\u0A32\\u0A33\\u0A35\\u0A36\\u0A38\\u0A39\\u0A59-\\u0A5C\\u0A5E\\u0A72-\\u0A74\\u0A85-\\u0A8D\\u0A8F-\\u0A91\\u0A93-\\u0AA8\\u0AAA-\\u0AB0\\u0AB2\\u0AB3\\u0AB5-\\u0AB9\\u0ABD\\u0AD0\\u0AE0\\u0AE1\\u0B05-\\u0B0C\\u0B0F\\u0B10\\u0B13-\\u0B28\\u0B2A-\\u0B30\\u0B32\\u0B33\\u0B35-\\u0B39\\u0B3D\\u0B5C\\u0B5D\\u0B5F-\\u0B61\\u0B71\\u0B83\\u0B85-\\u0B8A\\u0B8E-\\u0B90\\u0B92-\\u0B95\\u0B99\\u0B9A\\u0B9C\\u0B9E\\u0B9F\\u0BA3\\u0BA4\\u0BA8-\\u0BAA\\u0BAE-\\u0BB9\\u0BD0\\u0C05-\\u0C0C\\u0C0E-\\u0C10\\u0C12-\\u0C28\\u0C2A-\\u0C33\\u0C35-\\u0C39\\u0C3D\\u0C58\\u0C59\\u0C60\\u0C61\\u0C85-\\u0C8C\\u0C8E-\\u0C90\\u0C92-\\u0CA8\\u0CAA-\\u0CB3\\u0CB5-\\u0CB9\\u0CBD\\u0CDE\\u0CE0\\u0CE1\\u0D05-\\u0D0C\\u0D0E-\\u0D10\\u0D12-\\u0D28\\u0D2A-\\u0D39\\u0D3D\\u0D60\\u0D61\\u0D7A-\\u0D7F\\u0D85-\\u0D96\\u0D9A-\\u0DB1\\u0DB3-\\u0DBB\\u0DBD\\u0DC0-\\u0DC6\\u0E01-\\u0E30\\u0E32\\u0E33\\u0E40-\\u0E46\\u0E81\\u0E82\\u0E84\\u0E87\\u0E88\\u0E8A\\u0E8D\\u0E94-\\u0E97\\u0E99-\\u0E9F\\u0EA1-\\u0EA3\\u0EA5\\u0EA7\\u0EAA\\u0EAB\\u0EAD-\\u0EB0\\u0EB2\\u0EB3\\u0EBD\\u0EC0-\\u0EC4\\u0EC6\\u0EDC\\u0EDD\\u0F00\\u0F40-\\u0F47\\u0F49-\\u0F6C\\u0F88-\\u0F8B\\u1000-\\u102A\\u103F\\u1050-\\u1055\\u105A-\\u105D\\u1061\\u1065\\u1066\\u106E-\\u1070\\u1075-\\u1081\\u108E\\u10A0-\\u10C5\\u10D0-\\u10FA\\u10FC\\u1100-\\u1159\\u115F-\\u11A2\\u11A8-\\u11F9\\u1200-\\u1248\\u124A-\\u124D\\u1250-\\u1256\\u1258\\u125A-\\u125D\\u1260-\\u1288\\u128A-\\u128D\\u1290-\\u12B0\\u12B2-\\u12B5\\u12B8-\\u12BE\\u12C0\\u12C2-\\u12C5\\u12C8-\\u12D6\\u12D8-\\u1310\\u1312-\\u1315\\u1318-\\u135A\\u1380-\\u138F\\u13A0-\\u13F4\\u1401-\\u166C\\u166F-\\u1676\\u1681-\\u169A\\u16A0-\\u16EA\\u1700-\\u170C\\u170E-\\u1711\\u1720-\\u1731\\u1740-\\u1751\\u1760-\\u176C\\u176E-\\u1770\\u1780-\\u17B3\\u17D7\\u17DC\\u1820-\\u1877\\u1880-\\u18A8\\u18AA\\u1900-\\u191C\\u1950-\\u196D\\u1970-\\u1974\\u1980-\\u19A9\\u19C1-\\u19C7\\u1A00-\\u1A16\\u1B05-\\u1B33\\u1B45-\\u1B4B\\u1B83-\\u1BA0\\u1BAE\\u1BAF\\u1C00-\\u1C23\\u1C4D-\\u1C4F\\u1C5A-\\u1C7D\\u1D00-\\u1DBF\\u1E00-\\u1F15\\u1F18-\\u1F1D\\u1F20-\\u1F45\\u1F48-\\u1F4D\\u1F50-\\u1F57\\u1F59\\u1F5B\\u1F5D\\u1F5F-\\u1F7D\\u1F80-\\u1FB4\\u1FB6-\\u1FBC\\u1FBE\\u1FC2-\\u1FC4\\u1FC6-\\u1FCC\\u1FD0-\\u1FD3\\u1FD6-\\u1FDB\\u1FE0-\\u1FEC\\u1FF2-\\u1FF4\\u1FF6-\\u1FFC\\u2071\\u207F\\u2090-\\u2094\\u2102\\u2107\\u210A-\\u2113\\u2115\\u2119-\\u211D\\u2124\\u2126\\u2128\\u212A-\\u212D\\u212F-\\u2139\\u213C-\\u213F\\u2145-\\u2149\\u214E\\u2183\\u2184\\u2C00-\\u2C2E\\u2C30-\\u2C5E\\u2C60-\\u2C6F\\u2C71-\\u2C7D\\u2C80-\\u2CE4\\u2D00-\\u2D25\\u2D30-\\u2D65\\u2D6F\\u2D80-\\u2D96\\u2DA0-\\u2DA6\\u2DA8-\\u2DAE\\u2DB0-\\u2DB6\\u2DB8-\\u2DBE\\u2DC0-\\u2DC6\\u2DC8-\\u2DCE\\u2DD0-\\u2DD6\\u2DD8-\\u2DDE\\u2E2F\\u3005\\u3006\\u3031-\\u3035\\u303B\\u303C\\u3041-\\u3096\\u309D-\\u309F\\u30A1-\\u30FA\\u30FC-\\u30FF\\u3105-\\u312D\\u3131-\\u318E\\u31A0-\\u31B7\\u31F0-\\u31FF\\u3400\\u4DB5\\u4E00\\u9FC3\\uA000-\\uA48C\\uA500-\\uA60C\\uA610-\\uA61F\\uA62A\\uA62B\\uA640-\\uA65F\\uA662-\\uA66E\\uA67F-\\uA697\\uA717-\\uA71F\\uA722-\\uA788\\uA78B\\uA78C\\uA7FB-\\uA801\\uA803-\\uA805\\uA807-\\uA80A\\uA80C-\\uA822\\uA840-\\uA873\\uA882-\\uA8B3\\uA90A-\\uA925\\uA930-\\uA946\\uAA00-\\uAA28\\uAA40-\\uAA42\\uAA44-\\uAA4B\\uAC00\\uD7A3\\uF900-\\uFA2D\\uFA30-\\uFA6A\\uFA70-\\uFAD9\\uFB00-\\uFB06\\uFB13-\\uFB17\\uFB1D\\uFB1F-\\uFB28\\uFB2A-\\uFB36\\uFB38-\\uFB3C\\uFB3E\\uFB40\\uFB41\\uFB43\\uFB44\\uFB46-\\uFBB1\\uFBD3-\\uFD3D\\uFD50-\\uFD8F\\uFD92-\\uFDC7\\uFDF0-\\uFDFB\\uFE70-\\uFE74\\uFE76-\\uFEFC\\uFF21-\\uFF3A\\uFF41-\\uFF5A\\uFF66-\\uFFBE\\uFFC2-\\uFFC7\\uFFCA-\\uFFCF\\uFFD2-\\uFFD7\\uFFDA-\\uFFDC]"),
+	non_spacing_mark: new RegExp("[\\u0300-\\u036F\\u0483-\\u0487\\u0591-\\u05BD\\u05BF\\u05C1\\u05C2\\u05C4\\u05C5\\u05C7\\u0610-\\u061A\\u064B-\\u065E\\u0670\\u06D6-\\u06DC\\u06DF-\\u06E4\\u06E7\\u06E8\\u06EA-\\u06ED\\u0711\\u0730-\\u074A\\u07A6-\\u07B0\\u07EB-\\u07F3\\u0816-\\u0819\\u081B-\\u0823\\u0825-\\u0827\\u0829-\\u082D\\u0900-\\u0902\\u093C\\u0941-\\u0948\\u094D\\u0951-\\u0955\\u0962\\u0963\\u0981\\u09BC\\u09C1-\\u09C4\\u09CD\\u09E2\\u09E3\\u0A01\\u0A02\\u0A3C\\u0A41\\u0A42\\u0A47\\u0A48\\u0A4B-\\u0A4D\\u0A51\\u0A70\\u0A71\\u0A75\\u0A81\\u0A82\\u0ABC\\u0AC1-\\u0AC5\\u0AC7\\u0AC8\\u0ACD\\u0AE2\\u0AE3\\u0B01\\u0B3C\\u0B3F\\u0B41-\\u0B44\\u0B4D\\u0B56\\u0B62\\u0B63\\u0B82\\u0BC0\\u0BCD\\u0C3E-\\u0C40\\u0C46-\\u0C48\\u0C4A-\\u0C4D\\u0C55\\u0C56\\u0C62\\u0C63\\u0CBC\\u0CBF\\u0CC6\\u0CCC\\u0CCD\\u0CE2\\u0CE3\\u0D41-\\u0D44\\u0D4D\\u0D62\\u0D63\\u0DCA\\u0DD2-\\u0DD4\\u0DD6\\u0E31\\u0E34-\\u0E3A\\u0E47-\\u0E4E\\u0EB1\\u0EB4-\\u0EB9\\u0EBB\\u0EBC\\u0EC8-\\u0ECD\\u0F18\\u0F19\\u0F35\\u0F37\\u0F39\\u0F71-\\u0F7E\\u0F80-\\u0F84\\u0F86\\u0F87\\u0F90-\\u0F97\\u0F99-\\u0FBC\\u0FC6\\u102D-\\u1030\\u1032-\\u1037\\u1039\\u103A\\u103D\\u103E\\u1058\\u1059\\u105E-\\u1060\\u1071-\\u1074\\u1082\\u1085\\u1086\\u108D\\u109D\\u135F\\u1712-\\u1714\\u1732-\\u1734\\u1752\\u1753\\u1772\\u1773\\u17B7-\\u17BD\\u17C6\\u17C9-\\u17D3\\u17DD\\u180B-\\u180D\\u18A9\\u1920-\\u1922\\u1927\\u1928\\u1932\\u1939-\\u193B\\u1A17\\u1A18\\u1A56\\u1A58-\\u1A5E\\u1A60\\u1A62\\u1A65-\\u1A6C\\u1A73-\\u1A7C\\u1A7F\\u1B00-\\u1B03\\u1B34\\u1B36-\\u1B3A\\u1B3C\\u1B42\\u1B6B-\\u1B73\\u1B80\\u1B81\\u1BA2-\\u1BA5\\u1BA8\\u1BA9\\u1C2C-\\u1C33\\u1C36\\u1C37\\u1CD0-\\u1CD2\\u1CD4-\\u1CE0\\u1CE2-\\u1CE8\\u1CED\\u1DC0-\\u1DE6\\u1DFD-\\u1DFF\\u20D0-\\u20DC\\u20E1\\u20E5-\\u20F0\\u2CEF-\\u2CF1\\u2DE0-\\u2DFF\\u302A-\\u302F\\u3099\\u309A\\uA66F\\uA67C\\uA67D\\uA6F0\\uA6F1\\uA802\\uA806\\uA80B\\uA825\\uA826\\uA8C4\\uA8E0-\\uA8F1\\uA926-\\uA92D\\uA947-\\uA951\\uA980-\\uA982\\uA9B3\\uA9B6-\\uA9B9\\uA9BC\\uAA29-\\uAA2E\\uAA31\\uAA32\\uAA35\\uAA36\\uAA43\\uAA4C\\uAAB0\\uAAB2-\\uAAB4\\uAAB7\\uAAB8\\uAABE\\uAABF\\uAAC1\\uABE5\\uABE8\\uABED\\uFB1E\\uFE00-\\uFE0F\\uFE20-\\uFE26]"),
+	space_combining_mark: new RegExp("[\\u0903\\u093E-\\u0940\\u0949-\\u094C\\u094E\\u0982\\u0983\\u09BE-\\u09C0\\u09C7\\u09C8\\u09CB\\u09CC\\u09D7\\u0A03\\u0A3E-\\u0A40\\u0A83\\u0ABE-\\u0AC0\\u0AC9\\u0ACB\\u0ACC\\u0B02\\u0B03\\u0B3E\\u0B40\\u0B47\\u0B48\\u0B4B\\u0B4C\\u0B57\\u0BBE\\u0BBF\\u0BC1\\u0BC2\\u0BC6-\\u0BC8\\u0BCA-\\u0BCC\\u0BD7\\u0C01-\\u0C03\\u0C41-\\u0C44\\u0C82\\u0C83\\u0CBE\\u0CC0-\\u0CC4\\u0CC7\\u0CC8\\u0CCA\\u0CCB\\u0CD5\\u0CD6\\u0D02\\u0D03\\u0D3E-\\u0D40\\u0D46-\\u0D48\\u0D4A-\\u0D4C\\u0D57\\u0D82\\u0D83\\u0DCF-\\u0DD1\\u0DD8-\\u0DDF\\u0DF2\\u0DF3\\u0F3E\\u0F3F\\u0F7F\\u102B\\u102C\\u1031\\u1038\\u103B\\u103C\\u1056\\u1057\\u1062-\\u1064\\u1067-\\u106D\\u1083\\u1084\\u1087-\\u108C\\u108F\\u109A-\\u109C\\u17B6\\u17BE-\\u17C5\\u17C7\\u17C8\\u1923-\\u1926\\u1929-\\u192B\\u1930\\u1931\\u1933-\\u1938\\u19B0-\\u19C0\\u19C8\\u19C9\\u1A19-\\u1A1B\\u1A55\\u1A57\\u1A61\\u1A63\\u1A64\\u1A6D-\\u1A72\\u1B04\\u1B35\\u1B3B\\u1B3D-\\u1B41\\u1B43\\u1B44\\u1B82\\u1BA1\\u1BA6\\u1BA7\\u1BAA\\u1C24-\\u1C2B\\u1C34\\u1C35\\u1CE1\\u1CF2\\uA823\\uA824\\uA827\\uA880\\uA881\\uA8B4-\\uA8C3\\uA952\\uA953\\uA983\\uA9B4\\uA9B5\\uA9BA\\uA9BB\\uA9BD-\\uA9C0\\uAA2F\\uAA30\\uAA33\\uAA34\\uAA4D\\uAA7B\\uABE3\\uABE4\\uABE6\\uABE7\\uABE9\\uABEA\\uABEC]"),
+	connector_punctuation: new RegExp("[\\u005F\\u203F\\u2040\\u2054\\uFE33\\uFE34\\uFE4D-\\uFE4F\\uFF3F]")
+};
+
+function is_letter(ch) {
+	return UNICODE.letter.test(ch);
+};
+
+function is_digit(ch) {
+	ch = ch.charCodeAt(0);
+	return ch >= 48 && ch <= 57; //XXX: find out if "UnicodeDigit" means something else than 0..9
+};
+
+function is_alphanumeric_char(ch) {
+	return is_digit(ch) || is_letter(ch);
+};
+
+function is_unicode_combining_mark(ch) {
+	return UNICODE.non_spacing_mark.test(ch) || UNICODE.space_combining_mark.test(ch);
+};
+
+function is_unicode_connector_punctuation(ch) {
+	return UNICODE.connector_punctuation.test(ch);
+};
+
+function is_identifier_start(ch) {
+	return ch == "$" || ch == "_" || is_letter(ch);
+};
+
+function is_identifier_char(ch) {
+	return is_identifier_start(ch)
+		|| is_unicode_combining_mark(ch)
+		|| is_digit(ch)
+		|| is_unicode_connector_punctuation(ch)
+		|| ch == "\u200c" // zero-width non-joiner <ZWNJ>
+		|| ch == "\u200d" // zero-width joiner <ZWJ> (in my ECMA-262 PDF, this is also 200c)
+	;
+};
+
+function parse_js_number(num) {
+	if (RE_HEX_NUMBER.test(num)) {
+		return parseInt(num.substr(2), 16);
+	} else if (RE_OCT_NUMBER.test(num)) {
+		return parseInt(num.substr(1), 8);
+	} else if (RE_DEC_NUMBER.test(num)) {
+		return parseFloat(num);
+	}
+};
+
+function JS_Parse_Error(message, line, col, pos) {
+	this.message = message;
+	this.line = line;
+	this.col = col;
+	this.pos = pos;
+};
+
+JS_Parse_Error.prototype.toString = function() {
+	return this.message + " (line: " + this.line + ", col: " + this.col + ", pos: " + this.pos + ")";
+};
+
+function js_error(message, line, col, pos) {
+	throw new JS_Parse_Error(message, line, col, pos);
+};
+
+function is_token(token, type, val) {
+	return token.type == type && (val == null || token.value == val);
+};
+
+var EX_EOF = {};
+
+function tokenizer($TEXT) {
+
+	var S = {
+		text            : $TEXT.replace(/\r\n?|[\n\u2028\u2029]/g, "\n").replace(/^\uFEFF/, ''),
+		pos             : 0,
+		tokpos          : 0,
+		line            : 0,
+		tokline         : 0,
+		col             : 0,
+		tokcol          : 0,
+		newline_before  : false,
+		regex_allowed   : false,
+		comments_before : []
+	};
+
+	function peek() { return S.text.charAt(S.pos); };
+
+	function next(signal_eof) {
+		var ch = S.text.charAt(S.pos++);
+		if (signal_eof && !ch)
+			throw EX_EOF;
+		if (ch == "\n") {
+			S.newline_before = true;
+			++S.line;
+			S.col = 0;
+		} else {
+			++S.col;
+		}
+		return ch;
+	};
+
+	function eof() {
+		return !S.peek();
+	};
+
+	function find(what, signal_eof) {
+		var pos = S.text.indexOf(what, S.pos);
+		if (signal_eof && pos == -1) throw EX_EOF;
+		return pos;
+	};
+
+	function start_token() {
+		S.tokline = S.line;
+		S.tokcol = S.col;
+		S.tokpos = S.pos;
+	};
+
+	function token(type, value, is_comment) {
+		S.regex_allowed = ((type == "operator" && !HOP(UNARY_POSTFIX, value)) ||
+				   (type == "keyword" && HOP(KEYWORDS_BEFORE_EXPRESSION, value)) ||
+				   (type == "punc" && HOP(PUNC_BEFORE_EXPRESSION, value)));
+		var ret = {
+			type  : type,
+			value : value,
+			line  : S.tokline,
+			col   : S.tokcol,
+			pos   : S.tokpos,
+			nlb   : S.newline_before
+		};
+		if (!is_comment) {
+			ret.comments_before = S.comments_before;
+			S.comments_before = [];
+		}
+		S.newline_before = false;
+		return ret;
+	};
+
+	function skip_whitespace() {
+		while (HOP(WHITESPACE_CHARS, peek()))
+			next();
+	};
+
+	function read_while(pred) {
+		var ret = "", ch = peek(), i = 0;
+		while (ch && pred(ch, i++)) {
+			ret += next();
+			ch = peek();
+		}
+		return ret;
+	};
+
+	function parse_error(err) {
+		js_error(err, S.tokline, S.tokcol, S.tokpos);
+	};
+
+	function read_num(prefix) {
+		var has_e = false, after_e = false, has_x = false, has_dot = prefix == ".";
+		var num = read_while(function(ch, i){
+			if (ch == "x" || ch == "X") {
+				if (has_x) return false;
+				return has_x = true;
+			}
+			if (!has_x && (ch == "E" || ch == "e")) {
+				if (has_e) return false;
+				return has_e = after_e = true;
+			}
+			if (ch == "-") {
+				if (after_e || (i == 0 && !prefix)) return true;
+				return false;
+			}
+			if (ch == "+") return after_e;
+			after_e = false;
+			if (ch == ".") {
+				if (!has_dot && !has_x)
+					return has_dot = true;
+				return false;
+			}
+			return is_alphanumeric_char(ch);
+		});
+		if (prefix)
+			num = prefix + num;
+		var valid = parse_js_number(num);
+		if (!isNaN(valid)) {
+			return token("num", valid);
+		} else {
+			parse_error("Invalid syntax: " + num);
+		}
+	};
+
+	function read_escaped_char() {
+		var ch = next(true);
+		switch (ch) {
+			case "n" : return "\n";
+			case "r" : return "\r";
+			case "t" : return "\t";
+			case "b" : return "\b";
+			case "v" : return "\v";
+			case "f" : return "\f";
+			case "0" : return "\0";
+			case "x" : return String.fromCharCode(hex_bytes(2));
+			case "u" : return String.fromCharCode(hex_bytes(4));
+			case "\n": return "";
+			default  : return ch;
+		}
+	};
+
+	function hex_bytes(n) {
+		var num = 0;
+		for (; n > 0; --n) {
+			var digit = parseInt(next(true), 16);
+			if (isNaN(digit))
+				parse_error("Invalid hex-character pattern in string");
+			num = (num << 4) | digit;
+		}
+		return num;
+	};
+
+	function read_string() {
+		return with_eof_error("Unterminated string constant", function(){
+			var quote = next(), ret = "";
+			for (;;) {
+				var ch = next(true);
+				if (ch == "\\") {
+					// read OctalEscapeSequence (XXX: deprecated if "strict mode")
+					// https://github.com/mishoo/UglifyJS/issues/178
+					var octal_len = 0, first = null;
+					ch = read_while(function(ch){
+						if (ch >= "0" && ch <= "7") {
+							if (!first) {
+								first = ch;
+								return ++octal_len;
+							}
+							else if (first <= "3" && octal_len <= 2) return ++octal_len;
+							else if (first >= "4" && octal_len <= 1) return ++octal_len;
+						}
+						return false;
+					});
+					if (octal_len > 0) ch = String.fromCharCode(parseInt(ch, 8));
+					else ch = read_escaped_char();
+				}
+				else if (ch == quote) break;
+				ret += ch;
+			}
+			return token("string", ret);
+		});
+	};
+
+	function read_line_comment() {
+		next();
+		var i = find("\n"), ret;
+		if (i == -1) {
+			ret = S.text.substr(S.pos);
+			S.pos = S.text.length;
+		} else {
+			ret = S.text.substring(S.pos, i);
+			S.pos = i;
+		}
+		return token("comment1", ret, true);
+	};
+
+	function read_multiline_comment() {
+		next();
+		return with_eof_error("Unterminated multiline comment", function(){
+			var i = find("*/", true),
+				text = S.text.substring(S.pos, i),
+				tok = token("comment2", text, true);
+			S.pos = i + 2;
+			S.line += text.split("\n").length - 1;
+			S.newline_before = text.indexOf("\n") >= 0;
+			return tok;
+		});
+	};
+
+	function read_name() {
+		var backslash = false, name = "", ch;
+		while ((ch = peek()) != null) {
+			if (!backslash) {
+				if (ch == "\\") backslash = true, next();
+				else if (is_identifier_char(ch)) name += next();
+				else break;
+			}
+			else {
+				if (ch != "u") parse_error("Expecting UnicodeEscapeSequence -- uXXXX");
+				ch = read_escaped_char();
+				if (!is_identifier_char(ch)) parse_error("Unicode char: " + ch.charCodeAt(0) + " is not valid in identifier");
+				name += ch;
+				backslash = false;
+			}
+		}
+		return name;
+	};
+
+	function read_regexp() {
+		return with_eof_error("Unterminated regular expression", function(){
+			var prev_backslash = false, regexp = "", ch, in_class = false;
+			while ((ch = next(true))) if (prev_backslash) {
+				regexp += "\\" + ch;
+				prev_backslash = false;
+			} else if (ch == "[") {
+				in_class = true;
+				regexp += ch;
+			} else if (ch == "]" && in_class) {
+				in_class = false;
+				regexp += ch;
+			} else if (ch == "/" && !in_class) {
+				break;
+			} else if (ch == "\\") {
+				prev_backslash = true;
+			} else {
+				regexp += ch;
+			}
+			var mods = read_name();
+			return token("regexp", [ regexp, mods ]);
+		});
+	};
+
+	function read_operator(prefix) {
+		function grow(op) {
+			if (!peek()) return op;
+			var bigger = op + peek();
+			if (HOP(OPERATORS, bigger)) {
+				next();
+				return grow(bigger);
+			} else {
+				return op;
+			}
+		};
+		return token("operator", grow(prefix || next()));
+	};
+
+	function handle_slash() {
+		next();
+		var regex_allowed = S.regex_allowed;
+		switch (peek()) {
+			case "/":
+			S.comments_before.push(read_line_comment());
+			S.regex_allowed = regex_allowed;
+			return next_token();
+			case "*":
+			S.comments_before.push(read_multiline_comment());
+			S.regex_allowed = regex_allowed;
+			return next_token();
+		}
+		return S.regex_allowed ? read_regexp() : read_operator("/");
+	};
+
+	function handle_dot() {
+		next();
+		return is_digit(peek())
+			? read_num(".")
+			: token("punc", ".");
+	};
+
+	function read_word() {
+		var word = read_name();
+		return !HOP(KEYWORDS, word)
+			? token("name", word)
+			: HOP(OPERATORS, word)
+			? token("operator", word)
+			: HOP(KEYWORDS_ATOM, word)
+			? token("atom", word)
+			: token("keyword", word);
+	};
+
+	function with_eof_error(eof_error, cont) {
+		try {
+			return cont();
+		} catch(ex) {
+			if (ex === EX_EOF) parse_error(eof_error);
+			else throw ex;
+		}
+	};
+
+	function next_token(force_regexp) {
+		if (force_regexp)
+			return read_regexp();
+		skip_whitespace();
+		start_token();
+		var ch = peek();
+		if (!ch) return token("eof");
+		if (is_digit(ch)) return read_num();
+		if (ch == '"' || ch == "'") return read_string();
+		if (HOP(PUNC_CHARS, ch)) return token("punc", next());
+		if (ch == ".") return handle_dot();
+		if (ch == "/") return handle_slash();
+		if (HOP(OPERATOR_CHARS, ch)) return read_operator();
+		if (ch == "\\" || is_identifier_start(ch)) return read_word();
+		parse_error("Unexpected character '" + ch + "'");
+	};
+
+	next_token.context = function(nc) {
+		if (nc) S = nc;
+		return S;
+	};
+
+	return next_token;
+
+};
+
+/* -----[ Parser (constants) ]----- */
+
+var UNARY_PREFIX = array_to_hash([
+	"typeof",
+	"void",
+	"delete",
+	"--",
+	"++",
+	"!",
+	"~",
+	"-",
+	"+"
+]);
+
+var UNARY_POSTFIX = array_to_hash([ "--", "++" ]);
+
+var ASSIGNMENT = (function(a, ret, i){
+	while (i < a.length) {
+		ret[a[i]] = a[i].substr(0, a[i].length - 1);
+		i++;
+	}
+	return ret;
+})(
+	["+=", "-=", "/=", "*=", "%=", ">>=", "<<=", ">>>=", "|=", "^=", "&="],
+	{ "=": true },
+	0
+);
+
+var PRECEDENCE = (function(a, ret){
+	for (var i = 0, n = 1; i < a.length; ++i, ++n) {
+		var b = a[i];
+		for (var j = 0; j < b.length; ++j) {
+			ret[b[j]] = n;
+		}
+	}
+	return ret;
+})(
+	[
+		["||"],
+		["&&"],
+		["|"],
+		["^"],
+		["&"],
+		["==", "===", "!=", "!=="],
+		["<", ">", "<=", ">=", "in", "instanceof"],
+		[">>", "<<", ">>>"],
+		["+", "-"],
+		["*", "/", "%"]
+	],
+	{}
+);
+
+var STATEMENTS_WITH_LABELS = array_to_hash([ "for", "do", "while", "switch" ]);
+
+var ATOMIC_START_TOKEN = array_to_hash([ "atom", "num", "string", "regexp", "name" ]);
+
+/* -----[ Parser ]----- */
+
+function NodeWithToken(str, start, end) {
+	this.name = str;
+	this.start = start;
+	this.end = end;
+};
+
+NodeWithToken.prototype.toString = function() { return this.name; };
+
+function parse($TEXT, exigent_mode, embed_tokens) {
+
+	var S = {
+		input       : typeof $TEXT == "string" ? tokenizer($TEXT, true) : $TEXT,
+		token       : null,
+		prev        : null,
+		peeked      : null,
+		in_function : 0,
+		in_loop     : 0,
+		labels      : []
+	};
+
+	S.token = next();
+
+	function is(type, value) {
+		return is_token(S.token, type, value);
+	};
+
+	function peek() { return S.peeked || (S.peeked = S.input()); };
+
+	function next() {
+		S.prev = S.token;
+		if (S.peeked) {
+			S.token = S.peeked;
+			S.peeked = null;
+		} else {
+			S.token = S.input();
+		}
+		return S.token;
+	};
+
+	function prev() {
+		return S.prev;
+	};
+
+	function croak(msg, line, col, pos) {
+		var ctx = S.input.context();
+		js_error(msg,
+			 line != null ? line : ctx.tokline,
+			 col != null ? col : ctx.tokcol,
+			 pos != null ? pos : ctx.tokpos);
+	};
+
+	function token_error(token, msg) {
+		croak(msg, token.line, token.col);
+	};
+
+	function unexpected(token) {
+		if (token == null)
+			token = S.token;
+		token_error(token, "Unexpected token: " + token.type + " (" + token.value + ")");
+	};
+
+	function expect_token(type, val) {
+		if (is(type, val)) {
+			return next();
+		}
+		token_error(S.token, "Unexpected token " + S.token.type + ", expected " + type);
+	};
+
+	function expect(punc) { return expect_token("punc", punc); };
+
+	function can_insert_semicolon() {
+		return !exigent_mode && (
+			S.token.nlb || is("eof") || is("punc", "}")
+		);
+	};
+
+	function semicolon() {
+		if (is("punc", ";")) next();
+		else if (!can_insert_semicolon()) unexpected();
+	};
+
+	function as() {
+		return slice(arguments);
+	};
+
+	function parenthesised() {
+		expect("(");
+		var ex = expression();
+		expect(")");
+		return ex;
+	};
+
+	function add_tokens(str, start, end) {
+		return str instanceof NodeWithToken ? str : new NodeWithToken(str, start, end);
+	};
+
+	function maybe_embed_tokens(parser) {
+		if (embed_tokens) return function() {
+			var start = S.token;
+			var ast = parser.apply(this, arguments);
+			ast[0] = add_tokens(ast[0], start, prev());
+			return ast;
+		};
+		else return parser;
+	};
+
+	var statement = maybe_embed_tokens(function() {
+		if (is("operator", "/")) {
+			S.peeked = null;
+			S.token = S.input(true); // force regexp
+		}
+		switch (S.token.type) {
+			case "num":
+			case "string":
+			case "regexp":
+			case "operator":
+			case "atom":
+			return simple_statement();
+
+			case "name":
+			return is_token(peek(), "punc", ":")
+				? labeled_statement(prog1(S.token.value, next, next))
+				: simple_statement();
+
+			case "punc":
+			switch (S.token.value) {
+				case "{":
+				return as("block", block_());
+				case "[":
+				case "(":
+				return simple_statement();
+				case ";":
+				next();
+				return as("block");
+				default:
+				unexpected();
+			}
+
+			case "keyword":
+			switch (prog1(S.token.value, next)) {
+				case "break":
+				return break_cont("break");
+
+				case "continue":
+				return break_cont("continue");
+
+				case "debugger":
+				semicolon();
+				return as("debugger");
+
+				case "do":
+				return (function(body){
+					expect_token("keyword", "while");
+					return as("do", prog1(parenthesised, semicolon), body);
+				})(in_loop(statement));
+
+				case "for":
+				return for_();
+
+				case "function":
+				return function_(true);
+
+				case "if":
+				return if_();
+
+				case "return":
+				if (S.in_function == 0)
+					croak("'return' outside of function");
+				return as("return",
+					  is("punc", ";")
+					  ? (next(), null)
+					  : can_insert_semicolon()
+					  ? null
+					  : prog1(expression, semicolon));
+
+				case "switch":
+				return as("switch", parenthesised(), switch_block_());
+
+				case "throw":
+				return as("throw", prog1(expression, semicolon));
+
+				case "try":
+				return try_();
+
+				case "var":
+				return prog1(var_, semicolon);
+
+				case "const":
+				return prog1(const_, semicolon);
+
+				case "while":
+				return as("while", parenthesised(), in_loop(statement));
+
+				case "with":
+				return as("with", parenthesised(), statement());
+
+				default:
+				unexpected();
+			}
+		}
+	});
+
+	function labeled_statement(label) {
+		S.labels.push(label);
+		var start = S.token, stat = statement();
+		if (exigent_mode && !HOP(STATEMENTS_WITH_LABELS, stat[0]))
+			unexpected(start);
+		S.labels.pop();
+		return as("label", label, stat);
+	};
+
+	function simple_statement() {
+		return as("stat", prog1(expression, semicolon));
+	};
+
+	function break_cont(type) {
+		var name;
+		if (!can_insert_semicolon()) {
+			name = is("name") ? S.token.value : null;
+		}
+		if (name != null) {
+			next();
+			if (!member(name, S.labels))
+				croak("Label " + name + " without matching loop or statement");
+		}
+		else if (S.in_loop == 0)
+			croak(type + " not inside a loop or switch");
+		semicolon();
+		return as(type, name);
+	};
+
+	function for_() {
+		expect("(");
+		var init = null;
+		if (!is("punc", ";")) {
+			init = is("keyword", "var")
+				? (next(), var_(true))
+				: expression(true, true);
+			if (is("operator", "in"))
+				return for_in(init);
+		}
+		return regular_for(init);
+	};
+
+	function regular_for(init) {
+		expect(";");
+		var test = is("punc", ";") ? null : expression();
+		expect(";");
+		var step = is("punc", ")") ? null : expression();
+		expect(")");
+		return as("for", init, test, step, in_loop(statement));
+	};
+
+	function for_in(init) {
+		var lhs = init[0] == "var" ? as("name", init[1][0]) : init;
+		next();
+		var obj = expression();
+		expect(")");
+		return as("for-in", init, lhs, obj, in_loop(statement));
+	};
+
+	var function_ = maybe_embed_tokens(function(in_statement) {
+		var name = is("name") ? prog1(S.token.value, next) : null;
+		if (in_statement && !name)
+			unexpected();
+		expect("(");
+		return as(in_statement ? "defun" : "function",
+			  name,
+			  // arguments
+			  (function(first, a){
+				  while (!is("punc", ")")) {
+					  if (first) first = false; else expect(",");
+					  if (!is("name")) unexpected();
+					  a.push(S.token.value);
+					  next();
+				  }
+				  next();
+				  return a;
+			  })(true, []),
+			  // body
+			  (function(){
+				  ++S.in_function;
+				  var loop = S.in_loop;
+				  S.in_loop = 0;
+				  var a = block_();
+				  --S.in_function;
+				  S.in_loop = loop;
+				  return a;
+			  })());
+	});
+
+	function if_() {
+		var cond = parenthesised(), body = statement(), belse;
+		if (is("keyword", "else")) {
+			next();
+			belse = statement();
+		}
+		return as("if", cond, body, belse);
+	};
+
+	function block_() {
+		expect("{");
+		var a = [];
+		while (!is("punc", "}")) {
+			if (is("eof")) unexpected();
+			a.push(statement());
+		}
+		next();
+		return a;
+	};
+
+	var switch_block_ = curry(in_loop, function(){
+		expect("{");
+		var a = [], cur = null;
+		while (!is("punc", "}")) {
+			if (is("eof")) unexpected();
+			if (is("keyword", "case")) {
+				next();
+				cur = [];
+				a.push([ expression(), cur ]);
+				expect(":");
+			}
+			else if (is("keyword", "default")) {
+				next();
+				expect(":");
+				cur = [];
+				a.push([ null, cur ]);
+			}
+			else {
+				if (!cur) unexpected();
+				cur.push(statement());
+			}
+		}
+		next();
+		return a;
+	});
+
+	function try_() {
+		var body = block_(), bcatch, bfinally;
+		if (is("keyword", "catch")) {
+			next();
+			expect("(");
+			if (!is("name"))
+				croak("Name expected");
+			var name = S.token.value;
+			next();
+			expect(")");
+			bcatch = [ name, block_() ];
+		}
+		if (is("keyword", "finally")) {
+			next();
+			bfinally = block_();
+		}
+		if (!bcatch && !bfinally)
+			croak("Missing catch/finally blocks");
+		return as("try", body, bcatch, bfinally);
+	};
+
+	function vardefs(no_in) {
+		var a = [];
+		for (;;) {
+			if (!is("name"))
+				unexpected();
+			var name = S.token.value;
+			next();
+			if (is("operator", "=")) {
+				next();
+				a.push([ name, expression(false, no_in) ]);
+			} else {
+				a.push([ name ]);
+			}
+			if (!is("punc", ","))
+				break;
+			next();
+		}
+		return a;
+	};
+
+	function var_(no_in) {
+		return as("var", vardefs(no_in));
+	};
+
+	function const_() {
+		return as("const", vardefs());
+	};
+
+	function new_() {
+		var newexp = expr_atom(false), args;
+		if (is("punc", "(")) {
+			next();
+			args = expr_list(")");
+		} else {
+			args = [];
+		}
+		return subscripts(as("new", newexp, args), true);
+	};
+
+	var expr_atom = maybe_embed_tokens(function(allow_calls) {
+		if (is("operator", "new")) {
+			next();
+			return new_();
+		}
+		if (is("operator") && HOP(UNARY_PREFIX, S.token.value)) {
+			return make_unary("unary-prefix",
+					  prog1(S.token.value, next),
+					  expr_atom(allow_calls));
+		}
+		if (is("punc")) {
+			switch (S.token.value) {
+				case "(":
+				next();
+				return subscripts(prog1(expression, curry(expect, ")")), allow_calls);
+				case "[":
+				next();
+				return subscripts(array_(), allow_calls);
+				case "{":
+				next();
+				return subscripts(object_(), allow_calls);
+			}
+			unexpected();
+		}
+		if (is("keyword", "function")) {
+			next();
+			return subscripts(function_(false), allow_calls);
+		}
+		if (HOP(ATOMIC_START_TOKEN, S.token.type)) {
+			var atom = S.token.type == "regexp"
+				? as("regexp", S.token.value[0], S.token.value[1])
+				: as(S.token.type, S.token.value);
+			return subscripts(prog1(atom, next), allow_calls);
+		}
+		unexpected();
+	});
+
+	function expr_list(closing, allow_trailing_comma, allow_empty) {
+		var first = true, a = [];
+		while (!is("punc", closing)) {
+			if (first) first = false; else expect(",");
+			if (allow_trailing_comma && is("punc", closing)) break;
+			if (is("punc", ",") && allow_empty) {
+				a.push([ "atom", "undefined" ]);
+			} else {
+				a.push(expression(false));
+			}
+		}
+		next();
+		return a;
+	};
+
+	function array_() {
+		return as("array", expr_list("]", !exigent_mode, true));
+	};
+
+	function object_() {
+		var first = true, a = [];
+		while (!is("punc", "}")) {
+			if (first) first = false; else expect(",");
+			if (!exigent_mode && is("punc", "}"))
+				// allow trailing comma
+				break;
+			var type = S.token.type;
+			var name = as_property_name();
+			if (type == "name" && (name == "get" || name == "set") && !is("punc", ":")) {
+				a.push([ as_name(), function_(false), name ]);
+			} else {
+				expect(":");
+				a.push([ name, expression(false) ]);
+			}
+		}
+		next();
+		return as("object", a);
+	};
+
+	function as_property_name() {
+		switch (S.token.type) {
+			case "num":
+			case "string":
+			return prog1(S.token.value, next);
+		}
+		return as_name();
+	};
+
+	function as_name() {
+		switch (S.token.type) {
+			case "name":
+			case "operator":
+			case "keyword":
+			case "atom":
+			return prog1(S.token.value, next);
+			default:
+			unexpected();
+		}
+	};
+
+	function subscripts(expr, allow_calls) {
+		if (is("punc", ".")) {
+			next();
+			return subscripts(as("dot", expr, as_name()), allow_calls);
+		}
+		if (is("punc", "[")) {
+			next();
+			return subscripts(as("sub", expr, prog1(expression, curry(expect, "]"))), allow_calls);
+		}
+		if (allow_calls && is("punc", "(")) {
+			next();
+			return subscripts(as("call", expr, expr_list(")")), true);
+		}
+		if (allow_calls && is("operator") && HOP(UNARY_POSTFIX, S.token.value)) {
+			return prog1(curry(make_unary, "unary-postfix", S.token.value, expr),
+					next);
+		}
+		return expr;
+	};
+
+	function make_unary(tag, op, expr) {
+		if ((op == "++" || op == "--") && !is_assignable(expr))
+			croak("Invalid use of " + op + " operator");
+		return as(tag, op, expr);
+	};
+
+	function expr_op(left, min_prec, no_in) {
+		var op = is("operator") ? S.token.value : null;
+		if (op && op == "in" && no_in) op = null;
+		var prec = op != null ? PRECEDENCE[op] : null;
+		if (prec != null && prec > min_prec) {
+			next();
+			var right = expr_op(expr_atom(true), prec, no_in);
+			return expr_op(as("binary", op, left, right), min_prec, no_in);
+		}
+		return left;
+	};
+
+	function expr_ops(no_in) {
+		return expr_op(expr_atom(true), 0, no_in);
+	};
+
+	function maybe_conditional(no_in) {
+		var expr = expr_ops(no_in);
+		if (is("operator", "?")) {
+			next();
+			var yes = expression(false);
+			expect(":");
+			return as("conditional", expr, yes, expression(false, no_in));
+		}
+		return expr;
+	};
+
+	function is_assignable(expr) {
+		if (!exigent_mode) return true;
+		switch (expr[0]) {
+			case "dot":
+			case "sub":
+			case "new":
+			case "call":
+			return true;
+			case "name":
+			return expr[1] != "this";
+		}
+	};
+
+	function maybe_assign(no_in) {
+		var left = maybe_conditional(no_in), val = S.token.value;
+		if (is("operator") && HOP(ASSIGNMENT, val)) {
+			if (is_assignable(left)) {
+				next();
+				return as("assign", ASSIGNMENT[val], left, maybe_assign(no_in));
+			}
+			croak("Invalid assignment");
+		}
+		return left;
+	};
+
+	var expression = maybe_embed_tokens(function(commas, no_in) {
+		if (arguments.length == 0)
+			commas = true;
+		var expr = maybe_assign(no_in);
+		if (commas && is("punc", ",")) {
+			next();
+			return as("seq", expr, expression(true, no_in));
+		}
+		return expr;
+	});
+
+	function in_loop(cont) {
+		try {
+			++S.in_loop;
+			return cont();
+		} finally {
+			--S.in_loop;
+		}
+	};
+
+	return as("toplevel", (function(a){
+		while (!is("eof"))
+			a.push(statement());
+		return a;
+	})([]));
+
+};
+
+/* -----[ Utilities ]----- */
+
+function curry(f) {
+	var args = slice(arguments, 1);
+	return function() { return f.apply(this, args.concat(slice(arguments))); };
+};
+
+function prog1(ret) {
+	if (ret instanceof Function)
+		ret = ret();
+	for (var i = 1, n = arguments.length; --n > 0; ++i)
+		arguments[i]();
+	return ret;
+};
+
+function array_to_hash(a) {
+	var ret = {};
+	for (var i = 0; i < a.length; ++i)
+		ret[a[i]] = true;
+	return ret;
+};
+
+function slice(a, start) {
+	return Array.prototype.slice.call(a, start || 0);
+};
+
+function characters(str) {
+	return str.split("");
+};
+
+function member(name, array) {
+	for (var i = array.length; --i >= 0;)
+		if (array[i] === name)
+			return true;
+	return false;
+};
+
+function HOP(obj, prop) {
+	return Object.prototype.hasOwnProperty.call(obj, prop);
+};
+
+/* -----[ helper for AST traversal ]----- */
+
+function ast_walker() {
+	function _vardefs(defs) {
+		return [ this[0], MAP(defs, function(def){
+			var a = [ def[0] ];
+			if (def.length > 1)
+				a[1] = walk(def[1]);
+			return a;
+		}) ];
+	};
+	function _block(statements) {
+		var out = [ this[0] ];
+		if (statements != null)
+			out.push(MAP(statements, walk));
+		return out;
+	};
+	var walkers = {
+		"string": function(str) {
+			return [ this[0], str ];
+		},
+		"num": function(num) {
+			return [ this[0], num ];
+		},
+		"name": function(name) {
+			return [ this[0], name ];
+		},
+		"toplevel": function(statements) {
+			return [ this[0], MAP(statements, walk) ];
+		},
+		"block": _block,
+		"splice": _block,
+		"var": _vardefs,
+		"const": _vardefs,
+		"try": function(t, c, f) {
+			return [
+				this[0],
+				MAP(t, walk),
+				c != null ? [ c[0], MAP(c[1], walk) ] : null,
+				f != null ? MAP(f, walk) : null
+			];
+		},
+		"throw": function(expr) {
+			return [ this[0], walk(expr) ];
+		},
+		"new": function(ctor, args) {
+			return [ this[0], walk(ctor), MAP(args, walk) ];
+		},
+		"switch": function(expr, body) {
+			return [ this[0], walk(expr), MAP(body, function(branch){
+				return [ branch[0] ? walk(branch[0]) : null,
+					 MAP(branch[1], walk) ];
+			}) ];
+		},
+		"break": function(label) {
+			return [ this[0], label ];
+		},
+		"continue": function(label) {
+			return [ this[0], label ];
+		},
+		"conditional": function(cond, t, e) {
+			return [ this[0], walk(cond), walk(t), walk(e) ];
+		},
+		"assign": function(op, lvalue, rvalue) {
+			return [ this[0], op, walk(lvalue), walk(rvalue) ];
+		},
+		"dot": function(expr) {
+			return [ this[0], walk(expr) ].concat(slice(arguments, 1));
+		},
+		"call": function(expr, args) {
+			return [ this[0], walk(expr), MAP(args, walk) ];
+		},
+		"function": function(name, args, body) {
+			return [ this[0], name, args.slice(), MAP(body, walk) ];
+		},
+		"defun": function(name, args, body) {
+			return [ this[0], name, args.slice(), MAP(body, walk) ];
+		},
+		"if": function(conditional, t, e) {
+			return [ this[0], walk(conditional), walk(t), walk(e) ];
+		},
+		"for": function(init, cond, step, block) {
+			return [ this[0], walk(init), walk(cond), walk(step), walk(block) ];
+		},
+		"for-in": function(vvar, key, hash, block) {
+			return [ this[0], walk(vvar), walk(key), walk(hash), walk(block) ];
+		},
+		"while": function(cond, block) {
+			return [ this[0], walk(cond), walk(block) ];
+		},
+		"do": function(cond, block) {
+			return [ this[0], walk(cond), walk(block) ];
+		},
+		"return": function(expr) {
+			return [ this[0], walk(expr) ];
+		},
+		"binary": function(op, left, right) {
+			return [ this[0], op, walk(left), walk(right) ];
+		},
+		"unary-prefix": function(op, expr) {
+			return [ this[0], op, walk(expr) ];
+		},
+		"unary-postfix": function(op, expr) {
+			return [ this[0], op, walk(expr) ];
+		},
+		"sub": function(expr, subscript) {
+			return [ this[0], walk(expr), walk(subscript) ];
+		},
+		"object": function(props) {
+			return [ this[0], MAP(props, function(p){
+				return p.length == 2
+					? [ p[0], walk(p[1]) ]
+					: [ p[0], walk(p[1]), p[2] ]; // get/set-ter
+			}) ];
+		},
+		"regexp": function(rx, mods) {
+			return [ this[0], rx, mods ];
+		},
+		"array": function(elements) {
+			return [ this[0], MAP(elements, walk) ];
+		},
+		"stat": function(stat) {
+			return [ this[0], walk(stat) ];
+		},
+		"seq": function() {
+			return [ this[0] ].concat(MAP(slice(arguments), walk));
+		},
+		"label": function(name, block) {
+			return [ this[0], name, walk(block) ];
+		},
+		"with": function(expr, block) {
+			return [ this[0], walk(expr), walk(block) ];
+		},
+		"atom": function(name) {
+			return [ this[0], name ];
+		}
+	};
+
+	var user = {};
+	var stack = [];
+	function walk(ast) {
+		if (ast == null)
+			return null;
+		try {
+			stack.push(ast);
+			var type = ast[0];
+			var gen = user[type];
+			if (gen) {
+				var ret = gen.apply(ast, ast.slice(1));
+				if (ret != null)
+					return ret;
+			}
+			gen = walkers[type];
+			return gen.apply(ast, ast.slice(1));
+		} finally {
+			stack.pop();
+		}
+	};
+
+	function with_walkers(walkers, cont){
+		var save = {}, i;
+		for (i in walkers) if (HOP(walkers, i)) {
+			save[i] = user[i];
+			user[i] = walkers[i];
+		}
+		var ret = cont();
+		for (i in save) if (HOP(save, i)) {
+			if (!save[i]) delete user[i];
+			else user[i] = save[i];
+		}
+		return ret;
+	};
+
+	return {
+		walk: walk,
+		with_walkers: with_walkers,
+		parent: function() {
+			return stack[stack.length - 2]; // last one is current node
+		},
+		stack: function() {
+			return stack;
+		}
+	};
+};
+
+function empty(b) {
+	return !b || (b[0] == "block" && (!b[1] || b[1].length == 0));
+};
+
+/* -----[ re-generate code from the AST ]----- */
+
+var DOT_CALL_NO_PARENS = array_to_hash([
+	"name",
+	"array",
+	"object",
+	"string",
+	"dot",
+	"sub",
+	"call",
+	"regexp"
+]);
+
+function make_string(str, ascii_only) {
+	var dq = 0, sq = 0;
+	str = str.replace(/[\\\b\f\n\r\t\x22\x27\u2028\u2029]/g, function(s){
+		switch (s) {
+			case "\\": return "\\\\";
+			case "\b": return "\\b";
+			case "\f": return "\\f";
+			case "\n": return "\\n";
+			case "\r": return "\\r";
+			case "\t": return "\\t";
+			case "\u2028": return "\\u2028";
+			case "\u2029": return "\\u2029";
+			case '"': ++dq; return '"';
+			case "'": ++sq; return "'";
+		}
+		return s;
+	});
+	if (ascii_only) str = to_ascii(str);
+	if (dq > sq) return "'" + str.replace(/\x27/g, "\\'") + "'";
+	else return '"' + str.replace(/\x22/g, '\\"') + '"';
+};
+
+function to_ascii(str) {
+	return str.replace(/[\u0080-\uffff]/g, function(ch) {
+		var code = ch.charCodeAt(0).toString(16);
+		while (code.length < 4) code = "0" + code;
+		return "\\u" + code;
+	});
+};
+
+var SPLICE_NEEDS_BRACKETS = array_to_hash([ "if", "while", "do", "for", "for-in", "with" ]);
+
+function gen_code(ast, options) {
+	options = defaults(options, {
+		indent_start : 0,
+		indent_level : 4,
+		quote_keys   : false,
+		space_colon  : false,
+		beautify	 : false,
+		ascii_only   : false,
+		inline_script: false
+	});
+	var beautify = !!options.beautify;
+	var indentation = 0,
+		newline = beautify ? "\n" : "",
+		space = beautify ? " " : "";
+
+	function encode_string(str) {
+		var ret = make_string(str, options.ascii_only);
+		if (options.inline_script)
+			ret = ret.replace(/<\x2fscript([>/\t\n\f\r ])/gi, "<\\/script$1");
+		return ret;
+	};
+
+	function make_name(name) {
+		name = name.toString();
+		if (options.ascii_only)
+			name = to_ascii(name);
+		return name;
+	};
+
+	function indent(line) {
+		if (line == null)
+			line = "";
+		if (beautify)
+			line = repeat_string(" ", options.indent_start + indentation * options.indent_level) + line;
+		return line;
+	};
+
+	function with_indent(cont, incr) {
+		if (incr == null) incr = 1;
+		indentation += incr;
+		try { return cont.apply(null, slice(arguments, 1)); }
+		finally { indentation -= incr; }
+	};
+
+	function add_spaces(a) {
+		if (beautify)
+			return a.join(" ");
+		var b = [];
+		for (var i = 0; i < a.length; ++i) {
+			var next = a[i + 1];
+			b.push(a[i]);
+			if (next &&
+				((/[a-z0-9_\x24]$/i.test(a[i].toString()) && /^[a-z0-9_\x24]/i.test(next.toString())) ||
+				 (/[\+\-]$/.test(a[i].toString()) && /^[\+\-]/.test(next.toString())))) {
+				b.push(" ");
+			}
+		}
+		return b.join("");
+	};
+
+	function add_commas(a) {
+		return a.join("," + space);
+	};
+
+	function parenthesize(expr) {
+		var gen = make(expr);
+		for (var i = 1; i < arguments.length; ++i) {
+			var el = arguments[i];
+			if ((el instanceof Function && el(expr)) || expr[0] == el)
+				return "(" + gen + ")";
+		}
+		return gen;
+	};
+
+	function best_of(a) {
+		if (a.length == 1) {
+			return a[0];
+		}
+		if (a.length == 2) {
+			var b = a[1];
+			a = a[0];
+			return a.length <= b.length ? a : b;
+		}
+		return best_of([ a[0], best_of(a.slice(1)) ]);
+	};
+
+	function needs_parens(expr) {
+		if (expr[0] == "function" || expr[0] == "object") {
+			// dot/call on a literal function requires the
+			// function literal itself to be parenthesized
+			// only if it's the first "thing" in a
+			// statement.  This means that the parent is
+			// "stat", but it could also be a "seq" and
+			// we're the first in this "seq" and the
+			// parent is "stat", and so on.  Messy stuff,
+			// but it worths the trouble.
+			var a = slice($stack), self = a.pop(), p = a.pop();
+			while (p) {
+				if (p[0] == "stat") return true;
+				if (((p[0] == "seq" || p[0] == "call" || p[0] == "dot" || p[0] == "sub" || p[0] == "conditional") && p[1] === self) ||
+					((p[0] == "binary" || p[0] == "assign" || p[0] == "unary-postfix") && p[2] === self)) {
+					self = p;
+					p = a.pop();
+				} else {
+					return false;
+				}
+			}
+		}
+		return !HOP(DOT_CALL_NO_PARENS, expr[0]);
+	};
+
+	function make_num(num) {
+		var str = num.toString(10), a = [ str.replace(/^0\./, ".") ], m;
+		if (Math.floor(num) === num) {
+			a.push("0x" + num.toString(16).toLowerCase(), // probably pointless
+				   "0" + num.toString(8)); // same.
+			if ((m = /^(.*?)(0+)$/.exec(num))) {
+				a.push(m[1] + "e" + m[2].length);
+			}
+		} else if ((m = /^0?\.(0+)(.*)$/.exec(num))) {
+			a.push(m[2] + "e-" + (m[1].length + m[2].length),
+				   str.substr(str.indexOf(".")));
+		}
+		return best_of(a);
+	};
+
+	var generators = {
+		"string": encode_string,
+		"num": make_num,
+		"name": make_name,
+		"toplevel": function(statements) {
+			return make_block_statements(statements)
+				.join(newline);
+		},
+		"splice": function(statements) {
+			var parent = $stack[$stack.length - 2][0];
+			if (HOP(SPLICE_NEEDS_BRACKETS, parent)) {
+				// we need block brackets in this case
+				return make_block.apply(this, arguments);
+			} else {
+				return MAP(make_block_statements(statements, true),
+					   function(line, i) {
+						   // the first line is already indented
+						   return i > 0 ? indent(line) : line;
+					   }).join(newline);
+			}
+		},
+		"block": make_block,
+		"var": function(defs) {
+			return "var " + add_commas(MAP(defs, make_1vardef)) + ";";
+		},
+		"const": function(defs) {
+			return "const " + add_commas(MAP(defs, make_1vardef)) + ";";
+		},
+		"try": function(tr, ca, fi) {
+			var out = [ "try", make_block(tr) ];
+			if (ca) out.push("catch", "(" + ca[0] + ")", make_block(ca[1]));
+			if (fi) out.push("finally", make_block(fi));
+			return add_spaces(out);
+		},
+		"throw": function(expr) {
+			return add_spaces([ "throw", make(expr) ]) + ";";
+		},
+		"new": function(ctor, args) {
+			args = args.length > 0 ? "(" + add_commas(MAP(args, make)) + ")" : "";
+			return add_spaces([ "new", parenthesize(ctor, "seq", "binary", "conditional", "assign", function(expr){
+				var w = ast_walker(), has_call = {};
+				try {
+					w.with_walkers({
+						"call": function() { throw has_call },
+						"function": function() { return this }
+					}, function(){
+						w.walk(expr);
+					});
+				} catch(ex) {
+					if (ex === has_call)
+						return true;
+					throw ex;
+				}
+			}) + args ]);
+		},
+		"switch": function(expr, body) {
+			return add_spaces([ "switch", "(" + make(expr) + ")", make_switch_block(body) ]);
+		},
+		"break": function(label) {
+			var out = "break";
+			if (label != null)
+				out += " " + make_name(label);
+			return out + ";";
+		},
+		"continue": function(label) {
+			var out = "continue";
+			if (label != null)
+				out += " " + make_name(label);
+			return out + ";";
+		},
+		"conditional": function(co, th, el) {
+			return add_spaces([ parenthesize(co, "assign", "seq", "conditional"), "?",
+						parenthesize(th, "seq"), ":",
+						parenthesize(el, "seq") ]);
+		},
+		"assign": function(op, lvalue, rvalue) {
+			if (op && op !== true) op += "=";
+			else op = "=";
+			return add_spaces([ make(lvalue), op, parenthesize(rvalue, "seq") ]);
+		},
+		"dot": function(expr) {
+			var out = make(expr), i = 1;
+			if (expr[0] == "num") {
+				if (!/\./.test(expr[1]))
+					out += ".";
+			} else if (needs_parens(expr))
+				out = "(" + out + ")";
+			while (i < arguments.length)
+				out += "." + make_name(arguments[i++]);
+			return out;
+		},
+		"call": function(func, args) {
+			var f = make(func);
+			if (needs_parens(func))
+				f = "(" + f + ")";
+			return f + "(" + add_commas(MAP(args, function(expr){
+				return parenthesize(expr, "seq");
+			})) + ")";
+		},
+		"function": make_function,
+		"defun": make_function,
+		"if": function(co, th, el) {
+			var out = [ "if", "(" + make(co) + ")", el ? make_then(th) : make(th) ];
+			if (el) {
+				out.push("else", make(el));
+			}
+			return add_spaces(out);
+		},
+		"for": function(init, cond, step, block) {
+			var out = [ "for" ];
+			init = (init != null ? make(init) : "").replace(/;*\s*$/, ";" + space);
+			cond = (cond != null ? make(cond) : "").replace(/;*\s*$/, ";" + space);
+			step = (step != null ? make(step) : "").replace(/;*\s*$/, "");
+			var args = init + cond + step;
+			if (args == "; ; ") args = ";;";
+			out.push("(" + args + ")", make(block));
+			return add_spaces(out);
+		},
+		"for-in": function(vvar, key, hash, block) {
+			return add_spaces([ "for", "(" +
+						(vvar ? make(vvar).replace(/;+$/, "") : make(key)),
+						"in",
+						make(hash) + ")", make(block) ]);
+		},
+		"while": function(condition, block) {
+			return add_spaces([ "while", "(" + make(condition) + ")", make(block) ]);
+		},
+		"do": function(condition, block) {
+			return add_spaces([ "do", make(block), "while", "(" + make(condition) + ")" ]) + ";";
+		},
+		"return": function(expr) {
+			var out = [ "return" ];
+			if (expr != null) out.push(make(expr));
+			return add_spaces(out) + ";";
+		},
+		"binary": function(operator, lvalue, rvalue) {
+			var left = make(lvalue), right = make(rvalue);
+			// XXX: I'm pretty sure other cases will bite here.
+			//	  we need to be smarter.
+			//	  adding parens all the time is the safest bet.
+			if (member(lvalue[0], [ "assign", "conditional", "seq" ]) ||
+				lvalue[0] == "binary" && PRECEDENCE[operator] > PRECEDENCE[lvalue[1]]) {
+				left = "(" + left + ")";
+			}
+			if (member(rvalue[0], [ "assign", "conditional", "seq" ]) ||
+				rvalue[0] == "binary" && PRECEDENCE[operator] >= PRECEDENCE[rvalue[1]] &&
+				!(rvalue[1] == operator && member(operator, [ "&&", "||", "*" ]))) {
+				right = "(" + right + ")";
+			}
+			else if (!beautify && options.inline_script && (operator == "<" || operator == "<<")
+				 && rvalue[0] == "regexp" && /^script/i.test(rvalue[1])) {
+				right = " " + right;
+			}
+			return add_spaces([ left, operator, right ]);
+		},
+		"unary-prefix": function(operator, expr) {
+			var val = make(expr);
+			if (!(expr[0] == "num" || (expr[0] == "unary-prefix" && !HOP(OPERATORS, operator + expr[1])) || !needs_parens(expr)))
+				val = "(" + val + ")";
+			return operator + (is_alphanumeric_char(operator.charAt(0)) ? " " : "") + val;
+		},
+		"unary-postfix": function(operator, expr) {
+			var val = make(expr);
+			if (!(expr[0] == "num" || (expr[0] == "unary-postfix" && !HOP(OPERATORS, operator + expr[1])) || !needs_parens(expr)))
+				val = "(" + val + ")";
+			return val + operator;
+		},
+		"sub": function(expr, subscript) {
+			var hash = make(expr);
+			if (needs_parens(expr))
+				hash = "(" + hash + ")";
+			return hash + "[" + make(subscript) + "]";
+		},
+		"object": function(props) {
+			if (props.length == 0)
+				return "{}";
+			return "{" + newline + with_indent(function(){
+				return MAP(props, function(p){
+					if (p.length == 3) {
+						// getter/setter.  The name is in p[0], the arg.list in p[1][2], the
+						// body in p[1][3] and type ("get" / "set") in p[2].
+						return indent(make_function(p[0], p[1][2], p[1][3], p[2]));
+					}
+					var key = p[0], val = parenthesize(p[1], "seq");
+					if (options.quote_keys) {
+						key = encode_string(key);
+					} else if ((typeof key == "number" || !beautify && +key + "" == key)
+						   && parseFloat(key) >= 0) {
+						key = make_num(+key);
+					} else if (!is_identifier(key)) {
+						key = encode_string(key);
+					}
+					return indent(add_spaces(beautify && options.space_colon
+								 ? [ key, ":", val ]
+								 : [ key + ":", val ]));
+				}).join("," + newline);
+			}) + newline + indent("}");
+		},
+		"regexp": function(rx, mods) {
+			return "/" + rx + "/" + mods;
+		},
+		"array": function(elements) {
+			if (elements.length == 0) return "[]";
+			return add_spaces([ "[", add_commas(MAP(elements, function(el){
+				if (!beautify && el[0] == "atom" && el[1] == "undefined") return "";
+				return parenthesize(el, "seq");
+			})), "]" ]);
+		},
+		"stat": function(stmt) {
+			return make(stmt).replace(/;*\s*$/, ";");
+		},
+		"seq": function() {
+			return add_commas(MAP(slice(arguments), make));
+		},
+		"label": function(name, block) {
+			return add_spaces([ make_name(name), ":", make(block) ]);
+		},
+		"with": function(expr, block) {
+			return add_spaces([ "with", "(" + make(expr) + ")", make(block) ]);
+		},
+		"atom": function(name) {
+			return make_name(name);
+		}
+	};
+
+	// The squeezer replaces "block"-s that contain only a single
+	// statement with the statement itself; technically, the AST
+	// is correct, but this can create problems when we output an
+	// IF having an ELSE clause where the THEN clause ends in an
+	// IF *without* an ELSE block (then the outer ELSE would refer
+	// to the inner IF).  This function checks for this case and
+	// adds the block brackets if needed.
+	function make_then(th) {
+		if (th[0] == "do") {
+			// https://github.com/mishoo/UglifyJS/issues/#issue/57
+			// IE croaks with "syntax error" on code like this:
+			//	 if (foo) do ... while(cond); else ...
+			// we need block brackets around do/while
+			return make([ "block", [ th ]]);
+		}
+		var b = th;
+		while (true) {
+			var type = b[0];
+			if (type == "if") {
+				if (!b[3])
+					// no else, we must add the block
+					return make([ "block", [ th ]]);
+				b = b[3];
+			}
+			else if (type == "while" || type == "do") b = b[2];
+			else if (type == "for" || type == "for-in") b = b[4];
+			else break;
+		}
+		return make(th);
+	};
+
+	function make_function(name, args, body, keyword) {
+		var out = keyword || "function";
+		if (name) {
+			out += " " + make_name(name);
+		}
+		out += "(" + add_commas(MAP(args, make_name)) + ")";
+		return add_spaces([ out, make_block(body) ]);
+	};
+
+	function make_block_statements(statements, noindent) {
+		for (var a = [], last = statements.length - 1, i = 0; i <= last; ++i) {
+			var stat = statements[i];
+			var code = make(stat);
+			if (code != ";") {
+				if (!beautify && i == last) {
+					if ((stat[0] == "while" && empty(stat[2])) ||
+						(member(stat[0], [ "for", "for-in"] ) && empty(stat[4])) ||
+						(stat[0] == "if" && empty(stat[2]) && !stat[3]) ||
+						(stat[0] == "if" && stat[3] && empty(stat[3]))) {
+						code = code.replace(/;*\s*$/, ";");
+					} else {
+						code = code.replace(/;+\s*$/, "");
+					}
+				}
+				a.push(code);
+			}
+		}
+		return noindent ? a : MAP(a, indent);
+	};
+
+	function make_switch_block(body) {
+		var n = body.length;
+		if (n == 0) return "{}";
+		return "{" + newline + MAP(body, function(branch, i){
+			var has_body = branch[1].length > 0, code = with_indent(function(){
+				return indent(branch[0]
+						  ? add_spaces([ "case", make(branch[0]) + ":" ])
+						  : "default:");
+			}, 0.5) + (has_body ? newline + with_indent(function(){
+				return make_block_statements(branch[1]).join(newline);
+			}) : "");
+			if (!beautify && has_body && i < n - 1)
+				code += ";";
+			return code;
+		}).join(newline) + newline + indent("}");
+	};
+
+	function make_block(statements) {
+		if (!statements) return ";";
+		if (statements.length == 0) return "{}";
+		return "{" + newline + with_indent(function(){
+			return make_block_statements(statements).join(newline);
+		}) + newline + indent("}");
+	};
+
+	function make_1vardef(def) {
+		var name = def[0], val = def[1];
+		if (val != null)
+			name = add_spaces([ make_name(name), "=", parenthesize(val, "seq") ]);
+		return name;
+	};
+
+	var $stack = [];
+
+	function make(node) {
+		var type = node[0];
+		var gen = generators[type];
+		if (!gen)
+			throw new Error("Can't find generator for \"" + type + "\"");
+		$stack.push(node);
+		var ret = gen.apply(type, node.slice(1));
+		$stack.pop();
+		return ret;
+	};
+
+	return make(ast);
+};
+
+/* -----[ Utilities ]----- */
+
+function repeat_string(str, i) {
+	return i < 1 ? "" : new Array(i + 1).join(str);
+};
+
+function defaults(args, defs) {
+	var ret = {};
+	if (args === true)
+		args = {};
+	for (var i in defs) if (HOP(defs, i)) {
+		ret[i] = (args && HOP(args, i)) ? args[i] : defs[i];
+	}
+	return ret;
+};
+
+function is_identifier(name) {
+	return /^[a-z_$][a-z0-9_$]*$/i.test(name)
+		&& name != "this"
+		&& !HOP(KEYWORDS_ATOM, name)
+		&& !HOP(RESERVED_WORDS, name)
+		&& !HOP(KEYWORDS, name);
+};
+
+function MAP(a, f, o) {
+	var ret = [];
+	for (var i = 0; i < a.length; ++i) {
+		ret.push(f.call(o, a[i], i));
+	}
+	return ret;
+};
+
+/* -----[ Exports ]----- */
+
+return {
+	parse: parse,
+	gen_code: gen_code,
+	tokenizer: tokenizer,
+	ast_walker: ast_walker
+};
+
+};
diff --git a/lib/parse-js.js b/lib/parse-js.js
new file mode 100644
index 00000000..749b715b
--- /dev/null
+++ b/lib/parse-js.js
@@ -0,0 +1,1916 @@
+/**
+ * A JavaScript tokenizer / parser / generator, originally written in Lisp.
+ * Copyright (c) Marijn Haverbeke <marijnh@gmail.com>
+ * http://marijn.haverbeke.nl/parse-js/
+ *
+ * Ported by to JavaScript by Mihai Bazon
+ * Copyright (c) 2010, Mihai Bazon <mihai.bazon@gmail.com>
+ * http://mihai.bazon.net/blog/
+ *
+ * Modifications and adaptions to browser (c) 2011, Juerg Lehni
+ * http://lehni.org/
+ *
+ * Distributed under the BSD license.
+ */
+
+var parse_js = new function() {
+
+/* -----[ Tokenizer (constants) ]----- */
+
+var KEYWORDS = array_to_hash([
+	"break",
+	"case",
+	"catch",
+	"const",
+	"continue",
+	"default",
+	"delete",
+	"do",
+	"else",
+	"finally",
+	"for",
+	"function",
+	"if",
+	"in",
+	"instanceof",
+	"new",
+	"return",
+	"switch",
+	"throw",
+	"try",
+	"typeof",
+	"var",
+	"void",
+	"while",
+	"with"
+]);
+
+var RESERVED_WORDS = array_to_hash([
+	"abstract",
+	"boolean",
+	"byte",
+	"char",
+	"class",
+	"debugger",
+	"double",
+	"enum",
+	"export",
+	"extends",
+	"final",
+	"float",
+	"goto",
+	"implements",
+	"import",
+	"int",
+	"interface",
+	"long",
+	"native",
+	"package",
+	"private",
+	"protected",
+	"public",
+	"short",
+	"static",
+	"super",
+	"synchronized",
+	"throws",
+	"transient",
+	"volatile"
+]);
+
+var KEYWORDS_BEFORE_EXPRESSION = array_to_hash([
+	"return",
+	"new",
+	"delete",
+	"throw",
+	"else",
+	"case"
+]);
+
+var KEYWORDS_ATOM = array_to_hash([
+	"false",
+	"null",
+	"true",
+	"undefined"
+]);
+
+var OPERATOR_CHARS = array_to_hash(characters("+-*&%=<>!?|~^"));
+
+var RE_HEX_NUMBER = /^0x[0-9a-f]+$/i;
+var RE_OCT_NUMBER = /^0[0-7]+$/;
+var RE_DEC_NUMBER = /^\d*\.?\d*(?:e[+-]?\d*(?:\d\.?|\.?\d)\d*)?$/i;
+
+var OPERATORS = array_to_hash([
+	"in",
+	"instanceof",
+	"typeof",
+	"new",
+	"void",
+	"delete",
+	"++",
+	"--",
+	"+",
+	"-",
+	"!",
+	"~",
+	"&",
+	"|",
+	"^",
+	"*",
+	"/",
+	"%",
+	">>",
+	"<<",
+	">>>",
+	"<",
+	">",
+	"<=",
+	">=",
+	"==",
+	"===",
+	"!=",
+	"!==",
+	"?",
+	"=",
+	"+=",
+	"-=",
+	"/=",
+	"*=",
+	"%=",
+	">>=",
+	"<<=",
+	">>>=",
+	"|=",
+	"^=",
+	"&=",
+	"&&",
+	"||"
+]);
+
+var WHITESPACE_CHARS = array_to_hash(characters(" \n\r\t"));
+
+var PUNC_BEFORE_EXPRESSION = array_to_hash(characters("[{}(,.;:"));
+
+var PUNC_CHARS = array_to_hash(characters("[]{}(),;:"));
+
+var REGEXP_MODIFIERS = array_to_hash(characters("gmsiy"));
+
+/* -----[ Tokenizer ]----- */
+
+function is_letter(ch) {
+	ch = ch.charCodeAt(0);
+	return (ch >= 65 && ch <= 90) ||
+		(ch >= 97 && ch <= 122);
+};
+
+function is_digit(ch) {
+	ch = ch.charCodeAt(0);
+	return ch >= 48 && ch <= 57;
+};
+
+function is_alphanumeric_char(ch) {
+	return is_digit(ch) || is_letter(ch);
+};
+
+function is_identifier_start(ch) {
+	return ch == "$" || ch == "_" || is_letter(ch);
+};
+
+function is_identifier_char(ch) {
+	return is_identifier_start(ch) || is_digit(ch);
+};
+
+function parse_js_number(num) {
+	if (RE_HEX_NUMBER.test(num)) {
+		return parseInt(num.substr(2), 16);
+	} else if (RE_OCT_NUMBER.test(num)) {
+		return parseInt(num.substr(1), 8);
+	} else if (RE_DEC_NUMBER.test(num)) {
+		return parseFloat(num);
+	}
+};
+
+function JS_Parse_Error(message, line, col, pos) {
+	this.message = message;
+	this.line = line;
+	this.col = col;
+	this.pos = pos;
+};
+
+JS_Parse_Error.prototype.toString = function() {
+	return this.message + " (line: " + this.line + ", col: " + this.col + ", pos: " + this.pos + ")";
+};
+
+function js_error(message, line, col, pos) {
+	throw new JS_Parse_Error(message, line, col, pos);
+};
+
+function is_token(token, type, val) {
+	return token.type == type && (val == null || token.value == val);
+};
+
+var EX_EOF = {};
+
+function tokenizer($TEXT) {
+
+	var S = {
+		text            : $TEXT.replace(/\r\n?|[\n\u2028\u2029]/g, "\n").replace(/^\uFEFF/, ''),
+		pos             : 0,
+		tokpos          : 0,
+		line            : 0,
+		tokline         : 0,
+		col             : 0,
+		tokcol          : 0,
+		newline_before  : false,
+		regex_allowed   : false,
+		comments_before : []
+	};
+
+	function peek() { return S.text.charAt(S.pos); };
+
+	function next(signal_eof) {
+		var ch = S.text.charAt(S.pos++);
+		if (signal_eof && !ch)
+			throw EX_EOF;
+		if (ch == "\n") {
+			S.newline_before = true;
+			++S.line;
+			S.col = 0;
+		} else {
+			++S.col;
+		}
+		return ch;
+	};
+
+	function eof() {
+		return !S.peek();
+	};
+
+	function find(what, signal_eof) {
+		var pos = S.text.indexOf(what, S.pos);
+		if (signal_eof && pos == -1) throw EX_EOF;
+		return pos;
+	};
+
+	function start_token() {
+		S.tokline = S.line;
+		S.tokcol = S.col;
+		S.tokpos = S.pos;
+	};
+
+	function token(type, value, is_comment) {
+		S.regex_allowed = ((type == "operator" && !HOP(UNARY_POSTFIX, value)) ||
+				   (type == "keyword" && HOP(KEYWORDS_BEFORE_EXPRESSION, value)) ||
+				   (type == "punc" && HOP(PUNC_BEFORE_EXPRESSION, value)));
+		var ret = {
+			type  : type,
+			value : value,
+			line  : S.tokline,
+			col   : S.tokcol,
+			pos   : S.tokpos,
+			nlb   : S.newline_before
+		};
+		if (!is_comment) {
+			ret.comments_before = S.comments_before;
+			S.comments_before = [];
+		}
+		S.newline_before = false;
+		return ret;
+	};
+
+	function skip_whitespace() {
+		while (HOP(WHITESPACE_CHARS, peek()))
+			next();
+	};
+
+	function read_while(pred) {
+		var ret = "", ch = peek(), i = 0;
+		while (ch && pred(ch, i++)) {
+			ret += next();
+			ch = peek();
+		}
+		return ret;
+	};
+
+	function parse_error(err) {
+		js_error(err, S.tokline, S.tokcol, S.tokpos);
+	};
+
+	function read_num(prefix) {
+		var has_e = false, after_e = false, has_x = false, has_dot = prefix == ".";
+		var num = read_while(function(ch, i){
+			if (ch == "x" || ch == "X") {
+				if (has_x) return false;
+				return has_x = true;
+			}
+			if (!has_x && (ch == "E" || ch == "e")) {
+				if (has_e) return false;
+				return has_e = after_e = true;
+			}
+			if (ch == "-") {
+				if (after_e || (i == 0 && !prefix)) return true;
+				return false;
+			}
+			if (ch == "+") return after_e;
+			after_e = false;
+			if (ch == ".") {
+				if (!has_dot && !has_x)
+					return has_dot = true;
+				return false;
+			}
+			return is_alphanumeric_char(ch);
+		});
+		if (prefix)
+			num = prefix + num;
+		var valid = parse_js_number(num);
+		if (!isNaN(valid)) {
+			return token("num", valid);
+		} else {
+			parse_error("Invalid syntax: " + num);
+		}
+	};
+
+	function read_escaped_char() {
+		var ch = next(true);
+		switch (ch) {
+			case "n" : return "\n";
+			case "r" : return "\r";
+			case "t" : return "\t";
+			case "b" : return "\b";
+			case "v" : return "\v";
+			case "f" : return "\f";
+			case "0" : return "\0";
+			case "x" : return String.fromCharCode(hex_bytes(2));
+			case "u" : return String.fromCharCode(hex_bytes(4));
+			case "\n": return "";
+			default  : return ch;
+		}
+	};
+
+	function hex_bytes(n) {
+		var num = 0;
+		for (; n > 0; --n) {
+			var digit = parseInt(next(true), 16);
+			if (isNaN(digit))
+				parse_error("Invalid hex-character pattern in string");
+			num = (num << 4) | digit;
+		}
+		return num;
+	};
+
+	function read_string() {
+		return with_eof_error("Unterminated string constant", function(){
+			var quote = next(), ret = "";
+			for (;;) {
+				var ch = next(true);
+				if (ch == "\\") ch = read_escaped_char();
+				else if (ch == quote) break;
+				ret += ch;
+			}
+			return token("string", ret);
+		});
+	};
+
+	function read_line_comment() {
+		next();
+		var i = find("\n"), ret;
+		if (i == -1) {
+			ret = S.text.substr(S.pos);
+			S.pos = S.text.length;
+		} else {
+			ret = S.text.substring(S.pos, i);
+			S.pos = i;
+		}
+		return token("comment1", ret, true);
+	};
+
+	function read_multiline_comment() {
+		next();
+		return with_eof_error("Unterminated multiline comment", function(){
+			var i = find("*/", true),
+				text = S.text.substring(S.pos, i),
+				tok = token("comment2", text, true);
+			S.pos = i + 2;
+			S.line += text.split("\n").length - 1;
+			S.newline_before = text.indexOf("\n") >= 0;
+			return tok;
+		});
+	};
+
+	function read_regexp() {
+		return with_eof_error("Unterminated regular expression", function(){
+			var prev_backslash = false, regexp = "", ch, in_class = false;
+			while ((ch = next(true))) if (prev_backslash) {
+				regexp += "\\" + ch;
+				prev_backslash = false;
+			} else if (ch == "[") {
+				in_class = true;
+				regexp += ch;
+			} else if (ch == "]" && in_class) {
+				in_class = false;
+				regexp += ch;
+			} else if (ch == "/" && !in_class) {
+				break;
+			} else if (ch == "\\") {
+				prev_backslash = true;
+			} else {
+				regexp += ch;
+			}
+			var mods = read_while(function(ch){
+				return HOP(REGEXP_MODIFIERS, ch);
+			});
+			return token("regexp", [ regexp, mods ]);
+		});
+	};
+
+	function read_operator(prefix) {
+		function grow(op) {
+			if (!peek()) return op;
+			var bigger = op + peek();
+			if (HOP(OPERATORS, bigger)) {
+				next();
+				return grow(bigger);
+			} else {
+				return op;
+			}
+		};
+		return token("operator", grow(prefix || next()));
+	};
+
+	function handle_slash() {
+		next();
+		var regex_allowed = S.regex_allowed;
+		switch (peek()) {
+			case "/":
+			S.comments_before.push(read_line_comment());
+			S.regex_allowed = regex_allowed;
+			return next_token();
+			case "*":
+			S.comments_before.push(read_multiline_comment());
+			S.regex_allowed = regex_allowed;
+			return next_token();
+		}
+		return S.regex_allowed ? read_regexp() : read_operator("/");
+	};
+
+	function handle_dot() {
+		next();
+		return is_digit(peek())
+			? read_num(".")
+			: token("punc", ".");
+	};
+
+	function read_word() {
+		var word = read_while(is_identifier_char);
+		return !HOP(KEYWORDS, word)
+			? token("name", word)
+			: HOP(OPERATORS, word)
+			? token("operator", word)
+			: HOP(KEYWORDS_ATOM, word)
+			? token("atom", word)
+			: token("keyword", word);
+	};
+
+	function with_eof_error(eof_error, cont) {
+		try {
+			return cont();
+		} catch(ex) {
+			if (ex === EX_EOF) parse_error(eof_error);
+			else throw ex;
+		}
+	};
+
+	function next_token(force_regexp) {
+		if (force_regexp)
+			return read_regexp();
+		skip_whitespace();
+		start_token();
+		var ch = peek();
+		if (!ch) return token("eof");
+		if (is_digit(ch)) return read_num();
+		if (ch == '"' || ch == "'") return read_string();
+		if (HOP(PUNC_CHARS, ch)) return token("punc", next());
+		if (ch == ".") return handle_dot();
+		if (ch == "/") return handle_slash();
+		if (HOP(OPERATOR_CHARS, ch)) return read_operator();
+		if (ch == "\\" || is_identifier_start(ch)) return read_word();
+		parse_error("Unexpected character '" + ch + "'");
+	};
+
+	next_token.context = function(nc) {
+		if (nc) S = nc;
+		return S;
+	};
+
+	return next_token;
+
+};
+
+/* -----[ Parser (constants) ]----- */
+
+var UNARY_PREFIX = array_to_hash([
+	"typeof",
+	"void",
+	"delete",
+	"--",
+	"++",
+	"!",
+	"~",
+	"-",
+	"+"
+]);
+
+var UNARY_POSTFIX = array_to_hash([ "--", "++" ]);
+
+var ASSIGNMENT = (function(a, ret, i){
+	while (i < a.length) {
+		ret[a[i]] = a[i].substr(0, a[i].length - 1);
+		i++;
+	}
+	return ret;
+})(
+	["+=", "-=", "/=", "*=", "%=", ">>=", "<<=", ">>>=", "|=", "^=", "&="],
+	{ "=": true },
+	0
+);
+
+var PRECEDENCE = (function(a, ret){
+	for (var i = 0, n = 1; i < a.length; ++i, ++n) {
+		var b = a[i];
+		for (var j = 0; j < b.length; ++j) {
+			ret[b[j]] = n;
+		}
+	}
+	return ret;
+})(
+	[
+		["||"],
+		["&&"],
+		["|"],
+		["^"],
+		["&"],
+		["==", "===", "!=", "!=="],
+		["<", ">", "<=", ">=", "in", "instanceof"],
+		[">>", "<<", ">>>"],
+		["+", "-"],
+		["*", "/", "%"]
+	],
+	{}
+);
+
+var STATEMENTS_WITH_LABELS = array_to_hash([ "for", "do", "while", "switch" ]);
+
+var ATOMIC_START_TOKEN = array_to_hash([ "atom", "num", "string", "regexp", "name" ]);
+
+/* -----[ Parser ]----- */
+
+function NodeWithToken(str, start, end) {
+	this.name = str;
+	this.start = start;
+	this.end = end;
+};
+
+NodeWithToken.prototype.toString = function() { return this.name; };
+
+function parse($TEXT, exigent_mode, embed_tokens) {
+
+	var S = {
+		input       : typeof $TEXT == "string" ? tokenizer($TEXT, true) : $TEXT,
+		token       : null,
+		prev        : null,
+		peeked      : null,
+		in_function : 0,
+		in_loop     : 0,
+		labels      : []
+	};
+
+	S.token = next();
+
+	function is(type, value) {
+		return is_token(S.token, type, value);
+	};
+
+	function peek() { return S.peeked || (S.peeked = S.input()); };
+
+	function next() {
+		S.prev = S.token;
+		if (S.peeked) {
+			S.token = S.peeked;
+			S.peeked = null;
+		} else {
+			S.token = S.input();
+		}
+		return S.token;
+	};
+
+	function prev() {
+		return S.prev;
+	};
+
+	function croak(msg, line, col, pos) {
+		var ctx = S.input.context();
+		js_error(msg,
+			 line != null ? line : ctx.tokline,
+			 col != null ? col : ctx.tokcol,
+			 pos != null ? pos : ctx.tokpos);
+	};
+
+	function token_error(token, msg) {
+		croak(msg, token.line, token.col);
+	};
+
+	function unexpected(token) {
+		if (token == null)
+			token = S.token;
+		token_error(token, "Unexpected token: " + token.type + " (" + token.value + ")");
+	};
+
+	function expect_token(type, val) {
+		if (is(type, val)) {
+			return next();
+		}
+		token_error(S.token, "Unexpected token " + S.token.type + ", expected " + type);
+	};
+
+	function expect(punc) { return expect_token("punc", punc); };
+
+	function can_insert_semicolon() {
+		return !exigent_mode && (
+			S.token.nlb || is("eof") || is("punc", "}")
+		);
+	};
+
+	function semicolon() {
+		if (is("punc", ";")) next();
+		else if (!can_insert_semicolon()) unexpected();
+	};
+
+	function as() {
+		return slice(arguments);
+	};
+
+	function parenthesised() {
+		expect("(");
+		var ex = expression();
+		expect(")");
+		return ex;
+	};
+
+	function add_tokens(str, start, end) {
+		return str instanceof NodeWithToken ? str : new NodeWithToken(str, start, end);
+	};
+
+	function maybe_embed_tokens(parser) {
+		if (embed_tokens) return function() {
+			var start = S.token;
+			var ast = parser.apply(this, arguments);
+			ast[0] = add_tokens(ast[0], start, prev());
+			return ast;
+		};
+		else return parser;
+	};
+
+	var statement = maybe_embed_tokens(function() {
+		if (is("operator", "/")) {
+			S.peeked = null;
+			S.token = S.input(true); // force regexp
+		}
+		switch (S.token.type) {
+			case "num":
+			case "string":
+			case "regexp":
+			case "operator":
+			case "atom":
+			return simple_statement();
+
+			case "name":
+			return is_token(peek(), "punc", ":")
+				? labeled_statement(prog1(S.token.value, next, next))
+				: simple_statement();
+
+			case "punc":
+			switch (S.token.value) {
+				case "{":
+				return as("block", block_());
+				case "[":
+				case "(":
+				return simple_statement();
+				case ";":
+				next();
+				return as("block");
+				default:
+				unexpected();
+			}
+
+			case "keyword":
+			switch (prog1(S.token.value, next)) {
+				case "break":
+				return break_cont("break");
+
+				case "continue":
+				return break_cont("continue");
+
+				case "debugger":
+				semicolon();
+				return as("debugger");
+
+				case "do":
+				return (function(body){
+					expect_token("keyword", "while");
+					return as("do", prog1(parenthesised, semicolon), body);
+				})(in_loop(statement));
+
+				case "for":
+				return for_();
+
+				case "function":
+				return function_(true);
+
+				case "if":
+				return if_();
+
+				case "return":
+				if (S.in_function == 0)
+					croak("'return' outside of function");
+				return as("return",
+					  is("punc", ";")
+					  ? (next(), null)
+					  : can_insert_semicolon()
+					  ? null
+					  : prog1(expression, semicolon));
+
+				case "switch":
+				return as("switch", parenthesised(), switch_block_());
+
+				case "throw":
+				return as("throw", prog1(expression, semicolon));
+
+				case "try":
+				return try_();
+
+				case "var":
+				return prog1(var_, semicolon);
+
+				case "const":
+				return prog1(const_, semicolon);
+
+				case "while":
+				return as("while", parenthesised(), in_loop(statement));
+
+				case "with":
+				return as("with", parenthesised(), statement());
+
+				default:
+				unexpected();
+			}
+		}
+	});
+
+	function labeled_statement(label) {
+		S.labels.push(label);
+		var start = S.token, stat = statement();
+		if (exigent_mode && !HOP(STATEMENTS_WITH_LABELS, stat[0]))
+			unexpected(start);
+		S.labels.pop();
+		return as("label", label, stat);
+	};
+
+	function simple_statement() {
+		return as("stat", prog1(expression, semicolon));
+	};
+
+	function break_cont(type) {
+		var name;
+		if (!can_insert_semicolon()) {
+			name = is("name") ? S.token.value : null;
+		}
+		if (name != null) {
+			next();
+			if (!member(name, S.labels))
+				croak("Label " + name + " without matching loop or statement");
+		}
+		else if (S.in_loop == 0)
+			croak(type + " not inside a loop or switch");
+		semicolon();
+		return as(type, name);
+	};
+
+	function for_() {
+		expect("(");
+		var init = null;
+		if (!is("punc", ";")) {
+			init = is("keyword", "var")
+				? (next(), var_(true))
+				: expression(true, true);
+			if (is("operator", "in"))
+				return for_in(init);
+		}
+		return regular_for(init);
+	};
+
+	function regular_for(init) {
+		expect(";");
+		var test = is("punc", ";") ? null : expression();
+		expect(";");
+		var step = is("punc", ")") ? null : expression();
+		expect(")");
+		return as("for", init, test, step, in_loop(statement));
+	};
+
+	function for_in(init) {
+		var lhs = init[0] == "var" ? as("name", init[1][0]) : init;
+		next();
+		var obj = expression();
+		expect(")");
+		return as("for-in", init, lhs, obj, in_loop(statement));
+	};
+
+	var function_ = maybe_embed_tokens(function(in_statement) {
+		var name = is("name") ? prog1(S.token.value, next) : null;
+		if (in_statement && !name)
+			unexpected();
+		expect("(");
+		return as(in_statement ? "defun" : "function",
+			  name,
+			  // arguments
+			  (function(first, a){
+				  while (!is("punc", ")")) {
+					  if (first) first = false; else expect(",");
+					  if (!is("name")) unexpected();
+					  a.push(S.token.value);
+					  next();
+				  }
+				  next();
+				  return a;
+			  })(true, []),
+			  // body
+			  (function(){
+				  ++S.in_function;
+				  var loop = S.in_loop;
+				  S.in_loop = 0;
+				  var a = block_();
+				  --S.in_function;
+				  S.in_loop = loop;
+				  return a;
+			  })());
+	});
+
+	function if_() {
+		var cond = parenthesised(), body = statement(), belse;
+		if (is("keyword", "else")) {
+			next();
+			belse = statement();
+		}
+		return as("if", cond, body, belse);
+	};
+
+	function block_() {
+		expect("{");
+		var a = [];
+		while (!is("punc", "}")) {
+			if (is("eof")) unexpected();
+			a.push(statement());
+		}
+		next();
+		return a;
+	};
+
+	var switch_block_ = curry(in_loop, function(){
+		expect("{");
+		var a = [], cur = null;
+		while (!is("punc", "}")) {
+			if (is("eof")) unexpected();
+			if (is("keyword", "case")) {
+				next();
+				cur = [];
+				a.push([ expression(), cur ]);
+				expect(":");
+			}
+			else if (is("keyword", "default")) {
+				next();
+				expect(":");
+				cur = [];
+				a.push([ null, cur ]);
+			}
+			else {
+				if (!cur) unexpected();
+				cur.push(statement());
+			}
+		}
+		next();
+		return a;
+	});
+
+	function try_() {
+		var body = block_(), bcatch, bfinally;
+		if (is("keyword", "catch")) {
+			next();
+			expect("(");
+			if (!is("name"))
+				croak("Name expected");
+			var name = S.token.value;
+			next();
+			expect(")");
+			bcatch = [ name, block_() ];
+		}
+		if (is("keyword", "finally")) {
+			next();
+			bfinally = block_();
+		}
+		if (!bcatch && !bfinally)
+			croak("Missing catch/finally blocks");
+		return as("try", body, bcatch, bfinally);
+	};
+
+	function vardefs(no_in) {
+		var a = [];
+		for (;;) {
+			if (!is("name"))
+				unexpected();
+			var name = S.token.value;
+			next();
+			if (is("operator", "=")) {
+				next();
+				a.push([ name, expression(false, no_in) ]);
+			} else {
+				a.push([ name ]);
+			}
+			if (!is("punc", ","))
+				break;
+			next();
+		}
+		return a;
+	};
+
+	function var_(no_in) {
+		return as("var", vardefs(no_in));
+	};
+
+	function const_() {
+		return as("const", vardefs());
+	};
+
+	function new_() {
+		var newexp = expr_atom(false), args;
+		if (is("punc", "(")) {
+			next();
+			args = expr_list(")");
+		} else {
+			args = [];
+		}
+		return subscripts(as("new", newexp, args), true);
+	};
+
+	var expr_atom = maybe_embed_tokens(function(allow_calls) {
+		if (is("operator", "new")) {
+			next();
+			return new_();
+		}
+		if (is("operator") && HOP(UNARY_PREFIX, S.token.value)) {
+			return make_unary("unary-prefix",
+					  prog1(S.token.value, next),
+					  expr_atom(allow_calls));
+		}
+		if (is("punc")) {
+			switch (S.token.value) {
+				case "(":
+				next();
+				return subscripts(prog1(expression, curry(expect, ")")), allow_calls);
+				case "[":
+				next();
+				return subscripts(array_(), allow_calls);
+				case "{":
+				next();
+				return subscripts(object_(), allow_calls);
+			}
+			unexpected();
+		}
+		if (is("keyword", "function")) {
+			next();
+			return subscripts(function_(false), allow_calls);
+		}
+		if (HOP(ATOMIC_START_TOKEN, S.token.type)) {
+			var atom = S.token.type == "regexp"
+				? as("regexp", S.token.value[0], S.token.value[1])
+				: as(S.token.type, S.token.value);
+			return subscripts(prog1(atom, next), allow_calls);
+		}
+		unexpected();
+	});
+
+	function expr_list(closing, allow_trailing_comma, allow_empty) {
+		var first = true, a = [];
+		while (!is("punc", closing)) {
+			if (first) first = false; else expect(",");
+			if (allow_trailing_comma && is("punc", closing)) break;
+			if (is("punc", ",") && allow_empty) {
+				a.push([ "atom", "undefined" ]);
+			} else {
+				a.push(expression(false));
+			}
+		}
+		next();
+		return a;
+	};
+
+	function array_() {
+		return as("array", expr_list("]", !exigent_mode, true));
+	};
+
+	function object_() {
+		var first = true, a = [];
+		while (!is("punc", "}")) {
+			if (first) first = false; else expect(",");
+			if (!exigent_mode && is("punc", "}"))
+				// allow trailing comma
+				break;
+			var type = S.token.type;
+			var name = as_property_name();
+			if (type == "name" && (name == "get" || name == "set") && !is("punc", ":")) {
+				a.push([ as_name(), function_(false), name ]);
+			} else {
+				expect(":");
+				a.push([ name, expression(false) ]);
+			}
+		}
+		next();
+		return as("object", a);
+	};
+
+	function as_property_name() {
+		switch (S.token.type) {
+			case "num":
+			case "string":
+			return prog1(S.token.value, next);
+		}
+		return as_name();
+	};
+
+	function as_name() {
+		switch (S.token.type) {
+			case "name":
+			case "operator":
+			case "keyword":
+			case "atom":
+			return prog1(S.token.value, next);
+			default:
+			unexpected();
+		}
+	};
+
+	function subscripts(expr, allow_calls) {
+		if (is("punc", ".")) {
+			next();
+			return subscripts(as("dot", expr, as_name()), allow_calls);
+		}
+		if (is("punc", "[")) {
+			next();
+			return subscripts(as("sub", expr, prog1(expression, curry(expect, "]"))), allow_calls);
+		}
+		if (allow_calls && is("punc", "(")) {
+			next();
+			return subscripts(as("call", expr, expr_list(")")), true);
+		}
+		if (allow_calls && is("operator") && HOP(UNARY_POSTFIX, S.token.value)) {
+			return prog1(curry(make_unary, "unary-postfix", S.token.value, expr),
+					next);
+		}
+		return expr;
+	};
+
+	function make_unary(tag, op, expr) {
+		if ((op == "++" || op == "--") && !is_assignable(expr))
+			croak("Invalid use of " + op + " operator");
+		return as(tag, op, expr);
+	};
+
+	function expr_op(left, min_prec, no_in) {
+		var op = is("operator") ? S.token.value : null;
+		if (op && op == "in" && no_in) op = null;
+		var prec = op != null ? PRECEDENCE[op] : null;
+		if (prec != null && prec > min_prec) {
+			next();
+			var right = expr_op(expr_atom(true), prec, no_in);
+			return expr_op(as("binary", op, left, right), min_prec, no_in);
+		}
+		return left;
+	};
+
+	function expr_ops(no_in) {
+		return expr_op(expr_atom(true), 0, no_in);
+	};
+
+	function maybe_conditional(no_in) {
+		var expr = expr_ops(no_in);
+		if (is("operator", "?")) {
+			next();
+			var yes = expression(false);
+			expect(":");
+			return as("conditional", expr, yes, expression(false, no_in));
+		}
+		return expr;
+	};
+
+	function is_assignable(expr) {
+		if (!exigent_mode) return true;
+		switch (expr[0]) {
+			case "dot":
+			case "sub":
+			case "new":
+			case "call":
+			return true;
+			case "name":
+			return expr[1] != "this";
+		}
+	};
+
+	function maybe_assign(no_in) {
+		var left = maybe_conditional(no_in), val = S.token.value;
+		if (is("operator") && HOP(ASSIGNMENT, val)) {
+			if (is_assignable(left)) {
+				next();
+				return as("assign", ASSIGNMENT[val], left, maybe_assign(no_in));
+			}
+			croak("Invalid assignment");
+		}
+		return left;
+	};
+
+	var expression = maybe_embed_tokens(function(commas, no_in) {
+		if (arguments.length == 0)
+			commas = true;
+		var expr = maybe_assign(no_in);
+		if (commas && is("punc", ",")) {
+			next();
+			return as("seq", expr, expression(true, no_in));
+		}
+		return expr;
+	});
+
+	function in_loop(cont) {
+		try {
+			++S.in_loop;
+			return cont();
+		} finally {
+			--S.in_loop;
+		}
+	};
+
+	return as("toplevel", (function(a){
+		while (!is("eof"))
+			a.push(statement());
+		return a;
+	})([]));
+
+};
+
+/* -----[ Utilities ]----- */
+
+function curry(f) {
+	var args = slice(arguments, 1);
+	return function() { return f.apply(this, args.concat(slice(arguments))); };
+};
+
+function prog1(ret) {
+	if (ret instanceof Function)
+		ret = ret();
+	for (var i = 1, n = arguments.length; --n > 0; ++i)
+		arguments[i]();
+	return ret;
+};
+
+function array_to_hash(a) {
+	var ret = {};
+	for (var i = 0; i < a.length; ++i)
+		ret[a[i]] = true;
+	return ret;
+};
+
+function slice(a, start) {
+	return Array.prototype.slice.call(a, start || 0);
+};
+
+function characters(str) {
+	return str.split("");
+};
+
+function member(name, array) {
+	for (var i = array.length; --i >= 0;)
+		if (array[i] === name)
+			return true;
+	return false;
+};
+
+function HOP(obj, prop) {
+	return Object.prototype.hasOwnProperty.call(obj, prop);
+};
+
+/* -----[ helper for AST traversal ]----- */
+
+function ast_walker() {
+	function _vardefs(defs) {
+		return [ this[0], MAP(defs, function(def){
+			var a = [ def[0] ];
+			if (def.length > 1)
+				a[1] = walk(def[1]);
+			return a;
+		}) ];
+	};
+	function _block(statements) {
+		var out = [ this[0] ];
+		if (statements != null)
+			out.push(MAP(statements, walk));
+		return out;
+	};
+	var walkers = {
+		"string": function(str) {
+			return [ this[0], str ];
+		},
+		"num": function(num) {
+			return [ this[0], num ];
+		},
+		"name": function(name) {
+			return [ this[0], name ];
+		},
+		"toplevel": function(statements) {
+			return [ this[0], MAP(statements, walk) ];
+		},
+		"block": _block,
+		"splice": _block,
+		"var": _vardefs,
+		"const": _vardefs,
+		"try": function(t, c, f) {
+			return [
+				this[0],
+				MAP(t, walk),
+				c != null ? [ c[0], MAP(c[1], walk) ] : null,
+				f != null ? MAP(f, walk) : null
+			];
+		},
+		"throw": function(expr) {
+			return [ this[0], walk(expr) ];
+		},
+		"new": function(ctor, args) {
+			return [ this[0], walk(ctor), MAP(args, walk) ];
+		},
+		"switch": function(expr, body) {
+			return [ this[0], walk(expr), MAP(body, function(branch){
+				return [ branch[0] ? walk(branch[0]) : null,
+					 MAP(branch[1], walk) ];
+			}) ];
+		},
+		"break": function(label) {
+			return [ this[0], label ];
+		},
+		"continue": function(label) {
+			return [ this[0], label ];
+		},
+		"conditional": function(cond, t, e) {
+			return [ this[0], walk(cond), walk(t), walk(e) ];
+		},
+		"assign": function(op, lvalue, rvalue) {
+			return [ this[0], op, walk(lvalue), walk(rvalue) ];
+		},
+		"dot": function(expr) {
+			return [ this[0], walk(expr) ].concat(slice(arguments, 1));
+		},
+		"call": function(expr, args) {
+			return [ this[0], walk(expr), MAP(args, walk) ];
+		},
+		"function": function(name, args, body) {
+			return [ this[0], name, args.slice(), MAP(body, walk) ];
+		},
+		"defun": function(name, args, body) {
+			return [ this[0], name, args.slice(), MAP(body, walk) ];
+		},
+		"if": function(conditional, t, e) {
+			return [ this[0], walk(conditional), walk(t), walk(e) ];
+		},
+		"for": function(init, cond, step, block) {
+			return [ this[0], walk(init), walk(cond), walk(step), walk(block) ];
+		},
+		"for-in": function(vvar, key, hash, block) {
+			return [ this[0], walk(vvar), walk(key), walk(hash), walk(block) ];
+		},
+		"while": function(cond, block) {
+			return [ this[0], walk(cond), walk(block) ];
+		},
+		"do": function(cond, block) {
+			return [ this[0], walk(cond), walk(block) ];
+		},
+		"return": function(expr) {
+			return [ this[0], walk(expr) ];
+		},
+		"binary": function(op, left, right) {
+			return [ this[0], op, walk(left), walk(right) ];
+		},
+		"unary-prefix": function(op, expr) {
+			return [ this[0], op, walk(expr) ];
+		},
+		"unary-postfix": function(op, expr) {
+			return [ this[0], op, walk(expr) ];
+		},
+		"sub": function(expr, subscript) {
+			return [ this[0], walk(expr), walk(subscript) ];
+		},
+		"object": function(props) {
+			return [ this[0], MAP(props, function(p){
+				return p.length == 2
+					? [ p[0], walk(p[1]) ]
+					: [ p[0], walk(p[1]), p[2] ]; // get/set-ter
+			}) ];
+		},
+		"regexp": function(rx, mods) {
+			return [ this[0], rx, mods ];
+		},
+		"array": function(elements) {
+			return [ this[0], MAP(elements, walk) ];
+		},
+		"stat": function(stat) {
+			return [ this[0], walk(stat) ];
+		},
+		"seq": function() {
+			return [ this[0] ].concat(MAP(slice(arguments), walk));
+		},
+		"label": function(name, block) {
+			return [ this[0], name, walk(block) ];
+		},
+		"with": function(expr, block) {
+			return [ this[0], walk(expr), walk(block) ];
+		},
+		"atom": function(name) {
+			return [ this[0], name ];
+		}
+	};
+
+	var user = {};
+	var stack = [];
+	function walk(ast) {
+		if (ast == null)
+			return null;
+		try {
+			stack.push(ast);
+			var type = ast[0];
+			var gen = user[type];
+			if (gen) {
+				var ret = gen.apply(ast, ast.slice(1));
+				if (ret != null)
+					return ret;
+			}
+			gen = walkers[type];
+			return gen.apply(ast, ast.slice(1));
+		} finally {
+			stack.pop();
+		}
+	};
+
+	function with_walkers(walkers, cont){
+		var save = {}, i;
+		for (i in walkers) if (HOP(walkers, i)) {
+			save[i] = user[i];
+			user[i] = walkers[i];
+		}
+		var ret = cont();
+		for (i in save) if (HOP(save, i)) {
+			if (!save[i]) delete user[i];
+			else user[i] = save[i];
+		}
+		return ret;
+	};
+
+	return {
+		walk: walk,
+		with_walkers: with_walkers,
+		parent: function() {
+			return stack[stack.length - 2]; // last one is current node
+		},
+		stack: function() {
+			return stack;
+		}
+	};
+};
+
+function empty(b) {
+	return !b || (b[0] == "block" && (!b[1] || b[1].length == 0));
+};
+
+/* -----[ re-generate code from the AST ]----- */
+
+var DOT_CALL_NO_PARENS = array_to_hash([
+	"name",
+	"array",
+	"object",
+	"string",
+	"dot",
+	"sub",
+	"call",
+	"regexp"
+]);
+
+function make_string(str) {
+	var dq = 0, sq = 0;
+	str = str.replace(/[\\\b\f\n\r\t\x22\x27]/g, function(s){
+		switch (s) {
+			case "\\": return "\\\\";
+			case "\b": return "\\b";
+			case "\f": return "\\f";
+			case "\n": return "\\n";
+			case "\r": return "\\r";
+			case "\t": return "\\t";
+			case '"': ++dq; return '"';
+			case "'": ++sq; return "'";
+		}
+		return s;
+	});
+	if (dq > sq) return "'" + str.replace(/\x27/g, "\\'") + "'";
+	else return '"' + str.replace(/\x22/g, '\\"') + '"';
+};
+
+var SPLICE_NEEDS_BRACKETS = array_to_hash([ "if", "while", "do", "for", "for-in", "with" ]);
+
+function gen_code(ast, options) {
+	options = defaults(options, {
+		indent_start : 0,
+		indent_level : 4,
+		quote_keys   : false,
+		space_colon  : false,
+		beautify	 : false
+	});
+	var beautify = !!options.beautify;
+	var indentation = 0,
+		newline = beautify ? "\n" : "",
+		space = beautify ? " " : "";
+
+	function make_name(name) {
+		return name.toString();
+	};
+
+	function indent(line) {
+		if (line == null)
+			line = "";
+		if (beautify)
+			line = repeat_string(" ", options.indent_start + indentation * options.indent_level) + line;
+		return line;
+	};
+
+	function with_indent(cont, incr) {
+		if (incr == null) incr = 1;
+		indentation += incr;
+		try { return cont.apply(null, slice(arguments, 1)); }
+		finally { indentation -= incr; }
+	};
+
+	function add_spaces(a) {
+		if (beautify)
+			return a.join(" ");
+		var b = [];
+		for (var i = 0; i < a.length; ++i) {
+			var next = a[i + 1];
+			b.push(a[i]);
+			if (next &&
+				((/[a-z0-9_\x24]$/i.test(a[i].toString()) && /^[a-z0-9_\x24]/i.test(next.toString())) ||
+				 (/[\+\-]$/.test(a[i].toString()) && /^[\+\-]/.test(next.toString())))) {
+				b.push(" ");
+			}
+		}
+		return b.join("");
+	};
+
+	function add_commas(a) {
+		return a.join("," + space);
+	};
+
+	function parenthesize(expr) {
+		var gen = make(expr);
+		for (var i = 1; i < arguments.length; ++i) {
+			var el = arguments[i];
+			if ((el instanceof Function && el(expr)) || expr[0] == el)
+				return "(" + gen + ")";
+		}
+		return gen;
+	};
+
+	function best_of(a) {
+		if (a.length == 1) {
+			return a[0];
+		}
+		if (a.length == 2) {
+			var b = a[1];
+			a = a[0];
+			return a.length <= b.length ? a : b;
+		}
+		return best_of([ a[0], best_of(a.slice(1)) ]);
+	};
+
+	function needs_parens(expr) {
+		if (expr[0] == "function" || expr[0] == "object") {
+			// dot/call on a literal function requires the
+			// function literal itself to be parenthesized
+			// only if it's the first "thing" in a
+			// statement.  This means that the parent is
+			// "stat", but it could also be a "seq" and
+			// we're the first in this "seq" and the
+			// parent is "stat", and so on.  Messy stuff,
+			// but it worths the trouble.
+			var a = slice($stack), self = a.pop(), p = a.pop();
+			while (p) {
+				if (p[0] == "stat") return true;
+				if (((p[0] == "seq" || p[0] == "call" || p[0] == "dot" || p[0] == "sub" || p[0] == "conditional") && p[1] === self) ||
+					((p[0] == "binary" || p[0] == "assign" || p[0] == "unary-postfix") && p[2] === self)) {
+					self = p;
+					p = a.pop();
+				} else {
+					return false;
+				}
+			}
+		}
+		return !HOP(DOT_CALL_NO_PARENS, expr[0]);
+	};
+
+	function make_num(num) {
+		var str = num.toString(10), a = [ str.replace(/^0\./, ".") ], m;
+		if (Math.floor(num) === num) {
+			a.push("0x" + num.toString(16).toLowerCase(), // probably pointless
+				   "0" + num.toString(8)); // same.
+			if ((m = /^(.*?)(0+)$/.exec(num))) {
+				a.push(m[1] + "e" + m[2].length);
+			}
+		} else if ((m = /^0?\.(0+)(.*)$/.exec(num))) {
+			a.push(m[2] + "e-" + (m[1].length + m[2].length),
+				   str.substr(str.indexOf(".")));
+		}
+		return best_of(a);
+	};
+
+	var generators = {
+		"string": make_string,
+		"num": make_num,
+		"name": make_name,
+		"toplevel": function(statements) {
+			return make_block_statements(statements)
+				.join(newline);
+		},
+		"splice": function(statements) {
+			var parent = $stack[$stack.length - 2][0];
+			if (HOP(SPLICE_NEEDS_BRACKETS, parent)) {
+				// we need block brackets in this case
+				return make_block.apply(this, arguments);
+			} else {
+				return MAP(make_block_statements(statements, true),
+					   function(line, i) {
+						   // the first line is already indented
+						   return i > 0 ? indent(line) : line;
+					   }).join(newline);
+			}
+		},
+		"block": make_block,
+		"var": function(defs) {
+			return "var " + add_commas(MAP(defs, make_1vardef)) + ";";
+		},
+		"const": function(defs) {
+			return "const " + add_commas(MAP(defs, make_1vardef)) + ";";
+		},
+		"try": function(tr, ca, fi) {
+			var out = [ "try", make_block(tr) ];
+			if (ca) out.push("catch", "(" + ca[0] + ")", make_block(ca[1]));
+			if (fi) out.push("finally", make_block(fi));
+			return add_spaces(out);
+		},
+		"throw": function(expr) {
+			return add_spaces([ "throw", make(expr) ]) + ";";
+		},
+		"new": function(ctor, args) {
+			args = args.length > 0 ? "(" + add_commas(MAP(args, make)) + ")" : "";
+			return add_spaces([ "new", parenthesize(ctor, "seq", "binary", "conditional", "assign", function(expr){
+				var w = ast_walker(), has_call = {};
+				try {
+					w.with_walkers({
+						"call": function() { throw has_call },
+						"function": function() { return this }
+					}, function(){
+						w.walk(expr);
+					});
+				} catch(ex) {
+					if (ex === has_call)
+						return true;
+					throw ex;
+				}
+			}) + args ]);
+		},
+		"switch": function(expr, body) {
+			return add_spaces([ "switch", "(" + make(expr) + ")", make_switch_block(body) ]);
+		},
+		"break": function(label) {
+			var out = "break";
+			if (label != null)
+				out += " " + make_name(label);
+			return out + ";";
+		},
+		"continue": function(label) {
+			var out = "continue";
+			if (label != null)
+				out += " " + make_name(label);
+			return out + ";";
+		},
+		"conditional": function(co, th, el) {
+			return add_spaces([ parenthesize(co, "assign", "seq", "conditional"), "?",
+						parenthesize(th, "seq"), ":",
+						parenthesize(el, "seq") ]);
+		},
+		"assign": function(op, lvalue, rvalue) {
+			if (op && op !== true) op += "=";
+			else op = "=";
+			return add_spaces([ make(lvalue), op, parenthesize(rvalue, "seq") ]);
+		},
+		"dot": function(expr) {
+			var out = make(expr), i = 1;
+			if (expr[0] == "num") {
+				if (!/\./.test(expr[1]))
+					out += ".";
+			} else if (needs_parens(expr))
+				out = "(" + out + ")";
+			while (i < arguments.length)
+				out += "." + make_name(arguments[i++]);
+			return out;
+		},
+		"call": function(func, args) {
+			var f = make(func);
+			if (needs_parens(func))
+				f = "(" + f + ")";
+			return f + "(" + add_commas(MAP(args, function(expr){
+				return parenthesize(expr, "seq");
+			})) + ")";
+		},
+		"function": make_function,
+		"defun": make_function,
+		"if": function(co, th, el) {
+			var out = [ "if", "(" + make(co) + ")", el ? make_then(th) : make(th) ];
+			if (el) {
+				out.push("else", make(el));
+			}
+			return add_spaces(out);
+		},
+		"for": function(init, cond, step, block) {
+			var out = [ "for" ];
+			init = (init != null ? make(init) : "").replace(/;*\s*$/, ";" + space);
+			cond = (cond != null ? make(cond) : "").replace(/;*\s*$/, ";" + space);
+			step = (step != null ? make(step) : "").replace(/;*\s*$/, "");
+			var args = init + cond + step;
+			if (args == "; ; ") args = ";;";
+			out.push("(" + args + ")", make(block));
+			return add_spaces(out);
+		},
+		"for-in": function(vvar, key, hash, block) {
+			return add_spaces([ "for", "(" +
+						(vvar ? make(vvar).replace(/;+$/, "") : make(key)),
+						"in",
+						make(hash) + ")", make(block) ]);
+		},
+		"while": function(condition, block) {
+			return add_spaces([ "while", "(" + make(condition) + ")", make(block) ]);
+		},
+		"do": function(condition, block) {
+			return add_spaces([ "do", make(block), "while", "(" + make(condition) + ")" ]) + ";";
+		},
+		"return": function(expr) {
+			var out = [ "return" ];
+			if (expr != null) out.push(make(expr));
+			return add_spaces(out) + ";";
+		},
+		"binary": function(operator, lvalue, rvalue) {
+			var left = make(lvalue), right = make(rvalue);
+			// XXX: I'm pretty sure other cases will bite here.
+			//	  we need to be smarter.
+			//	  adding parens all the time is the safest bet.
+			if (member(lvalue[0], [ "assign", "conditional", "seq" ]) ||
+				lvalue[0] == "binary" && PRECEDENCE[operator] > PRECEDENCE[lvalue[1]]) {
+				left = "(" + left + ")";
+			}
+			if (member(rvalue[0], [ "assign", "conditional", "seq" ]) ||
+				rvalue[0] == "binary" && PRECEDENCE[operator] >= PRECEDENCE[rvalue[1]] &&
+				!(rvalue[1] == operator && member(operator, [ "&&", "||", "*" ]))) {
+				right = "(" + right + ")";
+			}
+			return add_spaces([ left, operator, right ]);
+		},
+		"unary-prefix": function(operator, expr) {
+			var val = make(expr);
+			if (!(expr[0] == "num" || (expr[0] == "unary-prefix" && !HOP(OPERATORS, operator + expr[1])) || !needs_parens(expr)))
+				val = "(" + val + ")";
+			return operator + (is_alphanumeric_char(operator.charAt(0)) ? " " : "") + val;
+		},
+		"unary-postfix": function(operator, expr) {
+			var val = make(expr);
+			if (!(expr[0] == "num" || (expr[0] == "unary-postfix" && !HOP(OPERATORS, operator + expr[1])) || !needs_parens(expr)))
+				val = "(" + val + ")";
+			return val + operator;
+		},
+		"sub": function(expr, subscript) {
+			var hash = make(expr);
+			if (needs_parens(expr))
+				hash = "(" + hash + ")";
+			return hash + "[" + make(subscript) + "]";
+		},
+		"object": function(props) {
+			if (props.length == 0)
+				return "{}";
+			return "{" + newline + with_indent(function(){
+				return MAP(props, function(p){
+					if (p.length == 3) {
+						// getter/setter.  The name is in p[0], the arg.list in p[1][2], the
+						// body in p[1][3] and type ("get" / "set") in p[2].
+						return indent(make_function(p[0], p[1][2], p[1][3], p[2]));
+					}
+					var key = p[0], val = make(p[1]);
+					if (options.quote_keys) {
+						key = make_string(key);
+					} else if ((typeof key == "number" || !beautify && +key + "" == key)
+						   && parseFloat(key) >= 0) {
+						key = make_num(+key);
+					} else if (!is_identifier(key)) {
+						key = make_string(key);
+					}
+					return indent(add_spaces(beautify && options.space_colon
+								 ? [ key, ":", val ]
+								 : [ key + ":", val ]));
+				}).join("," + newline);
+			}) + newline + indent("}");
+		},
+		"regexp": function(rx, mods) {
+			return "/" + rx + "/" + mods;
+		},
+		"array": function(elements) {
+			if (elements.length == 0) return "[]";
+			return add_spaces([ "[", add_commas(MAP(elements, function(el){
+				if (!beautify && el[0] == "atom" && el[1] == "undefined") return "";
+				return parenthesize(el, "seq");
+			})), "]" ]);
+		},
+		"stat": function(stmt) {
+			return make(stmt).replace(/;*\s*$/, ";");
+		},
+		"seq": function() {
+			return add_commas(MAP(slice(arguments), make));
+		},
+		"label": function(name, block) {
+			return add_spaces([ make_name(name), ":", make(block) ]);
+		},
+		"with": function(expr, block) {
+			return add_spaces([ "with", "(" + make(expr) + ")", make(block) ]);
+		},
+		"atom": function(name) {
+			return make_name(name);
+		}
+	};
+
+	// The squeezer replaces "block"-s that contain only a single
+	// statement with the statement itself; technically, the AST
+	// is correct, but this can create problems when we output an
+	// IF having an ELSE clause where the THEN clause ends in an
+	// IF *without* an ELSE block (then the outer ELSE would refer
+	// to the inner IF).  This function checks for this case and
+	// adds the block brackets if needed.
+	function make_then(th) {
+		if (th[0] == "do") {
+			// https://github.com/mishoo/UglifyJS/issues/#issue/57
+			// IE croaks with "syntax error" on code like this:
+			//	 if (foo) do ... while(cond); else ...
+			// we need block brackets around do/while
+			return make([ "block", [ th ]]);
+		}
+		var b = th;
+		while (true) {
+			var type = b[0];
+			if (type == "if") {
+				if (!b[3])
+					// no else, we must add the block
+					return make([ "block", [ th ]]);
+				b = b[3];
+			}
+			else if (type == "while" || type == "do") b = b[2];
+			else if (type == "for" || type == "for-in") b = b[4];
+			else break;
+		}
+		return make(th);
+	};
+
+	function make_function(name, args, body, keyword) {
+		var out = keyword || "function";
+		if (name) {
+			out += " " + make_name(name);
+		}
+		out += "(" + add_commas(MAP(args, make_name)) + ")";
+		return add_spaces([ out, make_block(body) ]);
+	};
+
+	function make_block_statements(statements, noindent) {
+		for (var a = [], last = statements.length - 1, i = 0; i <= last; ++i) {
+			var stat = statements[i];
+			var code = make(stat);
+			if (code != ";") {
+				if (!beautify && i == last) {
+					if ((stat[0] == "while" && empty(stat[2])) ||
+						(member(stat[0], [ "for", "for-in"] ) && empty(stat[4])) ||
+						(stat[0] == "if" && empty(stat[2]) && !stat[3]) ||
+						(stat[0] == "if" && stat[3] && empty(stat[3]))) {
+						code = code.replace(/;*\s*$/, ";");
+					} else {
+						code = code.replace(/;+\s*$/, "");
+					}
+				}
+				a.push(code);
+			}
+		}
+		return noindent ? a : MAP(a, indent);
+	};
+
+	function make_switch_block(body) {
+		var n = body.length;
+		if (n == 0) return "{}";
+		return "{" + newline + MAP(body, function(branch, i){
+			var has_body = branch[1].length > 0, code = with_indent(function(){
+				return indent(branch[0]
+						  ? add_spaces([ "case", make(branch[0]) + ":" ])
+						  : "default:");
+			}, 0.5) + (has_body ? newline + with_indent(function(){
+				return make_block_statements(branch[1]).join(newline);
+			}) : "");
+			if (!beautify && has_body && i < n - 1)
+				code += ";";
+			return code;
+		}).join(newline) + newline + indent("}");
+	};
+
+	function make_block(statements) {
+		if (!statements) return ";";
+		if (statements.length == 0) return "{}";
+		return "{" + newline + with_indent(function(){
+			return make_block_statements(statements).join(newline);
+		}) + newline + indent("}");
+	};
+
+	function make_1vardef(def) {
+		var name = def[0], val = def[1];
+		if (val != null)
+			name = add_spaces([ make_name(name), "=", parenthesize(val, "seq") ]);
+		return name;
+	};
+
+	var $stack = [];
+
+	function make(node) {
+		var type = node[0];
+		var gen = generators[type];
+		if (!gen)
+			throw new Error("Can't find generator for \"" + type + "\"");
+		$stack.push(node);
+		var ret = gen.apply(type, node.slice(1));
+		$stack.pop();
+		return ret;
+	};
+
+	return make(ast);
+};
+
+/* -----[ Utilities ]----- */
+
+function repeat_string(str, i) {
+	return i < 1 ? "" : new Array(i + 1).join(str);
+};
+
+function defaults(args, defs) {
+	var ret = {};
+	if (args === true)
+		args = {};
+	for (var i in defs) if (HOP(defs, i)) {
+		ret[i] = (args && HOP(args, i)) ? args[i] : defs[i];
+	}
+	return ret;
+};
+
+function is_identifier(name) {
+	return /^[a-z_$][a-z0-9_$]*$/i.test(name)
+		&& name != "this"
+		&& !HOP(KEYWORDS_ATOM, name)
+		&& !HOP(RESERVED_WORDS, name)
+		&& !HOP(KEYWORDS, name);
+};
+
+function MAP(a, f, o) {
+	var ret = [];
+	for (var i = 0; i < a.length; ++i) {
+		ret.push(f.call(o, a[i], i));
+	}
+	return ret;
+};
+
+/* -----[ Exports ]----- */
+
+return {
+	parse: parse,
+	gen_code: gen_code,
+	tokenizer: tokenizer,
+	ast_walker: ast_walker
+};
+
+};
diff --git a/lib/prepro.js b/lib/prepro.js
new file mode 100644
index 00000000..c92796a7
--- /dev/null
+++ b/lib/prepro.js
@@ -0,0 +1,43 @@
+/*
+ * Paper.js
+ *
+ * This file is part of Paper.js, a JavaScript Vector Graphics Library,
+ * based on Scriptographer.org and designed to be largely API compatible.
+ * http://paperjs.org/
+ * http://scriptographer.org/
+ *
+ * Copyright (c) 2011, Juerg Lehni & Jonathan Puckey
+ * http://lehni.org/ & http://jonathanpuckey.com/
+ *
+ * Distributed under the MIT license. See LICENSE file for details.
+ *
+ * All rights reserved.
+ */
+
+// Since loading prepro.js is also used further down to prevent inline scripts
+// from executing right away, check that its actual code is only executed once.
+if (!window.include) {
+	// Determine the source of prepro.js, so we can use it to prevent inline
+	// scripts from loading straight away.
+	var scripts = document.getElementsByTagName('script');
+	var script = scripts[scripts.length - 1];
+	var src = script.getAttribute('src');
+	var root = src.match(/^(.*\/)/)[1];
+
+	window.include = function(url) {
+		url = root + url;
+		var newRoot = url.match(/^(.*\/)/)[1];
+		// Load prepro.js again, just to prevent the setting of newRoot frome
+		// executing straight away, and delaying it until right before the 
+		// script at 'url' is loaded.
+		document.write([
+			'<script type="text/javascript" src="', src, '"></script>',
+			// Set newRoot, so include() from 'url' load from the right place
+			'<script type="text/javascript">root = "', newRoot, '";</script>',
+			// Load the actual script
+			'<script type="text/javascript" src="', url, '"></script>',
+			// Set root back to the root before
+			'<script type="text/javascript">root = "',  root, '";</script>'
+		].join(''));
+	}
+}
diff --git a/lib/stats.js b/lib/stats.js
new file mode 100644
index 00000000..5d85f626
--- /dev/null
+++ b/lib/stats.js
@@ -0,0 +1,10 @@
+// stats.js r5 - http://github.com/mrdoob/stats.js
+var Stats=function(){function w(d,K,n){var u,f,c;for(f=0;f<30;f++)for(u=0;u<73;u++){c=(u+f*74)*4;d[c]=d[c+4];d[c+1]=d[c+5];d[c+2]=d[c+6]}for(f=0;f<30;f++){c=(73+f*74)*4;if(f<K){d[c]=b[n].bg.r;d[c+1]=b[n].bg.g;d[c+2]=b[n].bg.b}else{d[c]=b[n].fg.r;d[c+1]=b[n].fg.g;d[c+2]=b[n].fg.b}}}var v=0,x=2,e,y=0,l=(new Date).getTime(),J=l,z=l,o=0,A=1E3,B=0,m,g,a,p,C,q=0,D=1E3,E=0,h,i,r,F,s=0,G=1E3,H=0,j,k,t,I,b={fps:{bg:{r:16,g:16,b:48},fg:{r:0,g:255,b:255}},ms:{bg:{r:16,g:48,b:16},fg:{r:0,g:255,b:0}},mem:{bg:{r:48,
+g:16,b:26},fg:{r:255,g:0,b:128}}};e=document.createElement("div");e.style.cursor="pointer";e.style.width="80px";e.style.opacity="0.9";e.style.zIndex="10001";e.addEventListener("click",function(){v++;v==x&&(v=0);m.style.display="none";h.style.display="none";j.style.display="none";switch(v){case 0:m.style.display="block";break;case 1:h.style.display="block";break;case 2:j.style.display="block"}},false);m=document.createElement("div");m.style.backgroundColor="rgb("+Math.floor(b.fps.bg.r/2)+","+Math.floor(b.fps.bg.g/
+2)+","+Math.floor(b.fps.bg.b/2)+")";m.style.padding="2px 0px 3px 0px";e.appendChild(m);g=document.createElement("div");g.style.fontFamily="Helvetica, Arial, sans-serif";g.style.textAlign="left";g.style.fontSize="9px";g.style.color="rgb("+b.fps.fg.r+","+b.fps.fg.g+","+b.fps.fg.b+")";g.style.margin="0px 0px 1px 3px";g.innerHTML='<span style="font-weight:bold">FPS</span>';m.appendChild(g);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";m.appendChild(a);
+p=a.getContext("2d");p.fillStyle="rgb("+b.fps.bg.r+","+b.fps.bg.g+","+b.fps.bg.b+")";p.fillRect(0,0,a.width,a.height);C=p.getImageData(0,0,a.width,a.height);h=document.createElement("div");h.style.backgroundColor="rgb("+Math.floor(b.ms.bg.r/2)+","+Math.floor(b.ms.bg.g/2)+","+Math.floor(b.ms.bg.b/2)+")";h.style.padding="2px 0px 3px 0px";h.style.display="none";e.appendChild(h);i=document.createElement("div");i.style.fontFamily="Helvetica, Arial, sans-serif";i.style.textAlign="left";i.style.fontSize=
+"9px";i.style.color="rgb("+b.ms.fg.r+","+b.ms.fg.g+","+b.ms.fg.b+")";i.style.margin="0px 0px 1px 3px";i.innerHTML='<span style="font-weight:bold">MS</span>';h.appendChild(i);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";h.appendChild(a);r=a.getContext("2d");r.fillStyle="rgb("+b.ms.bg.r+","+b.ms.bg.g+","+b.ms.bg.b+")";r.fillRect(0,0,a.width,a.height);F=r.getImageData(0,0,a.width,a.height);try{if(performance&&performance.memory&&performance.memory.totalJSHeapSize)x=
+3}catch(L){}j=document.createElement("div");j.style.backgroundColor="rgb("+Math.floor(b.mem.bg.r/2)+","+Math.floor(b.mem.bg.g/2)+","+Math.floor(b.mem.bg.b/2)+")";j.style.padding="2px 0px 3px 0px";j.style.display="none";e.appendChild(j);k=document.createElement("div");k.style.fontFamily="Helvetica, Arial, sans-serif";k.style.textAlign="left";k.style.fontSize="9px";k.style.color="rgb("+b.mem.fg.r+","+b.mem.fg.g+","+b.mem.fg.b+")";k.style.margin="0px 0px 1px 3px";k.innerHTML='<span style="font-weight:bold">MEM</span>';
+j.appendChild(k);a=document.createElement("canvas");a.width=74;a.height=30;a.style.display="block";a.style.marginLeft="3px";j.appendChild(a);t=a.getContext("2d");t.fillStyle="#301010";t.fillRect(0,0,a.width,a.height);I=t.getImageData(0,0,a.width,a.height);return{domElement:e,update:function(){y++;l=(new Date).getTime();q=l-J;D=Math.min(D,q);E=Math.max(E,q);w(F.data,Math.min(30,30-q/200*30),"ms");i.innerHTML='<span style="font-weight:bold">'+q+" MS</span> ("+D+"-"+E+")";r.putImageData(F,0,0);J=l;if(l>
+z+1E3){o=Math.round(y*1E3/(l-z));A=Math.min(A,o);B=Math.max(B,o);w(C.data,Math.min(30,30-o/100*30),"fps");g.innerHTML='<span style="font-weight:bold">'+o+" FPS</span> ("+A+"-"+B+")";p.putImageData(C,0,0);if(x==3){s=performance.memory.usedJSHeapSize*9.54E-7;G=Math.min(G,s);H=Math.max(H,s);w(I.data,Math.min(30,30-s/2),"mem");k.innerHTML='<span style="font-weight:bold">'+Math.round(s)+" MEM</span> ("+Math.round(G)+"-"+Math.round(H)+")";t.putImageData(I,0,0)}z=l;y=0}}}};
+
diff --git a/node.js/index.js b/node.js/index.js
new file mode 100644
index 00000000..243a9d1b
--- /dev/null
+++ b/node.js/index.js
@@ -0,0 +1,58 @@
+var fs = require('fs'),
+	vm = require('vm'),
+	path = require('path'),
+	Canvas = require('canvas');
+
+__dirname = path.resolve(__dirname, '../src/');
+
+// Create the context within which we will run the source files:
+var context = vm.createContext({
+	options: {
+		server: true,
+		version: 'dev'
+	},
+	fs: fs,
+	// Node Canvas library: https://github.com/learnboost/node-canvas
+	Canvas: Canvas,
+	HTMLCanvasElement: Canvas,
+	Image: Canvas.Image,
+	// Copy over global variables:
+    console: console,
+	require: require,
+	__dirname: __dirname,
+	__filename: __filename,
+	// Used to load and run source files within the same context:
+	include: function(uri) {
+		var source = fs.readFileSync(path.resolve(__dirname, uri), 'utf8');
+		// For relative includes, we save the current directory and then
+		// add the uri directory to __dirname:
+		var oldDirname = __dirname;
+		__dirname = path.resolve(__dirname, path.dirname(uri));
+		vm.runInContext(source, context, uri);
+		__dirname = oldDirname;
+	}
+});
+
+// Load Paper.js library files:
+context.include('paper.js');
+
+context.Base.each(context, function(val, key) {
+	if (val && val.prototype instanceof context.Base) {
+		val._name = key;
+		// Export all classes through PaperScope:
+		context.PaperScope.prototype[key] = val;
+	}
+});
+context.PaperScope.prototype['Canvas'] = context.Canvas;
+
+require.extensions['.pjs'] = function(module, uri) {
+	var source = context.PaperScript.compile(fs.readFileSync(uri, 'utf8'));
+	var envVars = 'var __dirname = \'' + path.dirname(uri) + '\';' + 
+				 'var __filename = \'' + uri + '\';';
+	vm.runInContext(envVars, context);
+	var scope = new context.PaperScope();
+	context.PaperScript.evaluate(source, scope);
+	module.exports = scope;
+};
+
+module.exports = new context.PaperScope();
\ No newline at end of file

From 981f11365237a0284e6197e52083f839a2a8fa32 Mon Sep 17 00:00:00 2001
From: jaroles <jaroles58@gmail.com>
Date: Sun, 30 Sep 2012 22:11:00 -0300
Subject: [PATCH 42/51] Update src/svg/ExportSVG.js

---
 src/svg/ExportSVG.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/svg/ExportSVG.js b/src/svg/ExportSVG.js
index fb24a2ee..26bc5464 100644
--- a/src/svg/ExportSVG.js
+++ b/src/svg/ExportSVG.js
@@ -221,12 +221,11 @@ var ExportSVG = this.ExportSVG = Base.extend(/** @Lends ExportSVG# */{
 				break;
 		}
 		//If the object is a circle, ellipse, rectangle, or rounded rectangle, it will find the angle 
-		//found by the transformCheck method and make a path that accommodates for the transformed object
+		//found by the determineIfTransformed method and make a path that accommodates for the transformed object
 		if(type != 'text' && type != undefined && type != 'polygon' &&  type != 'polyline' && type != 'line') {
 			//TODO: Need to implement exported transforms for circle, ellipse, and rectangles instead of 
 			//making them paths
 			var angle = this._determineIfTransformed(path, pointArray, type) + 90;
-			console.log(angle);
 			if(angle != 0) {
 				if(type == 'rect' || type == 'roundRect') {
 					svgEle = document.createElementNS(this.NS, 'path');
@@ -307,7 +306,7 @@ var ExportSVG = this.ExportSVG = Base.extend(/** @Lends ExportSVG# */{
 		return svgEle;
 	},
 
-	//Determines whether the object has been transformed or not through determining the angle
+	//Determines whether the object has been transformed or not through finding the angle
 	_determineIfTransformed: function(path, pointArray, type) {
 		var topMidBoundx = (path.bounds.topRight.getX() + path.bounds.topLeft.getX() )/2;
 		var topMidBoundy = (path.bounds.topRight.getY() + path.bounds.topLeft.getY() )/2;
@@ -473,7 +472,6 @@ var ExportSVG = this.ExportSVG = Base.extend(/** @Lends ExportSVG# */{
 		} else {
 			type = null;
 		}
-		console.log(type);
 		return type;
 	}
 });

From e0617b3c21e29fe1b18a54d0e36dffc375d9655a Mon Sep 17 00:00:00 2001
From: jaroles <jaroles58@gmail.com>
Date: Sun, 30 Sep 2012 22:12:17 -0300
Subject: [PATCH 43/51] Update examples/ExportSVGTests/Circle Testing.html

---
 examples/ExportSVGTests/Circle Testing.html | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/examples/ExportSVGTests/Circle Testing.html b/examples/ExportSVGTests/Circle Testing.html
index b81d0035..ee665747 100644
--- a/examples/ExportSVGTests/Circle Testing.html	
+++ b/examples/ExportSVGTests/Circle Testing.html	
@@ -13,23 +13,22 @@
 		initializePath();
 
 		function initializePath() {
-			var topLeft = new Point(-200, -200);
-			var size = new Size(-150, -100);
+			var topLeft = new Point(200, 200);
+			var size = new Size(150, 100);
 			var rectangle = new Rectangle(topLeft, size);
 			var path = new Path.Oval(rectangle);
 			path.fillColor = 'black';
 		
-			var topLeft = new Point(-5, -400);
-			var size = new Size(-100, -50);
+			var topLeft = new Point(5, 400);
+			var size = new Size(100, 50);
 			var rectangle = new Rectangle(topLeft, size);
 			var path = new Path.Oval(rectangle);
 			path.fillColor = 'yellow';
 		
-			var path = new Path.Circle(new Point(-25, -25), -7);
+			var path = new Path.Circle(new Point(50, 50), 25);
 			path.fillColor = 'red';
 			
 			var esvg = new ExportSVG();
-		//esvg.exportProject(paper.project);
 			var output = esvg.exportProject(paper.project);
 			console.log(output);
 			var test = document.getElementById('svg')

From 333b6bb0edf1f74e8cbd41208647effabe8cd556 Mon Sep 17 00:00:00 2001
From: jaroles <jaroles58@gmail.com>
Date: Sun, 30 Sep 2012 22:12:42 -0300
Subject: [PATCH 44/51] Update examples/ExportSVGTests/Empty Path Testing.html

---
 examples/ExportSVGTests/Empty Path Testing.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/ExportSVGTests/Empty Path Testing.html b/examples/ExportSVGTests/Empty Path Testing.html
index da75294e..36a71de5 100644
--- a/examples/ExportSVGTests/Empty Path Testing.html	
+++ b/examples/ExportSVGTests/Empty Path Testing.html	
@@ -24,7 +24,6 @@
 			
 			
 			var esvg = new ExportSVG();
-		//esvg.exportProject(paper.project);
 			var output = esvg.exportProject(paper.project);
 			console.log(output);
 			var test = document.getElementById('svg')

From db6e712203644a8c6a7a103b303d5aa2b60dfb7f Mon Sep 17 00:00:00 2001
From: jaroles <jaroles58@gmail.com>
Date: Sun, 30 Sep 2012 22:13:09 -0300
Subject: [PATCH 45/51] Update examples/ExportSVGTests/Line Testing.html

---
 examples/ExportSVGTests/Line Testing.html | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/examples/ExportSVGTests/Line Testing.html b/examples/ExportSVGTests/Line Testing.html
index 97e1a874..0a249da2 100644
--- a/examples/ExportSVGTests/Line Testing.html	
+++ b/examples/ExportSVGTests/Line Testing.html	
@@ -19,7 +19,7 @@
 				y2 = 45;
 			var line1 = new Path.Line([x1, y1], [x2, y2]);
 			line1.strokeColor = "blue";
-			line1.strokeWidth = "10px";
+			line1.strokeWidth = "10";
 		 
 			var x3 = 20,
 				x4 = 99,
@@ -35,10 +35,9 @@
 				y6 = 300;
 			var line3 = new Path.Line([x5, y5], [x6, y6]);
 			line3.strokeColor = "yellow";
-			line3.strokeWidth = "5px";
+			line3.strokeWidth = "5";
 			
 			var esvg = new ExportSVG();
-			//esvg.exportProject(paper.project);
 			var output = esvg.exportProject(paper.project);
 			console.log(output);
 			var test = document.getElementById('svg')

From 834a6466082631dd6e6f8d2b2f6d3aa110c2177a Mon Sep 17 00:00:00 2001
From: jaroles <jaroles58@gmail.com>
Date: Sun, 30 Sep 2012 22:13:48 -0300
Subject: [PATCH 46/51] Update examples/ExportSVGTests/Rect and Attribute
 Testing.html

---
 examples/ExportSVGTests/Rect and Attribute Testing.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/ExportSVGTests/Rect and Attribute Testing.html b/examples/ExportSVGTests/Rect and Attribute Testing.html
index e384fc0e..10610cdd 100644
--- a/examples/ExportSVGTests/Rect and Attribute Testing.html	
+++ b/examples/ExportSVGTests/Rect and Attribute Testing.html	
@@ -29,7 +29,7 @@
 			var point22 = new Point(100, 100);
 			var path2 = new Path.Rectangle(point2, point22);
 			path2.strokeColor = 'red';
-			path2.strokeWidth = '4px';
+			path2.strokeWidth = '4';
 			path2.fillColor = 'blue';
 			path2.id = "square2";
 			path2.strokeCap = "butt";

From b2c4d1b6d78fb16039f69256a5f6aa88d1b4b830 Mon Sep 17 00:00:00 2001
From: jaroles <jaroles58@gmail.com>
Date: Sun, 30 Sep 2012 22:14:07 -0300
Subject: [PATCH 47/51] Update examples/ExportSVGTests/Transform Test 1.html

---
 examples/ExportSVGTests/Transform Test 1.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/ExportSVGTests/Transform Test 1.html b/examples/ExportSVGTests/Transform Test 1.html
index d44566cd..028b2597 100644
--- a/examples/ExportSVGTests/Transform Test 1.html	
+++ b/examples/ExportSVGTests/Transform Test 1.html	
@@ -26,7 +26,6 @@
 			};
 		
 			var esvg = new ExportSVG();
-		//esvg.exportProject(paper.project);
 			var output = esvg.exportProject(paper.project);
 			console.log(output);
 			var test = document.getElementById('svg')

From 0efcaade4b5e8798fac54717eb03b464f82d5842 Mon Sep 17 00:00:00 2001
From: jaroles <jaroles58@gmail.com>
Date: Sun, 30 Sep 2012 22:14:43 -0300
Subject: [PATCH 48/51] Update examples/ExportSVGTests/Text Testing.html

---
 examples/ExportSVGTests/Text Testing.html | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/examples/ExportSVGTests/Text Testing.html b/examples/ExportSVGTests/Text Testing.html
index c7c824e7..565eaf1f 100644
--- a/examples/ExportSVGTests/Text Testing.html	
+++ b/examples/ExportSVGTests/Text Testing.html	
@@ -26,9 +26,6 @@
 			center = new Point(100,100);
 			var path2 = new Path.Circle(center,radius);
 			path2.strokeColor = 'black';
-			console.log(path2.getSegments());
-			//copy = path2.clone();
-			//copy.strokeColor = 'blue';
 			point = new Point(120,100);
 			path2.shear(.5, .5);
 			colors = ['red', 'blue', 'green', 'orange'];
@@ -36,12 +33,10 @@
 				var p = path2.segments[i].point;
 				var c = new Path.Circle(p, 2);
 				c.fillColor = colors[i];
-			}
-			console.log(path2.segments);			
+			}		
 			
 			var esvg = new ExportSVG();
 			var output = esvg.exportProject(paper.project);
-			//console.log(output);
 			var test = document.getElementById('svg')
 			test.innerHTML = "";
 			test.appendChild (output);   

From 644ed772d5e892e4071eee8b07e0941c96d46a5c Mon Sep 17 00:00:00 2001
From: jaroles <jaroles58@gmail.com>
Date: Sun, 30 Sep 2012 22:15:07 -0300
Subject: [PATCH 49/51] Update examples/ExportSVGTests/Transform Test 2.html

---
 examples/ExportSVGTests/Transform Test 2.html | 2 --
 1 file changed, 2 deletions(-)

diff --git a/examples/ExportSVGTests/Transform Test 2.html b/examples/ExportSVGTests/Transform Test 2.html
index 9e9da551..527e2b33 100644
--- a/examples/ExportSVGTests/Transform Test 2.html	
+++ b/examples/ExportSVGTests/Transform Test 2.html	
@@ -22,9 +22,7 @@
 			copy.rotate(-45);
 			copy.scale(0.5);
 			var esvg = new ExportSVG();
-		//esvg.exportProject(paper.project);
 			var output = esvg.exportProject(paper.project);
-			console.log(output);
 			var test = document.getElementById('svg')
 			test.innerHTML = "";
 			test.appendChild (output);   

From 25081366027097477a82d75886966abba4e9ae65 Mon Sep 17 00:00:00 2001
From: Andrew <jaroles@stetson.edu>
Date: Sun, 30 Sep 2012 21:17:02 -0400
Subject: [PATCH 50/51] Got rid of swp files

---
 examples/Tools/.SVGCircles.html.swp | Bin 12288 -> 0 bytes
 examples/Tools/.SVGRect.html.swp    | Bin 12288 -> 0 bytes
 src/path/.Path.Constructors.js.swp  | Bin 16384 -> 0 bytes
 3 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 examples/Tools/.SVGCircles.html.swp
 delete mode 100644 examples/Tools/.SVGRect.html.swp
 delete mode 100644 src/path/.Path.Constructors.js.swp

diff --git a/examples/Tools/.SVGCircles.html.swp b/examples/Tools/.SVGCircles.html.swp
deleted file mode 100644
index 56100d522b699739475fdbbd8ad66a657478d5f1..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 12288
zcmeI2Pj4GV7>6g^0<<7{<1}4V;tG4$aT8inJ5uCS1wj>~xRDSS#_QMiCgYuDX4Xks
z;J_!~!e7BB-~e|{aNrAYg$oBHZb)$AK>5wC?Ica56mg4Yl}Fypyz}lm&v^EbOs~H4
z+8us9yvA@n%b5Ohr{iwr3S--`vex}_#<ktv>UL|L_8DO;UW@J;(k3brN14b-hr1@C
z12N7dnW(FjMDNb+cA{f6gd;naXJz&M-hemocm^)AYmMdl3&CZ6>AAa)H^fJI1Kxl)
z;0<^K-hemY4R{0Iz_~GCvjz45vv~r%3>K!~!(ZNjH{cC;1Kxl);0<^K-hemY4R{0I
zfH!bX42V8suRO`vm8UQv{Quwm4d9Pw82cUk3cdm#f;Yhh@WVyMJ^}=8gO|W1@b?AA
z{sMo3-@uRHd+;^52i^f2;CZkB82IUF#=ZsLfDgbM;C1jKxB?!arhmXM;Aik1_yT+m
zJ_DbEPr%3EJ#Zi7U>Eej+h7&cKrz2_vSxl7-hemY4R{0IfH&X`cmw~-Kr?d3OxIa6
z>ZxP*kG@s?!*#aUj72&Th9~`2P~HYylS%H;dNV2;kgrz+BM*tb8x)yXCz-|V;^O-^
znfqAGgdK&N#%e-a>82LL%2o8ZYu4Kcg^s(bVpY~rNouRy>YNZY58y4H(mwAXRYlUk
z7GW-pi<k|Y1-TTJ<&~A{^;tv@r+n487<4MAQJ;tDWH>5QpNMK8)$&o)L}>16=&G*D
zUKMFyQsYE?y~=B=t6`&YV>*RLjCg238NM>FWIo3eaq~LdtfOcw_L6kSHwrazah{k9
z%LR`~TalzZb0$hhu}Y1S6iPL$n8{G(_E>FY10IE&kPb4XZDHE2+{v(MIk$=!oMLuM
z>53`V*pQ^yQXfHX{f>HOlW<>z^4xQUCY0K+D6q=4=qI^3_N1}_!<OsyBF%mGltG@x
zHc=^8=^d3D+En{#ndmBa{Z6whr2Jao>*p#nR;xW~E2;DvU+PH_?=2M_gG9<%^ZqEY
zv{ZHNnO3`)MHuH=qr`1{C<%oW1w;|IBQnHI(TY$U@3sk<H8&Ey8&bN(kcT|hB%BK5
z9UH!nXJPlmluQV_q}(Lj9%j@EEFIYLpm^CF@N##}x1HNpr$_7x?9O7d1>ESk6@+1g
zAKXS*#b~}lIDH;q$Cjc0DOEo))51>WkV(3S`N&pKm@p$E8}N~)K~YC+OjLA)xC`7v
zZDJ*@A02ydMr8}S#$*K_S)0}9-8`AJg0@O6%-6cm0~zISQ%~+Sc9X{=p$*wqZU?m+
Z$lokqKh5b&?(*hVyZct>7P7jR-oLlv#(e+)

diff --git a/examples/Tools/.SVGRect.html.swp b/examples/Tools/.SVGRect.html.swp
deleted file mode 100644
index 0e8ea1331f14726d24e8667d7e0c64bc6dbbb5b0..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 12288
zcmeI2J#W)M7{{+n1f)_?Ay(H6O{>ICTUDUu1wmR>9jZnot;B>J=aM*ae8zW4Ur+~z
zegRlm5E2psAz0Y>0DJ)W2yBRjjS>E5r>&q!EfXSoto-8h-E(K(Prb)#d-dGb+PZPw
zT3|RP82j{StD=i<))=e0LMeT5%26$E)N0vE`IIo`F4>!sN79Z5wnHc6k=2nl-*I}O
z&!t@x!bj`Y>K*PXtF3zeX+u&w86X2^HZZ=qFh7^OW=<KCmp9Mcivr0286X2>fDDiU
zGC&5%02vq!11cP2KQNVZU<Qm0!HEtsKnBPF86X2>fDDiUGC&5%02v?yWMD)LI1R>L
zpJ%L|!i4bufBiRrZ<iSR0zQMM-~iOX1o$w{*kiB<2H+l81-HR1un4Y#Nl?7VSPFc-
zfPUaDcm-a7=imT51a)u|Tmj$l93R1Z@D98L&%hH9fewhDbwvErG{^uMAOmE843L3Q
zG*GbhM#d5=*mcp^EwNO=b%KE-4X;r&lcH%vTzY%FRIrl@L?^-M%$<hrWJ@>lLWN>#
zKR;{ZlyXHNh0iTtw9<0W5`8t3*YyJ@GLmbfs0$X~2}PtTj%ueveEkxIkbrL+D{%<6
zUZ#^)9XD*!{VcsB(+OHWPlv(_R7OAU@i=kaVYqHj&*yR(a2%pL3?r&2rWbRW#iaQG
zp4pyl_5)XWA~1SRmmlA4293#QKc3sanKK{oKv@m39aR1>``@QFhq(hfk%Is3ryyRi
zdPN?sM-i-xzU0f1(@MwdKrcz1Vswhg<2O9yBYdT#ibR)}g)gEdW4i7;Zg*POH$C4!
ztle&Vice=yt#1)VqN6u@yZtD_`l_m3A1MO4E=hHU+6{TpRD4Gzd&QG#(@1jUQS#K;
z@nnyVgB%;DOw*8&TQn`p#s@_kDbYU4ci4b#BJU=le>GIYlfwr)F^2C2UF3AXXi7aP
z+2&lCMmyro_&HoD?YO~0$<#Mhp7MEVxbwYWCzq)2apf3orNS(~-}eSZvn&DySJ@ie
tz(jI2l%(G?dBbfxk>sk_SIz7V3|>gyAcf&uXli+*T)SIY!KnJJ^b>)_^o;-j

diff --git a/src/path/.Path.Constructors.js.swp b/src/path/.Path.Constructors.js.swp
deleted file mode 100644
index f5c885e4cb553ac42c8aea2854fec711af57b665..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 16384
zcmeI2ZHOdC8OQrBFJ?TAAqi1DF?A;KW_I^_Ue?PU8`s-qbH-bC<B-|AL)JC+^wiAs
zZclfox@R|=btK>i^-B&8&7lMl-w1vXMea*f40uS8n0z@2h;M;FAj0V(sE9HCpQ`Gf
zo_)F9J2q&v2Yxf%)%DcNQ%^nhR87}Qr%ueWBj%`q&n<@W^5<(+x@=DyM$Pu4h;Fv|
z)TTZ@H+QHywM{m|9xI*<xd@B0;9_6}T$qbtF%&j#qIR*0FLTQG!bo)O$QL1=ZdYjb
zJkvm?fgNh#W@EHcF5UHk1MIe2Pwr4A%a&;%(?F(yOaqw)G7V%J$TW~?Ak)DAiUy+K
zI^zv=W-oXQ?9se|Pk`$+eSaN(Yv7Oi9zWS9(?F(yOaqw)G7V%J$TW~?Ak#pmflLFL
z1~Ls~8hDFnz-k!Ad(hU~=>P!#|I-=3>+dp*%it3D4)`QE4i195!Jlq6jGusKz%mHI
zJU9(b0TbK+t_PRiX&65OUjQe;UEogeey|t(^Bsoq8}Jf12hM`iU_bctKAbmz--2hr
zIpBd=@BpZQz2MT@4dXfRb?{a2W$-2N1h^j@1NVS^;4eAk1wRAl!5Odw#=t)C+D(S>
z3ius313m_B1be`%Z!?T<gE}|@D&TJLuN%>R@GbB;&;u*rL*RYj-QXWL7{-g>7vRU>
zNg%)^xD{N!9(@JB1W$vr;BjDqNiYQVgG)Gwxd6TbT)@FB7zane5l{wy#dux@7r|5D
z5#WMPfun%N`!=xICzoSGY}pblbROeuoOyhO)o__Fmr5fHUxoXOBv0TwUZgWs>3T!1
z3I3?n30y8^l;DKmQCE0ujo$d^v8c_d5_gr^f?E-9FnS$CXALZ2b=Vp;pr=|y*=5uG
zrW6%^*K0t?_JxPnO9tg0;&x<tEf>N9m%0%wH^io7T_LmN1LWzt=rgs5orrjctvI+^
zSGEcH;?R(RpWX<*a=IhbUQ$YqF3g8**ALO4afTOJxJ+M=I?LsxE_tiNp(v>?Q*}8n
zoK`y;VRgK6<97-LDr?)!kslNavKd=vb$JuT?mTDQ09mZ+jn!!6=VgQFJ|1ga=5?o(
z40YEJ*sxTm+2*oCQcU&@kEt#3^A)ENwN=|mYFtUJ$`rCanOCPiDpP6rkS`ff6XVy&
zTcXt^ZHBTf$-^<$?0R<O_+Fmm3TzE6VM9gvEzQfsTSop8pYmN_pxA?T*Rq!m(qL)p
zU)NbPDO;8(Z7Mwxs2Z7w!f2HH+2s@&ktUlK_-~qBNn;0Q329<&!gai*es6j-1(3dB
z_PCgoZM@ReNKK)p@H=vf23AND!m2~*mYjt&i*|2Bw2I|VC9PzYqKBj^{Zoa!*yw-8
zi^&%Bm~Pb^IWlhh9vq%@qYd74JjZJ(w-y_eQuu^+gy|y6jEZPFB8+xYf@gKO9G$)`
z%d%AkXh;0w9g1vq1rM3ujab`X!Nf*V)OVE_>^hHDIQOWj9c>dHw|N*^!ht9EIK~@d
zbuK$Yb6ieo3!T;eLb(O)wc(@MYKgcu(~=4dO;Sk6S;J?ZPtJaK%`BPYX%kBl--;8z
zzpQR;W%|jLt>>EjfwFos337%T7FVg|T&||p%XR)94mIL|`c}*3R{1d9DXUs3^@2?v
zx=KqJI+v5N4su`sXOU($UEde|mBn<q*TTYAWXiS7I37=}FT1g}P?34^mb6r-jSDkK
zEhlo?Z-}j^<<iNfGgZ*xN)n{)PWTmjov0$Gv-Vn+XScC>s$ta87%iKd+fr1PvdUdu
zQB=wIO^QY;6_iCQK1<7otm%sm`Av&qwUUO!)bfJ$tA!XYh@1#MtJYtj!X7G--a%Ug
zuGs`ex)G`cY^aF;K648c5Tt{)`I31ULGZ!|n_semz#3sCMmLAzy9F}F0f{p5n1?A7
z21e!6H&TWzNXr}$k(HDN%N?k36OnW+y5NB-NrddhU$$I5RYDloJbFpVN@Sc>VCSP)
z;PY}SgpY_QUn#IdtPHcHaWEZk5i3)E4U@`>96KD7;Z726(R45<(n1-NuFIsC4-wws
z)$e8AFp*A=?su@*IQ1??`xL$lX&bXA<}iXb_d;&68s}{0#MJQzYsazrVE8b~tidD8
zal^Qnb`%9;#iGmGo@4r=Rb(GzI&IPS&|J$4y7m%ZHEq8m+cf0|t7_%R+Xc*%GKOcm
z%SDULP$7_?)`F}mC3S;!si7^LAo5$n3fg#movNhn=%@0X_Qfzsu3HrL_#Ufm5Q7Cb
z(3{X{dC5wN4M>Y)@tmxlz;334spQmMm@_JvYdbJ=(gJ=F3PcR^t*T$4AA#XdTg#TJ
zg`L9qKvfS=8!<p^#;FTSAhuSjkEM*_kU{(ZJ=lL**rU?^pZ?>21$+F9;6?BPcn+Kc
zXTfQ32lxZ__UFO(!8gEXz)3I(hQX`Y+g|`b1wQ~^1a&YAj)2S9-#-t24$gokm;q&Q
zJNP~J_0NK*Km?}2o#4HI_WZA5FaK-sD{v9K0G<Zl1fKx6fY-5~|2udVJPvH|QLrD}
z0d4{>V_*L~I1j!C7QjcqQDA_Vu)n_mz6+iJK9~jvz~7*=AA;|JC&6cd2NppSkWN1h
zvQMUgOaqw){x3Dq>rpt{qcDmht{oqkQ5b1HOh-?l3jfssk17NqyIkT-;Ufm&c?$2b
zMmhzv({&>!a98sVy9c4nF(#~r(+w+ZOkb4?1--3^%bj-?bd0T|qCDb{2x~i4PEDq;
zBTpfcgM6j?@bh8jbvrU74skm?thNBTTwJ6sZ&C<rHJ@bF^{S@pEGn$0xUj7DCpp=d
zaW;By34vH5o1BZ0USe5X=9N^Ej}0M$BW34QCy-TEv0?LsDk-AF?kciGYB!_AMp8A$
ziW`Y_x!HyXk%_zWqco~hYk5TN9>TbEL}Pl$Wa}`hr1^Lh$JyZ$HF_Yqj80b4$#OqJ
zvF*L7yoo;K*6&R`seZ8AsdIsYG-Y|JwejiA;KTCf5BsBuGZ7jIlt<y7?w8(ZA^aAD
z@^YkmO!t&z^`#V~5-2T^Q^JmiLv!6&eU77Ap3X1NRan@uT$kgl2_>mKWf{fBqq71d
z&<8%MY#hcg8Ph76wF%pA@L04bWe3tKJ)F8HWzgvpS6x)a^*4mnhYiP#8_o}QdN_Yo
zz6PFU7z${H9H+`d>SSTJTuRNshG0h?Mds8FMKuQI9<>FwOvm6$;O=M(3AM$p5|8_a
zkIA3p)q@@TN9~2w<8gL?+?T8j{&aK;7bTx><Dru2CyjJ#ck~dK|HD*$ceUkvn>!{|
zpSGiQ-l)NCtIZq2_slE%q<+R&HMHUkR-gE&kOn69OdA~&N*M4<GCLB>X|I%Mpg#`l
z|4=Iy_2DP>bE)>}b9FLPH4!#B)4^t1{`;^^uj6cQUY|#=&gZ7PoHTAH9iGs$`zroJ
z9CW_Y84kL-Kv|tuvOaK+rILv-=#<r1Yu~zQ0XuWcY0>rWPN+$N1whV<YxI1Uu;=_d
NX13pLwe>;czX3{Qu~h&7


From 777e1c6275c09668b0567df85bd667a62792c126 Mon Sep 17 00:00:00 2001
From: Andrew <jaroles@stetson.edu>
Date: Sun, 30 Sep 2012 21:18:39 -0400
Subject: [PATCH 51/51] Removed unnecessary files

---
 examples/Scripts/ImportSVG.html   | 32 -----------
 examples/Tools/SVGBezierTool.html | 89 -------------------------------
 examples/Tools/SVGCircles.html    | 54 -------------------
 examples/Tools/SVGGrid.html       | 48 -----------------
 examples/Tools/SVGRect.html       | 32 -----------
 examples/Tools/SVGStars.html      | 34 ------------
 6 files changed, 289 deletions(-)
 delete mode 100644 examples/Scripts/ImportSVG.html
 delete mode 100644 examples/Tools/SVGBezierTool.html
 delete mode 100644 examples/Tools/SVGCircles.html
 delete mode 100644 examples/Tools/SVGGrid.html
 delete mode 100644 examples/Tools/SVGRect.html
 delete mode 100644 examples/Tools/SVGStars.html

diff --git a/examples/Scripts/ImportSVG.html b/examples/Scripts/ImportSVG.html
deleted file mode 100644
index da8d79cc..00000000
--- a/examples/Scripts/ImportSVG.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<title>Stroke Bounds</title>
-	<link rel="stylesheet" href="../css/style.css">
-	<script type="text/javascript" src="../../dist/paper.js"></script>
-	<script type="text/paperscript" canvas="canvas">
-		project.currentStyle = {
-		    strokeColor: 'black',
-		    strokeWidth: 2,
-		    strokeCap: 'round'
-		};
-		var isvg = new ImportSVG;
-		isvg.importSVG(document.getElementById('svg'));
-	</script>
-</head>
-<body>	
-	<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:500px; background:black;" id="svg">
-		<g>
-  			<line x1="4" y1="20" x2="200" y2="200" style="stroke:red;stroke-width:1" id="line" />
-  			<rect x="200" y="20" rx="20" ry="10" width="150" height="150" style="fill:green" id="round" />
-		</g>
-		<g>
-			<rect x="250" y="180" width="150" height="150" style="fill:blue" id="rect" />
-			<ellipse cx="120" cy="250" rx="100" ry="50" style="fill:yellow;" id="oval" />
-		</g>
-		<text x="20" y="15" fill="green">I love SVG</text>
-	</svg>
-	<canvas id="canvas" width="500" height="500"></canvas>
-</body>
-</html>
\ No newline at end of file
diff --git a/examples/Tools/SVGBezierTool.html b/examples/Tools/SVGBezierTool.html
deleted file mode 100644
index e09541a1..00000000
--- a/examples/Tools/SVGBezierTool.html
+++ /dev/null
@@ -1,89 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<title>Bezier Tool</title>
-	<link rel="stylesheet" href="../css/style.css">
-	<script type="text/javascript" src="../../dist/paper.js"></script>
-	<script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
-	<script type="text/paperscript" canvas="canvas">
-		var path;
-		var types = ['point', 'handleIn', 'handleOut'];
-		function findHandle(point) {
-			for (var i = 0, l = path.segments.length; i < l; i++) {
-				for (var j = 0; j < 3; j++) {
-					var type = types[j];
-					var segment = path.segments[i];
-					var segmentPoint = type == 'point'
-							? segment.point
-							: segment.point + segment[type];
-					var distance = (point - segmentPoint).length;
-					if (distance < 3) {
-						return {
-							type: type,
-							segment: segment
-						};
-					}
-				}
-			}
-			return null;
-		}
-
-		var currentSegment, mode, type;
-		function onMouseDown(event) {
-			if (currentSegment)
-				currentSegment.selected = false;
-			mode = type = currentSegment = null;
-
-			if (!path) {
-				path = new Path();
-				path.fillColor = new HsbColor(360 * Math.random(), 1, 1, 0.5);
-			}
-
-			var result = findHandle(event.point);
-			if (result) {
-				currentSegment = result.segment;
-				type = result.type;
-				if (path.segments.length > 1 && result.type == 'point'
-						&& result.segment.index == 0) {
-					mode = 'close';
-					path.closed = true;
-						var svg = new ExportSVG();
-						var svgout = svg.exportPath(path);
-						console.log(svgout);
-					path.selected = false;
-					path = null;
-				}
-			}
-
-			if (mode != 'close') {
-				mode = currentSegment ? 'move' : 'add';
-				if (!currentSegment)
-					currentSegment = path.add(event.point);
-				currentSegment.selected = true;
-			}
-		}
-
-		function onMouseDrag(event) {
-			if (mode == 'move' && type == 'point') {
-				currentSegment.point = event.point;
-			} else if (mode != 'close') {
-				var delta = event.delta.clone();
-				if (type == 'handleOut' || mode == 'add')
-					delta = -delta;
-				currentSegment.handleIn += delta;
-				currentSegment.handleOut -= delta;
-			}
-		}
-	</script>
-</head>
-<body>
-	<p>
-	An emulation of a vector pen tool.
-	Click and drag to add a points.<br/>
-	Drag segment handles and points to manipulate them.
-	Close the path to start a new one.
-	</p>
-	<canvas id="canvas" resize></canvas>
-</body>
-</html>
\ No newline at end of file
diff --git a/examples/Tools/SVGCircles.html b/examples/Tools/SVGCircles.html
deleted file mode 100644
index 9468bed8..00000000
--- a/examples/Tools/SVGCircles.html
+++ /dev/null
@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<title>SVGCircles</title>
-	<link rel="stylesheet" href="../css/style.css">
-	<script type="text/javascript" src="../../dist/paper.js"></script>
-	<script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
-	<script type="text/paperscript" canvas="canvas">
-			// All newly created items will receive
-			// these style properties:
-			project.currentStyle = {
-				fillColor: 'white',
-				strokeColor: 'black'
-			};
-
-			var path;
-			function onMouseDown(event) 
-			{
-				var radius = 100;
-				path = new Path.Circle(event.point, radius);
-				path.selected = true;
-				var svg = new ExportSVG();
-				var svgout = svg.exportPath(path);
-				console.log(svgout);
-
-				//making A new circle at a certain point
-				leftPoint = new Point(44,107);
-
-				var leftToTopHandle = new Point(0,55.22847);
-				var leftToTopHandle2 = new Point(0, -55.228);
-
-				rightPoint = new Point(244,107);
-
-				bottomPoint = new Point(144,207);
-
-				topPoint = new Point(144,7);
-
-				path2 = new Path(leftPoint);
-				path2.arcTo(topPoint, true);
-
-
-
-
-
-				path.removeOnDrag();
-
-			};
-	</script>
-</head>
-<body>
-	<canvas id="canvas" resize></canvas>
-</body>
-</html>
diff --git a/examples/Tools/SVGGrid.html b/examples/Tools/SVGGrid.html
deleted file mode 100644
index 0fd8e5a9..00000000
--- a/examples/Tools/SVGGrid.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<title>Grid</title>
-	<link rel="stylesheet" href="../css/style.css">
-	<script type="text/javascript" src="../../dist/paper.js"></script>
-	<script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
-	<script type="text/paperscript" canvas="canvas">
-		/////////////////////////////////////////////////////////////////////
-		// Values
-
-		tool.fixedDistance = 10;
-
-		var values = { size: tool.fixedDistance };
-
-		/////////////////////////////////////////////////////////////////////
-		// Mouse handling
-
-		var point, path;
-
-		function getPos(pt) {
-			return (pt / values.size).round() * values.size;
-		}
-
-		function onMouseDown(event) {
-			point = getPos(event.point);
-			path = new Path();
-			path.strokeColor = 'black';
-			path.add(point);
-		}
-
-		function onMouseDrag(event) {
-			var p = getPos(event.point);
-			if (point != p) {
-				path.add(p);
-				point = p;
-			}
-				var svg = new ExportSVG();
-				var svgout = svg.exportPath(path);
-				console.log(svgout);
-		}
-	</script>
-</head>
-<body>
-	<canvas id="canvas" resize></canvas>
-</body>
-</html>
\ No newline at end of file
diff --git a/examples/Tools/SVGRect.html b/examples/Tools/SVGRect.html
deleted file mode 100644
index becba17d..00000000
--- a/examples/Tools/SVGRect.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<title>SVGRect</title>
-	<link rel="stylesheet" href="../css/style.css">
-	<script type="text/javascript" src="../../dist/paper.js"></script>
-	<script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
-	<script type="text/paperscript" canvas="canvas">
-		project.currentStyle =
-		{
-			fillColor: 'white',
-			strokeColor: 'black'
-		};
-
-		var path;
-		function onMouseDown(event)
-		{
-			var size = new Size(100,100);
-			path = new Path.Rectangle(event.point,size);
-			var svg = new ExportSVG();
-			var svgout = svg.exportPath(path);
-			console.log(svgout);
-		};
-		
-		
-	</script>
-</head>
-<body>
-	<canvas id="canvas" resize></canvas>
-</body>
-</html>
diff --git a/examples/Tools/SVGStars.html b/examples/Tools/SVGStars.html
deleted file mode 100644
index b0550020..00000000
--- a/examples/Tools/SVGStars.html
+++ /dev/null
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-	<title>Stars</title>
-	<link rel="stylesheet" href="../css/style.css">
-	<script type="text/javascript" src="../../dist/paper.js"></script>
-        <script type="text/javascript" src="../../src/svg/ExportSVG.js"></script>
-	<script type="text/paperscript" canvas="canvas">
-			function onMouseDown(event) {
-				var hue = Math.random() * 360;
-				project.currentStyle.fillColor = new HsbColor(hue, 1, 1);
-			}
-
-			function onMouseDrag(event) {
-				var delta = event.point - event.downPoint;
-				var radius = delta.length;
-				var points = 5 + Math.round(radius / 50);
-				var position = event.downPoint;
-				var path = new Path.Star(position, points, radius / 2, radius);
-                                var svg = new ExportSVG();
-                                var svgout = svg.exportPath(path);
-                                console.log(svgout);
-				path.rotate(delta.angle);
-				// Remove the path automatically before the next mouse drag
-				// event:
-				path.removeOnDrag();
-			}
-	</script>
-</head>
-<body>
-	<canvas id="canvas" resize></canvas>
-</body>
-</html>