1.3

• AnimateAlong method • getPointAtLength • getSubpath • getTotalLength • bug fixes

1.3
• AnimateAlong method • getPointAtLength • getSubpath • getTotalLength • bug fixes
a8d0f3fa · Dmitry Baranovskiy · 65792bb0 · a8d0f3fa · a8d0f3fa · a8d0f3fa
Commit a8d0f3fa authored Jan 07, 2010 by Dmitry Baranovskiy
Hide whitespace changes
Inline Side-by-side

Showing with 282 additions and 169 deletions

raphael-min.js
+0 -0

raphael.js
+6 -6

reference.html
+276 -163

No files found.
--- a/raphael-min.js
+++ b/raphael-min.js
--- a/raphael.js
+++ b/raphael.js
 /*!
- * Raphael 1.3.0dev - JavaScript Vector Library
+ * Raphael 1.3.0 - JavaScript Vector Library
 *
 * Copyright (c) 2008 - 2009 Dmitry Baranovskiy (http://raphaeljs.com)
 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
@@ -61,7 +61,7 @@ window.Raphael = (function () {
        availableAttrs = {"clip-rect": "0 0 1e9 1e9", cursor: "default", cx: 0, cy: 0, fill: "#fff", "fill-opacity": 1, font: '10px "Arial"', "font-family": '"Arial"', "font-size": "10", "font-style": "normal", "font-weight": 400, gradient: 0, height: 0, href: "http://raphaeljs.com/", opacity: 1, path: "M0,0", r: 0, rotation: 0, rx: 0, ry: 0, scale: "1 1", src: "", stroke: "#000", "stroke-dasharray": "", "stroke-linecap": "butt", "stroke-linejoin": "butt", "stroke-miterlimit": 0, "stroke-opacity": 1, "stroke-width": 1, target: "_blank", "text-anchor": "middle", title: "Raphael", translation: "0 0", width: 0, x: 0, y: 0},
        availableAnimAttrs = {along: "along", "clip-rect": "csv", cx: nu, cy: nu, fill: "colour", "fill-opacity": nu, "font-size": nu, height: nu, opacity: nu, path: "path", r: nu, rotation: "csv", rx: nu, ry: nu, scale: "csv", stroke: "colour", "stroke-opacity": nu, "stroke-width": nu, translation: "csv", width: nu, x: nu, y: nu},
        rp = "replace";
-    R.version = "1.3.0dev";
+    R.version = "1.3.0";
    R.type = (win.SVGAngle || doc.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#BasicStructure", "1.1") ? "SVG" : "VML");
    if (R.type == "VML") {
        var d = document.createElement("div");
@@ -1616,10 +1616,10 @@ window.Raphael = (function () {
    // VML
    if (R.vml) {
        var path2vml = function (path) {
-            var total =  /[ahqtv]/ig,
+            var total =  /[ahqstv]/ig,
                command = pathToAbsolute;
            (path + E).match(total) && (command = path2curve);
-            total =  /[clmz]/g;
+            total = /[clmz]/g;
            if (command == pathToAbsolute && !(path + E).match(total)) {
                var map = {M: "m", L: "l", C: "c", Z: "x", m: "t", l: "r", c: "v", z: "x"},
                    bites = /([clmz]),?([^clmz]*)/gi,
@@ -2909,8 +2909,8 @@ window.Raphael = (function () {
                to[attr] = params[attr];
                switch (availableAnimAttrs[attr]) {
                    case "along":
-                        var len = params[attr].getTotalLength(),
+                        var len = getTotalLength(params[attr]),
-                            point = params[attr].getPointAtLength(len * !!params.back),
+                            point = getPointAtLength(params[attr], len * !!params.back),
                            bb = this.getBBox();
                        diff[attr] = len / ms;
                        diff.tx = bb.x;

--- a/reference.html
+++ b/reference.html
@@ -56,14 +56,139 @@
                        </ol>
                        <h4>Usage</h4>
                        <pre class="javascript code"><code>// Each of the following examples create a canvas that is 320px wide by 200px high
-// Canvas is created at the viewport's 10,50 coordinate
+// Canvas is created at the viewport’s 10,50 coordinate
 var paper = Raphael(10, 50, 320, 200);
-// Canvas is created at the top left corner of the #notepad element (or its top right corner in dir="rtl" elements)
+// Canvas is created at the top left corner of the #notepad element
+// (or its top right corner in dir="rtl" elements)
 var paper = Raphael(document.getElementById("notepad"), 320, 200);
 // Same as above
 var paper = Raphael("notepad", 320, 200);
 // Image dump
-var set = Raphael(["notepad", 320, 200, {type: "rect", x: 10, y: 10, width: 25, height: 25, stroke: "#f00"}, {type: "text", x: 30, y: 40, text: "Dump"}]);</code></pre>
+var set = Raphael(["notepad", 320, 200, {
+    type: "rect",
+    x: 10,
+    y: 10,
+    width: 25,
+    height: 25,
+    stroke: "#f00"
+}, {
+    type: "text",
+    x: 30,
+    y: 40,
+    text: "Dump"
+}]);</code></pre>
+                        <h3 id="circle">
+                            circle
+                        </h3>
+                        <div class="sample" id="circle-sample"></div>
+                        <p>
+                            Draws a circle.
+                        </p>
+                        <h4>Parameters</h4>
+                        <ol>
+                            <li>x <em>number</em> X coordinate of the centre</li>
+                            <li>y <em>number</em> Y coordinate of the centre</li>
+                            <li>r <em>number</em> radius</li>
+                        </ol>
+                        <h4>Usage</h4>
+                        <pre class="javascript code"><code>var c = paper.circle(50, 50, 40);</code></pre>
+                        <h3 id="rect">
+                            rect
+                        </h3>
+                        <div class="sample" id="rect-sample"></div>
+                        <p>
+                            Draws a rectangle.
+                        </p>
+                        <h4>Parameters</h4>
+                        <ol>
+                            <li>x <em>number</em> X coordinate of top left corner</li>
+                            <li>y <em>number</em> Y coordinate of top left corner</li>
+                            <li>width <em>number</em></li>
+                            <li>height <em>number</em></li>
+                            <li>r <em>number</em> [optional] radius for rounded corners, default is 0</li>
+                        </ol>
+                        <h4>Usage</h4>
+                        <pre class="javascript code"><code>// regular rectangle</code>
+<code>var c = paper.rect(10, 10, 50, 50);</code>
+<code>// rectangle with rounded corners</code>
+<code>var c = paper.rect(40, 40, 50, 50, 10);</code></pre>
+                        <h3 id="ellipse">
+                            ellipse
+                        </h3>
+                        <div class="sample" id="ellipse-sample"></div>
+                        <p>
+                            Draws an ellipse.
+                        </p>
+                        <h4>Parameters</h4>
+                        <ol>
+                            <li>x <em>number</em> X coordinate of the centre</li>
+                            <li>y <em>number</em> X coordinate of the centre</li>
+                            <li>rx <em>number</em> Horisontal radius</li>
+                            <li>ry <em>number</em> Vertical radius</li>
+                        </ol>
+                        <h4>Usage</h4>
+                        <pre class="javascript code"><code>var c = paper.ellipse(50, 50, 40, 20);</code></pre>
+                        <h3 id="image">
+                            image
+                        </h3>
+                        <div class="sample" id="image-sample"></div>
+                        <p>
+                            Embeds an image into the SVG/VML canvas.
+                        </p>
+                        <h4>Parameters</h4>
+                        <ol>
+                            <li>src <em>string</em> URI of the source image</li>
+                            <li>x <em>number</em> X coordinate position</li>
+                            <li>y <em>number</em> Y coordinate position</li>
+                            <li>width <em>number</em> Width of the image</li>
+                            <li>height <em>number</em> Height of the image</li>
+                        </ol>
+                        <h4>Usage</h4>
+                        <pre class="javascript code"><code>var c = paper.image("apple.png", 10, 10, 80, 80);</code></pre>
+                        <h3 id="set">
+                            set
+                        </h3>
+                        <div class="sample" id="set-sample"></div>
+                        <p>
+                            Creates array-like object to keep and operate couple of elements at once. Warning: it doesn’t create any elements for itself in the page.
+                        </p>
+                        <h4>Usage</h4>
+                        <pre class="javascript code"><code>var st = paper.set();</code>
+<code>st.push(
+    paper.circle(10, 10, 5),
+    paper.circle(30, 10, 5)
+);</code>
+<code>st.attr({fill: "red"});</code></pre>
+                        <h3 id="text">
+                            text
+                        </h3>
+                        <div class="sample" id="text-sample"></div>
+                        <p>
+                            Draws a text string. If you need line breaks, put “\n” in the string.
+                        </p>
+                        <h4>Parameters</h4>
+                        <ol>
+                            <li>x <em>number</em> X coordinate position.</li>
+                            <li>y <em>number</em> Y coordinate position.</li>
+                            <li>text <em>string</em> The text string to draw.</li>
+                        </ol>
+                        <h4>Usage</h4>
+                        <pre class="javascript code"><code>var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");</code></pre>
+                        <h3 id="path">
+                            path
+                        </h3>
+                        <div class="sample" id="path-sample"></div>
+                        <p>
+                            Creates a path element by given path data string.
+                        </p>
+                        <h4>Parameters</h4>
+                        <ol>
+                            <li>pathString <em>string</em> [optional] Path data in <a href="http://www.w3.org/TR/SVG/paths.html#PathData" title="Details of a path's data attribute's format are described in the SVG specification.">SVG path string format</a>.</li>
+                        </ol>
+                        <h4>Usage</h4>
+                        <pre class="javascript code"><code>var c = paper.path("M10 10L90 90");
+// draw a diagonal line:
+// move to 10,10, line to 90,90</code></pre>
                        <h2 id="Element">
                            Element’s generic methods
                        </h2>
@@ -77,8 +202,11 @@ var set = Raphael(["notepad", 320, 200, {type: "rect", x: 10, y: 10, width: 25, 
                            Gives you a reference to the DOM object, so you can assign event handlers or just mess around.
                        </p>
                        <h4>Usage</h4>
-                        <pre class="javascript code"><code>var c = paper.circle(10, 10, 10); // draw a circle at coordinate 10,10 with radius of 10
+                        <pre class="javascript code"><code>// draw a circle at coordinate 10,10 with radius of 10
-c.node.onclick = function () { c.attr("fill", "red"); };</code></pre>
+var c = paper.circle(10, 10, 10);
+c.node.onclick = function () {
+    c.attr("fill", "red");
+};</code></pre>
                        <h3 id="paper">
                            paper
                        </h3>
@@ -88,7 +216,8 @@ c.node.onclick = function () { c.attr("fill", "red"); };</code></pre>
                        <h4>Usage</h4>
                        <pre class="javascript code"><code>Raphael.el.cross = function () {
    this.attr({fill: "red"});
-    this.paper.path("M10,10L50,50M50,10L10,50").attr({stroke: "red"});
+    this.paper.path("M10,10L50,50M50,10L10,50")
+        .attr({stroke: "red"});
 }</code></pre>
                        <h3 id="remove">
                            remove
@@ -151,7 +280,8 @@ c.rotate(45, true);  // rotation is absolute</code></pre>
                        </ol>
                        <h4>Usage</h4>
                        <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
-c.translate(10, 10); // moves the circle down the canvas, in a diagonal line</code></pre>
+// moves the circle 10&nbsp;px to the right and down
+c.translate(10, 10);</code></pre>
                        <h3 id="scale">
                            scale
                        </h3>
@@ -167,8 +297,10 @@ c.translate(10, 10); // moves the circle down the canvas, in a diagonal line</co
                        </ol>
                        <h4>Usage</h4>
                        <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
-c.scale(1.5, 1.5); // makes the circle 1.5 times larger
+// makes the circle 1.5 times larger
-c.scale(.5, .75);  // makes the circle half as wide, and 75% as high</code></pre>
+c.scale(1.5, 1.5);
+// makes the circle half as wide, and 75% as high
+c.scale(.5, .75);</code></pre>
                        <h3 id="attr">
                            attr
                        </h3>
@@ -203,8 +335,8 @@ c.scale(.5, .75);  // makes the circle half as wide, and 75% as high</code></pre
                            <li id="attr-fill">
                                fill <em>colour</em> or <em>gradient</em>
                                <ul>
-                                    <li>linear gradient: “‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›”, example: <samp>"90-#fff-#000"</samp> – 90° gradient from white to black or <samp>"0-#fff-#f00:20-#000"</samp> – 0° gradient from white via red (at 20%) to black</li>
+                                    <li>linear gradient: “‹angle›-‹colour›[-‹colour›[:‹offset›]]*-‹colour›”, example: “<samp>90-#fff-#000</samp>” – 90° gradient from white to black or “<samp>0-#fff-#f00:20-#000</samp>” – 0° gradient from white via red (at 20%) to black</li>
-                                    <li>radial gradient: “r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›”, example: <samp>“r#fff-#000”</samp> – gradient from white to black or <samp>“r(0.25, 0.75)#fff-#000”</samp> – gradient from white to black with focus point at 0.25, 0.75</li>
+                                    <li>radial gradient: “r[(‹fx›, ‹fy›)]‹colour›[-‹colour›[:‹offset›]]*-‹colour›”, example: “<samp>r#fff-#000</samp>” – gradient from white to black or “<samp>r(0.25, 0.75)#fff-#000</samp>” – gradient from white to black with focus point at 0.25, 0.75</li>
                                    <li>Focus point coordinates are in 0..1 range</li>
                                    <li>Radial gradients can only be applied to circles and ellipses</li>
                                </ul>
@@ -224,9 +356,9 @@ c.scale(.5, .75);  // makes the circle half as wide, and 75% as high</code></pre
                            <li id="attr-scale">scale <em>string</em> comma or space separated values: xtimes, ytimes, cx, cy. See: <a href="#scale">scale</a></li>
                            <li id="attr-src">src <em>string</em> (URL)</li>
                            <li id="attr-stroke">stroke <em>colour</em></li>
-                            <li id="attr-stroke-dasharray">stroke-dasharray <em>string</em> [“”, “-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]</li>
+                            <li id="attr-stroke-dasharray">stroke-dasharray <em>string</em> [“”, “<samp>-</samp>”, “<samp>.</samp>”, “<samp>-.</samp>”, “<samp>-..</samp>”, “<samp>. </samp>”, “<samp>- </samp>”, “<samp>--</samp>”, “<samp>-&nbsp;.</samp>”, “<samp>--.</samp>”, “<samp>--..</samp>”]</li>
-                            <li id="attr-stroke-linecap">stroke-linecap <em>string</em> [“butt”, “square”, “round”]</li>
+                            <li id="attr-stroke-linecap">stroke-linecap <em>string</em> [“<samp>butt</samp>”, “<samp>square</samp>”, “<samp>round</samp>”]</li>
-                            <li id="attr-stroke-linejoin">stroke-linejoin <em>string</em> [“butt”, “square”, “round”, “miter”]</li>
+                            <li id="attr-stroke-linejoin">stroke-linejoin <em>string</em> [“<samp>bevel</samp>”, “<samp>round</samp>”, “<samp>miter</samp>”]</li>
                            <li id="attr-stroke-miterlimit">stroke-miterlimit <em>number</em></li>
                            <li id="attr-stroke-opacity">stroke-opacity <em>number</em></li>
                            <li id="attr-stroke-width">stroke-width <em>number</em></li>
@@ -237,9 +369,15 @@ c.scale(.5, .75);  // makes the circle half as wide, and 75% as high</code></pre
                        </ul>
                        <h4>Usage</h4>
                        <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);
-c.attr("fill", "black");                              // using strings
+// using strings
-c.attr({fill: "#000", stroke: "#f00", opacity: 0.5}); // using params object
+c.attr("fill", "black");
-c.attr({fill: "90-#fff-#000", "stroke-dasharray": "-..", "clip-rect": "10, 10, 100, 100"});</code></pre>
+// using params object
+c.attr({fill: "#000", stroke: "#f00", opacity: 0.5});
+c.attr({
+    fill: "90-#fff-#000",
+    "stroke-dasharray": "-..",
+    "clip-rect": "10, 10, 100, 100"
+});</code></pre>
                        <h3 id="animate">
                            animate
                        </h3>
@@ -256,7 +394,7 @@ c.attr({fill: "90-#fff-#000", "stroke-dasharray": "-..", "clip-rect": "10, 10, 1
                        <ol>
                            <li>newAttrs <em>object</em> A parameters object of the animation results. (Not all attributes can be animated.)</li>
                            <li>ms <em>number</em> The duration of the animation, given in milliseconds.</li>
-                            <li>easing <em>string</em> [“>”, “&lt;”, “&lt;&gt;”, “backIn”, “backOut”, “bounce”, “elastic”] or <em>function</em> [optional]</li>
+                            <li>easing <em>string</em> [“<samp>></samp>”, “<samp>&lt;</samp>”, “<samp>&lt;></samp>”, “<samp>backIn</samp>”, “<samp>backOut</samp>”, “<samp>bounce</samp>”, “<samp>elastic</samp>”] or <em>function</em> [optional]</li>
                            <li>callback <em>function</em> [optional]</li>
                        </ol>
                        <h4>Attributes that can be animated</h4>
@@ -308,6 +446,7 @@ r.animateWith(c, {x: 20}, 2000);</code></pre>
                        <h3 id="animateAlong">
                            animateAlong
                        </h3>
+                        <div class="sample" id="along-sample"></div>
                        <p>
                            Animates element along the given path. As an option it could rotate element along the path.
                        </p>
@@ -326,15 +465,34 @@ r.animateWith(c, {x: 20}, 2000);</code></pre>
            e.attr({rx: 4, ry: 4});
        });
    });</code></pre>
-                        <h3 id="toFront">
+                        <h3 id="animateAlongBack">
-                            toFront
+                            animateAlongBack
                        </h3>
                        <p>
-                            Moves the element so it is the closest to the viewer’s eyes, on top of other elements.
+                            Similar to <a href="animateAlong"><code>animateAlong</code></a>. Animates element along the given path, starting from the end of it.
+                        </p>
+                        <h3 id="onAnimation">
+                            onAnimation
+                        </h3>
+                        <div class="sample" id="onanim-sample"></div>
+                        <p>
+                            Sets or resets the function that will be called on each stage of the animation.
                        </p>
+                        <h4>Parameters</h4>
+                        <ol>
+                            <li>f <em>function</em> function that will be called on each stage of animation</li>
+                        </ol>
                        <h4>Usage</h4>
-                        <pre class="javascript code"><code>var c = paper.circle(10, 10, 10);</code>
+                        <pre class="javascript code"><code>var p = r.path("M10,50c0,50,80-50,80,0c0,50-80-50-80,0z"),
-<code>c.toFront();</code></pre>
+    p2 = r.path(),
+    e = r.ellipse(10, 50, 4, 4).attr({stroke: "none", fill: "#f00"}).onAnimation(function () {
+        p2.attr({path: "M50,10L" + e.attr("cx") + "," + e.attr("cy")});
+    }),
+    b = r.rect(0, 0, 620, 400).attr({stroke: "none", fill: "#000", opacity: 0}).click(function () {
+        e.attr({rx: 5, ry: 3}).animateAlong(p, 4000, true, function () {
+            e.attr({rx: 4, ry: 4});
+        });
+    });</code></pre>
                        <h3 id="getBBox">
                            getBBox
                        </h3>
@@ -419,6 +577,7 @@ var c = r.clone();</code></pre>
                        <h3 id="getPointAtLength">
                            getPointAtLength
                        </h3>
+                        <div class="sample" id="point-sample"></div>
                        <p>
                            Path specific method. Returns point description at given length.
                        </p>
@@ -427,7 +586,7 @@ var c = r.clone();</code></pre>
                            <li>length <em>number</em> length in pixels from the beginining of the path to the point</li>
                        </ol>
                        <h4>Usage</h4>
-                        <pre class="javascript code"><code>var p = r.path("M100,100c0,50 100-50 100,0c0,50 -100-50 -100,0z");
+                        <pre class="javascript code"><code>var p = r.path("M10,50c0,50,80-50,80,0c0,50-80-50-80,0z");
    var point = p.getPointAtLength(30);
    r.circle(point.x, point.y, 3);</code></pre>
                        <p>Returned object format:</p>
@@ -436,6 +595,22 @@ var c = r.clone();</code></pre>
                            <li>y – y coordinate of the point</li>
                            <li>alpha – angle of the path at the point</li>
                        </ul>
+                        <h3 id="getSubpath">
+                            getSubpath
+                        </h3>
+                        <div class="sample" id="subpath-sample"></div>
+                        <p>
+                            Path specific method. Returns the subpath string of a given path.
+                        </p>
+                        <h4>Parameters</h4>
+                        <ol>
+                            <li>from <em>number</em> length in pixels from the beginining of the path to the beginining of the subpath</li>
+                            <li>to <em>number</em> length in pixels from the beginining of the path to the end of the subpath</li>
+                        </ol>
+                        <h4>Usage</h4>
+                        <pre class="javascript code"><code>var p = r.path("M10,50c0,50,80-50,80,0c0,50-80-50-80,0z");
+    var path = p.getSubpath(10, 60);
+    r.path(path).attr({stroke: "#f00"});</code></pre>
                        <h3 id="setSize">
                            setSize
                        </h3>
@@ -533,114 +708,6 @@ var c = r.clone();</code></pre>
                        <pre class="javascript code"><code>var txt = r.print(10, 50, "print", r.getFont("Museo"), 30).attr({fill: "#fff"});
 // following line will paint first letter in red
 txt[0].attr({fill: "#f00"});</code></pre>
-                        <h3 id="circle">
-                            circle
-                        </h3>
-                        <div class="sample" id="circle-sample"></div>
-                        <p>
-                            Draws a circle.
-                        </p>
-                        <h4>Parameters</h4>
-                        <ol>
-                            <li>x <em>number</em> X coordinate of the centre</li>
-                            <li>y <em>number</em> Y coordinate of the centre</li>
-                            <li>r <em>number</em> radius</li>
-                        </ol>
-                        <h4>Usage</h4>
-                        <pre class="javascript code"><code>var c = paper.circle(50, 50, 40);</code></pre>
-                        <h3 id="rect">
-                            rect
-                        </h3>
-                        <div class="sample" id="rect-sample"></div>
-                        <p>
-                            Draws a rectangle.
-                        </p>
-                        <h4>Parameters</h4>
-                        <ol>
-                            <li>x <em>number</em> X coordinate of top left corner</li>
-                            <li>y <em>number</em> Y coordinate of top left corner</li>
-                            <li>width <em>number</em></li>
-                            <li>height <em>number</em></li>
-                            <li>r <em>number</em> [optional] radius for rounded corners, default is 0</li>
-                        </ol>
-                        <h4>Usage</h4>
-                        <pre class="javascript code"><code>// regular rectangle</code>
-<code>var c = paper.rect(10, 10, 50, 50);</code>
-<code>// rectangle with rounded corners</code>
-<code>var c = paper.rect(40, 40, 50, 50, 10);</code></pre>
-                        <h3 id="ellipse">
-                            ellipse
-                        </h3>
-                        <div class="sample" id="ellipse-sample"></div>
-                        <p>
-                            Draws an ellipse.
-                        </p>
-                        <h4>Parameters</h4>
-                        <ol>
-                            <li>x <em>number</em> X coordinate of the centre</li>
-                            <li>y <em>number</em> X coordinate of the centre</li>
-                            <li>rx <em>number</em> Horisontal radius</li>
-                            <li>ry <em>number</em> Vertical radius</li>
-                        </ol>
-                        <h4>Usage</h4>
-                        <pre class="javascript code"><code>var c = paper.ellipse(50, 50, 40, 20);</code></pre>
-                        <h3 id="image">
-                            image
-                        </h3>
-                        <div class="sample" id="image-sample"></div>
-                        <p>
-                            Embeds an image into the SVG/VML canvas.
-                        </p>
-                        <h4>Parameters</h4>
-                        <ol>
-                            <li>src <em>string</em> URI of the source image</li>
-                            <li>x <em>number</em> X coordinate position</li>
-                            <li>y <em>number</em> Y coordinate position</li>
-                            <li>width <em>number</em> Width of the image</li>
-                            <li>height <em>number</em> Height of the image</li>
-                        </ol>
-                        <h4>Usage</h4>
-                        <pre class="javascript code"><code>var c = paper.image("apple.png", 10, 10, 80, 80);</code></pre>
-                        <h3 id="set">
-                            set
-                        </h3>
-                        <div class="sample" id="set-sample"></div>
-                        <p>
-                            Creates array-like object to keep and operate couple of elements at once. Warning: it doesn’t create any elements for itself in the page.
-                        </p>
-                        <h4>Usage</h4>
-                        <pre class="javascript code"><code>var st = paper.set();</code>
-<code>st.push(paper.circle(10, 10, 5), paper.circle(30, 10, 5));</code>
-<code>st.attr({fill: "red"});</code></pre>
-                        <h3 id="text">
-                            text
-                        </h3>
-                        <div class="sample" id="text-sample"></div>
-                        <p>
-                            Draws a text string. If you need line breaks, put “\n” in the string.
-                        </p>
-                        <h4>Parameters</h4>
-                        <ol>
-                            <li>x <em>number</em> X coordinate position.</li>
-                            <li>y <em>number</em> Y coordinate position.</li>
-                            <li>text <em>string</em> The text string to draw.</li>
-                        </ol>
-                        <h4>Usage</h4>
-                        <pre class="javascript code"><code>var t = paper.text(50, 50, "Raphaël\nkicks\nbutt!");</code></pre>
-                        <h3 id="path">
-                            path
-                        </h3>
-                        <div class="sample" id="path-sample"></div>
-                        <p>
-                            Initialises path drawing. You can specify a path by supplying the path data as a second argument.
-                        </p>
-                        <h4>Parameters</h4>
-                        <ol>
-                            <li>pathString <em>string</em> [optional] Path data in <a href="http://www.w3.org/TR/SVG/paths.html#PathData" title="Details of a path's data attribute's format are described in the SVG specification.">SVG path string format</a>.</li>
-                        </ol>
-                        <h4>Usage</h4>
-                        <pre class="javascript code"><code>var c = paper.path("M10 10L90 90");
-// draw a diagonal line: move to 10,10, line to 90,90</code></pre>
                        <h3 id="plugins-canvas">
                            Adding your own methods to canvas
                        </h3>
@@ -649,7 +716,7 @@ txt[0].attr({fill: "#f00"});</code></pre>
                        </p>
                        <h4>Usage</h4>
                        <pre class="javascript code"><code>Raphael.fn.arrow = function (x1, y1, x2, y2, size) {
-    return this.path(// some code here);
+    return this.path( ... );
 };
 // or create namespace
 Raphael.fn.mystuff = {
@@ -683,18 +750,21 @@ paper.circle(100, 100, 20).red();
                            You could specify colour in this formats:
                        </p>
                        <ul>
-                            <li>Colour name (“red”, “green”, “cornflowerblue”, etc)</li>
+                            <li>Colour name (“<samp>red</samp>”, “<samp>green</samp>”, “<samp>cornflowerblue</samp>”, etc)</li>
-                            <li>#••• — shortened HTML colour: (“#000”, “#fc0”, etc)</li>
+                            <li>#••• — shortened HTML colour: (“<samp>#000</samp>”, “<samp>#fc0</samp>”, etc)</li>
-                            <li>#•••••• — full length HTML colour: (“#000000”, “#bd2300”)</li>
+                            <li>#•••••• — full length HTML colour: (“<samp>#000000</samp>”, “<samp>#bd2300</samp>”)</li>
-                            <li>rgb(•••, •••, •••) — red, green and blue channels’ values: (“rgb(200, 100, 0)”)</li>
+                            <li>rgb(•••, •••, •••) — red, green and blue channels’ values: (“<samp>rgb(200,&nbsp;100,&nbsp;0)</samp>”)</li>
-                            <li>rgb(•••%, •••%, •••%) — same as above, but in %: (“rgb(100%, 175%, 0%)”)</li>
+                            <li>rgb(•••%, •••%, •••%) — same as above, but in %: (“<samp>rgb(100%,&nbsp;175%,&nbsp;0%)</samp>”)</li>
-                            <li>hsb(•••, •••, •••) — hue, saturation and brightness values: (“hsb(0.5, 0.25, 1)”)</li>
+                            <li>hsb(•••, •••, •••) — hue, saturation and brightness values: (“<samp>hsb(0.5,&nbsp;0.25,&nbsp;1)</samp>”)</li>
                            <li>hsb(•••%, •••%, •••%) — same as above, but in %</li>
                            <li>hsl(•••, •••, •••) — same as hsb</li>
                            <li>hsl(•••%, •••%, •••%) — same as hsb</li>
                        </ul>
                        <h4>Usage</h4>
-                        <pre class="javascript code"><code>paper.circle(100, 100, 20).attr({fill: "hsb(1, 255, 200)", stroke: "red"});</code></pre>
+                        <pre class="javascript code"><code>paper.circle(100, 100, 20).attr({
+    fill: "hsb(1, 255, 200)",
+    stroke: "red"
+});</code></pre>
                        <h3 id="safari">
                            safari
                        </h3>
@@ -715,6 +785,42 @@ paper.circle(100, 100, 20).red();
    …
 })(Raphael.ninja());
 </code></pre>
+                        <h3 id="events">
+                            Events
+                        </h3>
+                        <p>
+                            You can attach events to elements by using element.node and your favourite library (<samp>$(circle.node).click(…)</samp>) or you can use built-in methods:
+                        </p>
+                        <h4>Usage</h4>
+                        <pre class="javascript code"><code>element.click(function (event) {
+    this.attr({fill: "red"});
+});
+element.dblclick(function (event) {
+    this.attr({fill: "red"});
+});
+element.mousedown(function (event) {
+    this.attr({fill: "red"});
+});
+element.mousemove(function (event) {
+    this.attr({fill: "red"});
+});
+element.mouseout(function (event) {
+    this.attr({fill: "red"});
+});
+element.mouseover(function (event) {
+    this.attr({fill: "red"});
+});
+element.mouseup(function (event) {
+    this.attr({fill: "red"});
+});
+element.hover(function (event) {
+    this.attr({fill: "red"});
+}, function (event) {
+    this.attr({fill: "black"});
+});</code></pre>
+                        <p>
+                            To unbind events use the same method names with “un” prefix, i.e. <samp>element.unclick(f);</samp>
+                        </p>
                    </div>
                    <div id="column-2">
                        <h2>
@@ -728,6 +834,27 @@ paper.circle(100, 100, 20).red();
                                <a href="#Raphael"><code>Raphael</code></a>
                            </li>
                            <li>
+                                <a href="#circle"><code>circle</code></a>
+                            </li>
+                            <li>
+                                <a href="#rect"><code>rect</code></a>
+                            </li>
+                            <li>
+                                <a href="#ellipse"><code>ellipse</code></a>
+                            </li>
+                            <li>
+                                <a href="#image"><code>image</code></a>
+                            </li>
+                            <li>
+                                <a href="#set"><code>set</code></a>
+                            </li>
+                            <li>
+                                <a href="#text"><code>text</code></a>
+                            </li>
+                            <li>
+                                <a href="#path"><code>path</code></a>
+                            </li>
+                            <li>
                                <a href="#node"><code>node</code></a>
                            </li>
                            <li>
@@ -764,6 +891,9 @@ paper.circle(100, 100, 20).red();
                                <a href="#animateAlong"><code>animateAlong</code></a>
                            </li>
                            <li>
+                                <a href="#animateAlongBack"><code>animateAlongBack</code></a>
+                            </li>
+                            <li>
                                <a href="#getBBox"><code>getBBox</code></a>
                            </li>
                            <li>
@@ -791,7 +921,7 @@ paper.circle(100, 100, 20).red();
                                <a href="#getPointAtLength"><code>getPointAtLength</code></a>
                            </li>
                            <li>
-                                <a href="#getSubpathsAtLength"><code>getSubpathsAtLength</code></a>
+                                <a href="#getSubpath"><code>getSubpath</code></a>
                            </li>
                            <li>
                                <a href="#setSize"><code>setSize</code></a>
@@ -818,27 +948,6 @@ paper.circle(100, 100, 20).red();
                                <a href="#print"><code>print</code></a>
                            </li>
                            <li>
-                                <a href="#circle"><code>circle</code></a>
-                            </li>
-                            <li>
-                                <a href="#rect"><code>rect</code></a>
-                            </li>
-                            <li>
-                                <a href="#ellipse"><code>ellipse</code></a>
-                            </li>
-                            <li>
-                                <a href="#image"><code>image</code></a>
-                            </li>
-                            <li>
-                                <a href="#set"><code>set</code></a>
-                            </li>
-                            <li>
-                                <a href="#text"><code>text</code></a>
-                            </li>
-                            <li>
-                                <a href="#path"><code>path</code></a>
-                            </li>
-                            <li>
                                <a href="#plugins-canvas">Adding your own methods to canvas</a>
                            </li>
                            <li>
@@ -853,6 +962,9 @@ paper.circle(100, 100, 20).red();
                            <li>
                                <a href="#ninja-mode">“Ninja Mode”</a>
                            </li>
+                            <li>
+                                <a href="#events">Events</a>
+                            </li>
                        </ul>
                    </div>
                    <div  id="footer">
@@ -877,4 +989,4 @@ paper.circle(100, 100, 20).red();
        pageTracker._trackPageview();
        </script>
    </body>
 </html>
\ No newline at end of file